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.

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

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.

These are the different flavors that are part of this series:

  1. HTML + CSS + Vanilla JS + quotes array
  2. HTML + CSS + Vanilla JS + JSON with quotes (members-only post)
  3. HTML + CSS + Vanilla JS + quotes REST API (this flavor)
  4. HTML + Vanilla JS + SAAS + quotes array (nah, because let’s be opinionated about SASS)
  5. HTML + Vanilla JS + Bootstrap + quotes array (nah, because let’s be opinionated about Bootstrap)
  6. HTML + CSS + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
  7. HTML + CSS + Redux + quotes array
  8. HTML + CSS + Redux + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
  9. HTML + CSS + Redux + Redux Thunk + JSON with quotes
  10. HTML + CSS + React + quotes array
  11. HTML + CSS + React + JSON with quotes (members-only post)
  12. HTML + CSS + React Hooks + quotes array
  13. HTML + CSS + React Hooks + JSON with quotes (members-only post)
  14. HTML + CSS + React + React Redux + quotes array (nah, because let’s be bullish about writing any new components with React Hooks)
  15. HTML + CSS + React + React Redux + Redux Thunk + JSON with quotes (nah, because let’s be bullish about writing any new components with React Hooks)
  16. HTML + CSS + React Hooks + React Redux + quotes array
  17. HTML + CSS + React Hooks + React Redux + Redux Thunk + JSON with quotes
  18. HTML + CSS + React Hooks + React Redux Hooks + quotes array (nah, because let’s be opinionated about React Redux Hooks)
  19. HTML + CSS + React Hooks + React Redux Hooks + Redux Thunk + JSON with quote (nah, because let’s be opinionated about React Redux Hooks)

If you are new here, you may wonder why I am overcomplicating a really simple application that can be shipped in 3 lines of functional Vanilla JavaScript. And the reason is: Shipping a simple app in a simple environment with fewer moving parts = great way to practice a new way to solve a problem. This is the spirit behind the Making a random quote machine in a few different flavors series. Enjoy!

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 subscribe to Morse Wall.

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.

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 random quote generator

Acknowledgement

The following goes without saying, but here it comes anyways: Please note that in this ever changing world of technology, I am writing this article in July 2019 (hello, summer!) and alternate solutions might have become available as you read this writing.

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 subscribe to Morse Wall. I think you’ll like it a lot!

So, what did you like about this post? Come say hello on Twitter!

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

Happy coding!

Where to find me:

Follow me on Twitter:

Follow Pat Eskinasy on Twitter

You can always get my latest writings directly to your email address by subscribing to Morse Wall.

UPDATE

Part 4 of this series has now been published. Go check it out! I’m using state management (with Redux) to help me update the different UI elements with the current application state in the fourth flavor.