Create JavaScript Random Quote Generator generates only one quote per day

Question

I created a random quote generator for my Angular app. The component code is as follows:

qotd = this.quotes[Math.floor(Math.random() * this.quotes.length)]; 

Extract data that looks like this:

  quotes = [ { quote: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod magna magna, euismod tincidunt libero dignis.", author: 'Sorato Violasa' }, { quote: "Nullam dignissim accumsan magna vitae rhoncus. Phasellus euismod magna magna, euismod tincidunt libero dignis.", author: 'Vito Dignaora' }, { quote: "In tincidunt imperdiet augue, quis sollicitudin mi tincidunt ut.", author: 'Hivalo Amettioa' }, { quote: "hasellus accumsan erat vitae enim blandit, quis euismod ipsum sollicitudin.", author: 'Grasha Plojiva' }, ]; 

And then, in my opinion, I do this:

 <div class="quotes"> <p class="quote"> {{qotd.quote}} <br><br> ~ {{qotd.author}} </p> </div> 

The fact is that now it will generate a new quote every time the component restarts, which can be several times in one session. Now I understand that it’s better to make this a daily quote generator. Therefore, when the date changes, a new quote will be generated. What is the easiest way to implement something like this? It’s easy enough to create a date and day of the week, for example:

  date = new Date(); dayNumber = this.date.getDay(); 

But how would I calculate when the day of the week changes to start a new instance?

Answer 1

Consider a scheme in which the server prepares 3 quotes: one for yesterday, today, and tomorrow. Every new day, yesterday is deleted, and a new tomorrow is added. Thus, the quote on the client can be changed immediately after the midnight client local time, and everyone sees the same quote on the same local day.

Nowhere on Earth, which is more than 14 hours different from UTC, therefore, if the server bases the keys in UTC, each client will have a suitable number of quotes, and the entire quotation database will not be clicked on each client every time it changes.

 var quotes = { '20171012':{quote:'one',author:'fred'}, '20171013':{quote:'two',author:'mary'}, '20171014':{quote:'three',author:'sue'} }; function showQuote(quotes) { var d = new Date(); var key = '' + d.getFullYear() + ('0'+(d.getMonth()+1)).slice(-2) + ('0'+d.getDate()).slice(-2); return quotes[key] } // On 2017-10-13 shows quote: two, author: mary console.log(showQuote(quotes)); 

Answer 2

One way you can take this is to save the current day on the client using localStorage . In your component, check if we have the currentDay key in our local storage, if it is not created, save the value of currentDay and qotd inside the object.

The next time you reload your component, you should have qotd assigned in your localStorage, so we do a check of the date stored in localstorage and the current one we are creating. If they are different, we know that the day has changed.

  //PSUEDOCODE (haven't tested, but should give you a good idea) function(){ this.qotd = this.quotes[Math.floor(Math.random() * this.quotes.length)]; if(!window.localStorage.getItem('todayDate')){ let currentDay = new Date().getDay(); let storageItem = JSON.stringify({ currentDay, qotd: this.qotd }) window.localStorage.setItem('currentDay',storageItem) } else { var existingQOTD = JSON.parse(window.localStorage.getItem('todayDate')); let currentDay = new Date().getDay(); if(existingQOTD.currentDay !== currentDay){ let storageItem = JSON.stringify({ currentDay, qotd: this.qotd }) window.localStorage.setItem('currentDay', storageItem) } } }