DEV Community

Cover image for Javascript DOM mini projects
Kamalesh AR
Kamalesh AR

Posted on

Javascript DOM mini projects

#javascript #webdev #programming

My JavaScript Practice Journey: 5 Beginner-Friendly DOM Projects

Introduction

As part of my JavaScript learning journey, I completed five beginner-friendly projects that helped me understand the fundamentals of DOM manipulation, event handling, functions, and user interaction. These projects allowed me to apply JavaScript concepts in practical scenarios and build confidence in creating interactive web applications.

Technologies Used

  • HTML5
  • CSS3
  • JavaScript (ES6)

1. Change Text by Clicking a Button

Overview

This project changes the text of a heading or paragraph whenever the user clicks a button.

Concepts Practiced

  • DOM Manipulation
  • getElementById()
  • Functions
  • onclick Event
  • innerText

What I Learned

  • Selecting HTML elements using JavaScript.
  • Updating text dynamically.
  • Handling button click events.

CODE: 

<body>
    <h1 id="name">Kamalesh😎</h1>
    <p>Click the button to change text</p>
    <button onclick="changename()">Change Text</button>
    <script>
        document.getElementById('name');
        function changename(){
            if(document.getElementById('name').innerText== "Kamalesh😎"){
                document.getElementById('name').innerText= "Vignesh🐒";
            }
            else{
                document.getElementById('name').innerText= "Kamalesh😎";
            }
        }

    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

Output:

Text before change:

Text after change:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/textchange.html

2. Light On/Off Toggle

Overview

In this project, I created a light bulb switch. Clicking the buttons changes the bulb image between ON and OFF states.

Concepts Practiced

  • DOM Manipulation
  • Image Manipulation
  • Functions
  • src Attribute
  • Button Events

What I Learned

  • How to change image sources dynamically.
  • Creating interactive visual effects.
  • Understanding how JavaScript controls HTML elements.

CODE: 

<body>
    <img id="bulb" src="bulb light.jpg" alt="img is not here">
    <button onclick="on()" id="btn">ON</button>

    <script>
        let bulb = document.getElementById("bulb");
        let btn = document.getElementById("btn")

        function on(){
            if(btn.innerText=="ON")
            {
                bulb.src = "bulb2.jpg"
                btn.innerText="OFF"
                btn.style.backgroundColor="firebrick";
                btn.style.border="2px solid rgb(98, 18, 18)";
            }
            else{
                bulb.src = "bulb light.jpg"
                btn.innerText="ON"
                 btn.style.backgroundColor="rgb(94, 178, 34)";
                btn.style.border="2px solid rgb(31, 98, 18)";
            }
        }
    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

Output:

Before light ON

After light ON

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/light.html

3. Counter App

Overview

The Counter App increases, decreases, or resets a number using different buttons.

Concepts Practiced

  • Variables
  • Functions
  • Arithmetic Operators
  • DOM Manipulation
  • Button Click Events

What I Learned

  • Updating values dynamically.
  • Using variables to store data.
  • Performing mathematical operations with JavaScript.

CODE: 

<body>
    <div id="container">
        <h1>Counter App</h1>
        <div id="core">
            <button id="sub" onclick="sub()">-</button>
            <span id="counter">0</span>
            <button id="add" onclick="add()">+</button>
        </div>
        <button id="reset" onclick="reset()">Reset</button>
    </div>
    <script>
        let counts = document.getElementById("counter");
        let count = counts.innerText;
        function add(){
            count++;
            counts.innerText=count;
        }
        function sub(){
            if(count>0){
                count--;
                counts.innerText=count;
            }
        }
        function reset(){
            count=0;
            counts.innerText=count;
        }
    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

Output:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/counterapp.html

4. Live Character Counter

Overview

The Live Character Counter displays the number of characters entered into a textarea in real time. Every time the user types, deletes, or pastes text, the count updates automatically.

Concepts Practiced

  • DOM Manipulation
  • getElementById()
  • oninput Event
  • value
  • length
  • innerText

What I Learned

  • Responding to user input instantly.
  • Counting characters using the length property.
  • Updating webpage content dynamically.

CODE: 

<body>
    <div class="container">
        <h2>Live Character Count</h2>
        <textarea name="" id="text" placeholder="Enter your text here" oninput="countCharacters()"></textarea>

        <p>Count characters:<span id="count">0</span></p>

    </div>

    <script>

        const textarea = document.getElementById("text");
        const counts = document.getElementById("count");

        function countCharacters() {
            count.innerText = textarea.value.replace(/\s/g, "").length;
        }


    </script>

</body>
Enter fullscreen mode Exit fullscreen mode

Output:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/charactercount.html

5. Show/Hide Password

Overview

This project allows users to show or hide the password entered in an input field. Clicking the button toggles the password visibility.

Concepts Practiced

  • DOM Manipulation
  • Functions
  • Conditional Statements (if...else)
  • Input type Property
  • innerText
  • Button Events

What I Learned

  • Changing element properties dynamically.
  • Using conditional statements effectively.
  • Improving user experience with interactive features.

CODE: 

<body>
    <div class="container">
        <h2>Show and Hide Password</h2>

        <input type="password" id="password" placeholder="Enter Password">

        <!-- <br><br> -->
        <button onclick="Password()">Show</button>


    </div>

    <script>
        let password = document.getElementById("password");
        function Password() {
            if (password.type === "password") {
                password.type = "text";
            } else {
                password.type = "password";
            }
        }
    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

Output:

Hide Password:

Show Password:

Gitlab--> https://learn-html-and-css-1da177.gitlab.io/javascript/hidePassword.html

JavaScript Concepts I Practiced

These projects helped me strengthen my understanding of:

  • Variables (let, const)
  • Functions
  • DOM Manipulation
  • Event Handling
  • Conditional Statements
  • getElementById()
  • innerText
  • value
  • length
  • Input type Property
  • Image src Property
  • Arithmetic Operators

Skills Improved

By completing these projects, I improved my ability to:

  • Build interactive web pages.
  • Connect HTML, CSS, and JavaScript.
  • Write clean and reusable JavaScript functions.
  • Understand how user actions trigger JavaScript events.
  • Solve simple programming problems using DOM manipulation.

Conclusion

These five beginner projects have given me a strong foundation in JavaScript and front-end development. Each project introduced a new concept while reinforcing previous topics, making the learning process understandable and practicable.

I will continue building more JavaScript projects to improve my problem-solving skills, deepen my understanding of the DOM, and prepare myself for real-world web development and technical interviews.

Projects Completed:

  • Change Text by Clicking a Button
  • Light On/Off Toggle
  • Counter App
  • Live Character Counter
  • Show/Hide Password

Every project is another step toward becoming a better JavaScript developer. More projects coming soon!

References:

https://www.w3schools.com/tools/tool_char_counter.php

Top comments (0)