This is Part 1 of an 11-part series. Each part using a different front end stack (different flavor). Starring in this flavor: Vanilla JavaScript. If

Random Quote – Vanilla JavaScript: Using various front end stacks

submited by
Style Pass
2021-07-16 15:30:07

This is Part 1 of an 11-part series. Each part using a different front end stack (different flavor). Starring in this flavor: Vanilla JavaScript.

If you’re curious about the next flavors and would like to make a writer very happy today, you should subscribe to Morse Wall.

HTML and CSS aside (they can be found in the Github repo for flavor #1). I’m into Vanilla JavaScript universe in flavor #1. The data (quotes) are inside an array.

I’ve scraped the quotes with the help of Spider, a point&click scraping tool built by Amie-Chen. So, with the help of Spider, you can also go ahead and easily collect quotes from any prolific public figure you choose.

When I was done scraping, I’ve then downloaded a JSON from Spider and copy-pasted the quotes into an array inside my script.js. There are only 3 quotes in the code snippet below (so I can illustrate the point), but many more quotes in the array in production.

Given I want a random quote to be ready for me when the quote machine loads, I need to call a function (that I still need to define) that fetches a random quote and renders it my HTML.

Leave a Comment