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

34
app.js
View File

@ -3,35 +3,31 @@
const todayDate = new Date(); const todayDate = new Date();
jsyear.innerText = todayDate.getFullYear(); jsyear.innerText = todayDate.getFullYear();
const disp = document.querySelector(".quote"); const quoteDisplay = document.querySelector(".quote");
let numQuotes; let numQuotes;
let randomNum; let randomNum;
let intervalID; let intervalID;
let iteratorID = 0; let iteratorID = 0;
let currQuote;
fetch("FavouriteQuotes.json") fetch("FavouriteQuotes.json")
.then((response) => { .then((response) => {
return response.json(); return response.json();
}) })
.then((data) => { .then((data) => {
numQuotes = Object.entries(data).length; currQuote = getQuote(data);
randomNum = Math.floor(Math.random() * numQuotes); for (let i = 0; i < 25; i++) {
disp.classList.add("anim"); quoteDisplay.innerText = currQuote;
disp.innerText = data[randomNum].quote + "\n\n" + data[randomNum].author.replace(/"/g, '');
disp.classList.remove("anim");
intervalID = setInterval(() => { intervalID = setInterval(() => {
if(iteratorID < numQuotes) { currQuote = getQuote(data);
randomNum = Math.floor(Math.random() * numQuotes); quoteDisplay.innerText = currQuote;
disp.classList.add("anim"); }, 8000);
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, '');
}); });
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" /> <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> <title>read quote</title>
<link rel="stylesheet" href="style.css"> <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> </head>
<body> <body>

59
style.css
View File

@ -23,65 +23,6 @@
border-radius: 12px; 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 { .instructions {
display: none; display: none;
margin-top: 2rem; margin-top: 2rem;