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>
<script>
function validateForm() {
let name = [Link]("name").[Link]();
let email = [Link]("email").[Link]();
let mobile = [Link]("mobile").[Link]();
if (!name || !email || !mobile) {
alert("All fields are required!");
return false;
}
if (!/^[\w.-]+@[\w.-]+\.\w{2,}$/.test(email)) {
alert("Invalid email format!");
return false;
}
if (!/^\d{10}$/.test(mobile)) {
alert("Mobile number must be exactly 10 digits!");
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body>
<h2>Student Form</h2>
<form onsubmit="return validateForm()">
Name: <input type="text" id="name"><br><br>
Email: <input type="text" id="email"><br><br>
Mobile: <input type="text" id="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" value="Sports">Sports
<input type="checkbox" value="Music">Music
<input type="checkbox" value="Reading">Reading<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
LIKHITHA CHOWDARY 1
2. Develop an HTML Form, which accepts any Mathematical expression. Write
JavaScript code to Evaluate the expression and Display the result.
<!DOCTYPE html>
<html>
<head>
<title>Math Evaluator</title>
<script>
function calc() {
let exp = [Link]("exp").value;
if (exp === "") { alert("Enter an expression!"); return; }
[Link]("res").innerText = "Result: " + eval(exp);
}
</script>
</head>
<body>
<h3>Math Expression</h3>
<input type="text" id="exp" placeholder="e.g. 5+3*2">
<button onclick="calc()">Evaluate</button>
<p id="res"></p>
</body>
</html>
3. Create a page with dynamic effects. Write the code to include layers and basic
animation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layers & Simple Animation</title>
<style>
body { font-family: Arial; padding:20px; }
/* Layers (overlapping boxes) */
.layer {
width:140px; height:100px;
position:absolute;
top:80px;
border-radius:6px;
color:white; display:flex; align-items:center; justify-content:center;
font-weight:bold;
}
#layer1 { left:60px; background:#e74c3c; z-index:1; }
#layer2 { left:110px; background:#3498db; z-index:2; }
#layer3 { left:160px; background:#27ae60; z-index:3; }
/* Animated box */
#animBox {
width:60px; height:60px; background:#f39c12;
position:relative; margin-top:240px; border-radius:6px;
}
</style>
</head>
<body>
LIKHITHA CHOWDARY 2
<h2>Layers & Basic Animation (Simple)</h2>
<!-- overlapping layers -->
<div id="layer1" class="layer">Layer 1</div>
<div id="layer2" class="layer">Layer 2</div>
<div id="layer3" class="layer">Layer 3</div>
<br><br><br><br><br><br>
<!-- controls -->
<button onclick="swapTop()">Swap Top Layer</button>
<button onclick="startStop()">Start/Stop</button>
<!-- animated box -->
<div id="animBox"></div>
<script>
// swap z-index of layer1 and layer3
function swapTop(){
const a = [Link]('layer1');
const b = [Link]('layer3');
const az = [Link] || getComputedStyle(a).zIndex;
[Link] = [Link] || getComputedStyle(b).zIndex;
[Link] = az;
}
// simple left-right animation using setInterval
let anim = null;
let pos = 0, dir = 1;
function animate(){
const box = [Link]('animBox');
pos += 4 * dir;
[Link] = pos + 'px';
if (pos > 300) dir = -1;
if (pos < 0) dir = 1;
}
function startStop(){
if (anim === null) anim = setInterval(animate, 30);
else { clearInterval(anim); anim = null; }
}
// start animation on page load
[Link] = startStop;
</script>
</body>
</html>
4. Write a JavaScript code to find the sum of N natural Numbers. (Use userdefined
function)
<!DOCTYPE html>
<html>
<head>
<title>Sum of N Natural Numbers</title>
<script>
function findSum(n) {
let sum = 0;
for (let i = 1; i <= n; i++) sum += i;
return sum;
}
LIKHITHA CHOWDARY 3
function calculate() {
let n = parseInt([Link]("num").value);
if (isNaN(n) || n <= 0) {
alert("Enter a positive number");
return;
}
[Link]("result").innerText = "Sum = " + findSum(n);
}
</script>
</head>
<body>
<h3>Sum of N Natural Numbers</h3>
Enter N: <input type="number" id="num">
<button onclick="calculate()">Find Sum</button>
<p id="result"></p>
</body>
</html>
5. Write a JavaScript code block using arrays and generate the current date in words,
this should include the day, month and year.
<!DOCTYPE html>
<html>
<head>
<title>Date in Words</title>
<script>
function showDate() {
let days =
["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
let months =
["January","February","March","April","May","June","July","August","September","Octob
er","November","December"];
let d = new Date();
let result = days[[Link]()] + ", " + months[[Link]()] + " " + [Link]() + ", "
+ [Link]();
[Link]("date").innerText = result;
}
</script>
</head>
<body onload="showDate()">
<h3>Current Date in Words</h3>
<p id="date"></p>
</body>
</html>
6. Create a form for Student information. Write JavaScript code to find Total,
Average, Result and Grade.
<!DOCTYPE html>
<html>
<head>
<title>Student Result</title>
<script>
function calculate() {
LIKHITHA CHOWDARY 4
let m1 = parseInt([Link]("m1").value) || 0;
let m2 = parseInt([Link]("m2").value) || 0;
let m3 = parseInt([Link]("m3").value) || 0;
let total = m1 + m2 + m3;
let avg = total / 3;
let result = (m1 >= 35 && m2 >= 35 && m3 >= 35) ? "Pass" : "Fail";
let grade = "";
if (result === "Pass") {
if (avg >= 85) grade = "A";
else if (avg >= 60) grade = "B";
else if (avg >= 35) grade = "C";
} else {
grade = "No Grade";
}
[Link]("total").innerText = "Total: " + total;
[Link]("avg").innerText = "Average: " + [Link](2);
[Link]("result").innerText = "Result: " + result;
[Link]("grade").innerText = "Grade: " + grade;
}
</script>
</head>
<body>
<h3>Student Information</h3>
Name: <input type="text" id="name"><br><br>
Marks1: <input type="number" id="m1"><br><br>
Marks2: <input type="number" id="m2"><br><br>
Marks3: <input type="number" id="m3"><br><br>
<button onclick="calculate()">Calculate</button>
<p id="total"></p>
<p id="avg"></p>
<p id="result"></p>
<p id="grade"></p>
</body>
</html>
7. Create a form for Employee information. Write JavaScript code to find DA, HRA,
PF, TAX, Gross pay, Deduction and Net pay.
<!DOCTYPE html>
<html>
<head>
<title>Employee Salary</title>
<script>
function calculate() {
let basic = parseFloat([Link]("basic").value) || 0;
let da = 0.10 * basic; // 10% of basic
let hra = 0.08 * basic; // 8% of basic
let pf = 0.05 * basic; // 5% of basic
let tax = 0.02 * basic; // 2% of basic
let gross = basic + da + hra;
let deduction = pf + tax;
let net = gross - deduction;
[Link]("da").innerText = "DA: " + [Link](2);
LIKHITHA CHOWDARY 5
[Link]("hra").innerText = "HRA: " + [Link](2);
[Link]("pf").innerText = "PF: " + [Link](2);
[Link]("tax").innerText = "TAX: " + [Link](2);
[Link]("gross").innerText = "Gross Pay: " + [Link](2);
[Link]("ded").innerText = "Deduction: " + [Link](2);
[Link]("net").innerText = "Net Pay: " + [Link](2);
}
</script>
</head>
<body>
<h3>Employee Information</h3>
Name: <input type="text" id="name"><br><br>
Basic Pay: <input type="number" id="basic"><br><br>
<button onclick="calculate()">Calculate</button>
<p id="da"></p>
<p id="hra"></p>
<p id="pf"></p>
<p id="tax"></p>
<p id="gross"></p>
<p id="ded"></p>
<p id="net"></p>
</body>
</html>
LIKHITHA CHOWDARY 6
POSSIBLE VIVA
Program 1: HTML Form with JavaScript Validation
1. What HTML input elements are used in this form?
o Textboxes, radio buttons, checkboxes, email input, number input.
2. How do you validate an email format in JavaScript?
o Using a regular expression like /^\S+@\S+\.\S+$/.
3. What does isNaN() function check?
o It checks if the value is "Not a Number".
4. How do you show a message box in JavaScript?
o Using the alert("message") function.
5. What happens if a textbox is left empty?
o JavaScript displays an alert message.
6. What does [Link]() do?
o It selects an HTML element by its ID.
Program 2: Evaluate Mathematical Expression
1. Which JavaScript function is used to evaluate expressions?
o eval()
2. What are the risks of using eval()?
o It can execute malicious code if input is not validated.
3. How do you get a value from a text input?
o Using [Link]("id").value.
4. How do you display the result on the webpage?
o Using innerHTML or alert().
5. Can we evaluate expressions like 3*5+2 using your code?
o Yes.
6. What data type is returned by eval()?
o Usually a number (depends on expression).
Program 3: Page with Dynamic Effects
1. What is the purpose of setInterval() in JavaScript?
o It runs a function repeatedly at a specified time interval.
2. What does z-index property control?
o The stacking order of overlapping elements.
3. What is the use of position: absolute?
o It positions an element exactly using top, left, etc.
4. How can you animate a layer using JavaScript?
o By changing its style properties over time.
5. What is DOM manipulation?
o Modifying HTML elements using JavaScript.
6. Can JavaScript change the style of HTML elements?
o Yes, using .style properties.
Program 4: Sum of N Natural Numbers
1. What is the formula for sum of N natural numbers?
o n * (n + 1) / 2
2. How is a user-defined function created in JavaScript?
o Using function functionName() {}
3. What is the difference between var, let, and const?
o Scope and re-declaration behavior differ.
4. How do you convert string input to integer?
o Using parseInt() or Number().
LIKHITHA CHOWDARY 7
5. How do you show the output on the webpage?
o Using [Link]().innerHTML
6. What is a loop, and which loop did you use?
o A control structure to repeat code; usually a for loop.
Program 5: Date in Words using Arrays
1. What is the output of new Date()?
o The current date and time.
2. What does getDay() return?
o Index of the current day (0 = Sunday).
3. How did you convert a number (0–6) to a weekday name?
o Using an array of day names.
4. How are arrays used in this program?
o To store names of days and months.
5. What does getMonth() return?
o Month index (0 = January).
6. Can we update the date dynamically?
o Yes, using JavaScript.
Program 6: Student Result & Grade
1. How do you calculate the average of three subjects?
o Sum of marks / 3
2. What is the logic to decide Pass or Fail?
o All marks >= 35 = Pass
3. How are grades assigned in this program?
o Using if-else conditions based on average.
4. What is the role of parseInt() here?
o To convert string input to integers.
5. How do you display results dynamically?
o Using innerHTML.
6. What happens if marks are missing or invalid?
o An alert message is shown.
Program 7: Employee Salary Calculation
1. What are DA, HRA, PF, and TAX?
o Salary components (Allowances and Deductions).
2. How do you calculate Gross Pay?
o Basic + DA + HRA
3. What percentage was used for each salary component?
o DA=40%, HRA=20%, PF=12%, TAX=10%
4. How do you calculate Total Deduction?
o PF + TAX
5. What is Net Pay?
o Gross Pay – Total Deductions
6. How is conditional formatting used here?
o Using if conditions (for validations).
LIKHITHA CHOWDARY 8
