diff --git a/customize.json b/customize.json index fdb7111bb..9c2406fcd 100644 --- 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 index 0b8c739df..bb937ef86 100644 --- a/index.html +++ b/index.html @@ -14,40 +14,43 @@
-

Hey - Lydia +

+ Hey + Lydia

-

I really like your name btw!

+

I really like your name btw!

-

It's your birthday!!! :D

+

It's your birthday!!! :D

-

Happy birthday to you!! Yeee! Many many happy blah...

-

Send

+

Happy birthday to you!! Yeee! Many many happy blah...

+

Send

-

That's what I was going to do.

-

But then I stopped.

-

I realised, I wanted to do something - special.

-

Because,

-

You are Special - :) +

That's what I was going to do.

+

But then I stopped.

+

+ I realised, I wanted to do something + special.

+

Because,

+

+ You are Special + :)

- S - O + S + O

- +
-

Happy Birthday!

-
May the js.prototypes always be with you! ;)
+

Happy Birthday!

+
May the js.prototypes always be with you! ;)
@@ -117,9 +120,9 @@
May the js.prototypes always be with you! ;)
-

Okay, now come back and tell me if you liked it.

-

Or click, if you want to watch it again.

-

:)

+

Okay, now come back and tell me if you liked it.

+

Or click, if you want to watch it again.

+

:)

diff --git a/script/main.js b/script/main.js index fd55b131a..57d5e4653 100644 --- 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(); \ No newline at end of file