Scribd
Upload
11 views13 pages

22761A4221 Module-4

The document contains multiple JavaScript modules focusing on various programming concepts such as functions, classes, and event handling. It includes code examples for booking movie tickets with pricing conditions, creating an Employee class, and manipulating the DOM to simulate an ice cream cone experience. Each module demonstrates practical applications of JavaScript in web development.

Uploaded by

mouryasaikarnati23
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
11 views13 pages

22761A4221 Module-4

The document contains multiple JavaScript modules focusing on various programming concepts such as functions, classes, and event handling. It includes code examples for booking movie tickets with pricing conditions, creating an Employee class, and manipulating the DOM to simulate an ice cream cone experience. Each module demonstrates practical applications of JavaScript in web development.

Uploaded by

mouryasaikarnati23
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/ 13

20CSS3 – MEAN Stack Technologies

Module-4

4.a Course Name: Javascript.


Module Name: Types of Functions, Declaring and Invoking Function,
Arrow Function, Function Parameters, Nested Function, Built-in
Functions, Variable Scope in Functions Write a JavaScript code to book
movie tickets online and calculate the total price based on the 3 conditions:
(a) If seats to be booked are not more than 2, the cost per ticket remains Rs.
150. (b) If seats are 6 or more, booking is not allowed.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Ticket Booking</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>

var n=Number(window.prompt("Enter number of tickets"));

var ac=9;

var toc=0;

function calculateCost(n){

document.write("Actual Cost per Tickets : $"+ac);

toc=ac*n;

document.write("</br>Total Cost is : $"+toc);

calculateDiscount=(n)=>{
var cost=n*9;

var tc=0,n1=1,dis=5;

while(n1<=n)

var c=9-(9*(dis/100));

tc=tc+c;

document.write("</br>Ticket for Customer "+n1+" gets "+dis+"% discount!, Cost is


: $"+c);

n1=n1+1;

dis=dis+2;

document.write("</br>For "+n+" tickets you need to pay; $"+tc+" instead of: $"+cost);

if(n<2 || n>=5)

document.write("Ticket Booking is Not possible");

else

if(n==2)

calculateCost(n);

else

calculateCost(n);

calculateDiscount(n);

</script>

</div>
</center>

</body>

</html>

4.b Course Name: Javascript.


Module Name: Working With Classes, Creating and Inheriting Classes
Create an Employee class extending from a base class Person. Hints: (i)
Create a class Person with name and age as attributes. (ii) Add a
constructor to initialize the values (iii) Create a class Employee extending
Person with additional attributes role.
<!DOCTYPE html>

<html>

<head>

<title>Classes Demo</title>

<script>

class person {

constructor(name, age) {

this.name = window.prompt("enter your name");

this.age = window.prompt("enter your age");


}

class employee extends person{

constructor(name, age, role, phone) {

super(name, age);

this.role = window.prompt("enter your role");

this.phone = window.prompt("enter your phone");

getDetails() {

document.write("The details of the Employee are </br>");

document.write(`name:${this.name},</br>age:${this.age},</br>role:${this.role},</br>phone:${this.p
hone}`);

let cObj1 = new employee();

cObj1.getDetails();

</script>

</head>

</html>
4.c Course Name: Javascript.
Module Name: In-built Events and Handlers Write a JavaScript code to
book movie tickets online and calculate the total price based on the 3
conditions: (a) If seats to be booked are not more than 2, the cost per ticket
remains Rs. 150. (b) If seats are 6 or more, booking is not allowed.

<!DOCTYPE html>

<html>

<head>

<title>Booking 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;
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: 20;

padding: 5px;

h2 {

padding: 0;

margin: 0;

</style>

</head>

<body>

<div id="heading">

<h2>Booking Summary</h2>

</div>

<div id="maincontent">

<script>

var seat=window.prompt("enter seats");

let discount = 5
var seat_cost = 9

let total=0

if(seat<=2){

document.write(seat*9);

else if(seat>=6){

document.write("Booking is not allowed")

else{

function calculateDiscount(seat) {

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

let discountamount = seat_cost - (seat_cost * discount) / 100;

total+=discountamount;

discount+=2;

let ds="Amount payable after the discount $"+total.toFixed(2)

return ds

function calculatecost(seat){

for (let index = 1; index <= seat; index++) {

var total_cost= seat_cost*index

return total_cost
}

document.write("Cost of per ticket is: $",seat_cost)

document.write("</br>")

document.write("Total cost: $",calculatecost(seat))

document.write("</br>")

document.write("</br>")

document.write("</br>")

document.write("Congratualtions! "+seat+" seats are eligible for discount.");

</script>

<a href="" onclick="alert(calculateDiscount(seat))">Apply</a>

</div>

</body>

</html>
4.d Course Name: Javascript.
Module Name: Working with Objects, Types of Objects, Creating Objects,
Combining and cloning Objects using Spread operator, Destructuring
Objects, Browser Object Model, Document Object Model If a user clicks
on the given link, they should see an empty cone, a different heading, and a
different message and a different background color. If user clicks again,
they should see a re-filled cone, a different heading, a different message,
and a differ.
<!DOCTYPE html>
<html>
<head>
<title>DOM API for HTML modification</title>
</head>
<body style="background-color:lightblue;text-align:center">
<h1 id="hdr1">Here's your ice cream</h1>
<img id="img1" src="i1.jpg" alt="Ice cream is not ready">
<p id="p1" onclick="eat()">Click here to eat</p>
<script>

function eat() {
var imgElement = document.getElementById("img1");

if (imgElement) {
var newSrc = "C:/Users/TEMP.WELAB48.000/Desktop/13.jpg";

imgElement.src = newSrc;
} else {
console.log("Image not found");
}

var para = document.getElementById("p1");

if (para) {
para.textContent = "Click to refill";
para.onclick = refill;
} else {
console.log("element not found");
}

var heading = document.getElementById("hdr1");


if (heading) {
heading.textContent = "Hope you liked it";
} else {
console.log("heading not found");
}
}

function refill() {
var img = document.getElementById("img1");
if (img) {
var returnSrc = "i1.jpg";

img.src = returnSrc;
} else {
console.log("returning image not found");
}

var heading = document.getElementById("hdr1");


if (heading) {
heading.textContent = "here is refilled icecream";
} else {
console.log("heading not found");
}
}

</script>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy