Scribd
Upload
8 views

MSD LAB(1-4 EXP)

The document outlines a series of experiments focused on enhancing the HTML structure and functionality of IEKart's Shopping application. It covers various aspects such as adding metadata, sectioning elements, grouping elements, linking pages, and incorporating multimedia content. Additionally, it includes programming examples and descriptions for implementing these features effectively.

Uploaded by

chaitanya252533
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
8 views

MSD LAB(1-4 EXP)

The document outlines a series of experiments focused on enhancing the HTML structure and functionality of IEKart's Shopping application. It covers various aspects such as adding metadata, sectioning elements, grouping elements, linking pages, and incorporating multimedia content. Additionally, it includes programming examples and descriptions for implementing these features effectively.

Uploaded by

chaitanya252533
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/ 39

EXPERIMENT 1A)

AIM:

Include the Metadata element in Homepage.html for providing description as


"IEKart's is an online shopping website that sells goods in retail. This company deals
with various categories like Electronics, Clothing, Accessories etc.

DESCRIPTION: Case-insensitivity: HTML is case-insensitive, meaning that tags and attributes


can be written in uppercase or lowercase letters and will still be recognized by the browser.

Platform-independency: HTML is platform-independent, meaning that it can be viewed on any


device or operating system with a web browser.

DOCTYPE Declaration: The DOCTYPE declaration is used at the beginning of an HTML


document to specify the version of HTML being used and to ensure that the document is
rendered correctly by web browsers.

Types of Elements: HTML has several types of elements, including structural elements (such as
<html>, <head>, and <body>), text-level elements (such as <p> and <span>), and multimedia
elements (such as <img>, <audio>, and <video>).

HTML Elements - Attributes: HTML elements can be customized with attributes, which provide
additional information about the element and how it should be displayed or used. Examples of
attributes include "class" for defining CSS styles, "id" for identifying a specific element, and
"href" for specifying a hyperlink.

Metadata Element: The metadata element (<meta>) is used to provide information about the
HTML document that is not displayed in the browser window. This includes information such as
the author, description, and keywords, which can be used by search engines to index and display
the webpage in search results.

PROGRAM:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="description" content="IEKart's is an online shopping website that sells goods in


retail. This company deals with various categories like Electronics, Clothing, Accessories etc.">

<title>IEKart's Shopping</title>
</head>

<body>

<h1>Welcome to IEKart's Shopping!</h1>

<p>We sell a variety of products in different categories such as Electronics, Clothing, Accessories
and more!</p>

</body>

</html>

OUTPUT:
1.b )
AIM:
Enhance the Homepage.html of IEKart's Shopping Application by adding appropriate
sectioning elements.

DESCRIPTION:
Sectioning elements in HTML are used to divide the content of a web page into logical sections,
making it easier for users to understand and navigate the content. These elements include
<header>, <nav>, <section>, <article>, <aside>, and <footer>. The <header> element is used to
identify the header section of a page, while the <nav> element is used to define a set of
navigation links.

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>IEKart's Shopping Application Homepage</title>

<meta name="description" content="IEKart's is an online shopping website that sells goods in


retail. This company deals with various categories like Electronics, Clothing, Accessories etc.">

</head>

<body>

<header>

<!-- Header content goes here -->

</header>

<nav>

<!-- Navigation links go here -->

</nav>

<main>

<section>

<h1>Featured Products</h1>
<!-- Content for featured products section goes here -->

</section>

<section>

<h1>Categories</h1>

<!-- Content for categories section goes here -->

</section>

<section>

<h1>Deals of the Day</h1>

<!-- Content for deals section goes here -->

</section>

</main>

<aside>

<!-- Sidebar content goes here -->

</aside>

<footer>

<!-- Footer content goes here -->

</footer>

</body>

</html>

OUTPUT:
1.c )
AIM: Make use of appropriate grouping elements such as list items to "About Us" page of
IEKart's Shopping Application

DESCRIPTION: Paragraph Element: The <p> element is used to define a paragraph of text in
HTML.

Division and Span Elements: The <div> and <span> elements are used to group elements and
apply styles or classes to them. The <div> element is a block-level element, while the <span>
element is an inline-level element.

List Element: The <ul>, <ol>, and <li> elements are used to create lists in HTML. The <ul>
element creates an unordered list, the <ol> element creates an ordered list, and the <li> element
defines each item in the list.

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>About Us - IEKart's Shopping Application</title>

</head>

<body>

<h1>About Us</h1>

