Scribd
Upload
8 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
Available Formats
Download as PDF, TXT or read online on Scribd
8 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
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