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

Merge branch 'master' of https://github.com/fyrfli/quotes

Browse Source
This commit is contained in:
Camille Frantz 2022-05-18 10:45:12 -05:00
commit 3217ccaf4f
3 changed files with 11 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -4,6 +4,8 @@ I wanted to create an "app" that would read in JSON and print out the results ra
## Next steps ... ## Next steps ...
I want to add more quotes and a button to run the code instead of having the user reload the page I want to add more quotes and a button to run the code instead of having the user reload the page.
-- 18 May, 2022; 00:13:59 Or at least create a timer loop to do the refreshing of the quotes automatically.
-- 18 May, 2022 - 10:42:14

36
app.js
View File

@ -3,41 +3,13 @@ const todayDate = new Date();
jsyear.innerText = todayDate.getFullYear(); jsyear.innerText = todayDate.getFullYear();
const disp = document.querySelector(".display"); const disp = document.querySelector(".display");
const numIterations = 20;
let ctr = 0;
fetch("FavouriteQuotes.json") fetch("FavouriteQuotes.json")
.then((response) => { .then((response) => {
return response.json(); return response.json();
}) })
.then((data) => { .then((data) => {
// quotes = data; numQuotes = Object.entries(data).length;
doTheLoop(data); num = Math.floor(Math.random() * numQuotes);
}) disp.innerText = data[num].quote + "\n\n" + data[num].author.replace(/"/g, '');
})
// doTheLoop(quotes);
function doTheLoop(quotes) {
console.log("Entering doTheLoop");
numQuotes = Object.entries(quotes).length;
console.log(numQuotes);
getQuote(quotes, numQuotes);
timerID = setInterval(getQuote, 6000, quotes, numQuotes);
console.log("Timer ID: " + timerID);
setTimeout(() => {
console.log("Stopping");
clearInterval(timerID);
console.log("Stopped");
30000
});
}
function getQuote(quotes, numQuotes) {
console.log("Entering getQuote");
num = Math.floor(Math.random() * numQuotes);
disp.classList.remove(".hidden");
disp.classList.add(".anim");
disp.innerText = quotes[num].quote + "\n\n" + quotes[num].author.replace(/"/g, '');
disp.classList.remove(".anim");
// disp.classList.add(".hidden");
}

9
index.html
View File

@ -11,13 +11,10 @@
</head> </head>
<body> <body>
<div class="display hidden"></div> <div class="display"></div>
<div class="instructions"> <footer class="footer">
<p>{{ Hit Reload to see a new quote }}</p>
</div>
<div 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>).
</div> </footer>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>