I spent some time last week working on a site for next school year. I’m tired of having to live within the restraints of Canvas for content pages, so I decided to branch out and setup a Jekyll site on GitHub Pages. Pretty easy to set up, plus if you have an enterprise account with GitHub you can lock the page behind a login.
But I did want just a bit of interactivity. Specifically, I wanted a tech or nerdy quote of the day, every day. A random quote is easy enough, but I wanted the same quote for every body, on every page view for each day. At a previous job I had a site that put a random SAT word on the home page, and there was always discussion between students about the word. I wanted the same for this quote.
First, I needed a source of quotes. Since this was going to be JavaScript calling fetch to get the random quote, a JSON file would be ideal. And I found one on GitHub.
After cleaning up a few that I didn’t want to include on something high school students would be reading because of profanity or topic I had a list of about 150 quotes. Saved that to a file called quotes.json.
This was pretty easy. I just needed a div that would hold the quote.
<div id="quote"></div>
For this to work, I needed a way to get the same quote for everybody on the same day. It would be pretty easy if I had a list of exactly 365 quotes, although leap year would throw a wrench in the mix. What I went with was to get the current day of the year and then mod that by the number of quotes in the list. That would give me the index of the quote for the day.
Surprisingly, JavaScript doesn’t have a built-in way to get the current day of the year. Guess I’ve gotten spoiled using Moment in bigger JavaScript projects, but that’s way overkill for this. Googling brought mt to 30SecondsOfCode.org which had the math to get the current day of the year.
And, I ended up with something like this.
/** Load a daily quote to show on the home page */
document.addEventListener('DOMContentLoaded', () => {
let response = fetch('/assets/quotes.json')
.then(res => res.text())
.then(data => {
let json = JSON.parse(data);
let date = new Date();
let doy = Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
let idx = doy % json.length;
let quote = json[idx];
document.getElementById('quote').innerHTML = '<blockquote class="not-prose"><p>' + quote.text + '</p><p><em>- ' + quote.author + '</em></p></blockquote>';
})
.catch(res => {
console.error('Could not fetch quotes.json');
console.error(res);
});
});
You’ll need to change the path fetch is using to where ever you’re storing that file. And you might want to change the line with innerHTML if it’s not quite what you want.
It’s pretty short, but here’s what it looks like when it runs. The quote below is coming from JSON exactly like it is on the class website I’m building. If you refresh this page it should be the same quote. If you come back tomorrow, it should be a different quote.