Scribd
Upload
2 views14 pages

Assignment 2

The document contains multiple HTML tasks including a number sorter, a speed checker, and an odd/even checker, each with corresponding JavaScript functions for processing user input. It also includes an event management system with login and registration forms, along with validation scripts to ensure proper input. The overall structure emphasizes user interaction through forms and dynamic content updates based on user actions.

Uploaded by

love020weii
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views14 pages

Assignment 2

The document contains multiple HTML tasks including a number sorter, a speed checker, and an odd/even checker, each with corresponding JavaScript functions for processing user input. It also includes an event management system with login and registration forms, along with validation scripts to ensure proper input. The overall structure emphasizes user interaction through forms and dynamic content updates based on user actions.

Uploaded by

love020weii
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Assignment 2.

1 22BDS0233

TASK 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Sorter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: rgb(201, 189, 212);
}
label {
display: block;
margin-bottom: 5px;
background-color: rgb(130, 161, 109);
}
input[type="number"] {
width: 100px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
margin-right: 10px;
cursor: pointer;
}
#output {
margin-top: 20px;
}
</style>
</head>
<body>
<h3>Input section</h3>
<label>Enter numbers:</label>
<input type="number" id="num1">
<input type="number" id="num2">
<input type="number" id="num3">
<!-- Add more input fields as needed -->

<button onclick="sortAscending()">Sort Ascending</button>


<br>
<button onclick="sortDescending()">Sort Descending</button>

<div id="output"></div>

<script>
function sortAscending() {
var nums = [];
nums.push(parseFloat(document.getElementById('num1').value));
nums.push(parseFloat(document.getElementById('num2').value));
nums.push(parseFloat(document.getElementById('num3').value));
// Add more numbers as needed

nums = nums.filter(num => !isNaN(num)); // Remove NaN values


nums.sort(function(a, b) {
return a - b;
});

document.getElementById('output').innerText = "Sorted Ascending: "


+ nums.join(", ");
}

function sortDescending() {
var nums = [];
nums.push(parseFloat(document.getElementById('num1').value));
nums.push(parseFloat(document.getElementById('num2').value));
nums.push(parseFloat(document.getElementById('num3').value));
// Add more numbers as needed

nums = nums.filter(num => !isNaN(num)); // Remove NaN values


nums.sort(function(a, b) {
return b - a;
});

document.getElementById('output').innerText = "Sorted Descending: "


+ nums.join(", ");
}
</script>

</body>
</html>
TASK2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>multi task</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: justify;
}
#result {
margin-top: 20px;
}
input[type="number"] {
padding: 8px;
margin: 10px;
}
button {
padding: 10px 20px;
background-color: #739ed2;
color: #fff;
border: none;
cursor: pointer;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>

<h2>Enter three numbers:</h2>


<input type="number" id="num1" placeholder="Enter number 1"><br><br>
<input type="number" id="num2" placeholder="Enter number 2"><br><br>
<input type="number" id="num3" placeholder="Enter number 3"><br><br>
<button onclick="calculate()">Calculate</button>

<div id="result"></div>

<script>
function calculate() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var num3 = parseFloat(document.getElementById('num3').value);

var numbers = [num1, num2, num3];


var max = Math.max.apply(null, numbers);
var ascending = numbers.slice().sort(function(a, b){return a-
b});
var descending = numbers.slice().sort(function(a, b){return b-
a});

document.getElementById('result').innerHTML =
'Maximum: ' + max + '<br>' +
'Ascending: ' + ascending.join(', ') + '<br>' +
'Descending: ' + descending.join(', ');
}
</script>

<h2>Speed Checker</h2>

<input type="number" id="speedInput" placeholder="Enter speed...">


<button onclick="checkSpeed()">Check Speed</button>
<p id="result"></p>

<script>
function checkSpeed() {
var speed = document.getElementById("speedInput").value;
var penaltyPoints = 0;

if (speed < 70) {


document.getElementById("result").innerHTML = "Good Safe
Driving";
} else if (speed >= 70 && speed <= 120) {
penaltyPoints = Math.floor((speed - 70) / 5);
document.getElementById("result").innerHTML = "Speed Limit
Crossed by Penalty Point: " + penaltyPoints;
} else {
document.getElementById("result").innerHTML = "License
Suspended";
}
}
</script>
<h2>Odd or Even Checker</h2>
<input type="number" id="numberInput" placeholder="Enter a number">
<button onclick="checkOddOrEven()">Check</button>
<div id="result"></div>

