fyrfli/jsquotes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

added iteration but not sure it's working

Browse Source
This commit is contained in:
Camille Frantz 2022-05-28 01:07:20 -05:00
parent 636927c072
commit 491d44672c
2 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app.js
View File

@ -1,8 +1,13 @@
'use strict';
// Full year for footer // Full year for footer
const todayDate = new Date(); const todayDate = new Date();
jsyear.innerText = todayDate.getFullYear(); jsyear.innerText = todayDate.getFullYear();
const disp = document.querySelector(".quote"); const disp = document.querySelector(".quote");
let numQuotes;
let randomNum;
let intervalID;
let iteratorID = 0;
fetch("FavouriteQuotes.json") fetch("FavouriteQuotes.json")
.then((response) => { .then((response) => {
@ -10,7 +15,23 @@ fetch("FavouriteQuotes.json")
}) })
.then((data) => { .then((data) => {
numQuotes = Object.entries(data).length; numQuotes = Object.entries(data).length;
num = Math.floor(Math.random() * numQuotes); randomNum = Math.floor(Math.random() * numQuotes);
disp.classList.add("anim"); disp.classList.add("anim");
disp.innerText = data[num].quote + "\n\n" + data[num].author.replace(/"/g, ''); disp.innerText = data[randomNum].quote + "\n\n" + data[randomNum].author.replace(/"/g, '');
}) disp.classList.remove("anim");
intervalID = setInterval(() => {
if(iteratorID < numQuotes) {
randomNum = Math.floor(Math.random() * numQuotes);
disp.classList.add("anim");
disp.innerText = data[randomNum].quote + "\n\n" + data[randomNum].author.replace(/"/g, '');
disp.classList.remove("anim");
iteratorID++;
}
}, 6000);
clearInterval(intervalID);
//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, '');
});

6
style.css
View File

@ -13,8 +13,8 @@
.display { .display {
width: 80vw; width: 80vw;
max-width: 500px; max-width: 500px;
height: 240px; /*height: 240px;*/
margin: 12rem auto; margin: 6rem auto;
background: linear-gradient(to bottom right, #0c024d, #0dbcc5); background: linear-gradient(to bottom right, #0c024d, #0dbcc5);
background-attachment: fixed; background-attachment: fixed;
color: white; color: white;
@ -28,7 +28,7 @@
-webkit-animation: fadeIn linear 2s; -webkit-animation: fadeIn linear 2s;
-moz-animation: fadeIn linear 2s; -moz-animation: fadeIn linear 2s;
-o-animation: fadeIn linear 2s; -o-animation: fadeIn linear 2s;
-ms-animation: fadeIn linear 2s -ms-animation: fadeIn linear 2s;
} }