JavaScript Mini projects today I have done some mini-projects using DOM in javascript.
1. Change the Text
the first mini project is changing the text of the webpage with the help of DOM, here I use the DOM to access the Element by GetElementById() method to change the text by innerText property.
Code
<body>
<h1 id="names">Kamalesh😎</h1>
<p>click the below button to change the text</p>
<button onclick="changeName()">Change</button>
<script>
let name=document.getElementById("names");
function changeName(){
if(name.innerText=="Kamalesh😎"){
name.innerText="Vignesh😇";
}
else{
name.innerText="Kamalesh😎";
}
}
</script>
</body>
Output
Click the Link to see the Output
https://vcode-cefc5c.gitlab.io/js/textchange.html
2. Light On/Off Toggle
In this mini project also I use the same DOM to access and modify the element but here I change the Attribute of the Element, I changed the source of the image with the help of src property here I change the image.
Code
<body>
<img id="bulb" src="bulb_off.jpg" alt="img not found">
<button id="btn" onclick="on()">ON</button>
<script>
let bulb=document.getElementById("bulb");
let btn=document.getElementById("btn");
function on() {
if(btn.innerText=="ON"){
bulb.src="bulb_on.jpg";
btn.innerText="OFF";
btn.style.backgroundColor="firebrick";
btn.style.border="2px solid rgb(98, 18, 18)";
}
else{
bulb.src="bulb_off.jpg";
btn.innerText="ON";
btn.style.backgroundColor="rgb(94, 178, 34)";
btn.style.border="2px solid rgb(31, 98, 18)";
}
}
</script>
</body>
Output
Click the Link to see the Output
https://vcode-cefc5c.gitlab.io/js/light.html
3. CounterApp
This the CounterApp is used to count anything with the Help of three buttons are increment, decrement, and reset but here I write three function for all the three buttons and its triggered when user click the button for that I write Onclick event handler that triggered when user click the buttons. here all the three function shares the single value is known as counter value.
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>
Output
Click the Link to see the Output
https://vcode-cefc5c.gitlab.io/js/counterApp.html
4. Character Count
This is mini project is a Character counter which count how many Character you write in the input field or in the textarea then it shows the count as a output. for this I use one textarea and another one div to shows the output, is done with the help of
input.value.replace(/\s/g,"").length ** **.value return the value inside the element which we target .replce is a String method in js is used to replace a part of string with another value.
Code
<body>
<div>
<h1>Live Character Counter</h1>
<textarea id="inpt" oninput="valueCount()"></textarea>
<div id="oupt">Characters: <span id="counter">0</span></div>
</div>
<script>
let input=document.getElementById("inpt");
let counter=document.getElementById("counter");
function valueCount(){
let count=input.value.replace(/\s/g,"").length;
counter.textContent=count;
}
</script>
</body>
Output
Click the Link to see the Output
https://vcode-cefc5c.gitlab.io/js/characterCount.html
5. Show/Hide Password
Here I create a password hide and show feature using Js DOM with the help of getElementById() to access and modify the elements Attribute from text to password, and password to text and also I use function and Onclick event to handle that button click by these way I create it.
Code
<body>
<div id="container">
<h1>Show and Hide Password</h1>
<input type="password" id="txtbox" placeholder="Enter password">
<button id="btn" onclick="show()">Show</button>
</div>
<script>
let txt = document.getElementById("txtbox");
let btn = document.getElementById("btn");
function show() {
if (btn.textContent == "Show") {
txt.type = "text";
btn.textContent = "Hide";
}
else {
txt.type = "password";
btn.textContent = "Show";
}
}
</script>
</body>
Output
Click the Link to see the Output
https://vcode-cefc5c.gitlab.io/js/hidePassword.html
Concepts Used
DOM (Document Object Model)
getElementById()
innerText and textContent
value property
src and type attributes
Functions
Variables
Conditional statements (if...else)
Event handling (onclick, oninput)
String methods (replace())
Regular Expressions (/\s/g)
DOM element styling with JavaScript
What I Learned
By building these mini projects, I gained hands-on experience in selecting elements, updating content, modifying attributes, handling user interactions, and responding to events in real time. These projects strengthened my understanding of how JavaScript works with the DOM and gave me more confidence in creating interactive web applications.
Conclusion
These mini projects may look simple, but they helped me understand how JavaScript interacts with HTML through the DOM. While building them, I learned how to access elements, modify content and attributes, handle events, and create dynamic user experiences without reloading the page.
Every project taught me something new and improved my confidence in JavaScript. I'm excited to continue building more projects, exploring new concepts, and sharing my learning journey with you all.
Thank you for reading my blog! 😊
Top comments (1)
Nice!🔥