JAVASCRIPT EXPERIMENTS
3.a) Problem Statement:
Write a JavaScript program to find the area of a circle using:
● radius
● pi
Solve the following:
1. Declare radius using let and assign a value to it. Then,
redeclare the same variable again using 'let' and observe
the output. Also, try to re-assign a value to the radius.
2. Repeat the above step with the 'var' keyword.
3. Declare pi using 'const' keyword and initialize it with the
appropriate value and then try re-assigning a value to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>3a-radius</title>
</head>
<body>
<script>
// 1. Using let keyword
console.log("--- Example with let ---");
let radius = 5;
console.log("Initial radius:", radius);
try {
let radius = 7; // Trying to redeclare
console.log("This line won't execute due to
SyntaxError");
} catch (error) {
console.log("Error:", error.message);
}
// Reassigning value to radius
radius = 10;
console.log("After reassignment:", radius);
console.log("\n--- Example with var ---");
// 2. Using var keyword
var circleRadius = 5;
console.log("Initial circleRadius:", circleRadius);
var circleRadius = 7; // Redeclaring with var
console.log("After redeclaration:", circleRadius);
// Reassigning value to circleRadius
circleRadius = 10;
console.log("After reassignment:", circleRadius);
console.log("\n--- Example with const ---");
// 3. Using const keyword
const pi = 3.14159;
console.log("Initial pi value:", pi);
try {
pi = 3.14; // Trying to reassign
console.log("This line won't execute");
} catch (error) {
console.log("Error:", error.message);
}
// Calculate area using final values
const area = pi * radius * radius;
console.log("\nFinal calculation:");
console.log(`Area of circle with radius ${radius}
is: ${area}`);
</script>
</body>
</html>
3.b) Problem Statement:
Write JavaScript code to display the movie details such as
movie name, language, and ratings. Initialize the variables with
values of appropriate types. Use template literals wherever
necessary.
Expected Output:
Starter Code:
<!DOCTYPE html>
<html>
<head>
<title>Movie Details</title>
<style>
div#maincontent {
height: 100px;
width: 500px;
border: 1px solid #CEE2FA;
text-align: left;
color: #08438E;
font-family: calibri;
font-size: 20;
padding: 5px;
}
div#heading {
text-decoration: bold;
text-align: center;
margin-top: 80px;
width: 500px;
border: 1px solid #CEE2FA;
text-align: center;
color: #08438E;
background-color: #CEE2FA;
font-family: calibri;
font-size: 20;
padding: 5px;
}
</style>
</head>
<body>
<center>
<div id="heading">Movie Details</div>
<div id="maincontent">
<script>
//Write the code to display the movie details
</script>
</div>
</center>
</body>
</html>
Script code
// Initialize movie details with appropriate data types
const movieName = "The Matrix";
const language = "English";
const ratings = 4.8;
const releaseYear = 1999;
// Using template literals to create the
output string
const movieDetails = `Movie Name:
${movieName}<br>
Language: ${language}<br>
Ratings: ${ratings}/5<br>
Release Year: ${releaseYear}`;
// Write the movie details to the
document
document.write(movieDetails);
3.c) Problem Statement:
Write JavaScript code to do online booking of theatre tickets
and calculate the total price, considering the price per ticket as
$9. Also, apply a festive season discount of 10% and calculate
the discounted amount.
Expected output:
Starter code:
<!DOCTYPE html>
<html>
<head>
<title>Ticket Details</title>
<style>
div#maincontent {
height: 150px;
width: 500px;
border: 1px solid #CEE2FA;
text-align: left;
color: #08438E;
font-family: calibri;
font-size: 20px;
padding: 5px;
}
div#heading {
font-weight: bold;
text-align: center;
margin-top: 80px;
width: 500px;
border: 1px solid #CEE2FA;
color: #08438E;
background-color: #CEE2FA;
font-family: calibri;
font-size: 20px;
padding: 5px;
}
h4 {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<center>
<div id="heading">
<b>Theatre Drama</b>
</div>
<div id="maincontent">
<h4>Your Ticket Details:</h4>
<br>
</div>
</center>
</body>
</html>
Script code:
<script>
// Define constants
const pricePerTicket = 9;
const numberOfTickets = 3;
const discountPercentage = 10;
// Calculate total cost before discount
const totalCost = pricePerTicket *
numberOfTickets;
// Calculate discount amount
const discountAmount = (totalCost *
discountPercentage) / 100;
// Calculate final cost after discount
const finalCost = totalCost -
discountAmount;
// Create output using template literals
const ticketDetails = `Total number of
seats booked: ${numberOfTickets}<br>
Total cost of ${numberOfTickets} tickets:
$${totalCost}<br>
Festive season discount is: ${discountPercentage} %<br>
Total cost after discount is: $${finalCost}`;
// Display the ticket details
document.write(ticketDetails);
</script>
3.d) Problem Statement:
Write a JavaScript code to make online booking of theatre
tickets and calculate the total price based on the below
conditions:
1. If seats to be booked are not more than 2, the cost per
ticket remains $9.
2. If seats are 5 or more, booking is not allowed.
3. If seats to be booked are more than 2 but less than 5,
based on the number of seats booked, do the following:
○ Calculate total cost by applying discounts of 5, 7, 9,
11 percent, and so on for customer 1,2,3 and 4.
○ Try the code with different values for the number of
seats.
Expected Output:
Starter code:<!DOCTYPE html>
<html>
<head>
<title>Booking Details</title>
<style>
div#maincontent {
height: auto;
width: 600px;
border: 1px solid #CEE2FA;
text-align: left;
color: #08438E;
font-family: calibri;
font-size: 20px;
padding: 5px;
}
div#heading {
text-align: center;
margin-top: 80px;
width: 600px;
border: 1px solid #CEE2FA;
color: #08438E;
background-color: #CEE2FA;
font-family: calibri;
font-size: 20px;
padding: 5px;
}
h4 {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<center>
<div id="heading">
<b>Theatre Drama</b>
</div>
<div id="maincontent">
<h4>Your Ticket Details:</h4>
<br>
<div>
<label for="seats">Enter the number of
seats to book:</label>
<input type="number" id="seats" min="1"
max="10" placeholder="Enter seats" required>
<button onclick="calculateBooking()">Book
Tickets</button>
</div>
<br>
<div id="output"></div>
</div>
</center>
</body>
</html>
Script code:
<script>
function calculateBooking() {
const seatsToBook =
parseInt(document.getElementById('seats').value);
const ticketPrice = 9;
let totalPrice = 0;
let discount = 0;
let outputMessage = "";
if (isNaN(seatsToBook) || seatsToBook < 1)
{
outputMessage = "Please enter a valid
number of seats.";
} else if (seatsToBook <= 2) {
totalPrice = seatsToBook *
ticketPrice;
outputMessage = `For ${seatsToBook}
tickets, you need to pay: $${totalPrice.toFixed(2)}.`;
} else if (seatsToBook >= 5) {
outputMessage = `Seats booked:
${seatsToBook}<br>Booking not allowed for 5 or more
seats.`;
} else {
// Calculate discount for more than 2
but less than 5 seats
for (let i = 1; i <= seatsToBook; i++)
{
discount = 5 + (i - 1) * 2; //
Calculate discount percentage
const discountedPrice =
ticketPrice * (1 - discount / 100);
totalPrice += discountedPrice;
outputMessage += `Ticket for
Customer ${i} gets ${discount}% discount!, Cost is:
$${discountedPrice.toFixed(2)}!<br>`;
}
const originalPrice = seatsToBook *
ticketPrice;
outputMessage += `For ${seatsToBook}
tickets, you need to pay: $${totalPrice.toFixed(2)}
instead of $${originalPrice.toFixed(2)}.`;
}
</script>
3.e) Problem Statement:
Write a JavaScript code to do online booking of theatre tickets
and calculate the total price based on the below conditions:
1. If seats to be booked are not more than 2, the cost per
ticket remains $9.
2. If seats are 6 or more, booking is not allowed.
3. If seats to be booked are more than 2 but less than 5,
based on the number of seats booked, do the following:
○ Calculate total cost by applying a discount of 5, 7, 9,
11 percent, and so on for customer 1,2,3 till 5.
○ Try the code with different values for the number of
seats.
Implement the problem statement using 'for' loop, 'while' loop
and 'do-while' loop.
code:
<!DOCTYPE html>
<html>
<head>
<title>Booking Details</title>
<style>
div#maincontent {
height: auto;
width: 600px;
border: 1px solid #CEE2FA;
text-align: left;
color: #08438E;
font-family: calibri;
font-size: 20px;
padding: 5px;
}
div#heading {
text-align: center;
margin-top: 80px;
width: 600px;
border: 1px solid #CEE2FA;
color: #08438E;
background-color: #CEE2FA;
font-family: calibri;
font-size: 20px;
padding: 5px;
}
h4 {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<center>
<div id="heading">
<b>Theatre Drama</b>
</div>
<div id="maincontent">
<h4>Your Ticket Details:</h4>
<br>
<div>
<label for="seats">Enter the number of
seats to book:</label>
<input type="number" id="seats"
min="1" max="10" placeholder="Enter seats" required>
<button
onclick="calculateBooking()">Book Tickets</button>
</div>
<br>
<div id="output"></div>
</div>
</center>
<script>
const basePrice = 9;
function calculateBooking() {
const seats =
parseInt(document.getElementById('seats').value);
let output = "";
if (seats <= 2) {
output = `Total cost for ${seats}
tickets: $${seats * basePrice}`;
} else if (seats >= 6) {
output = "Booking not allowed for 6 or
more seats!";
} else {
output =
calculateWithDifferentLoops(seats);
}
document.getElementById('output').innerHTML = output;
}
function calculateWithDifferentLoops(seats) {
let output = "<h4>Using For Loop:</h4>";
output += calculateWithForLoop(seats);
output += "<br><h4>Using While
Loop:</h4>";
output += calculateWithWhileLoop(seats);
output += "<br><h4>Using Do-While
Loop:</h4>";
output += calculateWithDoWhileLoop(seats);
return output;
}
function calculateWithForLoop(seats) {
let result = "";
let totalCost = 0;
for (let i = 0; i < seats; i++) {
const discount = 5 + (i * 2);
const discountedPrice = basePrice * (1
- discount/100);
totalCost += discountedPrice;
result += `Ticket for Customer ${i +
1} gets ${discount}% discount!, Cost is:
$${discountedPrice.toFixed(2)}<br>`;
}
result += `For ${seats} tickets, you need
to pay: $${totalCost.toFixed(2)} instead of $${seats *
basePrice}<br>`;
return result;
}
function calculateWithWhileLoop(seats) {
let result = "";
let totalCost = 0;
let i = 0;
while (i < seats) {
const discount = 5 + (i * 2);
const discountedPrice = basePrice * (1
- discount/100);
totalCost += discountedPrice;
result += `Ticket for Customer ${i +
1} gets ${discount}% discount!, Cost is:
$${discountedPrice.toFixed(2)}<br>`;
i++;
}
result += `For ${seats} tickets, you need
to pay: $${totalCost.toFixed(2)} instead of $${seats *
basePrice}<br>`;
return result;
}
function calculateWithDoWhileLoop(seats) {
let result = "";
let totalCost = 0;
let i = 0;
do {
const discount = 5 + (i * 2);
const discountedPrice = basePrice * (1
- discount/100);
totalCost += discountedPrice;
result += `Ticket for Customer ${i +
1} gets ${discount}% discount!, Cost is:
$${discountedPrice.toFixed(2)}<br>`;
i++;
} while (i < seats);
result += `For ${seats} tickets, you need
to pay: $${totalCost.toFixed(2)} instead of $${seats *
basePrice}<br>`;
return result;
}
</script>
</body>
</html>
