DEV Community

VINOTH
VINOTH

Posted on

DOM Task

#javascript #tutorial #beginners #frontend

JavaScript DOM Practice – 3 Beginner Projects

When I started learning JavaScript, one of the most exciting topics was the Document Object Model (DOM). The DOM allows JavaScript to interact with HTML elements, making web pages dynamic and interactive.

In this blog, I'll share three beginner-friendly DOM projects that helped me understand how JavaScript works with user input and HTML elements.

1. Live Character Count

Objective

Display the number of characters typed by the user in real time.

HTML 

<input type="text" id="user-input" oninput="textinput()">
<h2 id="result">0</h2>
Enter fullscreen mode Exit fullscreen mode

JavaScript 

function textinput() {
    const input = document.getElementById("user-input");
    const resultEle = document.getElementById("result");

    resultEle.innerText = input.value.length;
}
Enter fullscreen mode Exit fullscreen mode

How It Works

  • The oninput event is triggered whenever the user types in the input field.
  • JavaScript retrieves the current value using .value.
  • The .length property counts the number of characters.
  • The result is displayed instantly inside the <h2> element.

Example 

Input:
Hello JavaScript

Character Count:
16
Enter fullscreen mode Exit fullscreen mode

Concepts Learned

  • DOM Selection (getElementById())
  • oninput event
  • .value
  • .length
  • .innerText

2. Password Show and Hide

Objective

Allow users to show or hide their password using two separate buttons.

HTML 

<input type="password" id="pass">

<button onclick="showPassword()">Show</button>
<button onclick="hidePassword()">Hide</button>
Enter fullscreen mode Exit fullscreen mode

JavaScript 

function showPassword() {
    const password = document.getElementById("pass");
    password.type = "text";
}

function hidePassword() {
    const password = document.getElementById("pass");
    password.type = "password";
}
Enter fullscreen mode Exit fullscreen mode

How It Works

By default, an input with type="password" hides the entered characters.

Clicking the Show button changes the input type to text, making the password visible.

Clicking the Hide button changes it back to password, hiding the characters again.

Concepts Learned

  • Changing HTML attributes dynamically
  • type="password"
  • type="text"
  • Button click events

3. Password Toggle with a Single Button

Objective

Use one button to both show and hide the password.

HTML 

<input type="password" id="pass">

<button id="toggleBtn" onclick="togglePassword()">👁️</button>
Enter fullscreen mode Exit fullscreen mode

JavaScript 

function togglePassword() {
    const password = document.getElementById("pass");
    const button = document.getElementById("toggleBtn");

    if (password.type === "password") {
        password.type = "text";
        button.innerText = "🙈";
    } else {
        password.type = "password";
        button.innerText = "👁️";
    }
}
Enter fullscreen mode Exit fullscreen mode

How It Works

Initially, the password is hidden and the button displays the eye icon (👁️).

When the button is clicked:

  • The password becomes visible.
  • The button icon changes to 🙈.

Clicking the button again:

  • Hides the password.
  • Changes the icon back to 👁️.

This approach provides a cleaner and more user-friendly experience than using separate Show and Hide buttons.

Concepts Learned

  • if...else
  • Strict comparison (===)
  • Updating element attributes
  • Changing button text dynamically

DOM Methods and Properties Used

Method / Property Description
document.getElementById() Selects an HTML element by its ID.
.value Gets the current value of an input field.
.length Returns the number of characters in a string.
.innerText Updates the visible text of an element.
.type Changes the input type (e.g., password or text).

Top comments (1)

Collapse
 
david_crystal_67d49f98f74 profile image
David Crystal •

Great breakdown of DOM fundamentals—this is exactly the kind of hands-on practice that helps things click for beginners.

I like how you kept the projects simple but practical. The live character counter is a perfect intro to real-time events, and the password toggle examples clearly show how small DOM changes can improve user experience. The single-button toggle is especially nice—cleaner UI and closer to what users expect in real apps.

If I could add one suggestion, it might be to also show how to attach events using addEventListener instead of inline HTML attributes. It’s a small shift, but it helps learners move toward more scalable and maintainable code early on.

Overall, really solid beginner-friendly content. Clear explanations, useful examples, and a good progression of concepts 👍