added support for customising all content via JSON

rohit56-Igtm · Aug 5, 2021 · c763dc8 · c763dc8
1 parent 918498d
commit c763dc8
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 50 deletions.
diff --git a/customize.json b/customize.json
@@ -1,6 +1,23 @@
 {
+  "greeting": "Hiya",
   "name": "Lydia",
   "greetingText": "I really like your name btw!",
   "wishText": "May the js.prototypes always be with you! ;)",
-  "imagePath": "img/lydia2.png"
+  "imagePath": "img/lydia2.png",
+  "text1": "It's your birthday!!! :D",
+  "textInChatBox": "Happy birthday to you!! Yeee! Many many happy blah...",
+  "sendButtonLabel": "Send",
+  "text2": "That's what I was going to do.",
+  "text3": "But then I stopped.",
+  "text4": "I realised, I wanted to do something",
+  "text4Adjective": "special",
+  "text5Entry": "Because,",
+  "text5Content": "You are Special",
+  "smiley": ":)",
+  "bigTextPart1": "S",
+  "bigTextPart2": "O",
+  "wishHeading": "Happy Birthday!",
+  "outroText": "Okay, now come back and tell me if you liked it.",
+  "replayText": "Or click, if you want to watch it again.",
+  "outroSmiley": ":)"
 }
diff --git a/index.html b/index.html
@@ -14,40 +14,43 @@
 <body>
   <div class="container">
     <div class="one">
-      <h1 class="one">Hey
-        <span id="name">Lydia</span>
+      <h1 class="one">
+        <span data-node-name="greeting">Hey</span>
+        <span data-node-name="name">Lydia</span>
       </h1>
-      <p class="two" id="greetingText">I really like your name btw!</p>
+      <p class="two" data-node-name="greetingText">I really like your name btw!</p>
     </div>
     <div class="three">
-      <p>It's your birthday!!! :D</p>
+      <p data-node-name="text1">It's your birthday!!! :D</p>
     </div>
     <div class="four">
       <div class="text-box">
-        <p class="hbd-chatbox">Happy birthday to you!! Yeee! Many many happy blah...</p>
-        <p class="fake-btn">Send</p>
+        <p class="hbd-chatbox" data-node-name="textInChatBox">Happy birthday to you!! Yeee! Many many happy blah...</p>
+        <p class="fake-btn" data-node-name="sendButtonLabel">Send</p>
       </div>
     </div>
     <div class="five">
-      <p class="idea-1">That's what I was going to do.</p>
-      <p class="idea-2">But then I stopped.</p>
-      <p class="idea-3">I realised, I wanted to do something
-        <strong>special</strong>.</p>
-      <p class="idea-4">Because,</p>
-      <p class="idea-5">You are Special
-        <span>:)</span>
+      <p class="idea-1" data-node-name="text2">That's what I was going to do.</p>
+      <p class="idea-2" data-node-name="text3">But then I stopped.</p>
+      <p class="idea-3">
+        <span data-node-name="text4">I realised, I wanted to do something</span>
+        <strong data-node-name="text4Adjective">special</strong>.</p>
+      <p class="idea-4" data-node-name="text5Entry">Because,</p>
+      <p class="idea-5">
+        <span data-node-name="text5Content">You are Special</span>
+        <span class="smiley" data-node-name="smiley">:)</span>
       </p>
       <p class="idea-6">
-        <span>S</span>
-        <span>O</span>
+        <span data-node-name="bigTextPart1">S</span>
+        <span data-node-name="bigTextPart2">O</span>
       </p>
     </div>
     <div class="six">
-      <img src="img/lydia2.png" alt="" class="lydia-dp" id="imagePath">
+      <img src="img/lydia2.png" alt="" class="lydia-dp" data-node-name="imagePath">
       <img src="img/hat.svg" alt="" class="hat">
       <div class="wish">
-        <h3 class="wish-hbd">Happy Birthday!</h3>
-        <h5 id="wishText">May the js.prototypes always be with you! ;)</h5>
+        <h3 class="wish-hbd" data-node-name="wishHeading">Happy Birthday!</h3>
+        <h5 data-node-name="wishText">May the js.prototypes always be with you! ;)</h5>
       </div>
     </div>
     <div class="seven">
@@ -117,9 +120,9 @@ <h5 id="wishText">May the js.prototypes always be with you! ;)</h5>
       </svg>
     </div>
     <div class="nine">
-      <p>Okay, now come back and tell me if you liked it.</p>
-      <p id="replay">Or click, if you want to watch it again.</p>
-      <p class="last-smile">:)</p>
+      <p data-node-name="outroText">Okay, now come back and tell me if you liked it.</p>
+      <p id="replay" data-node-name="replayText">Or click, if you want to watch it again.</p>
+      <p class="last-smile" data-node-name="outroSmiley">:)</p>
     </div>
   </div>
 </body>

diff --git a/script/main.js b/script/main.js
@@ -1,3 +1,29 @@
+// Import the data to customize and insert them into page
+const fetchData = () => {
+  fetch("customize.json")
+    .then(data => data.json())
+    .then(data => {
+      dataArr = Object.keys(data);
+      dataArr.map(customData => {
+        if (data[customData] !== "") {
+          if (customData === "imagePath") {
+            document
+              .querySelector(`[data-node-name*="${customData}"]`)
+              .setAttribute("src", data[customData]);
+          } else {
+            document.querySelector(`[data-node-name*="${customData}"]`).innerText = data[customData];
+          }
+        }
+
+        // Check if the iteration is over
+        // Run amimation if so
+        if ( dataArr.length === dataArr.indexOf(customData) + 1 ) {
+          animationTimeline();
+        } 
+      });
+    });
+};
+
 // Animation Timeline
 const animationTimeline = () => {
   // Spit chars that needs to be animated individually
@@ -129,7 +155,7 @@ const animationTimeline = () => {
       "+=0.5"
     )
     .to(
-      ".idea-5 span",
+      ".idea-5 .smiley",
       0.7,
       {
         rotation: 90,
@@ -276,31 +302,5 @@ const animationTimeline = () => {
   });
 };
 
-// Import the data to customize and insert them into page
-const fetchData = () => {
-  fetch("customize.json")
-    .then(data => data.json())
-    .then(data => {
-      Object.keys(data).map(customData => {
-        if (data[customData] !== "") {
-          if (customData === "imagePath") {
-            document
-              .getElementById(customData)
-              .setAttribute("src", data[customData]);
-          } else {
-            document.getElementById(customData).innerText = data[customData];
-          }
-        }
-      });
-    });
-};
-
 // Run fetch and animation in sequence
-const resolveFetch = () => {
-  return new Promise((resolve, reject) => {
-    fetchData();
-    resolve("Fetch done!");
-  });
-};
-
-resolveFetch().then(animationTimeline());
+fetchData();