DEV Community

Cover image for JavaScript DOM Mini Projects
Saravanan Lakshmanan
Saravanan Lakshmanan

Posted on

JavaScript DOM Mini Projects

#webdev #programming #javascript #beginners

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Output:

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

Top comments (0)