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

fix the iteration and removed the animation

Browse Source
This commit is contained in:
Camille Frantz 2022-05-28 09:03:27 -05:00
parent 491d44672c
commit 2445cd9bbe
3 changed files with 19 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app.js
View File

@ -3,35 +3,31 @@
const todayDate = new Date();
jsyear.innerText = todayDate.getFullYear();
const disp = document.querySelector(".quote");
const quoteDisplay = document.querySelector(".quote");
let numQuotes;
let randomNum;
let intervalID;
let iteratorID = 0;
let currQuote;
fetch("FavouriteQuotes.json")
.then((response) => {
return response.json();
})
.then((data) => {
numQuotes = Object.entries(data).length;
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");
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, '');
});
currQuote = getQuote(data);
for (let i = 0; i < 25; i++) {
quoteDisplay.innerText = currQuote;
intervalID = setInterval(() => {
currQuote = getQuote(data);
quoteDisplay.innerText = currQuote;
}, 8000);
}
});
function getQuote(data) {
let noQuotes = Object.entries(data).length;
let randNo = Math.floor(Math.random() * noQuotes);
return data[randNo].quote + "\n\n" + data[randNo].author.replace(/"/g, '');
}

2
index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>read quote</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>

59
style.css
View File

@ -23,65 +23,6 @@
border-radius: 12px;
}
.anim {
animation: fadeIn linear 2s;
-webkit-animation: fadeIn linear 2s;
-moz-animation: fadeIn linear 2s;
-o-animation: fadeIn linear 2s;
-ms-animation: fadeIn linear 2s;
}
@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;