Scribd
Upload
9 views5 pages

LAB TASK Events

The document contains 3 code examples demonstrating the use of JavaScript and the DOM to manipulate web pages and elements. The first example updates a user's name and color selection on a form submission. The second allows changing the color of a box by manipulating RGB number inputs. The third creates a counting game that initializes and updates bulb elements based on number inputs.

Uploaded by

Rahul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views5 pages

LAB TASK Events

The document contains 3 code examples demonstrating the use of JavaScript and the DOM to manipulate web pages and elements. The first example updates a user's name and color selection on a form submission. The second allows changing the color of a box by manipulating RGB number inputs. The third creates a counting game that initializes and updates bulb elements based on number inputs.

Uploaded by

Rahul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Name – M Lalit Aditya

Reg. No. – 22BCE3235

Web Programming

JavaScript DOM
1.
Code:-
<!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>
<h2>MAMA mia!</h2>

<form id="userForm">
User Name: <input type="text" id="userName" name="userName" >
<br>
Favourite Colour :
<select id="favouriteColour" name="favouriteColour">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="black">Black</option>
<option value="Orange">Orange</option>
</select>
<br>
<input type="submit" value="Submit">
</form>

<h3 id="displayUserName"></h3>

<script>
document.getElementById("userForm").onsubmit = function(event) {
event.preventDefault();

if(!document.getElementById("userName").value) {
window.alert("Please enter username.");
return;
}

var userName = document.getElementById("userName").value;


Name – M Lalit Aditya
Reg. No. – 22BCE3235
var favouriteColour =
document.getElementById("favouriteColour").value;
if(document.getElementById("favouriteColour").value=="black")
{
var displayUserName =
document.getElementById("displayUserName");
displayUserName.textContent = "User Name: " + userName;
displayUserName.style.backgroundColor = favouriteColour;
displayUserName.style.color = "white";
}
else{
var displayUserName =
document.getElementById("displayUserName");
displayUserName.textContent = "User Name: " + userName;
displayUserName.style.backgroundColor = favouriteColour;

}
}
</script>
</body>
</html>

Output:-

2.
Code:-
<!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>
#colordisplay {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
Name – M Lalit Aditya
Reg. No. – 22BCE3235
</head>
<body>

<h2>Color Mixing </h2>

<form id="formcolor">
Red : <input type="number" id="red" name="red" min="0" max="255"
onchange="updatecolor()">
<br><br>
Green : <input type="number" id="green" name="green" min="0" max="255"
onchange="updatecolor()">
<br><br>
Blue : <input type="number" id="blue" name="blue" min="0" max="255"
onchange="updatecolor()">
<br><br>
</form>
<br>
<div id="colordisplay"></div>

<script>
function updatecolor() {
var r = document.getElementById("red").value;
var g = document.getElementById("green").value;
var b = document.getElementById("blue").value;

var colordisplay = document.getElementById("colordisplay");


colordisplay.style.backgroundColor = "rgb(" + r + "," + g + "," +
b + ")";
}
</script>
</body>
</html>

Output:-
Name – M Lalit Aditya
Reg. No. – 22BCE3235
Q3.)
CODE: -
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counting Game</title>
<style>
.bulb {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ccc;
display: inline-block;
margin: 5px;
}

.glow {
background-color: rgb(241, 171, 58);
}
</style>
</head>

<body>

<h1>Mathematics Counting Game for Kindergarden</h1>

<label for="numberInput">Enter the total number of bulbs:</label>


<input type="number" id="totalBulbs" min="0" max="1000" value="1"
oninput="initializeBulbs()">
<br>
<label for="numberInput">Enter the number of bulbs to turn on:</label>
<input type="number" id="glowBulbs" min="0" max="1000" value="1"
oninput="updateBulbs()">

<div id="bulbContainer"></div>

<script>
function initializeBulbs() {
var totalBulbs =
parseInt(document.getElementById("totalBulbs").value);
var bulbContainer = document.getElementById("bulbContainer");

// Clear all existing bulbs


bulbContainer.innerHTML = '';
Name – M Lalit Aditya
Reg. No. – 22BCE3235

// Create new bulbs


for (var i = 0; i < totalBulbs; i++) {
var bulb = document.createElement("div");
bulb.classList.add("bulb");
bulbContainer.appendChild(bulb);
}
}

function updateBulbs() {
var glowBulbs =
parseInt(document.getElementById("glowBulbs").value);

if (glowBulbs < 0 || glowBulbs > 1000) {


alert("Please enter a number between 1 and 1000.");
return;
}

var bulbs = document.querySelectorAll(".bulb");


bulbs.forEach((bulb, index) => {
if (index < glowBulbs) {
bulb.classList.add("glow");
} else {
bulb.classList.remove("glow");
}
});
}
</script>

</body>

</html>

OUTPUT: -

You might also like