JAVA SCRIPT ASSIGNMENT 2
1-> Create a button that changes the background colour of the page
when clicked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random BG Color Switcher</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
transition: background-color 0.4s ease;
#changeColor {
padding: 10px 20px;
font-size: 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
background-color: #444;
color: white;
#changeColor:hover {
background-color: #222;
</style>
Chiranth R Rao 1
JAVA SCRIPT ASSIGNMENT 2
</head>
<body>
<h2>Click to Surprise Your Screen</h2>
<button id="changeColor">Switch Background</button>
<script>
const colorBtn = document.querySelector('#changeColor');
function randomHexColor() {
const chars = '0123456789ABCDEF';
return '#' + Array.from({ length: 6 }, () => chars[Math.floor(Math.random() * 16)]).join('');
colorBtn.addEventListener('click', () => {
document.body.style.backgroundColor = randomHexColor();
});
</script>
</body>
</html>
Chiranth R Rao 2
JAVA SCRIPT ASSIGNMENT 2
2->Build a simple counter app with + and – buttons. Display the
value and update it as the buttons are clicked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Counter</title>
<style>
body{font-family:sans-serif;display:flex;height:100vh;justify-content:center;align-
items:center;background:#fff;}
.counter{border:2px solid #000;padding:15px;border-radius:6px;text-align:center;}
.value{font-size:40px;display:block;margin:10px 0;}
button{font-size:24px;padding:5px 15px;margin:0 5px;border:1px solid
#000;background:none;cursor:pointer;}
</style>
</head>
<body>
<div class="counter">
<button id="down">−</button>
<span class="value" id="val">0</span>
<button id="up">+</button>
</div>
<script>
let num=0,val=document.getElementById('val');
document.getElementById('up').onclick=()=>val.textContent=++num;
Chiranth R Rao 3
JAVA SCRIPT ASSIGNMENT 2
document.getElementById('down').onclick=()=>val.textContent=--num;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Text Swap</title>
<style>
#box{width:300px;height:150px;background:#ddd;display:flex;justify-content:center;align-
items:center;font-size:24px;border-radius:8px;cursor:pointer;user-
select:none;transition:background .3s;}
#box:hover{background:#f54747;}
</style>
</head>
<body>
<div id="box">Hover here!</div>
<script>
const box=document.getElementById('box');
box.onmouseover=()=>box.textContent='Thanks!';
Chiranth R Rao 4
JAVA SCRIPT ASSIGNMENT 2
box.onmouseout=()=>box.textContent='Hover here!';
</script>
</body>
</html>
4-> create a form with fields : name, email,age. Write a js program
to validate that.
<!DOCTYPE html>
<html>
<head>
<title>Form Check</title>
<script>
function checkForm(e){
e.preventDefault();
let n=f.name.value.trim(),em=f.email.value.trim(),a=f.age.value.trim();
if(!n) return alert("Enter name"),0;
if(!em.includes("@")) return alert("Invalid email"),0;
a=+a;
if(isNaN(a)||a<18||a>60) return alert("Age 18-60 only"),0;
msg.textContent="Form OK!";
</script>
Chiranth R Rao 5
JAVA SCRIPT ASSIGNMENT 2
</head>
<body>
<form name="f" onsubmit="checkForm(event)">
Name:<br><input name="name"><br><br>
Email:<br><input name="email"><br><br>
Age:<br><input name="age"><br><br>
<input type="submit" value="Send">
</form>
<p id="msg" style="color:green;font-weight:bold"></p>
</body>
</html>
Chiranth R Rao 6
JAVA SCRIPT ASSIGNMENT 2
5->On form submission, prevent pahe relode and display form data
below the form in a paragraph
<!DOCTYPE html>
<html>
<head>
<title>Single Data</title>
<script>
function showName(e){
e.preventDefault();
let n=nameInput.value.trim();
if(!n)return alert("Name cannot be empty");
msg.innerHTML=`<b>Submitted Data:</b><br>Name: ${n}`;
Chiranth R Rao 7
JAVA SCRIPT ASSIGNMENT 2
msg.style="color:green;font-weight:bold";
</script>
</head>
<body>
<form onsubmit="showName(event)">
Name:<br><input id="nameInput"><br><br>
<input type="submit" value="Submit">
</form>
<p id="msg"></p>
</body>
</html>
6->write a JS function using RegExp that checks weather a given
string is a valid phone number.
<!DOCTYPE html>
<html>
<head>
<title>Phone Validation</title>
<script>
Chiranth R Rao 8
JAVA SCRIPT ASSIGNMENT 2
function v(e){
e.preventDefault();
let p=phone.value.trim();
if(!/^\d{3}-\d{3}-\d{4}$/.test(p))return alert("Wrong Format , Phone format: 987-654-
3210");
msg.innerHTML=`<b>Submitted Phone:</b> ${p}`;
msg.style="color:green;font-weight:bold";
</script>
</head>
<body>
<form onsubmit="v(event)">
Phone:<br><input id="phone" placeholder="987-654-3210"><br><br>
<input type="submit" value="Submit">
</form>
<p id="msg"></p>
</body>
</html>
7-> Write a script to remove duplicate items from an array using a
Set.
<!DOCTYPE html>
Chiranth R Rao 9
JAVA SCRIPT ASSIGNMENT 2
<html>
<head>
<title>Remove Duplicates</title>
<script>
onload=()=>{let a=["apple","banana","apple","orange","banana"],u=[...new Set(a)];
output.innerHTML=`<b>Input Array:</b> [${a.join(", ")}]<br><b>Output Array:</b>
[${u.join(", ")}]`;
};
</script>
</head>
<body>
<h2>Remove Duplicate Items from Array Using Set</h2>
<div id="output" style="font-weight:bold;color:green"></div>
</body>
</html>
8->Create a Set that stores only unique numbers from an input
array and then find the size of the set.
<!DOCTYPE html>
<html>
<head>
<title>Unique Numbers Set Size</title>
<script>
Chiranth R Rao 10
JAVA SCRIPT ASSIGNMENT 2
function uniqueNumbersSetSize(arr) {
return new Set(arr).size;
function displayUniqueNumbersInfo() {
const inputArray = [5,42,5,9,42,11,33,11,7,33];
const uniqueSet = new Set(inputArray);
const uniqueCount = uniqueSet.size;
output.innerHTML = `
<strong>Input Array:</strong> [${inputArray.join(", ")}]<br/>
<strong>Unique Numbers:</strong> [${[...uniqueSet].join(", ")}]<br/>
<strong>Number of Unique Numbers:</strong> ${uniqueCount}
`;
window.onload = displayUniqueNumbersInfo;
</script>
</head>
<body>
<h2>Create a Set of Unique Numbers and Find Its Size</h2>
<div id="output" style="font-weight:bold;color:teal;"></div>
</body>
</html>
Chiranth R Rao 11
JAVA SCRIPT ASSIGNMENT 2
Chiranth R Rao 12
