From 636927c072fe707ba3069564159d7c8f69412431 Mon Sep 17 00:00:00 2001 From: Camille Frantz Date: Sat, 28 May 2022 00:11:21 -0500 Subject: [PATCH] add animation to quote display --- app.js | 3 ++- index.html | 7 ++++--- style.css | 10 +++++----- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/app.js b/app.js index 54c84ab..da6489a 100644 --- a/app.js +++ b/app.js @@ -2,7 +2,7 @@ const todayDate = new Date(); jsyear.innerText = todayDate.getFullYear(); -const disp = document.querySelector(".display"); +const disp = document.querySelector(".quote"); fetch("FavouriteQuotes.json") .then((response) => { @@ -11,5 +11,6 @@ fetch("FavouriteQuotes.json") .then((data) => { numQuotes = Object.entries(data).length; num = Math.floor(Math.random() * numQuotes); + disp.classList.add("anim"); disp.innerText = data[num].quote + "\n\n" + data[num].author.replace(/"/g, ''); }) \ No newline at end of file diff --git a/index.html b/index.html index 58febf1..46fda7d 100644 --- a/index.html +++ b/index.html @@ -3,15 +3,16 @@ - + read quote -
+
+
+
diff --git a/style.css b/style.css index 8a76e01..2c6eefb 100644 --- a/style.css +++ b/style.css @@ -24,11 +24,11 @@ } .anim { - animation: fadeIn linear 4s; - -webkit-animation: fadeIn linear 4s; - -moz-animation: fadeIn linear 4s; - -o-animation: fadeIn linear 4s; - -ms-animation: fadeIn linear 4s + animation: fadeIn linear 2s; + -webkit-animation: fadeIn linear 2s; + -moz-animation: fadeIn linear 2s; + -o-animation: fadeIn linear 2s; + -ms-animation: fadeIn linear 2s }