Day-21 Build a Simple Counter App Using HTML, CSS & JavaScript

#webdev #programming #html #javascript

Hey Devs! 👋
Today, I built a simple Counter App using plain HTML, CSS, and JavaScript—no frameworks, no libraries, just pure web fundamentals. It's a great beginner-friendly project to strengthen your DOM manipulation skills and styling knowledge.

Here’s what the final app looks like:

✅ Displays a number
➕ Increases the count
➖ Decreases the count
🔁 Resets the count

Let’s dive into the code and logic step-by-step.

Live Preview

You can try it out here: (https://tamilselvan1812.github.io/16_CounterApp/)

Project Structure

We are using just one index.html file containing all the HTML, CSS, and JavaScript.

Complete Code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kts Counter App</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #fff;
        }

        .card {
            display: flex;
            flex-direction: column;
            justify-content: end;
            background-color: white;
            padding: 40px 30px;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            text-align: center;
            width: 300px;
            height: 300px;
        }

        h1 {
            font-size: 4rem;
            margin-bottom: 10px;
            color: #140505;
        }

        .btn {
            font-size: 25px;
            width: 220px;
            padding: 12px;
            margin: 10px 0;
            margin-left: 40px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            background-color: #007BFF;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #0056b3;
        }

        .btn:active {
            transform: scale(0.98);
        }
    </style>
</head>

<body>
    <div class="card">
        <h1 id="result">0</h1>
        <button class="btn" onclick="increase()">+</button>
        <button class="btn" onclick="decrease()">-</button>
        <button class="btn" onclick="reset()">Reset</button>
    </div>

    <script>
        let count = 0;
        let element = document.getElementById("result");

        function increase() {
            count += 1;
            element.innerText = count;
        }

        function decrease() {
            count -= 1;
            element.innerText = count;
        }

        function reset() {
            count = 0;
            element.innerText = count;
        }
    </script>
</body>

</html>

Key Concepts Used

HTML
- Structure for the counter and buttons.
CSS
- Gradient background.
- Centered flex layout.
- Styled card and buttons with hover and active effects.
JavaScript
- getElementById to select the display element.
- Event handlers to change the count variable and update the DOM.

What You’ll Learn

How to manipulate the DOM using JavaScript.
CSS layout with Flexbox and gradients.
Styling buttons with hover/active transitions.
Writing clean, readable code for simple applications.

Final Thoughts

This project is perfect for beginners learning JavaScript basics and working with the DOM. If you're learning Frontend Development, small projects like this will build your confidence and understanding of real-world concepts.

DEV Community