FORM VALIDATION
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
body{
font-family: Arial;
margin: 20px;
}
.error{
color: red;
font-size: 0.9em;
}
.success{
color: green;
}
</style>
</head>
<body>
<h1>Form Validation</h1>
<form id="validationForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name">
<div id="nameError" class="error"></div>
<br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" placeholder="example@[Link]">
<div id="emailError" class="error"></div>
<br>
<label for="phone">Phone Number:</label><br>
<input type="text" id="phone" name="phone" placeholder="123-456-7890">
<div id="phoneError" class="error"></div>
<br>
<button type="submit">Submit</button>
</form>
<div id="formStatus" class="success"></div>
<script>
const form = [Link]("validationForm");
const nameInput = [Link]("name");
const emailInput = [Link]("email");
const phoneInput = [Link]("phone");
const nameError = [Link]("nameError");
const emailError = [Link]("emailError");
const phoneError = [Link]("phoneError");
const formStatus = [Link]("formStatus");
[Link]("submit", function(event) {
[Link]();
let isValid = true;
const nameValue = [Link]();
if (nameValue === "" || !/^[a-zA-Z\s]+$/.test(nameValue)) {
[Link] = "Please enter a valid name.";
isValid = false;
} else [Link] = "";
const emailValue = [Link]();
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if () {
[Link] = "Enter a valid email.";
isValid = false;
} else [Link] = "";
const phoneValue = [Link]();
const phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
if (phoneValue !== "" && ) {
[Link] = "Enter valid phone (123-456-7890).";
isValid = false;
} else [Link] = "";
if (isValid) [Link] = "Form submitted successfully!";
else [Link] = "Fix errors before submitting.";
});
</script>
</body>
</html>
CALCULATOR HTML
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<table border>
<tr><td colspan="4"><input type="text" id="res" size="16" onfocus="[Link]();"></td></tr>
<tr>
<td><button onclick="f('0')">0</button></td>
<td><button onclick="f('1')">1</button></td>
<td><button onclick="f('2')">2</button></td>
<td><button onclick="f('+')">+</button></td>
</tr>
<tr>
<td><button onclick="f('3')">3</button></td>
<td><button onclick="f('4')">4</button></td>
<td><button onclick="f('5')">5</button></td>
<td><button onclick="f('-')">-</button></td>
</tr>
<tr>
<td><button onclick="f('6')">6</button></td>
<td><button onclick="f('7')">7</button></td>
<td><button onclick="f('8')">8</button></td>
<td><button onclick="f('*')">*</button></td>
</tr>
<tr>
<td><button onclick="f('9')">9</button></td>
<td><button onclick="f('--')">+/-</button></td>
<td><button onclick="f('=')">=</button></td>
<td><button onclick="f('/')">/</button></td>
</tr>
<tr>
<td colspan="4"><button onclick="f('c')" style="width:100%">Clear</button></td>
</tr>
</table>
</body>
</html>
CALCULATOR JAVASCRIPT
let opr = "", num = 0;
function f(d) {
let res = [Link]("res");
if (d === "c") return [Link] = "";
if (d === "--") return [Link] = -[Link] || "";
if (["+", "-", "*", "/"].includes(d)) {
opr = d;
num = parseFloat([Link]);
return [Link] = d;
}
if (d === "=") {
let num1 = parseFloat([Link]);
let ans = eval(num + opr + num1);
return [Link] = (opr === "/" ? parseInt(ans) : ans);
}
[Link] = isNaN([Link]) ? d : [Link] + d;
}
GRADE CALCULATOR
class Student {
constructor(name, usn, branch, marks) {
[Link] = name;
[Link] = usn;
[Link] = branch;
[Link] = marks;
}
calcPercentage() {
return [Link]((a, b) => a + b) / [Link];
}
calcGrade() {
const p = [Link]();
if (p >= 90) return 'A';
if (p >= 75) return 'B';
if (p >= 60) return 'C';
if (p >= 50) return 'D';
return 'F';
}
display() {
[Link](`Name: ${[Link]}`);
[Link](`USN: ${[Link]}`);
[Link](`Branch: ${[Link]}`);
[Link](`Marks: ${[Link](', ')}`);
[Link](`Percentage: ${[Link]().toFixed(2)}%`);
[Link](`Grade: ${[Link]()}`);
}
}
const s1 = new Student('Alice Johnson', 'USN12345', 'CSE', [85, 92, 78, 88, 90, 84]);
const s2 = new Student('Bob Smith', 'USN67890', 'EEE', [72, 65, 80, 75, 70, 68]);
[Link]();
[Link]('-------------------');
[Link]();
CLASS TIMETABLE
<!DOCTYPE html>
<html>
<head>
<title>Class Timetable</title>
<style>
table { width:100%; border-collapse:collapse; }
th, td { padding:10px; border:1px solid black; text-align:center; }
tr:nth-child(even) { background:#f2f2f2; }
</style>
</head>
<body>
<h1>Class Timetable</h1>
<table>
<tr><th>Time</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th></tr>
<tr><td>8-9</td><td>AWEB</td><td>OOP</td><td>DS</td><td>DCCO</td><td>Maths</td></tr>
<tr><td>9-10</td><td>C++ Lab</td><td>AWEB Lab</td><td>DS Lab</td><td>DCCO Lab</td><td>-</td></tr>
<tr><td colspan="6">Break</td></tr>
<tr><td>10-11</td><td>DCCO</td><td>DS</td><td>OOP</td><td>AWEB</td><td>Maths</td></tr>
<tr><td>11-12</td><td>OOP</td><td>AWEB</td><td>CS</td><td>Maths</td><td>DS</td></tr>
<tr><td colspan="6">Lunch Break</td></tr>
<tr><td>1-2</td><td>DCCO</td><td>DS</td><td>AWEB</td><td>OOP</td><td>Maths</td></tr>
<tr><td>2-3</td><td>Maths</td><td>OOP</td><td>AWEB</td><td>DS</td><td>DCCO</td></tr>
</table>
</body>
</html>
CSS SELECTORS DEMO
<!DOCTYPE html>
<html>
<head>
<style>
p { color: red; }
.highlight { background: yellow; }
#unique { background: pink; }
a[target] { color: blue; }
article p { font-style: italic; }
section > div { text-align: center; }
h2 + p { color: green; }
a:hover { text-decoration: underline; }
h1, h2 { text-decoration: dashed; }
</style>
</head>
<body>
<h1>CSS Selector Demo</h1>
<p>Simple paragraph</p>
<div class="highlight">Highlight class</div>
<div id="unique">Unique ID</div>
<a href="" target="_blank">Link with target</a>
<article>
<h2>Heading</h2>
<p>Paragraph inside article</p>
</article>
</body>
</html>