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.
In this day and age, being a frontend developer is all about the portfolio you made over the years. Having a great portfolio is a must in getting that dream job you always wanted.
No matter what languages you know or what score you had in college, if you are not able to apply your knowledge in the real world then you aren’t worth getting the job.
In this tutorial, I will guide you to make a great project which you can showcase in your portfolio to make it better than ever. All the assets I would use for this project will be available on frontendmentor.io. Make your account and download this project’s assets. Here is the working site which I have deployed on Github pages. Let’s start!
Making the basic folder structure of the Project:
After downloading the assets in the zip file, unzip the files and make two files yourself and add them to the index.html given, one is style.css for styling and the other is script.js for making API calls. Here is the folder structure of the project after doing this.
Making the HTML markup of the project:
After making the folder structure, we will make the markup of the project. This is the required markup of the project.
In HTML, I have wrapped the complete project in a container div to style the body of the project and use it to center the card using the flexbox property.
The card element contains the quote, quote number, and the change button. the quote element contains the advice which will be changed dynamically by the API given in the project’s Readme.md file. Now we will do the styling of the elements according to the style given in the design folder. The change element contains the image of the button which is needed to be used according to the preview image.
Making the style of the project:
The container element:
Now, we will make the styles of the project. First, we will style the container. This is how we should do it.
Notice that I have also imported a font from google fonts. We have to use this font in the quote element and give it the font family of Manrope.
I have made it a flex container and centered the child element which is the card. I have also given the color to it which was in the preview image of the project and made the overflow hidden to hide the scrollbars from the page.
Note that I have given the universal element a margin and padding of 0. This way the container element can take up the complete real estate of the page.
The card element:
This is the style given to the card element:
The dimensions of the card should be such that the aspect ratio should be as close as the preview image, also the elements inside the card should be as exact to the image as possible.
In the above image, I have made it a flex container and given the justify-content property as space-around. This way we get a space around every element, even around the terminal elements.
I have used the padding in a way that I can accommodate the button at the border of the card. I also gave it the font family of Manrope, as I mentioned earlier.
advice number and advice elements:
This is the style that should be added to the text of advice and adviceNum respectively. I have used the colors according to the style-guide.md and applied the font size as required.
quote container element:
This is the style of the quote container tag:
I hardcoded the height and width of the quote element in such a way that the text does not overflow from the element. I have also made it a flex container to center the text horizontally and vertically.
Making the divider element:
This is how to make the divider element. I have made the default for desktop and I will set the mobile one from the media queries.
I have given the background of the image to this element and made it cover the element and not repeat.
Making the button:
This is how we have to make the button of the project.
ChangeIcon is the button that we got from the assets we have, and change is the container I used to get the position of the button right on the card element. I made the cursor pointer in the change div, also I used the position property to position the div on the border of the card element.
By doing all this, we get the UI of the project as it is in the preview image of the desktop. Now we will use media queries to make the site responsive for mobile.
Adding media queries to the project:
In the above image, I have adjusted the size of the text to fit the smaller screen. I also changed the size of the elements to do the same thing.
Note that I have also changed the background image of the divider element to a mobile-friendly image. I did it since it needed to be done by the challenge. In case you are not making it for frontendmentor.io, I would suggest not changing the image.
Now we will see how to get the advice from the API given in the Readme.md file.
Making the logic of the project with JavaScript:
Here is the complete JavaScript of the project
In the above image, I have declared the variables from the elements of the DOM. “num ”and advice will be used to change the value of “adviceNum” and “advice” elements respectively. “change ”will listen to the click event and will call the getAdvice function. This function will make the API call and also update the value of the variables. This is the function.
This is an async function as it has to wait to fetch the response from the API. It then sets the response to their respective DOM variable.
Conclusion:
This is the end of the project, we have completed it and this is what it looks like.
In the next article, I will tell you how to host the project on GitHub pages. I hope you enjoyed the tutorial on how to make the advice generator app. Follow me on Twitter as I post about web development there and also follow me here on Medium to get updates on my latest article.
Have a Great Day😉.
