Scribd
Upload
6 views

JAVA SCRIPT Tushar Singh

The document contains programming assignments for a Web Technologies course, detailing various tasks such as creating a grade calculator, finding minimum and maximum values in an array, capitalizing words in a string, checking for leap years, and counting vowels in a string. Each task includes HTML and JavaScript code snippets to implement the required functionality. The assignments are aimed at enhancing students' understanding of web development concepts.

Uploaded by

ponima5849
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

JAVA SCRIPT Tushar Singh

The document contains programming assignments for a Web Technologies course, detailing various tasks such as creating a grade calculator, finding minimum and maximum values in an array, capitalizing words in a string, checking for leap years, and counting vowels in a string. Each task includes HTML and JavaScript code snippets to implement the required functionality. The assignments are aimed at enhancing students' understanding of web development concepts.

Uploaded by

ponima5849
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 34

NAME: Tushar Singh PRN No: ADT24MGTM0993

DIV: C CLASS: MCA-I Sem-II (DS)


Subject: Web Technologies Date:12/03/2025

Q1. Create a function called calculateGrade that takes a student's score as input and returns their
grade according to the following criteria: o 90-100: 'A' o 80-89: 'B' o 70-79: 'C' o 60-69: 'D' o Below
60: 'F'.

Program:-
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grade Calculator</title>
<style> body { font-family: Arial,
sans-serif; text-align: center;
margin: 50px;
background-color: #f4f4f4;
}
.container
{ background:
white; padding:
20px; border-radius:
10px;
box-shadow: 0 0 10px rgba(0, 0, 0,
0.2); width: 300px; margin: auto;
}
input, button { margin:
10px; padding: 10px;
font-size: 16px;
width: 80%; border:
1px solid #ccc;
border-radius: 5px;
} button { background-color:
#28a745;
color: white; cursor:
pointer;
} button:hover { background-
color: #218838;
}
#result { font-
size: 18px;
margin-top: 10px;
}
</style>
</head>

<body>
<div class="container">
<h2>Student Grade Calculator</h2>

1
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

<label for="score">Enter Student Score:</label>


