Random Quote – Part 3 – Vanilla JavaScript and REST API: Using various front end stacks

2 min read

Building a random quote machine with Vanilla JavaScript and REST API

Part 3 of this series is now ON. You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

In flavor #2, the data (quotes) is found in a same origin resource, since it is stored in a separate JSON file hosted together with the rest of the code.

In this flavor, I’m requesting the quotes data from a REST API.


In Part 4 (to be posted next week), I will cover a fourth flavor and will be using state management (with Redux) to render the random quotes.

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


Flavor #3: HTML + CSS + Vanilla JS + quotes REST API

To make things simple and not have to deal with back end code for such a simple project, I’m implementing an API with the help of Typicode’s My JSON Server. My JSON Server is a fake online REST server that does what I need it to do: GET API calls. Another positive is that it doesn’t persist data changes, i.e. POST, PUT, PATCH and DELETE API requests for a resource do not persist between different calls, so I don’t need to worry about securing the API.

I’m calling the API with the fetch() method, the same method I’m using in flavor #2.

//asynchronous function that gets data from the API and populates the quotes array
const makeRequest = async () => {
  const responseJSON = await fetch(
    "https://my-json-server.typicode.com/morsewall/jsondb/quotes"
  );
  quotes = await responseJSON.json();
};

The JSON response from the API returns all quotes and I’m randomly picking a quote from the data in my front end code (as done in previous flavors). The rest of the code remains the same as in flavor #1 and you can check the project live. Source code for flavor #3 in Github.

Live project Source code

Using a different REST API. Making a random Kanye West quote machine.

Looking for alternative quote APIs to call (someone else’s data, on someone else’s server), I came across Andrew Jazbec’s Rest API for random Kanye West’s quotes. Fetching from that, doing a quick change to the background image and DONE: The Random Kanye West quote machine is ready to receive any random person on the web.

Kanye West right background

Check live project


In Part 4 (to be posted next week), I will cover a fourth flavor and will be using state management (with Redux) to render the random quotes.

If you’re curious about the next flavors, you should join Morse Wall’s newsletter. I think you’ll like it a lot!


So, what did you like about this post? Leave a comment or come say hello on Twitter!

Also, if you have built a random quote machine after reading this post, share it below as a comment. Really excited to see what you create!

Happy coding!

Enjoyed this content?

Help keep it coming by sending a donation or buying me coffees.
You can also join Morse Wall's newsletter, or subscribe to various site feeds to get notified of new posts or follow Morse Wall on social media.

Leave a comment

by Pat
by Pat