quote-generator | ZTM VanillaJS : Using an API to build a random quote | Runtime Evironment library

Try creating better font(you can center it, use other font types and colors, make better text padding)

The navbar should be styled better(mabye try to make the options take 100% of the width and you can use thesticky property so the navbar follows you when you scroll down the site)

You have much unused space between the cards(you can turn navbar to sidenavbar and use the formal navbarspace for the logo for example)

try to make the links bigger(and change the color etc. since they seem to be titles too)

you can use other colors for background. Heres a color palette generator:

https://coolors.co/

Use flexbox instead of grid

Remove all the grid in .column and replace them with these:

Mistakes in code

• Function call should be done on click with onclick="newQuote()" and not with onclick="function newQuote()"
• Typo error in taking the length of list to generate random number. It should be const randomNumber = Math.floor(Math.random() * list.length); and not const randomNumber = Math.floor(Math.random() * list.lenght);
• Id specified in HTML was quote-generator and in script was quotes-generator. They must be same.
• Also you can move the random number generation logic to inside of the function to generate new random number each time the user clicks the button. Current random number generation happens only once and the value will not update when the user clicks the button

This is a very common problem when dealing with data that is loaded asynchronously.

Here's how I would suggest debugging this to understand your problem:

1. Remove the offending code so that you can observe what's happening.

2. Add console.log(quotes) in your component. You will see that it logs [] and then again with your array.

3. Next add console.log(quotes[quoteIndex]). Notice that it logs undefined and then an object.

Consider that while the value is undefined, you cannot treat it like an object and attempt to access properties on it.

1. Add a check to make sure the value is an object before using it:

Please follow the steps given on this repo - Deploy React to GithubPages

Alternative - React Deployment pages also explains how you can deploy to github pages Create-react-app deploy to githubpages

You can add a height of 100vh to your body element. By using vh ( View Height ) this will calculate a percentage based on the viewport's height. 100vh = 100% of your viewport. Particularly useful for mobile browsers. Here's some more info on its uses: https://www.sitepoint.com/css-viewport-units-quick-start/

Your function getRandomQuote() returns an array so in order to access the object you need to access the first element of that array. Like this...

If the quote is to show a new quote without refreshing the entire page, remove the axios request from the hook and put it in its own function.