Simple Counter using JavaScript | Coding Torque

byPiyush Patil -
0

 





 Simple Counter using JS

Hello Guys! Welcome to Coding Torque. In this blog we have create Simple Counter using JavaScript😍. 

Here is the source code💥

HTML Code 

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- font-awesome icons css  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <title>Simple Counter using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">
        <h1>Counter</h1>
        <h1 id="counter">0</h1>
        <button id="incr">+</button>
        <button id="decr">-</button>
    </div>

</body>

</html>

CSS Code 

@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Potta+One&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10rem;
    background: #111827;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 2px solid;
    border-radius: 10px;
    height: 12rem;
    width: 12rem;
    background: linear-gradient(45deg, #2193b0, #6dd5ed);
    color: white;
    position: relative;
}

#incr,
#decr {
    border-radius: 50%;
    font-size: 15px;
    position: absolute;
    bottom: 20px;
    right: -14px;
    height: 30px;
    width: 30px;
    background: white;
    border: 1px solid gainsboro;
    box-shadow: 0 5px 26px -8px black;
    cursor: pointer;
}

#decr {
    right: 20px;
    bottom: -10px;
}

JavaScript Code 

const counter = document.getElementById("counter");
const incr = document.getElementById("incr");
const decr = document.getElementById("decr");

let count = 0;
incr.addEventListener("click", () => {
    count++;
    counter.innerText = count;
});

decr.addEventListener("click", () => {
    count--;
    counter.innerText = count;
})
If you have any doubt or any project idea feel free to Contact Us
Tags:

Post a Comment

Previous Post Next Post