Ui updates main page

Novus-Neurons · Oct 15, 2023 · 7fb642f · 7fb642f
1 parent d10021c
commit 7fb642f
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 4 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/talebuddy/allStories.json b/talebuddy/allStories.json
@@ -1,8 +1,8 @@
 {
-    "total_number_of_stories":2,
+    "total_number_of_stories":3,
     "story_paths":[
-        "talebuddy/stories/HARRY_POTTER.json"
-        "talebuddy/stories/The_Gulliver's_Travels.json"
-
+        "/stories/HARRY_POTTER.json",
+        "/stories/The_Gulliver's_Travels.json",
+        "/stories/A_KING.json"
     ]
 }
diff --git a/talebuddy/components/card.html b/talebuddy/components/card.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../index.css">
+</head>
+<body>
+    <div class="card">
+        <h3>
+            {{Cardtitle}}
+        </h3>
+        <p>
+            {{CardDescription}}
+        </p>
+    </div>
+</body>
+</html>
diff --git a/talebuddy/index.css b/talebuddy/index.css
@@ -73,6 +73,44 @@ nav .githubIcon {
 }
 
 
+#Allcards {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: start;
+    justify-content: start;
+    gap: 1em;
+    margin-top: max(50px, 3%);
+    width: min(95vw, 1600px);
+    margin-inline: auto;
+}
+
+.card:hover {
+    box-shadow: 6px 0.55px 18px -3px rgba(101, 101, 101, 0.608);
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    width: min(80vw, 45%);
+    max-width: fit-content;
+    min-width: min(85%, 350px);
+    margin-inline: auto;
+    padding: 2em;
+    border-radius: 12px;
+    border: 1px solid rgba(34, 34, 34, 0.25);
+    background: #FFF;
+    gap: 1em;
+    transition: 0.5s;
+    cursor: pointer;
+}
+
+.card p {
+    width: 95%;
+    margin: auto;
+    opacity: 0.6;
+}
+
+
 @media only screen and (max-width : 520px) {
 
     nav .search-container {

diff --git a/talebuddy/index.html b/talebuddy/index.html
@@ -12,6 +12,7 @@
 
     <div id="main">
         <div id="navbar"></div>
+        <div id="Allcards"></div>
     </div>
 
 </body>

diff --git a/talebuddy/index.js b/talebuddy/index.js
@@ -6,4 +6,52 @@ document.addEventListener("DOMContentLoaded", function () {
         .then(navbarHtml => {
             document.getElementById("navbar").innerHTML = navbarHtml;
         });
+
+
+    // fetchAllCards
+    async function fetchAllcards() {
+        await fetch("./allStories.json")
+            .then(responce => responce.json())
+            .then(data => {
+                // console.log(data.chapter_data_paths)
+                for (let i = 0; i < data.story_paths.length; i++) {
+                    console.log("card path : ", data.story_paths[i])
+                    rendercard(`.${data.story_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/card.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.title)
+                    .replace(/{{CardDescription}}/g, carddata.about_story);
+
+                cardsContainer.innerHTML += FinalCardComponent
+
+            })
+    }
+
+    fetchAllcards()
+
 });
diff --git a/talebuddy/stories/A_KING.json b/talebuddy/stories/A_KING.json
@@ -1,5 +1,6 @@
 {
     "title": "A king",
+    "about_story" : "A lion who is king, really !!",
     "number_of_pages": 1,
     "pages": [
         {

diff --git a/talebuddy/stories/HARRY_POTTER.json b/talebuddy/stories/HARRY_POTTER.json
@@ -1,5 +1,6 @@
 {
     "title": "Harry Potter Introduction",
+    "about_story" : "harry was potter who used to make posts with his stick and had a slang Jo koi nahi bol sakta",
     "number_of_pages": 1,
     "pages": [
         {

diff --git a/talebuddy/stories/SAMPLE_STRUCTURE.json b/talebuddy/stories/SAMPLE_STRUCTURE.json
@@ -1,5 +1,6 @@
 {
     "title": "story title",
+    "about_story": "about the story",
     "number_of_pages": "<number>",
     "pages": [
         {

diff --git a/talebuddy/stories/The_Gulliver's_Travels.json b/talebuddy/stories/The_Gulliver's_Travels.json
@@ -1,5 +1,6 @@
 {
     "title": "Gulliver's Travels",
+    "about_story" : "Gulliver's Travels is a satirical novel written by Jonathan Swift, first published in 1726. The book is a classic of English literature and is known",
     "number_of_pages": "383",
     "pages": [
         {