<p>We are IEKart's, an online shopping website that sells goods in retail.</p>

<h2>Our Team</h2>

<ul>

<li>John Smith - CEO</li>

<li>Jane Doe - Marketing Director</li>

<li>Bob Johnson - Chief Financial Officer</li>

</ul>

<h2>Our Mission</h2>

<ul>
<li>To provide high-quality products at affordable prices to our customers.</li>

<li>To create a seamless online shopping experience for our customers.</li>

<li>To continuously innovate and improve our offerings to meet the changing needs of our
customers.</li>

</ul>

</body>

</html>

OUTPUT:
1.d )
AIM:
Link "Login", "SignUp" and "Track order" to "Login.html", "SignUp.html" and
"Track.html" page respectively. Bookmark each category to its details of IEKart's
Shopping application.

DESCRIPTION:

The Link element (<link>) is an HTML element used to define a relationship between the current
document and an external resource. This element is commonly used to link stylesheets to an HTML
document, allowing the page to be styled with CSS.

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>IEKart's Shopping Application</title>

</head>

<body>

<ul>

<li><a href="Homepage.html">Home</a></li>

<li><a href="Products.html">Products</a></li>

<li><a href="Login.html">Login</a></li>

<li><a href="SignUp.html">Sign Up</a></li>

<li><a href="Track.html">Track Order</a></li>

</ul>

<h1>About Us</h1>

<p>...</p>

<h2>Categories</h2>
<ul>

<li><a href="#electronics">Electronics</a></li>

<li><a href="#clothing">Clothing</a></li>

<li><a href="#accessories">Accessories</a></li>

</ul>

<h2 id="electronics">Electronics</h2>

<p>...</p>

<h2 id="clothing">Clothing</h2>

<p>...</p>

<h2 id="accessories">Accessories</h2>

<p>...</p>

<footer>

<p>Copyright © 2023 IEKart's Shopping Application</p>

</footer>

</body>

</html>

OUTPUT:
1.e )
AIM: Add the © symbol in the Home page footer of IEKart's Shopping application.

DESCRIPTION:
In HTML, character entities are special codes used to represent special characters that are not
part of the standard character set. These entities are defined by their unique entity name or a
numeric code and are used to display symbols, foreign characters, mathematical symbols, and
more. Examples of character entities include < for <, > for >, and & for &.

PROGRAM:

<footer>

<p>Copyright © 2023 IEKart's Shopping Application</p>

</footer>

OUTPUT:

1.F)
AIM:
Add the global attributes such as contenteditable, spellcheck, id etc. to enhance the
Signup Page functionality of IEKart's Shopping application.

DESCRIPTION:HTML5 Global Attributes are attributes that can be used on any HTML element and
are not limited to specific elements. These attributes can be used to provide additional information
about an element, such as defining the class or id, setting styles, and assigning event handlers. Some
commonly used global attributes include "class", "id", "style", "title", and "data-*".

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Signup Page - IEKart's Shopping Application</title>

</head>
<body>

<h1>Signup</h1>

<form action="signup.php" method="POST">

<label for="username">Username:</label>

<input type="text" name="username" id="username" required contenteditable="true">

<br><BR>

<label for="email">Email:</label>

<input type="email" name="email" id="email" required spellcheck="true">

<br><BR>

<label for="password">Password:</label>

<input type="password" name="password" id="password" required>

<br><BR>

<label for="confirm_password">Confirm Password:</label>

<input type="password" name="confirm_password" id="confirm_password" required>

<br><BR>

<input type="submit" value="Signup">

</form>

</body>

</html>

OUTPUT:
EXPERIMENT-2A)

AIM:Enhance the details page of IEKart's Shopping application by adding a table elementto
display the available mobile/any inventories.

DESCRIPTION: Table elements in HTML are used to display data in a tabular format and can
be customized using attributes such as colspan/rowspan, border, cellspacing, and cellpadding.

PROGRAM:

<!DOCTYPE html>

<head><title>Product Details</title></head>

<body>

<div class="product-details">

<h1>Product Name</h1>

<p>Product description goes here</p>

<table border="1" cellspacing="0" cellpadding="10">

<tr>

<th>Model</th>

<th>Color</th>

<th>Storage</th>

<th>Price</th>

<th>Availability</th>

</tr>

<tr>

<td>Model A</td>

<td>Black</td>

<td>64GB</td>

<td>$699</td>

<td>In stock</td>

</tr>
<tr>

<td>Model A</td>

<td>White</td>

