Ui updates main page

Novus-Neurons · Oct 15, 2023 · 85beb75 · 85beb75
1 parent 843564e
commit 85beb75
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 63 deletions.
diff --git a/codepal/components/component.html → codepal/components/Maincard.html b/codepal/components/component.html → codepal/components/Maincard.html
@@ -7,6 +7,13 @@
     <link rel="stylesheet" href="../index.css">
 </head>
 <body>
-    <div class="box"></div>
+    <div class="MainPagecard">
+        <h3>
+            {{Cardtitle}}
+        </h3>
+        <p>
+            {{CardDescription}}
+        </p>
+    </div>
 </body>
 </html>
diff --git a/codepal/index.css b/codepal/index.css
@@ -72,33 +72,48 @@ nav .githubIcon {
     height: 75%;
 }
 
+#Allcards {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: start;
+    justify-content: start;
+    gap: 1em;
+    margin-top: max(50px, 3%);
+    width: min(95vw, 1000px);
+    margin-inline: auto;
+}
+
+.MainPagecard:hover {
+    box-shadow: 6px 0.55px 18px -3px rgba(101, 101, 101, 0.608);
+}
+
+.MainPagecard {
+    display: flex;
+    flex-direction: column;
+    width: min(80vw, 300px);
+    padding: 2em;
+    border-radius: 12px;
+    border: 1px solid rgba(34, 34, 34, 0.25);
+    background: #FFF;
+    gap: 1em;
+    transition: 0.5s;
+    cursor: pointer;
+}
+
+.MainPagecard p {
+    width: 75%;
+    margin: auto;
+    opacity: 0.6;
+}
 
 @media only screen and (max-width : 520px) {
 
     nav .search-container {
         display: none;
     }
 
-}
+    #Allcards {
+        justify-content: center;
+    }
 
-.box{
-    display: flex;
-    margin: auto auto;
-    width: 94%;
-    height: auto;
-    background: transparent;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-.box .tutorial{
-    margin: 1em 1em;
-    padding: 2rem;
-    height: 15rem;
-    width: 20rem;
-    background-color: rgb(249, 220, 183);
-    border-radius: 3rem;
-}
-.box .tutorial h2{
-    padding-bottom: 1.5rem;
-    font-size: 1.4rem;
 }
diff --git a/codepal/index.html b/codepal/index.html
@@ -12,7 +12,7 @@
 
     <div id="main">
         <div id="navbar"></div>
-        <div id="component"></div>
+        <div id="Allcards"></div>
     </div>
 
 </body>

diff --git a/codepal/index.js b/codepal/index.js
@@ -5,47 +5,53 @@ document.addEventListener("DOMContentLoaded", function () {
         .then(navbarHtml => {
             document.getElementById("navbar").innerHTML = navbarHtml;
         });
-    //render components
-    fetch("./components/component.html")
-        .then(response => response.text())
-        .then(componentHtml => {
-            document.getElementById("component").innerHTML = componentHtml;
-        });
-    // Template to add course change the JSON file name
-    fetch('./chapter-data/STRUCTURE_SAMPLE.json')
-    .then(response => response.json())
-    .then(data => {
-        const main = document.querySelector('.box');
-        const tutorial = document.createElement('div');
-        tutorial.classList.add('tutorial');
-
-        tutorial.innerHTML = `<h2>${data.chapter_name}</h2><p>${data.chapter_description}</p>`;
-
-        main.appendChild(tutorial);
-    });
-    fetch('./chapter-data/DATA_STRUCTURES_WITH_CPP.json')
-        .then(response => response.json())
-        .then(data => {
-            const main = document.querySelector('.box');
-            const tutorial = document.createElement('div');
-            tutorial.classList.add('tutorial');
-
-            tutorial.innerHTML = `<h2>${data.chapter_name}</h2><p>${data.chapter_description}</p>`;
-
-            main.appendChild(tutorial);
-        });
-        fetch('./chapter-data/ALL_ABOUT_JAVASCRIPT.json')
-        .then(response => response.json())
-        .then(data => {
-            const main = document.querySelector('.box');
-            const tutorial = document.createElement('div');
-            tutorial.classList.add('tutorial');
 
-            tutorial.innerHTML = `<h2>${data.chapter_name}</h2><p>${data.chapter_description}</p>`;
 
-            main.appendChild(tutorial);
-        });
-
+    // fetchAllCards
+    async function fetchAllcards() {
+        await fetch("./Chapters.json")
+            .then(responce => responce.json())
+            .then(data => {
+                // console.log(data.chapter_data_paths)
+                for (let i = 0; i < data.chapter_data_paths.length; i++) {
+                    console.log("card path : ", data.chapter_data_paths[i])
+                    rendercard(`.${data.chapter_data_paths[i]}`)
+                }
+                // let allchapter = JSON.parse(data)
+            })
+    }
+
+    //render Cards
+    async function rendercard(path) {
+
+        // console.log(path)
+        let carddata;
+        await fetch(path)
+            .then(response => response.json())
+            .then(cardData => {
+                console.log("cardData : ", cardData)
+                carddata = cardData
+
+            });
+
+        await fetch("./components/Maincard.html")
+            .then(responce => responce.text())
+            .then((componentHTML) => {
+                const cardsContainer = document.getElementById("Allcards")
+
+                // const type = typeof componentHTML 
+                // console.log(type) // string
+
+                const FinalCardComponent = componentHTML
+                    .replace(/{{Cardtitle}}/g, carddata.chapter_name)
+                    .replace(/{{CardDescription}}/g, carddata.chapter_description);
+
+                cardsContainer.innerHTML += FinalCardComponent
+
+            })
+    }
+
+    fetchAllcards()
+
 
-
 });