I’m building a web page and want to include a “quote of the day” which will change each day based on the day of the month. I’d like it to pull data from an external file (perhaps a simple text file) that I can upload to the server each month rather than having to re-edit the web page each month.
Example:
https://ancient-paper-5469.bss.design/
HTML:
<div id="quote-day" class="col-md-12">
<h3 id="quote"></h3>
<h6 id="author"></h6>
</div>
JS:
async function getQuote() {
let url = './assets/js/quotes.json';
let obj = null;
try {
obj = await (await fetch(url)).json();
} catch (e) {
console.log('error');
}
const d = new Date();
const day = d.getDay();
const quote = document.querySelector('#quote');
const author = document.querySelector('#author');
quote.innerText = obj.quotes[day].quote;
author.innerText = obj.quotes[day].author;
}
getQuote();
then create a json file with format like this:
{
"quotes": [
{
"quote":"Life isn’t about getting and having, it’s about giving and being.","author":"Kevin Kruse"},
{
"quote":"Whatever the mind of man can conceive and believe, it can achieve.","author":"Napoleon Hill"}
{
"quote":"If you can dream it, you can achieve it.","author":"Zig Ziglar"}
]
}
Quotes taken from : Quotes List in JSON Format · GitHub
2 Likes
Thank you. I’ll give it a try.
Thanks again for the help.
Here is what it looks like so far:
Have A Wonderful Day!