SOP 2: Write down question from book.
<!DOCTYPE html>
<html>
<head>
<title>Information Form</title>
</head>
<body>
<h3>Information Form</h3>
<form onsubmit="return validateForm()">
<label>Your Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
Address:<br>
<input type="text" id="address" name="address" placeholder="Permanent address"
required
onfocus="[Link]=''" onblur="[Link]='Permanent
address'"><br><br>
Contact:<br>
<input type="tel" id="contact" name="contact" pattern="[0-9]{10}" required
title="Enter a 10-digit number only"><br><br>
Email:<br>
<input type="text" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var name = [Link]("name").[Link]();
var address = [Link]("address").[Link]();
var contact = [Link]("contact").[Link]();
var email = [Link]("email").[Link]();
if (name === "" || address === "" || contact === "" || email === "") {
alert("All fields are required!");
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</body>
</html>
Output:
SOP 4:
Code: <!DOCTYPE html>
<html>
<head>
<title>Temperature Converter</title>
</head>
<body>
<h3>Temperature Converter</h3>
Enter Temperature: <input type="text" id="temp"><br><br>
<button onclick="toFahrenheit()">Convert to Fahrenheit</button>
<button onclick="toCelsius()">Convert to Celsius</button>
<script>
function toFahrenheit() {
var c = parseFloat([Link]("temp").value);
var f = (c * 9/5) + 32;
alert(c + " Celsius = " + f + " Fahrenheit");
}
function toCelsius() {
var f = parseFloat([Link]("temp").value);
var c = (f - 32) * 5/9;
alert(f + " Fahrenheit = " + c + " Celsius");
}
</script>
</body>
</html>
SOP 6:
Code :
<!DOCTYPE html>
<html>
<head>
<title>Average Marks and Grade</title>
</head>
<body>
<h3>Average Marks Calculator</h3>
Enter 6 subject marks:<br>
<input type="text" id="m1" placeholder="Subject 1"><br>
<input type="text" id="m2" placeholder="Subject 2"><br>
<input type="text" id="m3" placeholder="Subject 3"><br>
<input type="text" id="m4" placeholder="Subject 4"><br>
<input type="text" id="m5" placeholder="Subject 5"><br>
<input type="text" id="m6" placeholder="Subject 6"><br><br>
<button onclick="calculate()">Calculate Grade</button>
<script>
function calculate() {
var m1 = parseFloat([Link]("m1").value);
var m2 = parseFloat([Link]("m2").value);
var m3 = parseFloat([Link]("m3").value);
var m4 = parseFloat([Link]("m4").value);
var m5 = parseFloat([Link]("m5").value);
var m6 = parseFloat([Link]("m6").value);
var avg = (m1 + m2 + m3 + m4 + m5 + m6) / 6;
var grade = "";
if (avg >= 91 && avg <= 100)
grade = "A";
else if (avg >= 81)
grade = "B";
else if (avg >= 71)
grade = "C";
else
grade = "F";
alert("Average Marks: " + avg + "\nGrade: " + grade);
}
</script>
</body>
</html>
SOP 3
Code 👍
<!DOCTYPE html>
<html>
<head>
<title>Count Vowels</title>
</head>
<body>
<h3>Count Number of Vowels</h3>
Enter a string:<br>
<input type="text" id="userString">
<button onclick="countVowels()">Count Vowels</button>
<p id="result"></p>
<script>
function countVowels() {
var str = [Link]("userString").value;
var count = 0;
var vowels = "aeiouAEIOU";
for (var i = 0; i < [Link]; i++) {
if ([Link](str[i])) {
count++;
}
}
[Link]("result").innerHTML =
"Number of vowels: " + count;
}
</script>
</body>
</html>