1.
Create a form with the elements of Textboxes, Radio buttons, Checkboxes,
and so on. Write JavaScript code to validate the format in email, and mobile
number
in 10 characters, If a textbox has been left empty, popup an alert indicating
when
email, mobile number and textbox has been left empty.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<label>Languages:</label>
<input type="checkbox" id="english" name="language" value="english">
<label for="english">English</label>
<input type="checkbox" id="spanish" name="language" value="spanish">
<label for="spanish">Spanish</label><br><br>
<label for="mobile">Mobile Number:</label>
<input type="text" id="mobile" name="mobile"><br><br>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById("myForm").onsubmit = function(event) {
event.preventDefault();
// Get form values
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var mobile = document.getElementById("mobile").value;
// Validate email format
var emailRegex = /^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
if (!email.match(emailRegex)) {
alert("Invalid email format");
return;
// Validate mobile number (10 characters)
if (mobile.length !== 10 || !/^\d+$/.test(mobile)) {
alert("Mobile number must be 10 digits");
return;
}
// Check for empty textboxes
if (name.trim() === "" || email.trim() === "" || mobile.trim() === "") {
alert("Name, Email, and Mobile cannot be empty");
return;
// If all checks pass, you can submit the form
alert("Form submitted successfully!");
// Uncomment the line below to actually submit the form
// document.getElementById("myForm").submit();
};
</script>
</body>
</html>
Output:
2. Develop an HTML Form, which accepts any Mathematical expression. Write
JavaScript code to Evaluate the expression and Display the result.
<html>
<head>
<title>Mathematical Expression</title>
</head>
<body >
<form name = "form1">
<table>
<tr>
<td>Expression</td>
<td><input type = "text" name = "exptext" /></td>
</tr>
<tr>
<td>Result</td>
<td><input type = "text" name = "resulttext" /></td>
</tr>
<tr>
<td><input type = "button" value = "calculate" onclick =
"math_exp()" /></td>
</tr>
</table>
<script type = "text/javascript">
function math_exp()
var x = document.form1.exptext.value;
var result = eval(x);
document.form1.resulttext.value = result;
</script>
</form>
</body>
</html>
Output:
3. Create a page with dynamic effects. Write the code to include layers and
basic
animation.
<html>
<head>
<style>
.moveable{
position: absolute;
</style>
<script type = "text/javascript">
var x = 5;
var y = 5;
var dest_x = 300;
var dest_y = 300;
var interval = 10;
function moveImage()
if(x < dest_x)
x = x + interval;
if(y < dest_y)
y = y + interval;
document.getElementById("ufo").style.top = y + "px";
document.getElementById("ufo").style.left = x + "px";
if((x + interval < dest_x) && (y + interval < dest_y))
{
window.setTimeout("moveImage()", 100);
</script>
</head>
<body onload = "moveImage()">
<div id = "ufo" class = "moveable">
<img src = "C:\Users\sendil\Pictures\Camera Roll\
WIN_20230602_19_54_06_Pro.jpg" alt = "please link to a valid image" />
</div>
</body>
</html>
Output:
4. Write a JavaScript code to find the sum of N natural Numbers. (Use
userdefined
function)
<html>
<head>
<script type = "text/javascript">
var num = window.prompt("Enter the number:","");
var n = parseInt(num);
result = sumnaturalno(n);
window.alert("The sum of " + n + "natural number is" + result);
function sumnaturalno(n)
var i;
var sum = 0;
for(i = 1;i <= n; i++){
sum = sum + i;}
return (sum);
</script>
</head>
</html>
Output:
5. Write a JavaScript code block using arrays and generate the current date in
words, this should include the day, month and year.
<html>
<head>
<script type = "text/javascript">
var d = new Date();
var weekday = new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Satur
day");
var monthname = new
Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"
);
document.write(weekday[d.getDay()] + " ");
document.write(d.getDate() + ". ");
document.write(monthname[d.getMonth()] + " ");
document.write(d.getFullYear());
</script>
</head>
</body>
</html>
Output:
6. Create a form for Student information. Write JavaScript code to find Total,
Average, Result and Grade.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
function calc()
var m1,m2,m3,avg = 0,total = 0, result = "",grade = "";
m1 = parseInt(document.form1.wp.value);
m2 = parseInt(document.form1.sp.value);
m3 = parseInt(document.form1.cg.value);
total = m1+m2+m3;
avg = total/3;
if( m1 < 35 || m2 < 35 || m3 < 35)
result = "fail";
grade = "D";
}
else if(avg >= 75)
result = "Distinction";
grade = "A+";
else if(avg >= 60 && avg < 75)
result = "First class";
grade = "A";
else if(avg >= 50 && avg < 60)
result = "Second class";
grade = "B";
else if(avg >=35 && avg < 50)
result = "Pass class";
grade = "C";
else if (avg < 35)
result = "Fail";
Grade = "D";
document.form1.result.value = result;
document.form1.grade.value = grade;
document.form1.total.value = total;
document.form1.average.value = avg;
</script>
</head>
<body>
<form name = "form1">
<table border = "1">
<tr>
<td> Student Name</td>
<td><input type = "text" /></td>
</tr>
<tr>
<td colspan = "2" align = "center">Subject Marks</td>
</tr>
<tr>
<td>Web Programming</td>
<td><input type = "text" name = "wp" /></td>
</tr>
<tr>
<td>Computer Graphics</td>
<td><input type = "text" name = "cg" /></td>
</tr>
<tr>
<td>System Programming</td>
<td><input type = "text" name = "sp" /></td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type = "button"
onclick = "calc()" value = "calculte" /></td>
</tr>
<tr>
<td>Total</td>
<td><input type = "text" name = "total"/></td>
</tr>
<tr>
<td>Average</td>
<td><input type = "text" name = "average" /></td>
</tr>
<tr>
<td>Result</td>
<td><input type = "text" name = "result" /></td>
</tr>
<tr>
<td>Grade</td>
<td><input type = "text" name = "grade"/></td>
</tr>
</table>
</form>
</body>
</html>
Output:
Create a form for Employee information. Write JavaScript code to find DA,
HRA, PF, TAX, Gross pay, Deduction and Net pay.
<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
function calc()
var bp,DA,HRA,GP,PF,Tax,Deduction,NetPay,name,id,desg;
name = document.form1.firstname.value;
id = document.form1.userid.value;
desg = document.form1.designation.value;
bp = parseInt(document.form1.bp.value);
DA = bp * 0.5;
HRA = bp * 0.5;
GP = bp + DA + HRA;
PF = GP * 0.02;
Tax = GP * 0.01;
Deduction = Tax + PF;
NetPay = GP - Deduction;
document.form1.da.value = DA;
document.form1.hra.value = HRA;
document.form1.gp.value = GP;
document.form1.pf.value = PF;
document.form1.tax.value = Tax;
document.form1.deduction.value = Deduction;
document.form1.netpay.value = NetPay
</script>
</head>
<body >
<form name = "form1">
<table border = "1">
<tr>
<td>Name</td>
<td><input type = "text" name = "firstname" /></td>
</tr>
<tr>
<td>User ID</td>
<td><input type = "text" name = "userid" /></td>
</tr>
<tr>
<td>Designation</td>
<td><input type = "text" name = "designation" /></td>
</tr>
<tr>
<td>Basic Pay</td>
<td><input type = "text" name = "bp"></td>
</tr>
<tr>
<td colspan = "2" align = "center">
<input type = "button" name = "calculate" value = "Click Here To
Calculate"onclick ="calc()"></td>
</tr>
<tr>
<td>Dearness Allowance </td>
<td><input type = "text" name = "da"/></td>
</tr>
<tr>
<td>House Rent Allowance </td>
<td><input type = "text" name = "hra"></td>
</tr>
<tr>
<td>GP</td>
<td><input type = "text" name = "gp"></td>
</tr>
<tr>
<td>Provident Fund</td>
<td><input type = "text" name = "pf" /></td>
</tr>
<tr>
<td>Tax</td>
<td><input type = "text" name = "tax" /></td>
</tr>
<tr>
<td>Deduction</td>
<td><input type = "text" name = "deduction" /></td>
</tr>
<tr>
<td>NetPay</td>
<td><input type = "text" name = "netpay" /></td>
</tr>
</table>
</form>
</body>
</html>
Output:
