Javascript counter | HTML, CSS, JS
Tags: javascript, webdev, programming, css
Published: 2022-08-21 06:50:18

A simple javascript counter using HTML, CSS and **Javascript**
Stay tuned for more tutorials like this.

Video Tutorial and source code is given below 

{% embed https://www.youtube.com/watch?v=HTBF20kb4bU %}

**index.html**

```
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple counter using HTML, CSS, JS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    
    <div class="whole">
        <div class="main">
            <div class="counter">9</div>
            <div class="plus count"><i class="fa-solid fa-plus"></i></div>
            <div class="minus count"><i class="fa-solid fa-minus"></i></div>
        </div>
        <div class="reset">
            <button class="reset-btn">Reset</button>
        </div>
    </div>



<script src="app.js"></script>
    
</body>
</html>
```


Create a file in same directory and name it style.css
paste the code given below

```
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Roboto', sans-serif;
    
}

.whole{
    margin: auto;
}


.main{
    width: 300px;
    position: relative;
}

.main .counter{
    width: 200px;
    height: 200px;
    margin: auto;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #FF5757;
    border-radius: 5px;
    font-size: 5rem;
    font-weight: 700;
    color: #fff;
}


.count{
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 5px solid #FF5757;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -30px;
    border-radius: 5px;
}


.count i{
    color: #FF5757;
    font-size: 2rem;
}


.count:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

}

.plus{
    right: 10px;
}
.minus{
    left: 10px;
}

.reset{
    align-items: center;
    text-align: center;
    margin-top: 80px;
    
   
}

.reset .reset-btn{
    margin: auto;
    outline: none;
    padding: 10px 18px;
    background-color: #fff;
    border-radius: 5px;
    border: 5px solid #FF5757;
    color: #FF5757;
    font-size: 1.2rem;
    font-weight: 700;

}

.reset .reset-btn:hover{
    background-color: #FF5757;
    color: #fff;

}
```


And finally a Javascript file name it as app.js

```
const counter = document.querySelector('.counter');
const add = document.querySelector('.plus')
const sub = document.querySelector('.minus')
const resetNum = document.querySelector('.reset-btn')

let number = counter.innerHTML;

add.addEventListener('click', function(){
    number++;  
    addToHtml(number);
})

sub.addEventListener('click', function(){
    number--;  
    addToHtml(number);
})

resetNum.addEventListener('click', function(){ 
    addToHtml(0);
})


function addToHtml(value){
    number = value;
    counter.innerHTML = value;
}

addToHtml(0)
```

**Thanks for reading**


If any suggestions please let me know
I am happy to talk with you