DEV Community

Cover image for I made a Random Quote Generator.
Mince
Mince

Posted on

I made a Random Quote Generator.

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);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Thanks for reading see you in another Post

Make sure to check out Citeal

Top comments (12)

Collapse
 
yogeshktm profile image
yogeshwaran • Edited

Looks good :)

I have developed the same in react last year during my practice. checkout if you find time React Quote app

Also add the language you used in code block for better highlighting like the one below

let string = 'example';
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mince profile image
Mince • Edited

Nice, could have made the css simpler and better. Remove the sites white spacing

Collapse
 
algorodev profile image
Alex Gonzalez

If the quote is too long, on mobile it looks bad. Cutted by top, the init of the phrase is not visible, and scroll I think is not needed.

Tip: Add a button to refresh quote instead of refreshing the page.

Collapse
 
mince profile image
Mince

Oh sure! I will update it. Thanks for the tip

Collapse
 
mince profile image
Mince

Citeal is the website i created

Collapse
 
dino2328 profile image
developer

Very well done !!I will visit citeal

Collapse
 
mince profile image
Mince

Thanks a lot ❀

Collapse
 
mince profile image
Mince

Guys I will be upgrading citeal ( Citeal 2.0 ) It is going to be awesome πŸ‘

Collapse
 
prakirth profile image
Prakirth Govardhanam

Amazing simple design! I too have to brace myself up for my first website deployment. Thanks for the inspiration 😊

Collapse
 
mince profile image
Mince

Be confident πŸ˜‰

Collapse
 
ranjancse profile image
Ranjan Dailata

Please follow the OWASP Security best practices

Collapse
 
mince profile image
Mince

Thanks, that was informative