<td>128GB</td>

<td>$799</td>

<td>In stock</td>

</tr>

<tr>

<td>Model B</td>

<td>Black</td>

<td>64GB</td>

<td>$799</td>

<td>Out of stock</td>

</tr>

<tr>

<td>Model B</td>

<td>White</td>

<td>128GB</td>

<td>$899</td>

<td>In stock</td>

</tr></table></div></body></html>

OUTPUT
2.b)
AIM: Using the form elements create Signup page for IEKart's Shopping application.

DESCRIPTION: Form elements in HTML are used to collect user input and can be
customized with various attributes such as input type, name, placeholder, and required. The color
and date pickers allow users to choose colors and dates from a graphical interface, while select
and datalist elements provide a dropdown menu for users to select from a pre-defined list of
options

PROGRAM:

<!DOCTYPE html>

<head>

<title>IEKart's Shopping Application Signup</title>

</head>

<body>

<h1>Signup</h1>

<form action="submit_form.php" method="POST">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required><br><br>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required><br><br>

<label for="confirm-password">Confirm Password:</label>

<input type="password" id="confirm-password" name="confirm-password" required><br><br>


<label for="address">Address:</label>

<textarea id="address" name="address" required></textarea><br><br>

<label for="phone-number">Phone Number:</label>

<input type="tel" id="phone-number" name="phone-number" required><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT:
2.c )
AIM:Enhance Signup page functionality of IEKart's Shopping application by adding
attributes to input elements

DESCRIPTION: elements in HTML are used to collect user input and can be customized using
various attributes such as type, name, value, placeholder, autofocus, required, disabled, and
readonly. These attributes provide additional functionality and control over how users can
interact with the input element. For example, the type attribute can specify whether the input
should be a text box, checkbox, radio button, or other types of input. The required attribute can
indicate that the user must provide input in order to submit the form, while the readonly attribute
can indicate that the user cannot modify the input value

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>IEKart's Shopping Application Signup</title>

</head>

<body>

<h1>Signup</h1>

<form action="submit_form.php" method="POST">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required minlength="3" maxlength="50"><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required maxlength="100"><br>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required minlength="8"


maxlength="50" pattern="^(?=.[a-z])(?=.[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
title="Password must contain at least one lowercase letter, one uppercase letter, one number,
and be at least 8 characters long"><br>

<label for="confirm-password">Confirm Password:</label>

<input type="password" id="confirm-password" name="confirm-password" required


minlength="8" maxlength="50"

title="Password must match the previous password"><br>

<label for="address">Address:</label>

<textarea id="address" name="address" required minlength="10"


maxlength="200"></textarea><br>

<label for="phone-number">Phone Number:</label>

<input type="tel" id="phone-number" name="phone-number" required pattern="^[0-9]{10}$"

title="Phone number must be 10 digits long and contain only numbers"><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT
2.D)
AIM: Add media content in a frame using audio, video, iframe elements to the Home
pageof IEKart's Shopping application.

DESCRIPTION: Media elements are used to embed multimedia content such as audio and
video into a webpageIframe elements are used to embed external content such as web pages or
maps directly into a webpage, and can be customized with attributes like "src" and "scrolling."
PROGRAM:
<!DOCTYPE html>
<head>
<title>IEKart's Shopping Application</title>
</head>
<body>
<h1>Welcome to IEKart's Shopping Application</h1>

<h2>Featured Products</h2>
<p>Check out our latest products:</p>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
<h2>Product Video</h2>
<video width="400" height="300" controls>
<source src="product_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<h2>Product Audio</h2>
<audio controls>
<source src="product_audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<h2>Related Article</h2>
<iframe width="400" height="300" src="https://www.example.com/article" frameborder="0"></iframe>
</body></html>
OUTPUT
EXPERIMENT 3.a )
AIM:
Write a JavaScript program to find the area of a circle using radius (var and let -
reassign and observe the difference with var and let) and PI (const)

DESCRIPTION:

In JavaScript, there are three types of identifiers: variables, functions, and labels. Variable identifiers are
used to name variables, function identifiers are used to name functions, and label identifiers are used to
label statements. Identifiers must follow certain naming conventions, such as starting with a letter or
underscore, and can contain letters, numbers, and underscores.

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>Circle Area Calculator</title>

</head>

<body>

<h1>Circle Area Calculator</h1>

<label for="radius">Enter the radius:</label>

<input type="number" id="radius">

<button onclick="calculateArea()">Calculate Area</button>

