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

add animation to quote display

This commit is contained in:
Camille Frantz 2022-05-28 00:11:21 -05:00
parent 6a46a20623
commit 636927c072
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app.js
View File

@ -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, '');
})

7
index.html
View File

@ -3,15 +3,16 @@
<head>
<meta charset="utf-8">
<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>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="display"></div>
<div class="display">
<div class="quote"></div>
</div>
<footer class="footer">
&copy;<span id="jsyear"></span> Camille Frantz (<a href="https://github.com/fyrfli" target="_blank">@fyrfli</a>).
</footer>

10
style.css
View File

@ -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
}