BCSE203E- Web Programming
Assignment: 3A
Name: Shreya R. Khadekar
Reg No.: 23BCE0029
Subject: Web Programming
Faculty: Prof. Sathya K. mam
BCSE203E- Web Programming
Assignment: 3
Topics: HTML- Forms, CSS and JavaScript
Task 1
Write a function which returns the maximum, ascending and
descending of three number
Aim: To develop a function that finds the maximum, ascending order, and
descending order of three given numbers.
Procedure: Find Maximum, Ascending, and Descending Order of Three
Numbers
Step 1: Create an HTML Structure
• Use an <input> field to take three numbers from the user.
• Add a button to trigger the function.
• Display the results in a <div>.
Step 2: Style the Page with CSS
• Use basic styling for input fields and buttons.
• Style the result display area for better visibility.
Step 3: Implement JavaScript Logic
• Retrieve input values from the user.
• Determine the maximum value.
• Sort numbers in ascending and descending order.
• Display results dynamically.
Tags Used in it:
Code:
Output:
Text Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Analyzer</title>
<style>
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
text-align: center;
padding: 50px;
color: white;
.container {
background: rgba(255, 255, 255, 0.2);
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
display: inline-block;
backdrop-filter: blur(10px);
max-width: 400px;
transition: transform 0.3s ease;
.container:hover {
transform: scale(1.05);
input {
padding: 12px;
margin: 10px;
font-size: 18px;
border-radius: 8px;
border: none;
text-align: center;
width: 85%;
max-width: 250px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
button {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
color: black;
border: none;
padding: 14px 22px;
font-size: 18px;
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
margin: 10px;
button:hover {
background: linear-gradient(135deg, #ff758c, #ff7eb3);
transform: scale(1.05);
.output {
margin-top: 20px;
font-size: 20px;
background: rgba(255, 255, 255, 0.3);
padding: 20px;
border-radius: 15px;
display: inline-block;
width: auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.5s ease;
.show {
opacity: 1;
.reset {
background: linear-gradient(135deg, #42e695, #3bb2b8);
.reset:hover {
background: linear-gradient(135deg, #2ecf78, #26a8a5);
</style>
</head>
<body>
<div class="container">
<h2>🌟 Number Analyzer 🌟</h2>
<input type="number" id="num1" placeholder="First Number" oninput="validateInput()">
<input type="number" id="num2" placeholder="Second Number" oninput="validateInput()">
<input type="number" id="num3" placeholder="Third Number" oninput="validateInput()">
<br>
<button id="analyzeBtn" onclick="analyzeNumbers()" disabled>Analyze</button>
<button class="reset" onclick="resetForm()">Reset</button>
<div class="output" id="result"></div>
</div>
<script>
function analyzeNumbers() {
let n1 = parseFloat(document.getElementById('num1').value);
let n2 = parseFloat(document.getElementById('num2').value);
let n3 = parseFloat(document.getElementById('num3').value);
if (isNaN(n1) || isNaN(n2) || isNaN(n3)) {
document.getElementById('result').innerHTML = "❌ Please enter valid numbers.";
return;
let numbers = [n1, n2, n3];
let maxNumber = Math.max(...numbers);
let ascending = [...numbers].sort((a, b) => a - b);
let descending = [...numbers].sort((a, b) => b - a);
let resultDiv = document.getElementById('result');
resultDiv.innerHTML =
`<strong>✅ Maximum:</strong> ${maxNumber} <br>
<strong>🔼 Ascending Order:</strong> ${ascending.join(', ')} <br>
<strong>🔽 Descending Order:</strong> ${descending.join(', ')}`;
resultDiv.classList.add('show');
function resetForm() {
document.getElementById('num1').value = "";
document.getElementById('num2').value = "";
document.getElementById('num3').value = "";
let resultDiv = document.getElementById('result');
resultDiv.innerHTML = "";
resultDiv.classList.remove('show');
document.getElementById('analyzeBtn').disabled = true;
function validateInput() {
let n1 = document.getElementById('num1').value;
let n2 = document.getElementById('num2').value;
let n3 = document.getElementById('num3').value;
let analyzeBtn = document.getElementById('analyzeBtn');
if (n1 !== "" && n2 !== "" && n3 !== "") {
analyzeBtn.disabled = false;
} else {
analyzeBtn.disabled = true;
</script>
</body>
</html>
Task 2
Write a function which checks number till given input/parameter is
odd or even.
Aim: The aim of this function is to determine whether a given number is odd
or even.
Procedure: Procedure to Check If a Number is Odd or Even Using HTML,
CSS, and JavaScript:
1. HTML: Create an input field for entering the number, a button to trigger the check, and a
placeholder to display the result.
2. CSS: Style the elements for better layout and visibility.
3. JavaScript: Implement the function to check if the entered number is odd or even when
the button is clicked.
Tags Used in it:
Code:
Output:
Text Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odd or Even Checker</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
background-color: #f0f4f8;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
.container {
background: #ffffff;
padding: 40px 50px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 100%;
max-width: 400px;
h2 {
font-size: 32px;
margin-bottom: 20px;
color: #4a90e2;
input {
width: 100%;
padding: 15px;
font-size: 18px;
border-radius: 25px;
border: 2px solid #d1d1d1;
margin-bottom: 20px;
outline: none;
background-color: #fafafa;
color: #333;
}
input:focus {
border-color: #4a90e2;
background-color: #fff;
box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);
button {
width: 100%;
padding: 15px;
font-size: 18px;
background-color: #4a90e2;
border: none;
border-radius: 25px;
color: white;
cursor: pointer;
transition: background-color 0.3s;
margin-bottom: 15px;
button:hover {
background-color: #357ab7;
.result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
padding: 15px;
border-radius: 10px;
text-align: center;
display: none;
.even {
background-color: #d4edda;
color: #388e3c;
.odd {
background-color: #f8d7da;
color: #d32f2f;
.error {
background-color: #fff3cd;
color: #856404;
}
.hint {
margin-top: 15px;
padding: 12px;
background-color: #e2e3e5;
border-radius: 12px;
font-size: 16px;
color: #5a5a5a;
display: none;
text-align: center;
.hint.active {
display: block;
.floating-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #4a90e2;
border: none;
padding: 15px;
border-radius: 50%;
font-size: 22px;
color: white;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
.floating-button:hover {
background-color: #357ab7;
transform: scale(1.1);
.floating-button span {
font-size: 20px;
</style>
</head>
<body>
<div class="container">
<h2>Odd or Even Checker</h2>
<input type="number" id="numberInput" placeholder="Enter a number" required>
<button onclick="checkEvenOdd()">Check</button>
<button class="hint-button" onclick="showHint()">Show Hint</button>
<div class="result" id="result"></div>
<div class="hint" id="hint">
Hint: Even numbers are divisible by 2, while odd numbers are not!
</div>
</div>
<button class="floating-button" onclick="resetInput()">
<span>↻</span>
</button>
<script>
// Function to check if a number is odd or even
function checkEvenOdd() {
let num = document.getElementById('numberInput').value;
let resultDiv = document.getElementById('result');
if (num === "" || isNaN(num)) {
resultDiv.textContent = "Please enter a valid number!";
resultDiv.classList.remove('even', 'odd');
resultDiv.classList.add('error');
resultDiv.style.display = "block";
} else {
if (num % 2 === 0) {
resultDiv.textContent = `${num} is Even!`;
resultDiv.classList.add('even');
resultDiv.classList.remove('odd', 'error');
resultDiv.style.display = "block";
} else {
resultDiv.textContent = `${num} is Odd!`;
resultDiv.classList.add('odd');
resultDiv.classList.remove('even', 'error');
resultDiv.style.display = "block";
// Function to display hint
function showHint() {
let hintDiv = document.getElementById('hint');
hintDiv.classList.toggle('active');
// Function to reset input and result
function resetInput() {
document.getElementById('numberInput').value = '';
document.getElementById('result').style.display = 'none';
document.getElementById('hint').classList.remove('active');
}
</script>
</body>
</html>
Task 3
Write a JavaScript program to solve quadratic equation in the form
ax2 + bx + c, (Only the
values of a, b and c are provided) the task is to find the roots of the
equation
Aim: To find the roots of a quadratic equation in the form ax² + bx + c given
the values of a, b, and c.
Procedure: Procedure to Solve Quadratic Equation Using HTML, CSS, and
JavaScript
1. Create HTML Structure:
o Create a form with three input fields for the coefficients aaa, bbb, and ccc of the
quadratic equation.
o Add a button to trigger the calculation and a <div> to display the result.
2. Add CSS for Styling:
o Style the page to center the form on the screen.
o Apply basic styles to the input fields, button, and result display to make the
interface user-friendly.
3. Write JavaScript Logic:
o Define a function to retrieve the input values aaa, bbb, and ccc.
o Calculate the discriminant (b2−4acb^2 - 4acb2−4ac).
o Based on the discriminant value:
▪ If it is positive, calculate and display two real roots.
▪ If it is zero, calculate and display one real root.
▪ If it is negative, calculate and display two complex roots.
o Display the roots or the appropriate message in the result section.
Tags used in it:
Code:
Output:
Text Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quadratic Equation Solver</title>
<style>
/* General Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(45deg, #ff9a8b, #ff6a88, #d17df0, #5a3c9f);
background-size: 400% 400%;
animation: gradientAnimation 15s ease infinite;
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
.container {
background: rgba(255, 255, 255, 0.85);
padding: 50px 40px;
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 600px;
width: 100%;
backdrop-filter: blur(15px);
animation: fadeIn 2s ease-out;
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
h2 {
font-size: 40px;
color: #4f4f4f;
margin-bottom: 40px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
.input-fields {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 30px;
.input-fields label {
color: #4f4f4f;
font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
.input-fields input {
padding: 12px;
border-radius: 12px;
border: 2px solid #ff6a88;
font-size: 18px;
outline: none;
transition: 0.3s;
background-color: #f9f3fb;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.input-fields input:focus {
border-color: #5a3c9f;
box-shadow: 0 4px 10px rgba(90, 60, 159, 0.5);
button {
padding: 12px 25px;
background-color: #5a3c9f;
color: white;
font-size: 20px;
font-weight: 700;
border: none;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(90, 60, 159, 0.3);
transform: translateY(0);
button:hover {
background-color: #6f53b2;
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(90, 60, 159, 0.5);
}
button:active {
transform: translateY(1px);
box-shadow: 0 5px 15px rgba(90, 60, 159, 0.4);
.result {
margin-top: 20px;
font-size: 22px;
font-weight: 600;
color: #333;
padding: 25px;
background-color: #ff6a88;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
opacity: 0;
transition: opacity 1s ease-in-out;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
.show-result {
opacity: 1;
}
.footer {
position: absolute;
bottom: 20px;
font-size: 16px;
color: #fff;
.footer a {
color: #ff9a8b;
text-decoration: none;
font-weight: bold;
.footer a:hover {
text-decoration: underline;
/* Mobile responsiveness */
@media (max-width: 600px) {
.container {
padding: 40px 30px;
h2 {
font-size: 32px;
button {
font-size: 18px;
padding: 12px 24px;
.input-fields input {
padding: 12px;
</style>
</head>
<body>
<div class="container">
<h2>Quadratic Equation Solver</h2>
<div class="input-fields">
<label for="a">Enter a (coefficient of x²):</label>
<input type="number" id="a" placeholder="a" required>
<label for="b">Enter b (coefficient of x):</label>
<input type="number" id="b" placeholder="b" required>
<label for="c">Enter c (constant):</label>
<input type="number" id="c" placeholder="c" required>
</div>
<button onclick="solveQuadratic()">Solve</button>
<div class="result" id="result"></div>
</div>
<div class="footer">
<p>Created with ❤️ by <a href="https://www.linkedin.com" target="_blank">Your Name</a></p>
</div>
<script>
function solveQuadratic() {
// Get input values
let a = parseFloat(document.getElementById('a').value);
let b = parseFloat(document.getElementById('b').value);
let c = parseFloat(document.getElementById('c').value);
// Validate inputs
if (isNaN(a) || isNaN(b) || isNaN(c)) {
document.getElementById('result').innerText = "Please enter valid numbers for a, b, and c.";
return;
}
// Calculate the discriminant
let discriminant = b * b - 4 * a * c;
let resultText = '';
// Case 1: Two distinct real roots
if (discriminant > 0) {
let root1 = (-b + Math.sqrt(discriminant)) / (2 * a);
let root2 = (-b - Math.sqrt(discriminant)) / (2 * a);
resultText = `Roots are real and different: ${root1.toFixed(2)} and ${root2.toFixed(2)}`;
// Case 2: One real root
else if (discriminant === 0) {
let root = -b / (2 * a);
resultText = `Root is real and the same: ${root.toFixed(2)}`;
// Case 3: Complex roots
else {
let realPart = -b / (2 * a);
let imaginaryPart = Math.sqrt(-discriminant) / (2 * a);
resultText = `Roots are complex and different: ${realPart.toFixed(2)} +
${imaginaryPart.toFixed(2)}i and ${realPart.toFixed(2)} - ${imaginaryPart.toFixed(2)}i`;
}
// Show the result
let resultElement = document.getElementById('result');
resultElement.innerText = resultText;
resultElement.classList.add('show-result');
</script>
</body>
</html>
Task 4
Write a function which checks given input/parameter:
• If input/parameter is below speedlimit of 70 print => 'Good Safe Driving'
• If input/parameter is above speedlimit of 70, every 5 kilometers is Penalty
Point, print
=> 'Speed Limit Crossed by Penalty Point' + Point
If Driver gets more than 10 penalty points ie. above the speed limit 120, print
=> 'License
Suspended'
Aim: The aim of this program is to assess a driver's speed, determine penalty
points for exceeding the speed limit, and suspend the driver's license if the
speed exceeds a critical threshold. It ensures safe driving by providing feedback
based on speed violations.
Procedure: • HTML provides a simple input field to enter the speed and a button to trigger
the speed check.
• CSS is used to style the page, creating a user-friendly interface.
• JavaScript checks the input speed:
• If the speed is within the limit (<= 70), it shows "Good Safe Driving."
• If the speed exceeds 70, it calculates penalty points (every 5 km/h over 70).
• If the speed exceeds 120, the license is suspended, and a corresponding message is
displayed.
Tags used in it:
Code:
Output:
Text Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speed Limit Checker</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(45deg, #E4D6B7, #B4B0A2);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #333;
overflow: hidden;
animation: backgroundAnimation 10s infinite alternate;
@keyframes backgroundAnimation {
0% {
background: linear-gradient(45deg, #E4D6B7, #B4B0A2);
50% {
background: linear-gradient(45deg, #D4BFAF, #A29E96);
100% {
background: linear-gradient(45deg, #E4D6B7, #B4B0A2);
.container {
background: rgba(255, 255, 255, 0.8);
padding: 40px;
border-radius: 15px;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
width: 400px;
text-align: center;
backdrop-filter: blur(15px);
border: 2px solid rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: #2C3E50;
text-transform: uppercase;
font-weight: bold;
.form-group {
margin-bottom: 25px;
label {
font-size: 1.2em;
margin-bottom: 15px;
display: block;
color: #34495E;
font-weight: bold;
input {
padding: 12px;
width: 80%;
font-size: 1.1em;
border: 2px solid #BDC3C7;
border-radius: 10px;
background: rgba(244, 244, 244, 0.6);
color: #333;
outline: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
input:focus {
border-color: #3498DB;
background: rgba(255, 255, 255, 1);
box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3);
.check-button {
padding: 12px 25px;
background-color: #3498DB;
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 1.2em;
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
margin-top: 20px;
.check-button:hover {
background-color: #2980B9;
box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.3);
transform: scale(1.05);
p{
font-size: 1.3em;
margin-top: 20px;
font-weight: bold;
color: #2C3E50;
.result-safe {
color: #2ECC71;
.result-penalty {
color: #F39C12;
}
.result-suspended {
color: #E74C3C;
.footer {
position: fixed;
bottom: 15px;
text-align: center;
width: 100%;
font-size: 1.1em;
color: #7F8C8D;
font-style: italic;
.footer p {
margin: 0;
</style>
</head>
<body>
<div class="container">
<h1>Speed Limit Checker</h1>
<div class="form-group">
<label for="speed">Enter Speed (km/h):</label>
<input type="number" id="speed" name="speed" placeholder="Enter speed">
</div>
<button class="check-button" onclick="checkSpeed()">Check Speed</button>
<p id="result"></p>
</div>
<div class="footer">
<p>Drive Safe, Stay Safe!</p>
</div>
<script>
// JavaScript function to check speed and penalty points
function checkSpeed() {
let speed = document.getElementById("speed").value; // Get the value of input
let result = document.getElementById("result"); // Get the result paragraph
if (speed <= 70) {
// If speed is within the limit
result.textContent = "Good Safe Driving";
result.className = "result-safe"; // Green color for safe driving
} else {
let penaltyPoints = Math.floor((speed - 70) / 5); // Calculate penalty points
if (speed > 120) {
// If speed is above 120 km/h, license gets suspended
result.textContent = "License Suspended";
result.className = "result-suspended"; // Red color for license suspension
} else {
// If speed is above the limit but not more than 120 km/h
result.textContent = "Speed Limit Crossed by Penalty Points: " + penaltyPoints;
result.className = "result-penalty"; // Orange color for penalty points
</script>
</body>
</html>
