I made a Random Quote Generator.

#webdev #tutorial #api #beginners

I recently made a random quote generator which was pretty good. More importantly it had a lighthouse performance of 99. I am going to teach how you can create a simple quote similar to what I made. Go check out my website citeal.web.app

HOW TO GET RANDOM QUOTES

The most obvious way of getting information is by using a javascript api.

"JavaScript APIs: Like a pre-made pizza crust - you gotta dress it up, but at least you're not starting from scratch."

To be honest this quote was made by gemini ai. Its ok lets look forward on how to find the perfect api. After searching for over 30 minutes, I found quotable in a github repo. I read the documentation and started to work on it. I simply called a function that would replace our html with the quote and author from the api json file. Thats pretty straight forward.

ERROR !!!!!

An error popped out for this code


const tags = ['inspirational','famous-quotes','technology','love','life','religion','philosophy',''];
const tag = tags[Math.floor(Math.random() * tags.length)];
const url = 'https://api.quotable.io/quotes/random?tags=' + tag;
author = document.getElementById('author');
quote = ocument.getElementById('author');

console.log(tag);

async function getQuote(xurl) {
    const response = await fetch(xurl);
    var data = await response.json();

    quote.innerHTML = data[0].content;
    author.innerHTML = data[0].author;
}

getQuote(url);

After searching the code inside stack overflow, I quickly got the solution i removed the variables and simply followed this markup

document.getElementById('author').innerHTML = data[0].content;

It worked :)

STYLING

I searched through millions of colour palettes but could not get a better palette than the most used and the most elegant colour palette. The black and white colour palette.

After giving simple and elegant styles, My application took shape

Deploying

The best free deploying service is firebase, so I used firebase to deploy my pretty simple application. I used firebase init command and then firebase deploy to deploy my app to citeal.web.app