Random Advice Generator

Greeting Anmol Panchal!! Congratulations for completing your challenge!, 👏👏👏.

I saw your code and you did great job using flex, however I have some tips for you may help you improve your solution if you don't mind,

on CSS you can safely remove width: 100vw; from the body, as default are auto which works well, and overflow: hidden;, because there is overflow on the page. and add cursor: pointer; to the button, because by default buttons don't have a pointer, and on case you need one.

CSS

body {	
	/* width: 100vw; */
	/* overflow: hidden; */
}

.next-button button {
	cursor: pointer;
}

and for JavaScript, there is a bug on Firefox relative to cache, Firefox users will not be able to generate a new advice, to fix that for them just pass a optional parameter {cache: 'no-cache'} to fetch.

async function getQuote()
{
    const response = await fetch("https://api.adviceslip.com/advice", {cache: 'no-cache'})
   
}

as for HTML my advice for you, is to not make div your best friend, because will not find them when project grow, instead try make use of meaningful tags, for example You should use <main> to wrap the container. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

useful recourse

• https://web.dev/use-landmarks/

overall hopefully this feedback helps, happy coding, and Have a Great Day/

This is great everything is okay, however you can remove the width and overflow on the body as they are not needed . Also you can put cursor pointer on the button so a user knows its clickcable.