Scribd
Upload
6 views33 pages

Student Grade and Year Functions

The document contains a series of programming tasks related to web technologies, specifically focusing on JavaScript functions for various applications. Each task includes a description, HTML structure, CSS styling, and JavaScript code to implement functionalities such as grade calculation, finding min/max in an array, capitalizing words, checking leap years, and counting vowels. The document is structured as a student assignment with the name and details of the student included at the top.

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 PDF, TXT or read online on Scribd
6 views33 pages

Student Grade and Year Functions

The document contains a series of programming tasks related to web technologies, specifically focusing on JavaScript functions for various applications. Each task includes a description, HTML structure, CSS styling, and JavaScript code to implement functionalities such as grade calculation, finding min/max in an array, capitalizing words, checking leap years, and counting vowels. The document is structured as a student assignment with the name and details of the student included at the top.

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 PDF, TXT or read online on Scribd

NAME: Manthan Surkar PRN No: ADT24MGTM0946

DIV: B 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>

1
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
<body>
<div class="container">
<h2>Student Grade Calculator</h2>
<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 = [Link]("score").value;
score = parseInt(score);
if (isNaN(score) || score < 0 || score > 100) {
[Link]("result").innerText = "Please enter a valid score between 0 and
100.";
return;
}
let { grade, remark } = calculateGrade(score);
[Link]("result").innerHTML = `Grade: <strong>${grade}</strong> <br>
Remark: <strong>${remark}</strong>`;
}
</script>
</body>
</html>

Output:-

2
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
Q2. Write a function that takes an array of numbers and returns both the minimum and maximum
values in the array. Don't use [Link]() or [Link]().

Program:-

<!DOCTYPE html>
<head>
<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>

3
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
<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>
<script>
function findMinMax() {
let input = [Link]("numbers").value;
let arr = [Link](",").map(num => [Link]()).filter(num => num !== "").map(Number);
if ([Link] === 0 || [Link](isNaN)) {
[Link]("result").innerHTML = "❌ Please enter valid numbers!";
[Link]("result").[Link] = "red";
return;
}
let min = arr[0], max = arr[0];

for (let i = 1; i < [Link]; i++) {


if (arr[i] < min) min = arr[i];
if (arr[i] > max) max = arr[i];
}
[Link]("result").innerHTML = `✅ Min: <b>${min}</b>, Max:
<b>${max}</b>`;
[Link]("result").[Link] = "black";
}
</script>
</body>
</html>

Output:-

4
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
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;
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;
}

5
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
</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 => [Link](0).toUpperCase() + [Link](1)) // Capitalize first letter
.join(" "); // Join words back into a string
}
function capitalizeInput() {
let input = [Link]("text").[Link]();
if (input === "") {
[Link]("result").innerHTML = "❌ Please enter a sentence!";
[Link]("result").[Link] = "red";
return;
}
let capitalizedText = capitalizeWords(input);
[Link]("result").innerHTML = `✅ Capitalized: <b>${capitalizedText}</b>`;
[Link]("result").[Link] = "black";
}
</script>
</body>
</html>
Output:-

6
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
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;
}
.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>

7
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
<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 = [Link]("year").[Link]();
let resultElement = [Link]("result");
if (year === "" || isNaN(year)) {
[Link] = "❌ Please enter a valid year!";
[Link] = "red";
return;
}
year = parseInt(year);
if (isLeapYear(year)) {
[Link] = `✅ ${year} is a Leap Year! 🎉`;
[Link] = "green";
} else {
[Link] = `❌ ${year} is NOT a Leap Year! ❌`;
[Link] = "red";
}
}
</script>
</body>
</html>

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

9
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
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>
<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;

10
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
}
.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 = [Link]("text").[Link]();
let resultElement = [Link]("result");
if (input === "") {
[Link] = "❌ Please enter a valid string!";
[Link] = "red";
return;
}
let vowels = [Link](/[aeiouAEIOU]/g) || [];
let consonants = [Link](/[bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ]/g) || [];
let vowelCount = [Link];
let consonantCount = [Link];
let highlightedVowels = [Link](/([aeiouAEIOU])/g, '<span
class="highlight">$1</span>');
[Link] = `
✅ Vowel Count: <b>${vowelCount}</b> <br>
🔤 Consonant Count: <b>${consonantCount}</b> <br>
✨ Highlighted Vowels: <br> ${highlightedVowels}
`;
[Link] = "black";
}
</script>
</body>
</html>

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

12
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B 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;

13
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: 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 = [Link]("text").[Link]();
let resultElement = [Link]("result");
if (input === "") {
[Link] = "❌ Please enter a valid string!";
[Link] = "red";
return;
}
let vowels = [Link](/[aeiouAEIOU]/g) || [];
let consonants = [Link](/[bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ]/g) || [];
let vowelCount = [Link];
let consonantCount = [Link];
let highlightedVowels = [Link](/([aeiouAEIOU])/g, '<span
class="highlight">$1</span>');
[Link] = `
✅ Vowel Count: <b>${vowelCount}</b> <br>
🔤 Consonant Count: <b>${consonantCount}</b> <br>
✨ Highlighted Vowels: <br> ${highlightedVowels}
`;
[Link] = "black";
}
</script>
</body> </html>

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

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

