1.
Simple Calculator
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
</head>
<body>
<input type="number" id="num1" placeholder="Enter number 1">
<input type="number" id="num2" placeholder="Enter number 2">
<button onclick="calculate('+')">+</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('*')">×</button>
<button onclick="calculate('/')">÷</button>
<div id="result"></div>
<script>
function calculate(op) {
var num1 = parseFloat([Link]('num1').value);
var num2 = parseFloat([Link]('num2').value);
var result;
switch (op) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
[Link]('result').innerText = 'Result: ' + result;
</script>
</body>
</html>
2. Voting System
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voting System</title>
</head>
<body>
<h3>Select Your Candidate:</h3>
<input type="radio" id="candidate1" name="candidate" value="Candidate 1">
<label for="candidate1">Candidate 1</label><br>
<input type="radio" id="candidate2" name="candidate" value="Candidate 2">
<label for="candidate2">Candidate 2</label><br>
<input type="radio" id="candidate3" name="candidate" value="Candidate 3">
<label for="candidate3">Candidate 3</label><br>
<button onclick="vote()">Vote</button>
<p id="confirmation"></p>
<script>
function vote() {
var selectedCandidate = [Link]('input[name="candidate"]:checked');
if (selectedCandidate) {
[Link]('confirmation').innerText = 'You voted for: ' +
[Link];
} else {
alert('Please select a candidate.');
</script>
</body>
</html>
3. Student Grade Checker
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grade Checker</title>
</head>
<body>
<input type="number" id="score" placeholder="Enter Score">
<button onclick="checkGrade()">Check Grade</button>
<p id="grade"></p>
<script>
function checkGrade() {
var score = [Link]('score').value;
var grade;
if (score >= 80 && score <= 100) {
grade = 'A';
} else if (score >= 60 && score < 80) {
grade = 'B';
} else if (score >= 50 && score < 60) {
grade = 'C';
} else if (score >= 40 && score < 50) {
grade = 'D';
} else {
grade = 'F';
[Link]('grade').innerText = 'Grade: ' + grade;
</script>
</body>
</html>
4. Image Gallery with Buttons
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
</head>
<body>
<img id="gallery" src="[Link]" width="300" height="200">
<br>
<button onclick="nextImage()">Next</button>
<button onclick="previousImage()">Previous</button>
<script>
var images = ['[Link]', '[Link]', '[Link]'];
var currentIndex = 0;
function nextImage() {
currentIndex = (currentIndex + 1) % [Link];
[Link]('gallery').src = images[currentIndex];
function previousImage() {
currentIndex = (currentIndex - 1 + [Link]) % [Link];
[Link]('gallery').src = images[currentIndex];
</script>
</body>
</html>
5. Registration Form with Validation
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
<span id="errorMessages" style="color: red;"></span>
<script>
function validateForm() {
var name = [Link]('name').value;
var email = [Link]('email').value;
var password = [Link]('password').value;
var errorMessages = '';
if (!name) {
errorMessages += 'Name is required.<br>';
}
if () {
errorMessages += 'Invalid email address.<br>';
if ([Link] < 6) {
errorMessages += 'Password must be at least 6 characters long.<br>';
if (errorMessages) {
[Link]('errorMessages').innerHTML = errorMessages;
return false; // Prevent form submission
return true; // Allow form submission
</script>
</body>
</html>