Scribd
Upload
14 views34 pages

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
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
14 views34 pages

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
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/ 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