<script>
function checkOddOrEven() {
var number = document.getElementById("numberInput").value;
var resultElement = document.getElementById("result");

if (number % 2 === 0) {
resultElement.textContent = number + " is an even number.";
} else {
resultElement.textContent = number + " is an odd number.";
}
}
</script>

</body>
</html>
TASK 3
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Event Management</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: rgb(201, 189, 212);
text-decoration: aqua;
}
</style>
</head>
<body>
<h1>Welcome to Event Management Website</h1>
<a href="login.html">Login</a>
<a href="event.html">Event Registration</a>
</body>
</html>

LOGIN.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Login</title>
<script src="login_validation.js" defer></script>
<style>
body{
font-family: Arial, sans-serif;
margin: 20px;
background-color: rgb(201, 189, 212);
text-decoration: rgb(97, 133, 133);
}
</style>
</head>
<body>
<h2>Login</h2>
<form id="loginForm" onsubmit="return validateLoginForm()">
Username: <input type="text" id="username" name="username"><br>
Password: <input type="password" id="password"
name="password"><br>
<button type="submit">Login</button>
</form>
</body>
</html>

login_validation.js

function validateLoginForm() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

if (username.trim() === '' || password.trim() === '') {


alert('Username and Password cannot be empty');
return false;
}

return true}

event.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Event Registration</title>
<script src="event_registration_validation.js" defer></script>
<script>
function validateForm() {
var firstName = document.forms["registrationForm"]
["first_name"].value;
var lastName = document.forms["registrationForm"]
["last_name"].value;
var password = document.forms["registrationForm"]
["password"].value;
var confirmPassword = document.forms["registrationForm"]
["confirm_password"].value;
var phone = document.forms["registrationForm"]
["phone"].value;
var email = document.forms["registrationForm"]
["email"].value;

// Empty field validation


if (firstName === "" || lastName === "" || password === ""
|| confirmPassword === "" || phone === "" || email === "") {
alert("Please fill in all fields");
return false;
}

// Password validation and confirm password check


if (password !== confirmPassword) {
alert("Passwords do not match");
return false;
}

// Character validation for first and last name


var nameRegex = /^[a-zA-Z]+$/;
if (!nameRegex.test(firstName) || !
nameRegex.test(lastName)) {
alert("First and Last name must contain only alphabetic
characters");
return false;
}

// Phone number validation using regular expression


var phoneRegex = /^\d{10}$/;
if (!phoneRegex.test(phone)) {
alert("Invalid phone number");
return false;
}

// Email validation using regular expression


var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert("Invalid email address");
return false;
}

// Radio button, checkbox, text area validation (example)


var radioChecked =
document.querySelector('input[name="gender"]:checked');
if (!radioChecked) {
alert("Please select gender");
return false;
}

var checkboxChecked =
document.querySelector('input[name="interests"]:checked');
if (!checkboxChecked) {
alert("Please select at least one interest");
return false;
}

var textarea = document.getElementById("message").value;


if (textarea === "") {
alert("Please provide a message");
return false;
}

return true;
}
</script>
<style>
body{
background-color: rgb(201, 189, 212);

}
</style>
</head>
<body>
<form name="registrationForm" onsubmit="return validateForm()">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Password: <input type="password" name="password"><br>
Confirm Password: <input type="password"
name="confirm_password"><br>
Phone: <input type="text" name="phone"><br>
Email: <input type="text" name="email"><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
Interests:
<input type="checkbox" name="interests" value="sports"> Sports
<input type="checkbox" name="interests" value="music">
Music<br>
Message: <textarea id="message"></textarea><br>
<input type="submit" value="Submit">
</form>
</head>
</html>

event_registration_calidation.js

function validateEventRegistrationForm() {

var fullName = document.getElementById('fullName').value;


var email = document.getElementById('email').value;
var phoneNumber = document.getElementById('phoneNumber').value;

if (fullName.trim() === '' || email.trim() === '' ||


phoneNumber.trim() === '') {
alert('All fields are required');
return false;
}

var emailRegex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;


if (!emailRegex.test(email)) {
alert('Invalid email format');
return false;
}
var phoneRegex = /^\d{10}$/;
if (!phoneRegex.test(phoneNumber)) {
alert('Invalid phone number format');
return false;
}
return true;
}

You might also like