<p id="result"></p>

<script>

function calculateArea() {

const PI = 3.14159;

let radius = document.getElementById("radius").value;


let area = PI * radius * radius;

document.getElementById("result").innerHTML = "The area of the circle is " + area;

</script>

</body>

</html>

OUTPUT:
3.b )
AIM:
Write JavaScript code to display the movie details such as movie name, starring,
language, and ratings. Initialize the variables with values of appropriate types. Use
template literals wherever necessary.

DESCRIPTION:

Primitive data types are the building blocks of data and include undefined, null, boolean, number, and
string. They are called "primitive" because they are immutable and have a fixed size in memory.

Non-primitive data types include objects and arrays, and are also known as reference types. These data
types can be of any size and can be changed dynamically. They are called "reference" types because
they are not stored directly

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>Movie Details</title>

</head>

<body>

<h1>Movie Details</h1>

<div id="movieDetails"></div>

<script>

const movieName = "The Shawshank Redemption";

const starring = ["Tim Robbins", "Morgan Freeman"];

const language = "English";

const ratings = {

IMDB: 9.3,

RottenTomatoes: 91,
Metacritic: 80,

};

const movieDetailsDiv = document.getElementById("movieDetails");

movieDetailsDiv.innerHTML = `

<h2>${movieName}</h2>

<p>Starring: ${starring.join(", ")}</p>

<p>Language: ${language}</p>

<p>Ratings:</p>

<ul>

<li>IMDB: ${ratings.IMDB}</li>

<li>Rotten Tomatoes: ${ratings.RottenTomatoes}%</li>

<li>Metacritic: ${ratings.Metacritic}</li>

</ul>

`;

</script>

</body>

</html>

OUTPUT:
3.c )
AIM:
Write JavaScript code to book movie tickets online and calculate the total price,
considering the number of tickets and price per ticket as Rs. 150. Also, apply a festive
season discount of 10% and calculate the discounted amount.

DESCRIPTION:

Operators are symbols used in JavaScript to perform operations on values or variables. There are
different types of operators in JavaScript such as arithmetic operators, assignment operators,
comparison operators, logical operators, bitwise operators, and more

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Book Movie Tickets Online</title>

</head>

<body>

<h1>Book Movie Tickets Online</h1>

<form>

<label for="num_tickets">Number of Tickets:</label>

<input type="number" id="num_tickets" name="num_tickets" min="1" max="10"


required><br><br>

<label for="price_per_ticket">Price Per Ticket:</label>

<input type="number" id="price_per_ticket" name="price_per_ticket" value="150"


readonly><br><br>

<button type="button" onclick="calculateTotal()">Calculate Total</button><br><br>


<label for="total_price">Total Price:</label>

<input type="number" id="total_price" name="total_price" readonly><br><br>

<label for="discounted_amount">Discounted Amount:</label>

<input type="number" id="discounted_amount" name="discounted_amount" readonly><br><br>

</form>

<script>

function calculateTotal() {

const numTickets = document.getElementById("num_tickets").value;

const pricePerTicket = document.getElementById("price_per_ticket").value;

const totalPrice = numTickets * pricePerTicket;

const discount = 0.1;

const discountedAmount = totalPrice * discount;

document.getElementById("total_price").value = totalPrice;

document.getElementById("discounted_amount").value = discountedAmount;

</script>

</body>

</html>

OUTPUT:
3.d )
AIM:
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.

DESCRIPTION:

In JavaScript, there are two main types of statements: non-conditional statements and
conditional statements. Non-conditional statements are executed in a sequential order,
whereas conditional statements allow us to execute code based on a certain condition. The two
main types of conditional statements are "if" statements and "switch" statements. "If"
statements are used to execute a block of code if a specified condition is true, while "switch"
statements are used to perform different actions based on different conditions

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>Movie Ticket Booking</title>

<script>

