Scribd
Upload
22 views

JS

The documents provide examples of HTML/CSS/JavaScript code to create web pages for calculating circle area, displaying movie details, calculating ticket prices, and displaying booking summaries. The code samples include functions, classes, conditionals, loops, and DOM manipulation to display dynamic content on web pages.

Uploaded by

sanjana.devarapalli7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

JS

The documents provide examples of HTML/CSS/JavaScript code to create web pages for calculating circle area, displaying movie details, calculating ticket prices, and displaying booking summaries. The code samples include functions, classes, conditionals, loops, and DOM manipulation to display dynamic content on web pages.

Uploaded by

sanjana.devarapalli7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

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;
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="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;
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;
}
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;
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: 600px;
border: 1px solid #CEE2FA;
text-align: center;
color: #08438E;
background-color: #CEE2FA;
font-family: calibri;
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 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>
<title>Booking Details</title>
<style>
div#maincontent {
height: 200px;
width: 600px;
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: 600px;
border: 1px solid #CEE2FA;
text-align: center;
color: #08438E;
background-color: #CEE2FA;
font-family: calibri;
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 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;
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;
}
h2 {
padding: 0;
margin: 0;
}
</style>
</head>

<body>
<center>
<div id="heading">
<h2>Booking Summary</h2>
</div>
<div id="maincontent">
<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>
<title>Booking Details</title>
<style>
div#maincontent {
height: 150px; /* Increased height to accommodate the content */
width: 500px;
border: 1px solid #CEE2FA;
text-align: left;
color: #08438E;
font-family: calibri;
font-size: 20px;
padding: 5px;
margin-left: 10px;
}
div#heading {
text-decoration: bold;
text-align: center;
margin-top: 40px;
margin-left: 10px;
width: 500px;
border: 1px solid #CEE2FA;
text-align: center;
color: #08438E;
background-color: #CEE2FA;
font-family: calibri;
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>
<div id="maincontent">
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 charset="UTF-8">
<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>
<div class="col-md-4">
<div style="text-align: center;">
<img src="./Tomorrowland.jpg" width="200px" height="250px">
</div>
<div style="padding-top:10px;">
<div style="text-align: center; "><b><span id="mName1"></span></b></div>
<div style="padding-top:10px;padding-left: 95px;"><b>Language: </b><span id="lang1"></span>
</div>
<div style="padding-left: 94px;"><b>Rating:</b><span id="rating1"></span></div>
</div>
</div>
<div class="col-md-4">
<div style="text-align: center;">
<img src="./HungerGames.jpg" width="200px" height="250px">
</div>
<div style="padding-top:10px;">
<div style="text-align: center; "><b><span id="mName2"></span></b></div>
<div style="padding-top:10px;padding-left: 118px;"><b>Language: </b><span id="lang2"></span>
</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",
language: "English",
rating: 3.2
},
{
name: "The Hunger Games",
language: "English",
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>

You might also like