CounterSimple/AmanPathan/index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://kit.fontawesome.com/954076198c.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter</title>
    <style>
        body{
            background-color: #F3F8FF;
            font-family: fantasy;
        }
        .container{
            margin-left: 50%;
            transform:translate(-50%, 50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 80%;
        }
        h1{
            display: block;
            text-align: center;
        }
        .btn{
            border: none;
            cursor: pointer;
            background-color: transparent;
        }
        .btn1{
            border-radius:10px ;
            font-size: 20px;
            font-family: fantasy;
            cursor: pointer;
            color: white;
            background-color: black;
            padding: 12px;
            letter-spacing: 2px;
        }
        .btn1:hover{
            background-color: black;
            transition: 0.5s;
        }
        .fas{
             color: #000;
             font-size: 40px;
             border: none;
        }
        .fas:hover{
            transition: 0.5s;
            color: #333;
        }
        #value{
            font-size: 80px;
        }
        .button-container{
            display: flex;
            flex-wrap: wrap;
            margin-top: 5%;
            flex-direction: row;
            justify-content: space-around;
        }

    </style>
</head>
<body>
    <main>
        <div class="container">
            <h1>Counter</h1><span id="value">0</span>
         <div class="button-container">
            <button class="btn decrease"><i class="fas fa-minus-square"></i></button>
            <button class="btn1 btn reset">RESET</button>
            <button class="btn increase"><i class="fas fa-plus-square"></i></button>
         </div>
        </div>
    </main>
    <script>
        let count =0;
        const value = document.querySelector('#value')
        const btns = document.querySelectorAll('.btn')
        
        let decrease = document.querySelector('.decrease');
        let reset = document.querySelector('.reset')
        let increase = document.querySelector('.increase')

        decrease.addEventListener('click',function(){
           count--;
           value.textContent= count;
           if (count<0) {
               value.style.color="red"
           }
        })
        reset.addEventListener('click',function(){
           count = 0;
           value.textContent= count;
           if (count=== 0) {
               value.style.color="black"
           }
        })
        increase.addEventListener('click',function(){
            count++;
            value.textContent= count;
            if (count>0) {
            value.style.color= "green"
        }
        })
        
    </script>
</body>
</html>