counter-app-using-javascript

Project Folder Structure:

Now before we start the coding, let us see what the project folder structure looks like. The project folder structure is called Counter. Within this folder, we have three files. First is index.html which is the HTML document. The second is style.css which is a stylesheet. And the last one is the javascript file called script.js.

HTML:

Let us begin with the HTML code. Copy the code below and paste it into your HTML file. The HTML file consists of a div with a class name container. Inside the container, we have an h1 element with id num.

Following the h1 element, we have a div with the class name btns. This div consists of three buttons. Each of these divs has an icon inside of it. I have used font awesome icons for this project. You can use any other icon or even some text.

The class name assigned to these buttons is dec, reset, and inc.

CSS:

Now let us style this counter using CSS. Copy the code provided below and paste it into your style.css file.

We begin by discarding unwanted paddings and margins from all the elements. Following this, we set the height of the body to 100vh and display it to the grid. By setting display to the grid we can use place items to center the container.

We set dimensions for containers and use the after pseudo-element to create a box. This creates a sleek UI for the counter. We add box-shadow to the container to make it stand out even more.

Next, we center the h1 element. After this, we use a flex layout to space around the buttons. You can customize these buttons however you would like to.

Javascript:

Now let us add functionality to this counter using JavaScript. We select the num element and assign it to a variable. Next, we create a variable called value and set its value to zero. Following this, we also select all three buttons using the querySelector. We add a click event listener to each of these buttons.

The function for btnInc increases the value by one. It then changes the text content of the numContiner to this new value. Next, btnDec does a similar thing but instead of adding one, it subtracts one from the value. Lastly, the function attached to the event listener of btnReset sets the value back to zero. Your counter is now ready.

Want to check the live project running:- https://hegdepavankumar.github.io/counter-app-using-javascript/counter

or else click the git pages hosted link and add the “/counter” at the end of the link…

##output…….

Need Help:

If you have issues while coding this, you can download the source code by clicking on the download button below. Also, do leave your suggestions and feedback in the Issue section.

Creator 🔝

(https://github.com/hegdepavankumar). This Project is Created by:-

@hegdepavankumar

``` Hey Everyone Please give me a star .. and Follow me for more amazing project ideas and Updates⭐ and don’t forget to fork the repo… ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Thank you~🙏😍~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~