Welcome 😄everyone to my first blog. Pretty excited😁 to share all my knowledge with you. So let us begin.
Are you stuck in TUTORIAL HELL😥?
Tutorial hell is when you continuously keep on watching tutorials one after another and so on and you feel like, you are learning a lot of things and building some good projects. As soon as you start doing something on your own, you get to know that you don't know anything.
Then the easiest way to get out of it is to make a side personal project on your own. Here we will see an approach to make a Tip Calculator as a side project.
Here is the link for the challenge-Make a Tip Calculator
This Tip Calculator is made with the help of HTML, CSS, and JavaScript.
We can't see the step-by-step process as it may take very long to explain everything. Here we will see how to approach a project and what should our thought process without getting overwhelmed by seeing the result and returning to TUTORIAL HELL. You can get the full code from here.
HTML💀
After linking all our files in HTML we should see the design of the project provided to us and try to make a structure in your mind containing a lot of boxes. Boxes📦? Starting from top⬆to bottom ⬇trying to see each element as a box and each small component inside it as smaller boxes. So first there is the biggest box i.e. body of your HTML. Probably for every project the first box would be the body tag for everyone.
After that further box depends upon the project. In this project inside the body box, we have three boxes that are title box, calculator box, and attribution box. And these boxes are further divided into many other boxes. In the following image, I have shown how I had imagined further boxes. You might imagine in a bit different way it's ok everyone is unique👩🏾🤝🧑🏼.
And we also sometimes get stuck in naming the classes or ids. I try following the BEM method and you can try this too —>BEM naming
After creating a skeleton of our project using boxes it is now time to add some flesh.
CSS🍖
For CSS we start by building our project for mobile view📱 first then adjust it for desktop🖥 view with the help of media queries.
So first I declare some of the basic things like what would be applied to the entire project by using CSS (asterisk)selector and : root. In root we mostly declare CSS variables for different colors ,spacing ,transition ,radius for border-radius ,etc. Depending upon the project we add more and more global styles. Some may add a general design for the button or some may customize sizes of h1,h2,h3, and h4 for different views. In this project, these were my global styles.
One can also import fonts from Google font and use them for their project. Another way is to download the file of the font and use font-face in CSS
@font-face {
font-family: acquire;
src: url("/Aquire.otf");
}
Coming to this project I added CSS flexbox to the calculator box as it contains other mini boxes which in the design🎨 are in the center. Then CSS Grid was used in the making of the tips values if you see in the screenshot provided at the start of the blog. Other are basic things which one has to do by try and error method to bring your design close to the one given to you. But if have the pro subscription of frontendmentor then you get access to the Figma file which you a lot to get details about the design aspect.
One of the important things I learned in this project is frontend form validations on my own. You can learn it from this youtube video by Florin Pop —> JavaScript Client-side Form Validation
And if you are still confused please go through my code I tried to comment on most things so that you and future me 😅could understand the code.
JavaScript🧠
So after adding bone and flesh🍖 we will add some brain to our project using JavaScript. While doing so we will add some more CSS by using DOM manipulation.
For this, I would recommend you make a flowchart📊 so that you can understand the flow of the project and it need not be perfect at the start of the project. Most of the time flowcharts are made for bigger projects but if you keep a practice to make it for smaller projects too you will improve in it. Here is mine for this project
You can use diagrams.net for flowchart
After that start by selecting all Html elements you will be needing to be followed by functions and event listeners. Try to make code more declarative than imperative. Try using a function for a particular task, use a ternary operator wherever possible, and try not to manipulate data outside the scope of the function. But you can write a code having a mixture of both imperative and declarative.
Now take each task of the flowchart one by one. Don't PANIC😨 if you are not getting something you can use google just do not copy the code of other coders who are doing the same challenge this will not help you improve yourself. You can ask for help on Slack, Discord, or Twitter to we have a really friendly community up there.
Talking of this project I used much event-driven code like onclick, on mouseover, and onmouseout these were helpful. The main functionality was not that difficult just our basic school level stuff add, multiple, and divide.
One more nice feature I used is the Guard clause. Guard clauses are a great alternative to if…else statements.
Here is a snippet from my code.
if (!((billInput.value > 0 && peopleInput.value > 0) || state)) return;
In this, I am checking if the value of the bill💵 and number of people🤼is greater than zero or not and a state variable whose value should be false with the help of logical operators. If the results come out to be true then we pop🦵 out of the function due to return and further code is not executed.
This was it guys, I couldn't explain the whole code as it would take long and it would not solve your problem of Tutorial hell as I would be helping you understand code rather you trying it out.
Hope so you like my first blog😍. There will be many errors in this blog and I would appreciate your honest feedback in comments so that I will come back with more better content . Also do comment out how you approach your projects I would love to read those comments.
Follow my twitter for more helpful content on Web development
Thank You.