JS

EX 3A
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Area Calculator</title>
</head>
<body>
<h1>Circle Area Calculator</h1>
<p>Enter the radius of the circle:</p>
<input type="number" id="radiusInput" placeholder="Radius">
<button onclick="calculateAndDisplayArea()">Calculate Area</button>
<div id="areaOutput"></div>
<script>
function calculateAndDisplayArea() {
let radius = document.getElementById('radiusInput').value;
const area = Math.PI * (radius ** 2);
document.getElementById('areaOutput').innerText = `The area of the circle is: ${area.toFixed(2)}`;
}
</script>
</body>
</html>
EX 3B
<!DOCTYPE html>
<html>
<head>
<title>Movie Details</title>
<style>
div#moviedesc {
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;
text-align: center;
color: #08438E;
background-color: #CEE2FA;
font-size: 20;
padding: 5px;
}
</style>
</head>
<body>
<center>
<div id="heading">Movie Details</div>
<div id="moviedesc"> </div>
<script>
//Write the code to display the movie details
var moviename="Salaar"
var language="Telugu"
var rating=5.0
let moviedesc=`Movie Name:${moviename}
<br> Language:${language}
<br> Rating:${rating}`
document.getElementById('moviedesc').innerHTML=moviedesc
</script>
</center>
</body>
</html>
EX 3C
<!DOCTYPE html>
<html>
<head>
<title>Ticket Details</title>
<style>
div#maincontent {
height: 150px;
width: 500px;
text-align: left;
color: #08438E;
font-size: 20;
padding: 5px;
}
div#heading {
text-align: center;
margin-top: 80px;
width: 500px;
text-align: center;
color: #08438E;
font-size: 20;
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>
<script>
//Write the code to calculate the total price and discounted price for the tickets
var noOfTickets = parseInt(window.prompt("Enter number of tickets"))
document.write("Price of each ticket : $9")
document.write("<br>Number of Tickets : "+noOfTickets)
var price = noOfTickets*9
document.write("<br>Price is : "+price)
document.write("<br>10% Discount : "+price*0.1)
document.write("<br>Total Price : "+(price - (price*0.1)))
</script>
</div>
</center>
</body>
</html>
EX 3D
<!DOCTYPE html>
<html>
<head>
<title>Booking Details</title>
<style>
div#maincontent {
height: 200px;
width: 600px;
text-align: left;
color: #08438E;
font-size: 20;
padding: 5px;
}
div#heading {
text-align: center;
margin-top: 80px;
width: 600px;
text-align: center;
color: #08438E;
font-size: 20;
padding: 5px;
}
h4 {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<center>
<div id="heading">
</div>
<br>
<script>
// Write the code to display the total price and discounted price of tickets
var noOfTickets = parseInt(window.prompt("Enter number of tickets"))
document.write("Price of each ticket : $9")
document.write("<br>Number of Tickets : "+noOfTickets)
var price = noOfTickets*9
if(noOfTickets<=2){
document.write("<br>Price is:$"+price)
}
else if(noOfTickets>=5){
document.write("<br>You cannot book the tickets! ")
alert("Limit exceeded")
}
else{
for (let i = 1; i <= noOfTickets; i++) {

let discount = (i * 5) % 10; // Calculate discount based on customer number
let discountedPrice = price * (1 - discount / 100);
totalPrice += discountedPrice;
document.write(`<p>Ticket for Customer ${i} gets ${discount}% discount!, Cost is: $${discountedPrice.to
}
let totalWithoutDiscount = price * noOfTickets;

document.write(`<p>For ${numTickets} tickets, you need to pay: $${totalPrice.toFixed(2)} instead of $${to
}
</script>
</div>
</center>
</body>
</html>
EX 3E
<!DOCTYPE html>
<html>
<head>
<style>
div#maincontent {
height: 200px;
width: 600px;
text-align: left;
color: #08438E;
font-size: 20;
padding: 5px;
}
div#heading {
text-align: center;
margin-top: 80px;
width: 600px;
text-align: center;
color: #08438E;
font-size: 20;
padding: 5px;
}
h4 {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<center>
<div id="heading">
</div>
<br>
<script>
//Write the code to display the ticket details
let numTickets = 4;
let totalPrice = 0;
let originalPrice = 9;
for (let i = 1; i <= numTickets; i++) {
let discount = ((2*i * 1)+1) % 10; // Calculate discount based on customer number
let discountedPrice = originalPrice * (1 - discount / 100);
totalPrice += discountedPrice;
document.write(`<p>Ticket for Customer ${i} gets ${discount}% discount!, Cost is: $${discountedPrice.toFixed(2)}</
}
let totalWithoutDiscount = originalPrice * numTickets;

document.write(`<p>For ${numTickets} tickets, you need to pay: $${totalPrice.toFixed(2)} instead of $${totalWithout
</script>
</div>
</center>
</body>
</html>
EX 4A
<!DOCTYPE html>
<html>
<head>
<title>Booking Summary</title>
<style>
div#maincontent {
height: 250px;
width: 500px;
text-align: left;
color: #08438E;
font-size: 20;
padding: 5px;
}
div#heading {
text-align: center;
margin-top: 80px;
width: 500px;
text-align: center;
color: #08438E;
font-size: 20;
padding: 5px;
}
h2 {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<center>
<div id="heading">
<h2>Booking Summary</h2>
</div>
<script>
const calculateDiscount = (seats) => {
if (seats <= 2) {
return 0;
} else if (seats <= 5) {
return Array(seats - 0).fill(0).map((_, i) => (2*i + 5));
} else {
return null;
}
};
// Function to calculate total cost

const calculateCost = (seats, discounts) => {
if (seats <= 0 || seats > 5 || !discounts) {
return null;
}
const basePrice = 9;
const discountedPrice = discounts.reduce((acc, discount) => acc + basePrice * (100 - discount) / 100, 0);
return discountedPrice.toFixed(2);
};
// Get the number of seats from the image (4 in this case)

const numSeats = 4;
// Calculate discount and total cost

const discounts = calculateDiscount(numSeats);
const totalCost = calculateCost(numSeats, discounts);
// Display booking summary

document.write(`<p>Actual cost per ticket: $9</p>`);
if (discounts) {
document.write(`<p>${numSeats} seats are eligible for festive discount!!</p>`);
discounts.forEach((discount, i) => {
document.write(`<p>${discount}% discount! on Ticket ${i + 1}</p>`);
});
}
document.write(`<p>Amount payable: $${totalCost}</p>`);
</script>
</div>
</center>
</body>
</html>
EX 4B
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee Class</title>
</head>
<body>
<script>
class Person{
constructor(name, age){
this.name = name
this.age = age
}
}
class Employee extends Person{
constructor(name, age, salary, address){
super(name,age)
this.salary = salary
this.address = address
}
display(){
document.write("Name : "+this.name)
document.write("<br>Age : "+this.age)
document.write("<br>Salary : "+this.salary)
document.write("<br>Address : "+this.address)
}
}
var emp = new Employee('Nandini',21,1000000,'vizag')
emp.display()
</script>
</body>
</html>
EX 4C
<!DOCTYPE html>
<html>
<head>
<style>
div#maincontent {
height: 150px; /* Increased height to accommodate the content */
width: 500px;
text-align: left;
color: #08438E;
font-size: 20px;
padding: 5px;
margin-left: 10px;
}
div#heading {
text-align: center;
margin-top: 40px;
margin-left: 10px;
width: 500px;
text-align: center;
color: #08438E;
font-size: 20px;
padding: 5px;
}
h2 {
padding: 0;
margin: 0;
}
.clickable-text {
color: blue;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<div id="heading">
<h2>Booking Summary</h2>
</div>
<p>Cost per ticket is: $<span id="costPerTicket">9</span></p>
<p>Total cost: $<span id="totalCost">0</span></p>
<div>
<p>
Enter the number of seats: <input type="number" id="numSeatsInput" value="4" min="1" max="5">
<button onclick="updateTotalCost()">Calculate Total Cost</button>
</p>
<p>
Congratulations! <span id="discountEl">4</span> seats are eligible for discount.
<span id="discountApply" class="clickable-text" onclick="calculateDiscount()">Apply!</span>
</p>
</div>
</div>
<script>
function calculateCost(seats) {
const costPerTicket = 9;
let totalCost = seats * costPerTicket;
if (seats > 5) {
alert("Booking is not allowed for more than 5 seats.");
totalCost = 0;
}
return totalCost;
}
function calculateDiscount() {
const discountPercentages = [0, 5, 7, 9, 11];
const discountEl = document.getElementById("discountEl");
const totalCostEl = document.getElementById("totalCost");
const amountPayableEl = document.getElementById("amountPayable");
let totalCost = parseFloat(totalCostEl.textContent);

let discount = discountPercentages[parseInt(discountEl.textContent) - 1];
let amountPayable = totalCost * (100 - discount) / 100;
totalCostEl.textContent = totalCost.toFixed(2);
// Display an alert with the amount payable after discount

alert(`Amount Payable after discount is: $${amountPayable.toFixed(2)}`);
}
function updateTotalCost() {
const numSeatsInput = document.getElementById("numSeatsInput");
const numSeats = parseInt(numSeatsInput.value);
const costPerTicketEl = document.getElementById("costPerTicket");
const totalCostEl = document.getElementById("totalCost");
const totalCost = calculateCost(numSeats);

costPerTicketEl.textContent = totalCost.toFixed(2);
totalCostEl.textContent = totalCost.toFixed(2);
}
</script>
</body>
</html>
EX 4D
<!DOCTYPE html>
<html lang="en">
<head>
<title>Enjoy Your Ice Cream!</title>
<style>
body {
background-color: lightblue;
text-align: center;
font-family: sans-serif;
}
#ice-cream-container {
margin: 50px auto;
width: 400px;
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
h1 {
margin-bottom: 20px;
}
#ice-cream-image {
width: 400px;
height: 300px;
border-radius: 10px;
}
#ice-cream-message {
margin-top: 20px;
font-size: 16px;
}
#eat-button {
padding: 10px 20px;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="ice-cream-container">
<h1>Scrumptious Ice Cream Cone!</h1>
<img id="ice-cream-image" src="./Ice 1.jpg" alt="Ice cream cone filled with scoops">
<p id="ice-cream-message">Ready to enjoy this delicious treat?</p>
<button id="eat-button" onclick="eat()">Click here to eat!</button>
</div>
<script>
let clicks = 0;
function eat() {
clicks++;
if (clicks === 1) {
document.getElementById("ice-cream-image").src ="./Ice2.1.jpg";
document.getElementById("ice-cream-message").textContent = "That was so good!";
document.getElementById("eat-button").textContent = "Click to re-fill?";

document.body.style.backgroundColor = "lightgreen";
}
else if (clicks === 2) {
document.getElementById("ice-cream-image").src = "./Ice2.jpg";
document.getElementById("ice-cream-message").textContent = "Ready for more?";
document.getElementById("eat-button").textContent = "Enjoy Yourself!!";
document.body.style.backgroundColor = "lightblue";
clicks = 0; // Reset clicks for refilling
}
}
</script>
</body>
EX 5A
<!DOCTYPE html>
<html>
<head>
<title>Movies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="margin-top:7%">
<center>
<h2>Your Favorite Movies!!</h2>
</center>
</div>
<div class="container" style="padding-top:5%">
<div class="row">
<div class="col-md-4">
<div style="text-align: center;">
<img src="./FourSoldiers.jpg" width="200px" height="250px">
</div>
<div style="padding-top:10px;">
<div style="text-align: center; ">
<b><span id="mName0"></span></b></div>
<div style="padding-top:10px;padding-left: 101px;"><b>Language: </b><span id="lang0"></span>
</div>
<div style="padding-left: 100px;"><b>Rating: </b><span id="rating0"></span></div>
</div>
</div>
<img src="./Tomorrowland.jpg" width="200px" height="250px">
</div>
<div style="text-align: center; "><b><span id="mName1"></span></b></div>
</div>
<div style="padding-left: 94px;"><b>Rating:</b><span id="rating1"></span></div>
</div>
</div>
<img src="./HungerGames.jpg" width="200px" height="250px">
</div>
<div style="text-align: center; "><b><span id="mName2"></span></b></div>
</div>
<div style="padding-left: 117px;"><b>Rating:</b><span id="rating2"></span></div>
</div>
</div>
</div>
</div>
</body>
<script>
//Write the code here
//Movie data as an array of objects
const movies = [
{
name: "The Four Soldiers",
language: "English",
rating: 3.1
},
{
name: "Tomorrowland: A World Beyond",
rating: 3.2
},
{
name: "The Hunger Games",
rating: 3.6
}
];
// Populate movie details in the HTML elements

for (let i = 0; i < movies.length; i++) {
document.getElementById(`mName${i}`).textContent = movies[i].name;
document.getElementById(`lang${i}`).textContent = movies[i].language;
}
</script>
</html>
EX 5B
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stock Price Simulator</title>
</head>
<body>
<h1>Stock Price Simulator</h1>
<script>
// Function to generate a random rounded number
function generateRandomNumber() {
return Math.floor(Math.random() * 100); // Generating random number between 0 and 99
}
// Function to simulate periodic stock price updates

function simulateStockPriceUpdates() {
return new Promise((resolve, reject) => {
let count = 0;
const interval = setInterval(() => {
const stockPrice = generateRandomNumber();
document.write(`Stock price: $${stockPrice}`);
count++;
if (count >= 5) {
clearInterval(interval);
resolve("Simulation completed.");
}
}, 3000); // Update every 3 seconds
});
}
// Start simulation
simulateStockPriceUpdates().then((message) => {
document.write(message);
}).catch((error) => {
console.error("Error:", error);
});
</script>
</body>
</html>
EX 5C

<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Page</title>
</head>
<body>
<h2>Login</h2>
<form onsubmit="validateLogin()">
<label for="username">Username:</label>
<input type="text" id="username" required>
<label for="password">Password:</label>
<input type="password" id="password" required>
<button type="submit">Login</button>
</form>
<script>
// Import the User class from login.js
class User {
constructor(username, password) {
this.username = username;
this.password = password;
}
validate(inputUsername, inputPassword) {
if (inputUsername === this.username && inputPassword === this.password) {
return "Login Successful";
} else {
return "Unauthorized access";
}
}
}
// Create an instance of the User class with your desired username and password
const user = new User("exampleUser", "examplePassword");
// Validate login on form submission

function validateLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// Invoke the validate method from the User class

const result = user.validate(username, password);
alert(result);
// Prevent form submission

return false;
}
</script>
</body>
</html>

JS

Uploaded by

Copyright:

Available Formats

JS

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JS

Uploaded by

Copyright:

Available Formats

EX 3A

for (let i = 1; i <= noOfTickets; i++) {

let totalWithoutDiscount = price * noOfTickets;

for (let i = 1; i <= numTickets; i++) {

let totalWithoutDiscount = originalPrice * numTickets;

// Function to calculate total cost

// Get the number of seats from the image (4 in this case)

// Calculate discount and total cost

// Display booking summary

let totalCost = parseFloat(totalCostEl.textContent);

// Display an alert with the amount payable after discount

const totalCost = calculateCost(numSeats);

document.getElementById("ice-cream-message").textContent = "That was so good!";

document.getElementById("eat-button").textContent = "Click to re-fill?";

// Populate movie details in the HTML elements

<h1>Stock Price Simulator</h1>

// Function to simulate periodic stock price updates

// Validate login on form submission

// Invoke the validate method from the User class

// Prevent form submission

You might also like