Scribd
Upload
19 views

javascript (1)

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
19 views

javascript (1)

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
You are on page 1/ 33

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 = 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:-

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 Math.min() or Math.max().

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 = 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:-

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 => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize first letter
.join(" "); // Join words back into a string
}
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:-

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 = 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";
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>

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

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

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 */
.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() {
return this.width * this.height;
}
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 * (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:-

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) {
this.name = name;
this.scores = [];
}
addScore(score) {
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>

23
NAME: Aashay Pathak PRN No: ADT24MGTM0901
DIV: B CLASS: MCA-I Sem-II (DS)
Subject: Web Technologies Date:12/03/2025
📈 Average: ${student.getAverage()}<br>
🎯 Passing? ${student.isPassing() ? "✅ Yes" : "❌ No"}
`;
resultBox.style.color = "green";
}
function resetStudent() {
document.getElementById("name").value = "";
document.getElementById("score").value = "";
document.getElementById("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 = 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 =

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() {
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:-

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() {
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(index, 1);
this.updateUI();
}
}
checkoutBook(book) {
let index = this.availableBooks.indexOf(book);
if (index !== -1) {
this.availableBooks.splice(index, 1);
this.checkedOutBooks.push(book);
this.updateUI();
}
}
returnBook(book) {
let index = this.checkedOutBooks.indexOf(book);
if (index !== -1) {
this.checkedOutBooks.splice(index, 1);
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("");
}
}

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 = 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);
document.getElementById("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

You might also like