16
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>
<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 {

17
NAME: Manthan Surkar PRN No: ADT24MGTM0946
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
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);
}
/* 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 */

18
NAME: Aashay Pathak PRN No: ADT24MGTM0901
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 */
.[Link] {
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) {
[Link] = width;
[Link] = height;
}
getArea() {
return [Link] * [Link];
}
getPerimeter() {

19
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
return 2 * ([Link] + [Link]);
}
isSquare() {
return [Link] === [Link];
}
getDiagonal() {
return [Link]([Link] ** 2 + [Link] ** 2).toFixed(2);
} }
function calculateRectangle() {
let width = parseFloat([Link]("width").value);
let height = parseFloat([Link]("height").value);
let resultBox = [Link]("result");
if (width > 0 && height > 0) {
let rect = new Rectangle(width, height);
[Link] = `
✅ Area: ${[Link]()}<br>
📏 Perimeter: ${[Link]()}<br>
📐 Diagonal: ${[Link]()}<br>
🟧 Is Square? ${[Link]() ? "Yes ✅" : "No ❌"} ;
[Link] = "green";
[Link]("show"); // Apply fade-in animation
} else {
[Link] = "❌ Please enter valid numbers!";
[Link] = "red";
[Link]("show"); // Apply fade-in animation
} }
</script>
</body>
</html>

Output:-

20
NAME: Aashay Pathak PRN No: ADT24MGTM0901
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;
}
.container:hover {
transform: scale(1.02);
}
h2 {
color: #007bff;
}
input {
margin: 10px;
padding: 12px;
font-size: 16px;
width: 90%;

21
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
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;
}
.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>

22
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
<p class="result" id="result"></p>
</div>
<script>
class Student {
constructor(name) {
[Link] = name;
[Link] = [];
}
addScore(score) {
if (score >= 0 && score <= 100) {
[Link](score);
}
}
getAverage() {
if ([Link] === 0) return 0;
let sum = [Link]((total, score) => total + score, 0);
return (sum / [Link]).toFixed(2);
}
isPassing() {
return [Link]() > 70;
}
}
let student;
function addStudentScore() {
let name = [Link]("name").[Link]();
let score = parseFloat([Link]("score").value);
let resultBox = [Link]("result");
if (!name) {
[Link] = "❌ Please enter the student's name!";
[Link] = "red";
return;
}
if (isNaN(score) || score < 0 || score > 100) {
[Link] = "❌ Enter a valid score between 0 and 100!";
[Link] = "red";
return;
}
if (!student || [Link] !== name) {
student = new Student(name);
}
[Link](score);
[Link] = `
📝 Student: ${[Link]}<br>
📊 Scores: ${[Link](", ")}<br>

23
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
📈 Average: ${[Link]()}<br>
🎯 Passing? ${[Link]() ? "✅ Yes" : "❌ No"}
`;
[Link] = "green";
}
function resetStudent() {
[Link]("name").value = "";
[Link]("score").value = "";
[Link]("result").innerHTML = "";
student = null;
}
</script>
</body>
</html>

Output:-

24
NAME: Aashay Pathak PRN No: ADT24MGTM0901
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>
<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);
}
h2 {
color: #007bff;
margin-bottom: 10px;
}
.clock {
font-size: 2rem;
font-weight: bold;
margin: 10px 0;
}
.toggle-button {
margin-top: 10px;

25
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
background-color: #28a745;
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 = [Link]();
let minutes = [Link]();
let seconds = [Link]();

if (!this.use24HourFormat) {
let period = hours >= 12 ? "PM" : "AM";
hours = hours % 12 || 12; // Convert 0 to 12
return
`${[Link](hours)}:${[Link](minutes)}:${[Link](seconds)}
${period}`;
}
return
`${[Link](hours)}:${[Link](minutes)}:${[Link](seconds)}`;
}
formatNumber(num) {
return num < 10 ? "0" + num : num;
}
toggleFormat() {
this.use24HourFormat = !this.use24HourFormat;
[Link](".toggle-button").innerText =

26
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
this.use24HourFormat ? "Switch to 12-hour format" : "Switch to 24-hour format";
}
}
const clock = new Clock();
function updateClock() {
[Link]("clock").innerText = [Link]();
}
function toggleFormat() {
[Link]();
updateClock();
}
setInterval(updateClock, 1000); // Update clock every second
updateClock(); // Initial call to set time immediately
</script>
</body>
</html>

Output:-

27
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
Q10. Create a Library class that manages:
 Adding books  Removing books
 Checking out books
 Returning books
 Displaying available and checked-out books

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;

28
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
}
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;
}

.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;
}
li {
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>
<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>

29
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
<ul id="availableBooks"></ul>
<h3>Checked Out Books</h3>
<ul id="checkedOutBooks"></ul>
</div>
<script>
class Library {
constructor() {
[Link] = [];
[Link] = [];
}
addBook(book) {
if (book && ![Link](book)) {
[Link](book);
[Link]();
}
}
removeBook(book) {
let index = [Link](book);
if (index !== -1) {
[Link](index, 1);
[Link]();
}
}
checkoutBook(book) {
let index = [Link](book);
if (index !== -1) {
[Link](index, 1);
[Link](book);
[Link]();
}
}
returnBook(book) {
let index = [Link](book);
if (index !== -1) {
[Link](index, 1);
[Link](book);
[Link]();
}
}
updateUI() {
let availableList = [Link]("availableBooks");
let checkedOutList = [Link]("checkedOutBooks");
[Link] = [Link](book => `<li>${book}</li>`).join("");
[Link] = [Link](book =>
`<li>${book}</li>`).join("");
}
}

30
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
const library = new Library();

function addBook() {
let bookName = [Link]("bookName").[Link]();
if (bookName) {
[Link](bookName);
[Link]("bookName").value = "";
}
}
function removeBook() {
let bookName = [Link]("bookName").[Link]();
if (bookName) {
[Link](bookName);
[Link]("bookName").value = "";
}
}
function checkoutBook() {
let bookName = [Link]("bookName").[Link]();
if (bookName) {
[Link](bookName);
[Link]("bookName").value = "";
}
}
function returnBook() {
let bookName = [Link]("bookName").[Link]();
if (bookName) {
[Link](bookName);
[Link]("bookName").value = "";
}
}
</script>
</body>
</html>

31
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
Output:-

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

33

Common questions

Powered by AI

Using classes and objects is significant for structuring programs as it encapsulates related data and behavior into logical units, enhancing modularity and reusability. Each class, like BankAccount, Rectangle, or Student, models a real-world entity with attributes and methods, promoting a clear separation of concerns and simplification of complex systems. This approach supports scalability, easier maintenance, and testing by isolating effects within class boundaries, adhering to object-oriented design principles .

The Clock class tracks time using hours, minutes, and seconds, updating every second with a setInterval. It provides dual-format display capabilities—12-hour with AM/PM and 24-hour formats—by default using the 24-hour format. The method 'getTime()' manipulates hours to match the desired format, ensuring correct handling of edge cases like midnight and noon. A toggle function switches between formats, dynamically updating display text to reflect the current format .

The Rectangle class performs several operations: it calculates the area using 'width * height', the perimeter with '2 * (width + height)', and checks if the rectangle is a square by comparing if 'width === height'. For diagonal length, it uses the formula 'sqrt(width^2 + height^2)' and returns the result rounded to two decimal places. These operations are encapsulated in respective methods, enabling clear abstraction and reuse of the logic .

The capitalization function ensures effectiveness for various inputs by first trimming any extra spaces from the input string. It splits the input into words, capitalizes the first letter of each word using 'charAt(0).toUpperCase()', and then concatenates them back into a single string. It checks for empty input and prompts the user to enter a valid sentence if necessary. This approach ensures that even irregularly formatted strings are handled gracefully .

The Student class manages information by storing the student's name and an array of test scores. New scores are added through a method that ensures valid score ranges (0-100). An average score is calculated by summing all scores in the array and dividing by the number of entries, which is returned to two decimal places. A method checks if the student is passing by comparing the average score against a threshold of 70. These capabilities allow efficient tracking and monitoring of student performance .

The BankAccount class is designed with methods to manage deposits, withdrawals, checking balances, and viewing transaction history. The deposit method adds money to the balance, while the withdrawal method deducts money, ensuring overdrafts are not allowed by checking if the balance is sufficient before proceeding. The check balance method simply returns the current balance. Transactions are stored in a history array that logs every deposit and withdrawal amount along with timestamps for display .

The Library class manages book inventory with methods for adding, removing, checking out, and returning books. It separates available and checked-out books into distinct lists or statuses. The add method places a book into the inventory if not already present. Removing a book checks if it is not checked out before deletion. Checking out and returning methods update the status of a book between available and checked-out lists. These operations require careful synchronization to avoid inconsistencies in inventory management .

A year is considered a leap year if it is divisible by 4 but not by 100, unless it is also divisible by 400. The algorithm checks these conditions sequentially: first, if the year is divisible by 400, it is a leap year; next, if it is divisible by 100 and not by 400, it is not a leap year; and finally, if it is divisible by 4 but not by 100, it is a leap year. The function also validates input to ensure it is a valid numeric year .

The function differentiates between vowels and consonants by using regular expressions to match letters. Vowels are matched using '/[aeiouAEIOU]/g', and consonants are matched using '/[bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ]/g'. It counts the occurrences of each, storing them in arrays. For highlighting vowels, the function uses 'replace' with a regular expression to wrap each vowel in a span element with a specific class that styles it for visibility, which is then displayed in the result section .

The function to find the minimum and maximum numbers in an array works by first splitting a comma-separated string input into an array of numbers. It checks if the input is valid by ensuring all elements are numbers and not empty. If valid, it initializes both the minimum and maximum values to the first number in the array. It then iterates through the array, comparing each number to the current minimum and maximum, updating them accordingly. The results are displayed to the user .

You might also like