Name – M Lalit Aditya
Reg. No. – 22BCE3235
Web Programming
JavaScript DOM
1.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM</title>
</head>
<body>
<h2>Theme Park Entry Form</h2>
<form id="entryForm">
Age (Optional): <input type="number" id="age" name="age">
<br> Age Category*:
<select id="ageCategory" onchange="entryForm.validateAgeCategory()">
<option value="">Select...</option>
<option value="child">Child</option>
<option value="adult">Adult</option>
<option value="senior">Senior</option>
</select>
<br> Entry Category*:
<select id="entryCategory">
<option value="">Select...</option>
<option value="college">College</option>
<option value="family">Family</option>
</select>
<br> Group Size*: <input type="number" id="groupSize" name="groupSize">
<br>
<input type="submit" value="Submit">
</form>
<script>
class EntryForm {
constructor() {
this.age = document.getElementById("age");
this.ageCategory = document.getElementById("ageCategory");
this.entryCategory = document.getElementById("entryCategory");
this.groupSize = document.getElementById("groupSize");
Name – M Lalit Aditya
Reg. No. – 22BCE3235
this.error = document.getElementById("error");
this.fee = document.getElementById("fee");
}
validateAgeCategory() {
if (this.ageCategory.value == "child" && this.age.value >= 12) {
window.alert("Child category is for under 12 years old.");
} else if (this.ageCategory.value == "senior" && this.age.value < 60)
{
window.alert("Senior category is for 60 years old or older.");
} else if (this.ageCategory.value == "adult" && (this.age.value > 59
|| this.age.value < 12)) {
window.alert("Adult category is for ages 12 to 59.");
}
}
validateForm(event) {
event.preventDefault();
if (!this.ageCategory.value) {
window.alert("Please Select Your Age Category.");
} else if (!this.entryCategory.value){
window.alert("Please Select Your Entry Category");
} else if (!this.groupSize.value){
window.alert("Please Enter Your Group Size");
} else {
if (this.ageCategory.value == "child") {
window.alert("Entry fee: Rs. 300");
} else if (this.ageCategory.value == "adult") {
if (this.entryCategory.value == "college" && this.groupSize.value
> 15) {
window.alert("Entry fee: Rs. 400");
} else {
window.alert("Entry fee: Rs. 500");
}
} else {
window.alert("Entry fee: Rs. 450");
}
}
}
}
var entryForm = new EntryForm();
document.getElementById("entryForm").onsubmit = function (event) {
entryForm.validateForm(event)
};
</script>
</body>
</html>
Name – M Lalit Aditya
Reg. No. – 22BCE3235
Output:-
2.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Food Order Form</h2>
<form id="foodOrderForm">
Hotel Name: <input type="text" id="hotelName" name="hotelName">
<br>
Food Type:
<input type="radio" id="veg" name="foodType" value="veg"
onchange="foodOrderForm.displayFoodItems()">
<label for="veg">Veg</label>
<input type="radio" id="nonVeg" name="foodType" value="nonVeg"
onchange="foodOrderForm.displayFoodItems()">
<label for="nonVeg">Non-Veg</label>
<br>
</form>
<h3 id="selectedHotel"></h3>
<ul id="foodItems"></ul>
<script>
class FoodOrderForm {
constructor() {
this.vegItems = ["Paneer Tikka", "Aloo Gobi", "Dal Makhani"];
Name – M Lalit Aditya
Reg. No. – 22BCE3235
this.nonVegItems = ["Chicken Biryani", "Mutton Curry", "Fish
Fry"];
this.foodItems = document.getElementById("foodItems");
this.selectedHotel = document.getElementById("selectedHotel");
this.hotelName = document.getElementById("hotelName");
}
displayFoodItems() {
var foodType =
document.querySelector('input[name="foodType"]:checked').value;
this.foodItems.innerHTML = "";
this.selectedHotel.innerHTML = "Hotel - " + this.hotelName.value;
if (foodType == "veg") {
this.vegItems.forEach(item => this.addFoodItem(item, "green"));
} else {
this.nonVegItems.forEach(item => this.addFoodItem(item, "red"));
}
}
addFoodItem(item, color) {
var li = document.createElement("li");
li.textContent = item;
li.style.color = color;
li.style.fontWeight = "bold";
this.foodItems.appendChild(li);
}
}
var foodOrderForm = new FoodOrderForm();
</script>
</body>
</html>
Output:-
