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

add animation to quote display

Browse Source
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(); const todayDate = new Date();
jsyear.innerText = todayDate.getFullYear(); jsyear.innerText = todayDate.getFullYear();
const disp = document.querySelector(".display"); const disp = document.querySelector(".quote");
fetch("FavouriteQuotes.json") fetch("FavouriteQuotes.json")
.then((response) => { .then((response) => {
@ -11,5 +11,6 @@ fetch("FavouriteQuotes.json")
.then((data) => { .then((data) => {
numQuotes = Object.entries(data).length; numQuotes = Object.entries(data).length;
num = Math.floor(Math.random() * numQuotes); num = Math.floor(Math.random() * numQuotes);
disp.classList.add("anim");
disp.innerText = data[num].quote + "\n\n" + data[num].author.replace(/"/g, ''); disp.innerText = data[num].quote + "\n\n" + data[num].author.replace(/"/g, '');
}) })

7
index.html
View File

@ -3,15 +3,16 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
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>
<div class="display"></div> <div class="display">
<div class="quote"></div>
</div>
<footer class="footer"> <footer class="footer">
&copy;<span id="jsyear"></span> Camille Frantz (<a href="https://github.com/fyrfli" target="_blank">@fyrfli</a>). &copy;<span id="jsyear"></span> Camille Frantz (<a href="https://github.com/fyrfli" target="_blank">@fyrfli</a>).
</footer> </footer>

10
style.css
View File

@ -24,11 +24,11 @@
} }
.anim { .anim {
animation: fadeIn linear 4s; animation: fadeIn linear 2s;
-webkit-animation: fadeIn linear 4s; -webkit-animation: fadeIn linear 2s;
-moz-animation: fadeIn linear 4s; -moz-animation: fadeIn linear 2s;
-o-animation: fadeIn linear 4s; -o-animation: fadeIn linear 2s;
-ms-animation: fadeIn linear 4s -ms-animation: fadeIn linear 2s
} }