Advice Generator App in Javascript! Let’s do it.

In this article, you will learn how to make an advice generator app from frontendmentor.io in Javascript using API calls.

Random Quote from unsplash
Photo by D K on Unsplash

Making the basic folder structure of the Project:

Folder structure of the project
The folder structure of the project

Making the HTML markup of the project:

Image of the HTML markup for the project
This is the required markup of the Project

Making the style of the project:

Image of the style added to the container element
This is the style of the container
Image shows the styles given to the card element
These are the styles given to card element
Image contains the style of advice and advice-num elements
Style of quote container tag.
The style given to the change icon and its container
media query to make the site responsive.
Using media queries to make the site responsive

Making the logic of the project with JavaScript:

getAdvice function

Conclusion:

Image of the completed project.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Harsh Prateek

Hi, I am Harsh and I write about coding and learning techniques. I am a student myself and would love to tell everyone my secrets for coding and learning.