<input type="number" id="score" min="0" max="100" placeholder="Enter score">
<button onclick="showGrade()">Calculate Grade</button>
<p id="result"></p>
</div>
<script> function calculateGrade(score) { if (score >= 90 && score <= 100)
return { grade: 'A', remark: 'Excellent!' }; if (score >= 80) return { grade: 'B',
remark: 'Very Good!' }; if (score >= 70) return { grade: 'C', remark: 'Good!' };
if (score >= 60) return { grade: 'D', remark: 'Needs Improvement!' };
return { grade: 'F', remark: 'Failed! Try Again!' };
}
function showGrade() { let score =
document.getElementById("score").value; score =
parseInt(score);
if (isNaN(score) || score < 0 || score > 100) { document.getElementById("result").innerText
= "Please enter a valid score between 0 and
100."; return; }
let { grade, remark } = calculateGrade(score);
document.getElementById("result").innerHTML = `Grade: <strong>${grade}</strong> <br>
Remark: <strong>${remark}</strong>`;
}
</script>
</body>
</html>

Output:-

Q2. Write a function that takes an array of numbers and returns both the minimum and maximum
values in the array. Don't use Math.min() or Math.max().

Program:-

<!DOCTYPE html>
<head>

2
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Min & Max in Array</title>
<style> body { font-family: Arial,
sans-serif; text-align: center;
margin: 50px;
background-color: #f4f4f4;
}
.container
{ background:
white; padding:
20px; width: 350px;
margin: auto;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
input, button { margin:
10px; padding: 10px;
font-size: 16px;
width: 90%; border-
radius: 5px; border:
1px solid #ccc;
} button { background-color:
#007bff;
color: white; cursor:
pointer;
} button:hover { background-
color: #0056b3;
}
.result { font-size:
18px; font-
weight: bold;
margin-top:
10px;
}
</style>
</head>

<body>
<div class="container">
<h2>🔢 Find Min & Max in Array</h2>
<label for="numbers">Enter Numbers (comma-separated):</label>
<input type="text" id="numbers" placeholder="e.g., 5, 12, -3, 8, 99">
<button onclick="findMinMax()">Find Min & Max</button>
<p class="result" id="result"></p>
</div>

3
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

<script> function findMinMax() { let input =


document.getElementById("numbers").value;
let arr = input.split(",").map(num => num.trim()).filter(num => num !==
"").map(Number); if (arr.length === 0 || arr.some(isNaN))
{ document.getElementById("result").innerHTML = "❌ Please enter valid numbers!";
document.getElementById("result").style.color = "red"; return; }
let min = arr[0], max = arr[0];
for (let i = 1; i < arr.length; i++) { if (arr[i] <
min) min = arr[i]; if (arr[i] >
max) max = arr[i];
}
document.getElementById("result").innerHTML = `✅ Min: <b>${min}</b>, Max:
<b>${max}</b>`;
document.getElementById("result").style.color = "black"; }
</script>
</body>
</html>

Output:-

Q3. Create a function that accepts a string and returns a new string with the first letter of each word
capitalized. For example: "hello world" should return "Hello World".

Program:- <!
DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Capitalize Words</title>
<style> body { font-family: Arial,
sans-serif; text-align: center;
margin: 50px;

4
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

background-color: #f4f4f4;
}
.container { background: white; padding:
20px; width: 350px; margin: auto; border-
radius: 10px; box-shadow: 0px 0px 10px
rgba(0, 0, 0, 0.2);
}
input, button {
margin: 10px;
padding: 10px; font-
size: 16px; width:
90%; border-radius:
5px; border: 1px solid
#ccc;
}
button {
background-color:
#007bff; color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result { font-size:
18px; font-
weight: bold;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>🔠 Capitalize Each Word</h2>
<label for="text">Enter a Sentence:</label>
<input type="text" id="text" placeholder="e.g., hello world">
<button onclick="capitalizeInput()">Capitalize</button>
<p class="result" id="result"></p>
</div> <script> function
capitalizeWords(str) { return
str
.split(" ") // Split string into words
.map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize first letter .join("
"); // Join words back into a string

5
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

}
function capitalizeInput() { let input =
document.getElementById("text").value.trim(); if (input
=== "") {
document.getElementById("result").innerHTML = "❌ Please enter a sentence!";
document.getElementById("result").style.color = "red"; return;
}
let capitalizedText = capitalizeWords(input); document.getElementById("result").innerHTML
= `✅ Capitalized: <b>${capitalizedText}</b>`; document.getElementById("result").style.color
= "black";
}
</script>
</body>
</html>
Output:-

Q4. Write a function that determines whether a given year is a leap year. A leap year is divisible by 4,
but not by 100 unless it's also divisible by 400.

Program:-
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leap Year Checker</title>
<style> body { font-family: Arial,
sans-serif; text-align: center;
margin: 50px;
background-color: #f4f4f4;
}

6
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

.container
{ background:
white; padding:
20px; width: 350px;
margin: auto;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
input, button { margin:
10px; padding: 10px;
font-size: 16px;
width: 90%; border-
radius: 5px; border:
1px solid #ccc;
} button { background-color:
#007bff;
color: white; cursor:
pointer;
} button:hover { background-
color: #0056b3;
}
.result { font-size:
18px; font-
weight: bold;
margin-top:
10px;
}
</style>
</head>

<body>
<div class="container">
<h2>🌍 Leap Year Checker</h2>
<label for="year">Enter a Year:</label>
<input type="number" id="year" placeholder="e.g., 2024">
<button onclick="checkLeapYear()">Check Leap Year</button>
<p class="result" id="result"></p>
</div>
<script> function isLeapYear(year) { return (year % 4 === 0 && year %
100 !== 0) || (year % 400 === 0);
}
function checkLeapYear() { let year =
document.getElementById("year").value.trim(); let
resultElement = document.getElementById("result"); if (year
=== "" || isNaN(year)) { resultElement.innerHTML = "❌
Please enter a valid year!";
resultElement.style.color = "red";

7
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

return; } year = parseInt(year); if (isLeapYear(year))


{ resultElement.innerHTML = `✅ ${year} is a Leap Year! 🎉`;
resultElement.style.color = "green";
} else { resultElement.innerHTML = `❌ ${year} is NOT a Leap
Year! ❌`; resultElement.style.color = "red"; }
}
</script>
</body>
</html>

Output:-

Q5. Create a function that counts how many vowels are in a string. Consider 'a', 'e', 'i', 'o', and 'u' as
vowels.

Program:-

<!DOCTYPE html>

8
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vowel & Consonant Counter</title>
<style> body { font-family: Arial,
sans-serif; text-align: center;
margin: 50px;
background-color: #f4f4f4;
}
.container { background: white; padding:
20px; width: 350px; margin: auto; border-
radius: 10px; box-shadow: 0px 0px 10px
rgba(0, 0, 0, 0.2);
}
input, button {
margin: 10px;
padding: 10px; font-
size: 16px; width:
90%; border-radius:
5px; border: 1px solid
#ccc;
}
button {
background-color:
#007bff; color: white;
cursor: pointer; transition:
0.3s;
}
button:hover {
background-color: #0056b3;
}
.result { font-size:
18px; font-
weight: bold;
margin-top: 10px;
}
.highlight { color:
#ff5733; font-
weight: bold;
}
</style>
</head>
<body>

9
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

<div class="container">
<h2>🔤 Vowel & Consonant Counter</h2>
<label for="text">Enter a String:</label>
<input type="text" id="text" placeholder="e.g., hello world">
<button onclick="countCharacters()">Analyze Text</button>
<p class="result" id="result"></p>
</div>
<script> function
countCharacters() {
let input =
document.getElementById("text").value.trim(); let
resultElement = document.getElementById("result"); if
(input === "") {
resultElement.innerHTML = "❌ Please enter a valid string!";
resultElement.style.color = "red"; return;
}
let vowels = input.match(/[aeiouAEIOU]/g) || []; let consonants =
input.match(/[bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ]/g) || []; let vowelCount
= vowels.length; let consonantCount = consonants.length; let highlightedVowels =
input.replace(/([aeiouAEIOU])/g, '<span
class="highlight">$1</span>');
resultElement.innerHTML = `
✅ Vowel Count: <b>${vowelCount}</b> <br>
🔤 Consonant Count: <b>${consonantCount}</b> <br>
✨ Highlighted Vowels: <br> ${highlightedVowels}
`;
resultElement.style.color = "black";
}
</script>
</body>
</html>
Output:-

10
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

11
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

Q6. Create a BankAccount class with methods for:


• Depositing money
• Withdrawing money (shouldn't allow overdraft)
• Checking balance
• Displaying transaction history.

Program:- <!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vowel & Consonant Counter</title>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
background-color: #f4f4f4;
}
.container { background: white; padding:
20px; width: 350px; margin: auto; border-
radius: 10px; box-shadow: 0px 0px 10px
rgba(0, 0, 0, 0.2);
}
input, button { margin:
10px; padding: 10px;
font-size: 16px; width:
90%; border-radius:
5px; border: 1px solid
#ccc;
}
button {
background-color:
#007bff; color: white;
cursor: pointer; transition:
0.3s;
}
button:hover {
background-color: #0056b3;
}
.result { font-size:
18px; font-

12
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

weight: bold;
margin-top: 10px;
}
.highlight { color:
#ff5733; font-
weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>🔤 Vowel & Consonant Counter</h2>
<label for="text">Enter a String:</label>
<input type="text" id="text" placeholder="e.g., hello world">
<button onclick="countCharacters()">Analyze Text</button>
<p class="result" id="result"></p>
</div>
<script> function
countCharacters() {
let input =
document.getElementById("text").value.trim(); let
resultElement = document.getElementById("result"); if
(input === "") {
resultElement.innerHTML = "❌ Please enter a valid string!";
resultElement.style.color = "red"; return;
}
let vowels = input.match(/[aeiouAEIOU]/g) || []; let consonants =
input.match(/[bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ]/g) || []; let vowelCount
= vowels.length; let consonantCount = consonants.length; let highlightedVowels =
input.replace(/([aeiouAEIOU])/g, '<span
class="highlight">$1</span>');
resultElement.innerHTML = `
✅ Vowel Count: <b>${vowelCount}</b> <br>
🔤 Consonant Count: <b>${consonantCount}</b> <br>
✨ Highlighted Vowels: <br> ${highlightedVowels}
`;
resultElement.style.color = "black";
}
</script>
</body> </html>
Output:-

13
NAME: Tushar Singh PRN No: ADT24MGTM0993
DIV: C CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

14
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

Q7. Design a Rectangle class that calculates:


• Area
• Perimeter
• Whether it's a square
• Diagonal length

Program:- <!
DOCTYPE html>

15
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rectangle Calculator</title>
<style>
/* General Styling */
body {
font-family: 'Poppins', sans-serif; text-align: center;
margin: 0; padding: 0; background: linear-
gradient(135deg, #1e3c72, #2a5298); color: white;
overflow: hidden;
}
/* Container Styling */
.container { background: linear-gradient(135deg, #ffffff, #e3e3e3);
padding: 30px; width: 400px; margin: 50px auto; border-radius:
12px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); text-align:
center; color: #333; transition: transform 0.3s ease-in-out, box-
shadow 0.3s ease-in-out; animation: fadeIn 1s ease-in-out;
}
/* Hover Animation */
.container:hover { transform: scale(1.03); box-
shadow: 0px 15px 25px rgba(0, 0, 0, 0.4);
}
/* Title Styling */
h2 {
color: #007bff; font-size:
24px;
}
/* Input Fields */
input {
margin: 10px; padding: 12px;
font-size: 16px; width: 90%;
border-radius: 8px; border:
1px solid #ccc; transition: all
0.3s ease-in-out;
}
/* Input Focus Effect */
input:focus {
border-color: #007bff; outline: none; box-
shadow: 0px 0px 8px rgba(0, 123, 255, 0.5);
}

16
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

/* Buttons */
button {
margin: 10px; padding: 12px;
font-size: 16px; width: 95%;
border-radius: 8px; border:
none; cursor: pointer;
transition: all 0.3s ease-in-
out; font-weight: bold;
}
/* Button Colors */
.btn-calculate { background: linear-gradient(45deg,
#28a745, #218838); color: white; box-shadow: 0px 4px
10px rgba(40, 167, 69, 0.5);
}
/* Button Hover Effects */ button:hover
{
opacity: 0.9; transform:
translateY(-2px);
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
}

/* Result Styling */

17
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

.result { font-size: 18px; font-weight: bold; margin-top: 15px;


opacity: 0; transform: translateY(20px); transition: opacity
0.5s ease-in-out, transform 0.5s ease-in-out;
}
/* Fade In Animation for Result */
.result.show
{ opacity: 1;
transform: translateY(0);
}
/* Fade In Animation */
@keyframes fadeIn
{ from {
opacity: 0; transform:
translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
} }
</style>
</head>
<body>
<div class="container">
<h2>📏 Rectangle Calculator</h2>
<label for="width">Enter Width:</label>
<input type="number" id="width" placeholder="e.g., 5">
<label for="height">Enter Height:</label>
<input type="number" id="height" placeholder="e.g., 10">
<button class="btn-calculate" onclick="calculateRectangle()">Calculate</button>
<p class="result" id="result"></p>
</div>
<script> class
Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
getArea() {

18
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

return this.width * this.height;


}
getPerimeter() {
return 2 * (this.width + this.height);
}
isSquare() {
return this.width === this.height;
}
getDiagonal() {
return Math.sqrt(this.width ** 2 + this.height ** 2).toFixed(2);
} } function
calculateRectangle() {
let width =
parseFloat(document.getElementById("width").value); let height
= parseFloat(document.getElementById("height").value); let
resultBox = document.getElementById("result"); if (width > 0
&& height > 0) { let rect = new Rectangle(width, height);
resultBox.innerHTML = `
✅ Area: ${rect.getArea()}<br>
📏 Perimeter: ${rect.getPerimeter()}<br>
📐 Diagonal: ${rect.getDiagonal()}<br>
🟧 Is Square? ${rect.isSquare() ? "Yes ✅" : "No ❌"} ;
resultBox.style.color = "green";
resultBox.classList.add("show"); // Apply fade-in
animation
} else {
resultBox.innerHTML = "❌ Please enter valid numbers!";
resultBox.style.color = "red";
resultBox.classList.add("show"); // Apply fade-in
animation
} }
</script>
</body>
</html>

Output:-

19
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

Q8. Create a Student class that tracks:


• Name
• Array of test scores
• Method to add new scores
• Method to calculate average score
• Method to determine if passing (average > 70)

Program:- <!
DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Score Tracker</title>
<style>
body {
font-family: 'Poppins', sans-serif; text-align: center;
margin: 0; padding: 0; background: linear-
gradient(135deg, #2c3e50, #4ca1af); color: white;
}
.container { background: white; padding:
25px; width: 400px; margin: 50px auto;
border-radius: 12px; box-shadow: 0px
5px 15px rgba(0, 0, 0, 0.3); text-align:
center; color: #333; transition: transform
0.3s ease-in-out;

20
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

}
.container:hover
{ transform: scale(1.02);
}
h2 {
color: #007bff;
}
input {
margin:
10px;
padding:
12px; font-
size: 16px;
width: 90%;
border-
radius: 8px;
border: 1px
solid #ccc;
transition:
0.3s;
}
input:focus {
border-color: #007bff;
outline: none;
}
button {
margin: 10px;
padding: 12px;
font-size: 16px;
width: 95%;
border-radius:
8px; border:
none; cursor:
pointer;
transition: 0.3s;
}

21
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

.btn-add { background-
color: #28a745; color:
white;
}
.btn-reset { background-
color: #dc3545; color:
white;
}
button:hover {
opacity: 0.8;
}
.result { font-size:
18px; font-
weight: bold;
margin-top:
15px;
}
</style>
</head>
<body>
<div class="container">
<h2>➵ Student Score Tracker</h2>
<label for="name">Student Name:</label>
<input type="text" id="name" placeholder="Enter student name">
<label for="score">Enter Score:</label>
<input type="number" id="score" placeholder="e.g., 85">
<button class="btn-add" onclick="addStudentScore()">Add Score</button>
<button class="btn-reset" onclick="resetStudent()">Reset</button>
<p class="result" id="result"></p>
</div>
<script> class
Student {
constructor(name
) { this.name =
name;
this.scores = [];
}
addScore(score) {

22
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

if (score >= 0 && score <= 100) {


this.scores.push(score);
}
}
getAverage() {
if (this.scores.length === 0) return 0; let sum =
this.scores.reduce((total, score) => total + score, 0); return
(sum / this.scores.length).toFixed(2);
}
isPassing() {
return this.getAverage() > 70;
}
}
let student; function
addStudentScore() {
let name = document.getElementById("name").value.trim();
let score =
parseFloat(document.getElementById("score").value); let
resultBox = document.getElementById("result"); if (!name) {
resultBox.innerHTML = "❌ Please enter the student's
name!"; resultBox.style.color = "red"; return;
}
if (isNaN(score) || score < 0 || score > 100) {
resultBox.innerHTML = "❌ Enter a valid score between 0 and
100!"; resultBox.style.color = "red"; return;
}
if (!student || student.name !== name) {
student = new Student(name);
}
student.addScore(score);
resultBox.innerHTML = `
📝 Student: ${student.name}<br>
📊 Scores: ${student.scores.join(", ")}<br>
📈 Average: ${student.getAverage()}<br>
🎯 Passing? ${student.isPassing() ? "✅ Yes" : "❌ No"}
`;
resultBox.style.color = "green";
}

23
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

function resetStudent() {
document.getElementById("name").value = "";
document.getElementById("score").value = "";
document.getElementById("result").innerHTML =
""; student = null;
}
</script>
</body>
</html>

Output:-

24
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

Q9. Design a Clock class that:


• Keeps track of hours, minutes, and seconds
• Has a method to advance time by one second
• Has a method to display time in 12-hour and 24-hour format

Program:-
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Digital Clock</title>

25
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

<style>
body {
font-family: 'Poppins', sans-
serif; text-align: center;
margin: 0; padding: 0;
background: linear-gradient(135deg, #2c3e50,
#4ca1af); color: white; display: flex; justify-content:
center; align-items: center; height: 100vh;
}
.clock-container
{ background:
white; padding:
30px; border-
radius: 12px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
text-align: center;
color: #333;
transition: transform 0.3s ease-in-out;
}
.clock-container:hover
{ transform: scale(1.05);
}
h
2
{
color: #007bff;
margin-bottom: 10px;
}
.clock { font-size:
2rem; font-
weight: bold;
margin: 10px 0;
}
.toggle-button { margin-
top: 10px; padding:
10px 20px; font-size:
16px; border: none;
border-radius: 8px;
cursor: pointer;
background-color:
#28a745;

26
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

color: white;
transition: 0.3s;
}
.toggle-button:hover
{ opacity: 0.8;
}
</style>
</head>
<body>
<div class="clock-container">
<h2> Live Digital Clock</h2>
<div class="clock" id="clock">--: ---- </div>
<button class="toggle-button" onclick="toggleFormat()">Switch to 12-hour format</button>
</div>
<script> class Clock { constructor()
{ this.use24HourFormat = true; // Default format
} getTime() { const now = new
Date(); let hours =
now.getHours(); let minutes =
now.getMinutes(); let seconds =
now.getSeconds();

if (!this.use24HourFormat) { let period =


hours >= 12 ? "PM" : "AM"; hours =
hours % 12 || 12; // Convert 0 to 12
return
`${this.formatNumber(hours)}:${this.formatNumber(minutes)}:$
{this.formatNumber(seconds)} ${period}`; } return
`${this.formatNumber(hours)}:${this.formatNumber(minutes)}:${this.formatNumber(seconds)}`;
}
formatNumber(num) { return num
< 10 ? "0" + num : num;
}
toggleFormat() { this.use24HourFormat = !
this.use24HourFormat;
document.querySelector(".toggle-
button").innerText = this.use24HourFormat ?
"Switch to 12-hour format" : "Switch to 24-hour
format";
}
}

27
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

const clock = new Clock(); function updateClock()


{ document.getElementById("clock").innerText =
clock.getTime();
}
function toggleFormat()
{ clock.toggleFormat();
updateClock();
}
setInterval(updateClock, 1000); // Update clock every
second updateClock(); // Initial call to set time immediately
</script>
</body>
</html>

Output:-

Q10. Create a Library class that manages:


• Adding books  Removing books  Checking out books
• Returning books
• Displaying available and checked-out books

28
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

Program:-

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library Management System</title>
<style> body { font-family:
'Poppins', sans-serif; text-align:
center; margin: 0; padding: 0;
background: linear-gradient(135deg, #2c3e50, #4ca1af);
color: white;
}
.library-container
{ background:
white; padding:
25px; width:
450px; margin:
50px auto;
border-radius:
12px;
box-shadow: 0px 5px 15px rgba(0, 0, 0,
0.3); text-align: center; color: #333;
transition: transform 0.3s ease-in-out;
}
.library-container:hover
{ transform: scale(1.02);
} h2 { color:
#007bff;
} input { margin:
10px; padding: 12px;
font-size: 16px; width:
90%; border-radius:
8px; border: 1px solid
#ccc; transition: 0.3s;
} input:focus
{ border-color:
#007bff; outline:
none;
}
butto
n{

29
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

margin: 10px;
padding: 12px;
font-size: 16px;
width: 95%;
border-radius:
8px; border:
none; cursor:
pointer;
transition: 0.3s;
}

.btn-add { background-color: #28a745; color: white; }


.btn-remove { background-color: #dc3545; color: white; }
.btn-checkout { background-color: #007bff; color:
white; } .btn-return { background-color: #f39c12; color:
white; } button:hover { opacity: 0.8; }
.book-list
{ margin-top:
20px; text-
align: left;
} ul { list-style-type:
none; padding: 0;
}
l
i
{

background:
#f8f9fa; padding:
10px; margin: 5px
0; border-radius:
5px;
}
</style>
</head>
<body>
<div class="library-container">
<h2>📚 Library Management System</h2>
<label for="bookName">Book Title:</label>
<input type="text" id="bookName" placeholder="Enter book title">
<button class="btn-add" onclick="addBook()">Add Book</button>

30
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

<button class="btn-remove" onclick="removeBook()">Remove Book</button>


<button class="btn-checkout" onclick="checkoutBook()">Check Out Book</button>
<button class="btn-return" onclick="returnBook()">Return Book</button>
<h3>Available Books</h3>
<ul id="availableBooks"></ul>
<h3>Checked Out Books</h3>
<ul id="checkedOutBooks"></ul>
</div>
<script> class Library
{ constructor()
{ this.availableBooks = [];
this.checkedOutBooks = [];
}
addBook(book) { if (book && !
this.availableBooks.includes(book))
{ this.availableBooks.push(book);
this.updateUI();
}
}
removeBook(book) { let index =
this.availableBooks.indexOf(book);
if (index !== -1)
{ this.availableBooks.splice(inde
x, 1); this.updateUI();
}
}
checkoutBook(book) { let index =
this.availableBooks.indexOf(book);
if (index !== -1)
{ this.availableBooks.splice(inde
x, 1);
this.checkedOutBooks.push(book
);
this.updateUI();
}
}
returnBook(book) { let index =
this.checkedOutBooks.indexOf(book); if
(index !== -1)
{ this.checkedOutBooks.splice(index, 1);

31
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

this.availableBooks.push(book);
this.updateUI();
}
} updateUI() { let availableList =
document.getElementById("availableBooks"); let checkedOutList =
document.getElementById("checkedOutBooks");
availableList.innerHTML = this.availableBooks.map(book =>
`<li>${book}</li>`).join(""); checkedOutList.innerHTML = this.checkedOutBooks.map(book =>
`<li>${book}</li>`).join("");
}
}
const library = new Library();

function addBook() { let bookName =


document.getElementById("bookName").value.trim(); if
(bookName) {
library.addBook(bookName);
document.getElementById("bookName").value = "";
}
}
function removeBook() {
let bookName =
document.getElementById("bookName").value.trim(); if (bookName)
{
library.removeBook(bookName);
document.getElementById("bookName").value = "";
}
}
function checkoutBook() {
let bookName =
document.getElementById("bookName").value.trim(); if (bookName)
{
library.checkoutBook(bookName);
document.getElementById("bookName").value = "";
}
}
function returnBook() {
let bookName =
document.getElementById("bookName").value.trim(); if (bookName)
{
library.returnBook(bookName);

32
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

document.getElementById("bookName").value = "";
}
}
</script>
</body>
</html>
Output:-

33
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025

34

You might also like