Dev.to WebDev 🛠 Dev Wed, 01 Jul 2026 17:24:52 +0000 👁 1 📖 2 min read

JavaScript DOM Mini Projects

DOM Mini Project #1 – Bulb ON/OFF Toggle 📝 Project Overview This beginner-friendly DOM project simulates a simple Bulb ON/OFF Toggle using JavaScript. Clicking the button switches the bulb image between ON and OFF stat

DOM Mini Project #1 – Bulb ON/OFF Toggle

📝 Project Overview

This beginner-friendly DOM project simulates a simple Bulb ON/OFF Toggle using JavaScript. Clicking the button switches the bulb image between ON and OFF states while updating the button text accordingly. This project helped me understand DOM manipulation, event handling, conditional statements, and dynamically updating HTML elements.

Source Code

<body>
    <img id = "bulb" src = "https://www.w3schools.com/js/pic_bulboff.gif">
    <button id = "btn" onclick="bulbToggle()">ON</button>

    <script>
        function bulbToggle(){
            if(document.getElementById("btn").innerText ==="ON"){
            document.getElementById("bulb").src = "https://www.w3schools.com/js/pic_bulbon.gif";
            document.getElementById("btn").innerText = "OFF";

            }else{
            document.getElementById("bulb").src = "https://www.w3schools.com/js/pic_bulboff.gif";
            document.getElementById("btn").innerText = "ON";
            }
        }
    </script>
</body>

Output

GitLab Pages:
https://front-end-3d9f55.gitlab.io/javascript/js-mini_projects.html

DOM Mini Project #2 – Counter App

📝 Project Overview

This Counter App is a beginner-friendly JavaScript project that allows users to increment, decrement, and reset a counter. It helped me practice variables, functions, DOM manipulation, conditional statements, and keeping the UI synchronized with application state.

Source Code

<body>
    <h2>Count : <span id="count"></span></h2>
    <button id="incrementBtn" onclick="increment()">+</button>
    <button id="decrementBtn" onclick="decrement()">-</button>
    <button id="resetBtn" onclick="reset()">reset</button>
    <h1>Counter App</h1>

    <script>
        let count = 0;
        let countElement = document.getElementById("count");
        countElement.innerText = count;

        function updateCount() {
            countElement.innerText = count;
        }

        function increment() {
            count++;
            updateCount();
        }

        function decrement() {
            if (count > 0) {
                count--;
                updateCount();
            }
        }

        function reset() {
            count = 0;
            updateCount();
        }
    </script>
</body>

Output:

GitLab Pages:
https://front-end-3d9f55.gitlab.io/javascript/counterapp.html

DOM Mini Project #3 – Live Character Counter

📝 Project Overview

This Live Character Counter updates the character count instantly as the user types into a textarea. It helped me understand real-time event handling, DOM updates, and working with string properties in JavaScript.

Source Code:

<body>
    <h1>Live Character Counter</h1>

    <textarea id="text" oninput="textArea()"></textarea>

    <p>Characters : <span id="counter"></span></p>

    <script>
        let counterElement = document.getElementById("counter");
        let textElement = document.getElementById("text");

        counterElement.innerText = textElement.value.length;

        function textArea() {
            counterElement.innerText = textElement.value.length;
        }
    </script>
</body>

Output:

GitLab Pages:
https://front-end-3d9f55.gitlab.io/javascript/liveCharCount.html

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.

← News 🛠 Dev 🏠 Home