<!
—program 01 create a form with the elements of textbox radio button
check box and others write java script code
to validate format of email and other pop ups -->
<!DOCTYPE html>
<html>
<head>
<title>form validation</title>
<script>
function validateform() {
//get field
var name = document.forms["myform"]["name"].value.trim();
var name = document.forms["myform"]["email"].value.trim();
var name = document.forms["myform"]["mobile"].value.trim();
//basic empty field
if (name==="") {
alert("name field is empty fill your name");
return false;
}
if (email==="") {
alert("email field is empty fill your email");
return false;
}
var emailpattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (!emailpattern.test(email)) {
alert("please enter valid email");
return false;
}
if (mobile ==="") {
alert("mobile field is empty");
return false;
}
var mobilepattern = /^[0-9]{10}$/;
if (!mobilepattern.test(mobile)) {
alert("please enter valid mobile number");
return false;
}
alert ("form submitted successfully !!!");
return true;
}
</script>
</head>
<body>
<h2><b><centre>user registration form</centre></b></h2>
<form name = "myform" onsubmit="return validateform()">
Name : <input type ="text" name="name"><br><br>
Email : <input type ="text" name="email"><br><br>
Mobile : <input type ="text" name="mobile"><br><br>
Gender :
<input type ="radio" name="gender" value="male">male
<input type ="radio" name="gender" value="female">female
<br><br>
Hobbies :
<input type ="checkbox" name="hobby1" value="reading">reading
<input type ="checkbox" name="hobby2" value="sport">sports
<br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Program 02
<!--Math Expression Evaluator-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Math Expression Evaluator</title>
</head>
<body>
<div>
<h1><center>Math Expression Evaluator</center></h1>
<form id="mathForm">
<label for="expression"><center>Enter a mathematical
expression:</center></label>
<br>
<input type="text" id="expression" name="expression"
required>
<br>
<br>
<button type="submit">Evaluate</button>
</form>
<h2>Result: <br>
<span id="result"></span></h2></body></h2>
</div>
<script>
document.getElementById('mathForm').addEventListener('submit',
function(event) {
event.preventDefault();
const expression =
document.getElementById('expression').value;
try {
const result = eval(expression);
document.getElementById('result').textContent = result;
} catch (error) {
document.getElementById('result').textContent = 'Error:
Invalid Expression';
}
});
</script>
</body>
</html>
Program 03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple JS Animation</title>
<style>
#box {
width: 50px;
height: 50px;
background-color: coral;
position: absolute;
top: 100px;
left: 0;
}
button {
margin-top: 200px;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="startAnimation()">Animate</button>
<script>
function startAnimation() {
const box = document.getElementById("box");
let position = 0;
const interval = setInterval(() => {
if (position >= 300) {
clearInterval(interval);
} else {
position += 2;
box.style.left = position + "px";
}
}, 10);
}
</script>
</body>
</html>
Program 04
<!--to find the sum of N natural numbers -->
<!-- s=n(n+1)/2-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script>
function natural() {
var n = parseInt(document.getElementById('user').value);
const result= (n * ( n + 1 ) ) / 2 ;
document.getElementById('result').textContent = "Sum: " +
result;
}
</script>
<h1>
<center>
sum of 'N' natural number's
</center>
</h1>
<br>
<input type="text" id="user" placeholder=" type in any natural
number" required>
<br><br><br>
<button onclick="natural()">click me to sum up the given natural
number</button>
<p id="result" style="font-weight: bold;"></p>
</body>
</html>
Program 05
<!-- prgm to display date in letter format using array -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script>
function display() {
const today = new Date()
const month =
['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']
;
const week = ['sun','mon','tue','wed','thu','fri','sat'];
const day = week[today.getDay()];
const thing = month[today.getMonth()];
const date = today.getDate()
const year = today.getFullYear()
const num = `${date},${day},${thing},${year}`;
document.getElementById('current').textContent= num;
}
</script>
<button onclick="display()">click here to get today's
date,day,month,year</button>
<p id="current" ></p>
</body>
</html>
Program 06
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>student marks Calculator</h1>
<input type="number" placeholder="subject 01" id="1" required>
<input type="number" placeholder="subject 02" id="2" required>
<input type="number" placeholder="subject 03" id="3" required>
<input type="number" placeholder="subject 04" id="4" required>
<input type="number" placeholder="subject 05" id="5" required>
<input type="number" placeholder="subject 06" id="6" required>
<br><br><br><br>
<button onclick="up()">calculate</button>
<p id="results"></p>
<script>
function up() {
const value = [
parseFloat(document.getElementById('1').value) ,
parseFloat(document.getElementById('2').value) ,
parseFloat(document.getElementById('3').value) ,
parseFloat(document.getElementById('4').value) ,
parseFloat(document.getElementById('5').value) ,
parseFloat(document.getElementById('6').value) ,
];
const total = value.reduce((sum, value) => sum + value,
0);
const average = total / value.length;
let grade;
if (average >= 90) grade = 'A+';
else if (average >= 80) grade = 'A';
else if (average >= 70) grade = 'B';
else if (average >= 60) grade = 'C';
else if (average >= 50) grade = 'D';
else grade = 'F';
document.getElementById('results').innerHTML = `
Total Marks: ${total}<br>
Average Marks: ${average.toFixed(2)}<br>
Grade: ${grade}
`;
}
</script>
</body>
</html>
