How to include quote of the day

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!