function bookTickets() {

// Get the number of tickets

let numTickets = parseInt(document.getElementById("numTickets").value);

// Check if number of tickets is less than or equal to 2

if (numTickets <= 2) {

// Calculate the total cost

let totalCost = numTickets * 150;

// Display the total cost

document.getElementById("totalCost").innerHTML = "Total Cost: Rs. " + totalCost;


} else if (numTickets >= 6) {

// Display an error message

document.getElementById("totalCost").innerHTML = "Booking not allowed. Maximum 5 tickets


can be booked.";

} else {

// Display an error message

document.getElementById("totalCost").innerHTML = "Booking not allowed. Minimum 1 and


maximum 2 tickets can be booked.";

</script>

</head>

<body>

<h1>Movie Ticket Booking</h1>

<label for="numTickets">Number of Tickets:</label>

<input type="number" id="numTickets" name="numTickets" min="1" max="5"><br><br>

<button onclick="bookTickets()">Book Tickets</button><br><br>

<div id="totalCost"></div>

</body>

</html>

OUTPUT:
3.e )
AIM:
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

DESCRIPTION:

In JavaScript, loops are used to execute a set of statements repeatedly until a certain condition
is met. There are three types of loops in JavaScript:

for loop: This loop executes a block of code for a specified number of times.

for (initialization; condition; increment/decrement)

while loop: This loop executes a block of code as long as the condition is TRUE

do-while loop: This loop executes a block of code once before checking the condition. If the
condition is true, the loop will repeat

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>Movie Ticket Booking</title>

<meta charset="UTF-8">

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

</head>

<body>

<h2>Movie Ticket Booking</h2>

<p>Enter the number of seats to be booked:</p>

<input type="text" id="numSeats">

<button onclick="calculatePrice()">Calculate Price</button>

<p id="price"></p>
<script>

function calculatePrice() {

let numSeats = parseInt(document.getElementById("numSeats").value);

let pricePerTicket = 150;

let totalPrice = 0;

if (numSeats <= 2) {

totalPrice = numSeats * pricePerTicket;

} else if (numSeats >= 6) {

alert("Sorry! Booking is not allowed for more than 5 seats.");

return;

} else {

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

if (i <= 2) {

totalPrice += pricePerTicket;

} else {

pricePerTicket = pricePerTicket * 0.9; // apply 10%


discount

totalPrice += pricePerTicket;

}
document.getElementById("price").innerHTML = "Total Price: Rs. " +
totalPrice;

</script>

</body>

</html>

OUTPUT:
4.a )
AIM:
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.

DESCRIPTION:

Functions are reusable blocks of code that perform a specific task. In JavaScript, there are
several types of functions, including:

Named Functions: These functions are defined using the function keyword, followed by the
function name, and a pair of parentheses. They can be invoked by calling their name.

Anonymous Functions: These functions are defined without a name, and are often used as
callbacks or event listeners.

Arrow Functions: Introduced in ES6, arrow functions are a shorthand way of writing anonymous
functions.

Function Parameters: Functions can accept one or more parameters, which act as inputs to the
function.

Nested Functions: Functions can be defined inside other functions, creating a hierarchy of
functions.

Built-in Functions: JavaScript comes with several built-in functions, such as parseInt(),
parseFloat(), and Math.random().

Variable Scope in Functions: Variables declared inside a function have local scope, and are not
accessible outside of the function. Variables declared outside of a function have global scope,
and can be accessed anywhere in the code.

To declare a function in JavaScript, use the function keyword, followed by the function name,
and a pair of parentheses. The code inside the function is enclosed in curly braces. To invoke
the function, simply call its name, optionally passing in any required parameters.

PROGRAM:

<!DOCTYPE html>

<html>

<head>
<title>Movie Ticket Booking</title>

</head>

<body>

<h1>Movie Ticket Booking</h1>

<form>

<label for="numOfSeats">Number of Seats:</label>

<input type="number" id="numOfSeats" name="numOfSeats" min="1"


max="5"><br><br>

<button type="button" onclick="calculatePrice()">Calculate Price</button><br><br>

<label for="totalPrice">Total Price:</label>

<input type="text" id="totalPrice" name="totalPrice" readonly><br><br>

</form>

<script>

function calculatePrice() {

const costPerTicket = 150;

let numOfSeats = parseInt(document.getElementById("numOfSeats").value);

let totalPrice = 0;

if (numOfSeats <= 2) {

totalPrice = calculateCost(numOfSeats, costPerTicket);

} else if (numOfSeats >= 6) {

alert("Sorry, booking is not allowed for more than 5 seats.");

} else {

totalPrice = calculateCost(numOfSeats, costPerTicket) * 0.9;

}
document.getElementById("totalPrice").value = totalPrice;

function calculateCost(numOfSeats, costPerTicket) {

return numOfSeats * costPerTicket;

</script>

</body>

</html>

OUTPUT:
4.b )
AIM:
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

DESCRIPTION:

Working with classes in JavaScript involves creating and using objects that have a defined set of
properties and behaviors. Classes are used to define the structure and behavior of objects, and
can be created and instantiated using the class keyword.

Classes in JavaScript can also inherit properties and methods from other classes, which is known
as inheritance. Inheritance allows classes to reuse code and build on existing functionality, which
can lead to more efficient and organized code.

To create a class, the class keyword is used, followed by the name of the class and a set of curly
braces. Properties and methods are defined within the class using constructor functions and
prototype methods.

To inherit from a class, the extends keyword is used to specify the class being inherited from.
Inherited properties and methods can be accessed using the super keyword

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>Employee Information</title>

</head>

<body>

<h2>Employee Information</h2>

<div id="employee"></div>

<script>

// Person class

class Person {

constructor(name, age) {
this.name = name;

this.age = age;

// Employee class extending from Person class

class Employee extends Person {

constructor(name, age, role) {

super(name, age);

this.role = role;

// Creating an employee object

let emp = new Employee("John", 25, "Manager");

// Displaying employee information

document.getElementById("employee").innerHTML = `Name: ${emp.name}<br>

Age: ${emp.age}<br>

Role: ${emp.role}`;

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

OUTPUT:
4.c )
AIM:
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

DESCRIPTION:

In-built events are predefined actions or occurrences that can be triggered by user actions or
system events such as clicks, mouse movements, keypresses, and form submissions. Handlers
are functions that are executed in response to events.

JavaScript provides several in-built event handlers such as onclick, onmouseover, onkeydown,
onchange, and many more that can be used to perform actions on web pages when certain
events occur. These event handlers can be used to make web pages more interactive and user-
friendly by providing dynamic behavior to web elements

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>Movie Ticket Booking</title>

<script>

function bookTickets() {

let numOfSeats = document.getElementById("seats").value;

let totalPrice = 0;

if (numOfSeats <= 2) {

totalPrice = numOfSeats * 150;

} else if (numOfSeats >= 6) {

alert("Sorry, maximum 5 seats can be booked at a time!");

} else {

totalPrice = numOfSeats * 200;

}
document.getElementById("totalPrice").innerHTML = `Total Price: Rs.
${totalPrice}`;

</script>

</head>

<body>

<h1>Movie Ticket Booking</h1>

<label for="seats">Number of Seats:</label>

<input type="number" id="seats" name="seats" min="1" max="5"><br><br>

<button onclick="bookTickets()">Book Tickets</button><br><br>

<p id="totalPrice"></p>

</body>

</html>

OUTPUT:
4.d )
AIM:
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,

DESCRIPTION:

Working with Objects:

Objects are one of the fundamental concepts in JavaScript, and they are used to store and
manipulate data. There are several types of objects in JavaScript, including built-in objects,
custom objects, and host objects.

Types of Objects:

Built-in Objects: These are the objects that are built into the JavaScript language, such as Array,
Date, Math, and RegExp.

Custom Objects: These are the objects that you create in your JavaScript code.

Host Objects: These are the objects that are provided by the browser or environment in which
your JavaScript code is running, such as window, document, and XMLHttpRequest

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>Ice Cream Cone</title>

<style>

body {

background-color: #f2f2f2;

h1 {

font-size: 36px;

text-align: center;
color: #333;

.cone {

margin: 50px auto;

width: 200px;

height: 300px;

background-color: white;

border-radius: 50% / 100%;

position: relative;

overflow: hidden;

border: 5px solid #ccc;

.ice-cream {

width: 180px;

height: 180px;

background-color: #f90;

position: absolute;

bottom: -90px;

left: 10px;

border-radius: 50%;

box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.5);

.empty:after {

content: "";

width: 160px;
height: 160px;

background-color: white;

position: absolute;

top: -100px;

left: 20px;

border-radius: 50%;

box-shadow: 0 0 0 5px #ccc;

</style>

</head>

<body>

<div class="cone empty"></div>

<h1>Click the Cone to Fill It Up</h1>

<script>

let isFilled = false;

const cone = document.querySelector(".cone");

cone.addEventListener("click", () => {

isFilled = !isFilled;

cone.classList.toggle("empty");

if (isFilled) {

cone.style.backgroundColor = "#f90";

document.querySelector("h1").textContent = "Enjoy Your Ice Cream!";

document.querySelector(

"body"

).style.backgroundColor = "lightblue";
} else {

cone.style.backgroundColor = "white";

document.querySelector("h1").textContent =

"Click the Cone to Fill It Up";

document.querySelector(

"body"

).style.backgroundColor = "#f2f2f2";

});

</script>

</body>

</html>

OUTPUT:

You might also like