diff --git a/app.js b/app.js index 1928552..19d7716 100644 --- a/app.js +++ b/app.js @@ -3,13 +3,41 @@ const todayDate = new Date(); jsyear.innerText = todayDate.getFullYear(); const disp = document.querySelector(".display"); +const numIterations = 20; +let ctr = 0; fetch("FavouriteQuotes.json") .then((response) => { return response.json(); }) .then((data) => { - numQuotes = Object.entries(data).length; - num = Math.floor(Math.random() * numQuotes); - disp.innerText = data[num].quote + "\n\n" + data[num].author.replace(/"/g, ''); + // quotes = data; + doTheLoop(data); }) + +// doTheLoop(quotes); + +function doTheLoop(quotes) { + console.log("Entering doTheLoop"); + numQuotes = Object.entries(quotes).length; + console.log(numQuotes); + getQuote(quotes, numQuotes); + timerID = setInterval(getQuote, 6000, quotes, numQuotes); + console.log("Timer ID: " + timerID); + setTimeout(() => { + console.log("Stopping"); + clearInterval(timerID); + console.log("Stopped"); + 30000 + }); +} + +function getQuote(quotes, numQuotes) { + console.log("Entering getQuote"); + num = Math.floor(Math.random() * numQuotes); + disp.classList.remove(".hidden"); + disp.classList.add(".anim"); + disp.innerText = quotes[num].quote + "\n\n" + quotes[num].author.replace(/"/g, ''); + disp.classList.remove(".anim"); + // disp.classList.add(".hidden"); +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..1e0715e Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index 5999631..4b38401 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,11 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> read quote + -
+

{{ Hit Reload to see a new quote }}

diff --git a/style.css b/style.css index cb1e295..e2e2af1 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,4 @@ body { - width: 80vw; - max-width: 500px; margin: auto; padding-top: 4rem; background-color: beige; @@ -8,7 +6,14 @@ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } + .hidden { + display: none; + } + .display { + width: 80vw; + max-width: 500px; + margin-top: 12rem; background: linear-gradient(to bottom right, #0c024d, #0dbcc5); background-attachment: fixed; color: white; @@ -17,7 +22,67 @@ border-radius: 12px; } + .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 + } + + + @keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + + @-moz-keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + + @-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + + @-o-keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + + @-ms-keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + .instructions { + display: none; margin-top: 2rem; text-align: center; border-bottom: 1px dotted #0c024d; @@ -26,9 +91,12 @@ } .footer { + display: block; + position: relative; + top: 30rem; text-align: center; font-size: 0.8rem; - margin-top: 2rem; + margin: 2rem auto; } .footer a:any-link {