Task 1
Counter App
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Count App</title>
</head>
<body>
<h1 id="count">0</h1>
<button onclick="add()">+</button>
<button onclick="sub()">-</button>
<button onclick="reset()">Reset</button>
<script>
let count=0;
function add()
{
count++;
document.getElementById("count").innerText=count;
}
function sub()
{
count--;
document.getElementById("count").innerText=count;
}
function reset()
{
count=0;
document.getElementById("count").innerText=count;
}
</script>
</body>
</html>
Output
Increase the value
Decrease the value
Reset the value
Task 2
Change Text on Button Click
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<p id="demo">Hello</p>
<button onclick="myFunction()">click</button>
<script>
function myFunction() {
let text = document.getElementById("myInput");
document.getElementById("demo").innerHTML = "Welcome to all";
}
</script>
</body>
</html>
Output
Before Click
After Click
Task 3
Live Character Counter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" onInput="getString()" id="show">
<h1 id="result"></h1>
<script>
function getString()
{
const element=document.getElementById("show").value;
// const user=element.value;
document.getElementById("result").innerText=element.length;
// h1.innerText=user.length;
}
</script>
</body>
</html>
Output
Count the character
Task 4
Show/Hide Password
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/d137b0e967.js" crossorigin="anonymous"></script>
<style>
button{
border: none;
background-color: white;
}
</style>
</head>
<body>
<div style="border: 2px solid black; width: fit-content; padding: 5px; border-radius: 10px;">
<input id="password" type="password" style="border: none; outline-color: white;">
<button id ="eye" onclick="password()"><i class="fa-solid fa-eye"></i></button>
</div>
<script>
function password(){
const pass=document.getElementById("password");
if(pass.type=="password"){
pass.type="text";
const show = document.getElementById("eye")
show.innerHTML = '<i class="fa-solid fa-eye-low-vision"></i>'
}
else{
pass.type="password";
const hide = document.getElementById("eye")
hide.innerHTML='<i class="fa-solid fa-eye"></i>'
}
}
</script>
</body>
</html>
Output
Show password
Hide password
Task 5
Change background color on button click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background color</title>
</head>
<body id="changeColor">
<h1 id="vt">Welcome to all !!!!</h1>
<button onclick="veera()">Background color change</button>
<script>
function veera()
{
let h1=document.getElementById("vt");
let h2=document.getElementById("changeColor");
if(h1.innerText==="Welcome to all !!!!")
{
h1.innerText="veera";
h1.style.color="red";
h2.style.background ="yellow";
}
else{
h1.innerText="Welcome to all !!!!";
h1.style.color="blue";
h2.style.background = "white";
}
}
</script>
</body>
</html>
Output
Before click
After click
Task 6
Disable button after click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1 id="show"></h1>
<button id="click" onclick="clickIt()">Click Me!</button>
<script>
function clickIt() {
document.getElementById("click").disabled = true;
document.getElementById("show").innerText="Button Clicked";
}
</script>
</body>
</html>
Output
Button is disabled
Top comments (0)