0% found this document useful (0 votes)

8 views67 pages

Mean Stack

The document outlines various HTML5 modules related to creating web applications, including table elements, forms, input attributes, and media elements. It features code examples for an e-commerce site named IEKart, showcasing sections for electronics, fashion, and home appliances, along with sign-up forms and media integration. Each module emphasizes the use of HTML elements and attributes to enhance user experience and interface design.

Uploaded by

Datta Sai

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

8 views67 pages

Mean Stack

Uploaded by

Datta Sai

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 67

2.

a Course Name: HTML5 - The Language

Module Name: Creating Table Elements, Table Elements : Colspan/Rowspan Attributes, border,
cellspacing, cellpadding attributes

Program:

<!DOCTYPE html>

<head>

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

<title>IEKart Shopping Application</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

header {

background-color: #007BFF;

color: white;

text-align: center;

padding: 1rem;

nav {

background-color: #f4f4f4;

padding: 1rem;

text-align: center;

21
nav a {

margin: 0 1rem;

text-decoration: none;

color: #007BFF;

font-weight: bold;

nav a:hover {

text-decoration: underline;

.content {

padding: 2rem;

section {

margin-bottom: 2rem;

footer {

background-color: #f4f4f4;

text-align: center;

padding: 1rem;

margin-top: 2rem;

border-top: 1px solid #ccc;

table {

width: 100%;

border-collapse: collapse;

margin-top: 1rem;

th, td {

border: 1px solid #ddd;

22
text-align: center;

padding: 10px;

th {

background-color: #007BFF;

color: white;

tr:nth-child(even) {

background-color: #f9f9f9;

</style>

</head>

<body>

<h1>Welcome to IEKart</h1>

</header>

<nav>

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

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

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

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

<a href="#fashion">Fashion</a>

<a href="#home-appliances">Home Appliances</a>

</nav>

23
<section id="electronics">

<h2>Electronics</h2>

<p>Explore a wide range of electronics including smartphones, laptops, cameras, and accessories.</p>

<h3>Available Mobile Inventory</h3>

<table>

<thead>

<tr>

<th rowspan="2">S. No</th>

<th rowspan="2">Brand</th>

<th rowspan="2">Model</th>

<th rowspan="2">Price</th>

<th colspan="2">Availability</th>

</tr>

<tr>

<th>Stock</th>

<th>Location</th>

</tr>

</thead>

<tbody>

<tr>

<td>Samsung</td>

<td>Galaxy S23</td>

<td>Available</td>

<td>Warehouse 1</td>

</tr>

24
<tr>

<td>Apple</td>

<td>iPhone 14</td>

<td>Limited Stock</td>

<td>Warehouse 2</td>

</tr>

<tr>

<td>Xiaomi</td>

<td>Redmi Note 13</td>

<td>Out of Stock</td>

</tr>

</tbody>

</table>

</section>

<h2>Fashion</h2>

<p>Discover the latest trends in fashion with our collection of clothing, footwear, and accessories for
men, women, and kids.</p>

</section>

<h2>Home Appliances</h2>

25
<p>Upgrade your home with our range of appliances including refrigerators, washing machines, and
kitchen gadgets.</p>

</section>

</div>

<p>© 2024 IEKart. All rights reserved.</p>

</footer>

</body>

</html>

Output:

26
2.b Course Name: HTML5 - The Language
Module Name: Creating Form Elements, Color and Date Pickers, Select and Datalist Elements

Program:

<!DOCTYPE html>

<head>

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

<title>IEKart Sign-Up</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f9f9f9;

header {

background-color: #007BFF;

color: white;

text-align: center;

padding: 1rem;

.container {

width: 90%;

max-width: 500px;

margin: 2rem auto;

background: white;

padding: 2rem;

27
border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h2 {

text-align: center;

margin-bottom: 1.5rem;

color: #333;

label {

display: block;

margin-bottom: 0.5rem;

font-weight: bold;

color: #555;

input, select, button {

width: 100%;

padding: 10px;

margin-bottom: 1rem;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 1rem;

button {

background-color: #007BFF;

color: white;

border: none;

cursor: pointer;

button:hover {

28
background-color: #0056b3;

.small-text {

font-size: 0.9rem;

color: #777;

</style>

</head>

<body>

<h1>Sign Up for IEKart</h1>

</header>

<h2>Create Your Account</h2>

<form action="submit_signup.html" method="POST">

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

<input type="text" id="name" name="name" placeholder="Enter your full name" required>

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

<input type="email" id="email" name="email" placeholder="Enter your email" required>

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

<input type="password" id="password" name="password" placeholder="Enter your password"

required>

29

<label for="dob">Date of Birth</label>

<input type="date" id="dob" name="dob" required>

<label for="color">Favorite Color</label>

<input type="color" id="color" name="color">

<label for="gender">Gender</label>

<select id="gender" name="gender" required>

<option value="">Select</option>

<option value="female">Female</option>

<option value="other">Other</option>

</select>

<label for="category">Preferred Shopping Category</label>

<input list="categories" id="category" name="category" placeholder="Start typing...">

<option value="Home Appliances">

</datalist>

30

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

<input type="text" id="address" name="address" placeholder="Enter your address" required>

<label>

<input type="checkbox" name="terms" required> I agree to the <a href="terms.html"

target="_blank">Terms and Conditions</a>

</label>

<button type="submit">Sign Up</button>

</form>

</div>

</body>

</html>

31
Output:

2.c Course Name: HTML5 - The Language

32
Module Name: Input Elements - Attributes

Program:
<!DOCTYPE html>

<head>

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

<title>IEKart Enhanced Sign-Up</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f9f9f9;

header {

background-color: #007BFF;

color: white;

text-align: center;

padding: 1rem;

.container {

width: 90%;

max-width: 500px;

margin: 2rem auto;

background: white;

padding: 2rem;

33
border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h2 {

text-align: center;

margin-bottom: 1.5rem;

color: #333;

label {

display: block;

margin-bottom: 0.5rem;

font-weight: bold;

color: #555;

input, select, button {

width: 100%;

padding: 10px;

margin-bottom: 1rem;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 1rem;

button {

background-color: #007BFF;

color: white;

border: none;

cursor: pointer;

button:hover {

34
background-color: #0056b3;

.small-text {

font-size: 0.9rem;

color: #777;

</style>

</head>

<body>

<h1>Sign Up for IEKart</h1>

</header>

<h2>Create Your Account</h2>

<form action="submit_signup.html" method="POST">

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

<input type="text" id="name" name="name" placeholder="Enter your full name" required

minlength="3" maxlength="50" autocomplete="name">

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

<input type="email" id="email" name="email" placeholder="Enter your email" required

autocomplete="email">

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

<input type="password" id="password" name="password" placeholder="Enter your password"

35
required minlength="8" maxlength="20" autocomplete="new-password"

pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}"

title="Password must be 8-20 characters and include at least one number, one uppercase letter,
and one lowercase letter.">

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

<input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter

your password"

required autocomplete="new-password">

<label for="dob">Date of Birth</label>

<input type="date" id="dob" name="dob" required

min="1900-01-01" max="2023-12-31" title="Enter a valid date of birth.">

<label for="color">Favorite Color</label>

<input type="color" id="color" name="color" title="Pick your favorite color.">

<label for="gender">Gender</label>

<select id="gender" name="gender" required>

<option value="" disabled selected>Select your gender</option>

<option value="female">Female</option>

<option value="other">Other</option>

</select>

36
<label for="category">Preferred Shopping Category</label>

<input list="categories" id="category" name="category" placeholder="Start typing..." required>

<option value="Home Appliances">

</datalist>

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

<input type="text" id="address" name="address" placeholder="Enter your address"

required minlength="10" maxlength="100" autocomplete="street-address">

<label for="phone">Phone Number</label>

<input type="tel" id="phone" name="phone" placeholder="Enter your phone number"

required pattern="[0-9]{10}"

title="Phone number must be a 10-digit numeric value.">

<label>

<input type="checkbox" name="terms" required> I agree to the <a href="terms.html"

target="_blank">Terms and Conditions</a>

</label>

<button type="submit">Sign Up</button>

37
</form>

</div>

</body>

</html>

Output:

2.d Course Name: HTML5 - The Language

Module Name: Media, Iframe

38
Program:
<!DOCTYPE html>

<head>

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

<title>IEKart Shopping Application</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f9f9f9;

header {

background-color: #007BFF;

color: white;

text-align: center;

padding: 1rem;

nav {

background-color: #f4f4f4;

padding: 1rem;

text-align: center;

nav a {

margin: 0 1rem;

text-decoration: none;

39
color: #007BFF;

font-weight: bold;

nav a:hover {

text-decoration: underline;

.content {

padding: 2rem;

section {

margin-bottom: 2rem;

.media-section {

text-align: center;

margin-top: 2rem;

iframe {

border: none;

width: 100%;

max-width: 600px;

height: 315px;

margin: 1rem auto;

audio, video {

display: block;

margin: 1rem auto;

max-width: 100%;

footer {

40
background-color: #f4f4f4;

text-align: center;

padding: 1rem;

margin-top: 2rem;

border-top: 1px solid #ccc;

</style>

</head>

<body>

<h1>Welcome to IEKart</h1>

</header>

<nav>

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

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

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

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

<a href="#fashion">Fashion</a>

<a href="#home-appliances">Home Appliances</a>

</nav>

<h2>Electronics</h2>

<p>Explore a wide range of electronics including smartphones, laptops, cameras, and accessories.</p>

</section>

41
<section id="fashion">

<h2>Fashion</h2>

<p>Discover the latest trends in fashion with our collection of clothing, footwear, and accessories for
men, women, and kids.</p>

</section>

<h2>Home Appliances</h2>

<p>Upgrade your home with our range of appliances including refrigerators, washing machines, and
kitchen gadgets.</p>

</section>

<h2>Discover More with IEKart</h2>

<iframe

src="https://www.youtube.com/embed/dQw4w9WgXcQ"

title="IEKart Product Overview Video"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowfullscreen>

</iframe>

<h3>Listen to Our New Offers!</h3>

<source src="media/iekart-offers.mp3" type="audio/mpeg">

42
Your browser does not support the audio element.

</audio>

<h3>Watch Our Product Demos</h3>

<source src="media/product-demo.mp4" type="video/mp4">

Your browser does not support the video element.

</video>

</section>

</div>

<p>© 2024 IEKart. All rights reserved.</p>

</footer>

</body>

</html>

Output:

43
3a)Course Name: Javascript

44
Module Name: Type of Identifiers

Program:
(Index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Area of a Circle</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

45
h1 {
color: #333;
}

label {
font-size: 18px;
margin-bottom: 10px;
display: block;
}

input[type="number"] {
width: 80%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}

button {
background-color: #28a745;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #218838;

46
}

#result {
margin-top: 20px;
font-size: 18px;
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Calculate the Area of a Circle</h1>
<label for="radius">Enter the radius:</label>
<input type="number" id="radius" required>
<button onclick="calculateArea()">Calculate Area</button>
<p id="result"></p>
</div>

(Script.js)
// Define PI as a constant
const PI = 3.14159;

function calculateArea() {
// Using var for radius
var radius = document.getElementById('radius').value;
// Convert radius to a number

47
radius = Number(radius);

// Calculate area using var

var area = PI * radius * radius;

// Display the area calculated using var

document.getElementById('result').innerText = "Area (using var): " + area;

// Reassigning radius using let

let newRadius = radius + 1; // Incrementing radius by 1 for demonstration

// Calculate area using let

let newArea = PI * newRadius * newRadius;

// Display the area calculated using let

document.getElementById('result').innerText += "\nArea (using let with new radius): " + newArea;
}

Output:

3b)Course Name: Javascript

Module Name: Primitive and Non Primitive Data Types

48
Program:

(MovieDetails.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Details</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #007BFF;
}
.movie-details {
border: 1px solid #ccc;
padding: 15px;
margin-top: 20px;
border-radius: 5px;
background-color: #f9f9f9;
}
p{
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Movie Details</h1>
<div class="movie-details" id="movieDetails"></div>

(Script.js)

49
// Primitive data types
const movieName = "Inception"; // String
const language = "English"; // String
const rating = 8.8; // Number

// Non-primitive data type (Array)

const starring = ["Leonardo DiCaprio", "Joseph Gordon-Levitt", "Ellen Page"];

// Function to display movie details

function displayMovieDetails() {
// Using template literals to format the movie details
const movieDetailsHTML = `
<p><strong>Movie Name:</strong> ${movieName}</p>
<p><strong>Language:</strong> ${language}</p>
<p><strong>Rating:</strong> ${rating} / 10</p>
<p><strong>Starring:</strong> ${starring.join(", ")}</p>
`;

// Display the movie details on the webpage

document.getElementById("movieDetails").innerHTML = movieDetailsHTML;

// Logging details to the console

console.log("Movie Details:");
console.log(`Movie Name: ${movieName}`);
console.log(`Language: ${language}`);
console.log(`Rating: ${rating}`);
console.log(`Starring: ${starring.join(", ")}`);
}

// Call the function to display the details

displayMovieDetails();

Output:

50
51
3c)Course Name: Javascript
Module Name: Operators and Types of Operators

Program:

(TicketBooking.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Ticket Booking</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #007BFF;
}
input, button {
margin: 10px 0;
padding: 10px;
font-size: 16px;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Book Movie Tickets</h1>
<label for="tickets">Enter number of tickets:</label>
<input type="number" id="tickets" placeholder="Number of tickets" step="1">
<button onclick="calculateTotal()">Calculate Total</button>

52

<script src="TicketScript.js"></script>
</body>
</html>

(ticketBooking.js)
// Constants
const TICKET_PRICE = 150; // Price per ticket in Rs
const FESTIVE_DISCOUNT = 10; // Discount percentage

// Function to calculate the total price

function calculateTotal() {
// Get the number of tickets from the input
const numberOfTickets = parseInt(document.getElementById("tickets").value);

// Check if the input is a valid positive number

if (isNaN(numberOfTickets) || numberOfTickets <= 0) {
document.getElementById("result").innerText = "Please enter a valid number of tickets.";
return;
}

// Calculate the total price without discount

const totalPrice = numberOfTickets * TICKET_PRICE;

// Calculate the discounted amount

const discountAmount = (totalPrice * FESTIVE_DISCOUNT) / 100;

// Calculate the final price after discount

const discountedPrice = totalPrice - discountAmount;

// Display the results

document.getElementById("result").innerHTML = `
<p>Total Price (without discount): Rs. ${totalPrice.toFixed(2)}</p>
<p>Festive Discount (${FESTIVE_DISCOUNT}%): Rs. ${discountAmount.toFixed(2)}</p>
<p><strong>Total Price (with discount): Rs. ${discountedPrice.toFixed(2)}</strong></p>
';
}

Output:

53
54
3d)Course Name: Javascript
Module Name: Types of Statements, Non - Conditional Statements, Types of Conditional
Statements, if Statements, switch Statements

Program:

55
</style>
</head>
<body>
<h1>Book Movie Tickets</h1>
<label for="tickets">Enter number of tickets:</label>
<input type="number" id="tickets" placeholder="Number of tickets" step="1">
<button onclick="bookTickets()">Book Tickets</button>

(TicketBooking.js)
// Constants
const BASE_TICKET_PRICE = 150; // Cost per ticket

// Function to calculate total price

function bookTickets() {
// Get the number of tickets from input
const numberOfTickets = parseInt(document.getElementById("tickets").value);

// Check for valid input

if (isNaN(numberOfTickets) || numberOfTickets <= 0) {
document.getElementById("result").innerText = "Please enter a valid number of tickets.";
return;
}

56
let totalPrice = 0; // Variable to hold the total price

// Conditional statements to determine price and restrictions

if (numberOfTickets <= 2) {
// (a) If seats are not more than 2, cost per ticket remains Rs. 150
totalPrice = numberOfTickets * BASE_TICKET_PRICE;
document.getElementById("result").innerText = `Booking Successful! Total price: Rs. $
{totalPrice}`;
} else if (numberOfTickets >= 6) {
// (b) If seats are 6 or more, booking is not allowed
document.getElementById("result").innerText = "Booking not allowed for 6 or more tickets.";
} else {
// (c) For 3-5 tickets, cost per ticket is Rs. 130
const discountedPrice = 130;
totalPrice = numberOfTickets * discountedPrice;
document.getElementById("result").innerText = `Booking Successful! Total price (discounted): Rs.
${totalPrice}`;
}

// Logging the result to the console

console.log(`Number of Tickets: ${numberOfTickets}`);
console.log(`Total Price: Rs. ${totalPrice}`);
}

57
Output:

58
3e)Course Name: Javascript
Module Name: Types of Loops

Program:
(TicketBooking.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Ticket Booking</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #007BFF;
}
input, button {
margin: 10px 0;
padding: 10px;
font-size: 16px;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Book Movie Tickets</h1>
<label for="tickets">Enter number of tickets:</label>
<input type="number" id="tickets" placeholder="Number of tickets" step="1">
<button onclick="bookTickets()">Book Tickets</button>

59
(TicketBooking.js)
// Constants
const BASE_TICKET_PRICE = 150; // Cost per ticket (Condition A)
const DISCOUNTED_TICKET_PRICE = 130; // Cost per ticket for 3-5 tickets (Condition C)

// Function to calculate total price

function bookTickets() {
// Get the number of tickets from input
const numberOfTickets = parseInt(document.getElementById("tickets").value);

// Check for valid input

if (isNaN(numberOfTickets) || numberOfTickets <= 0) {
document.getElementById("result").innerText = "Please enter a valid number of tickets.";
return;
}

// Variable to hold the total price

let totalPrice = 0;

// Condition B: Booking is not allowed for 6 or more tickets

if (numberOfTickets >= 6) {
document.getElementById("result").innerText = "Booking not allowed for 6 or more tickets.";
return;
}

// Using a loop to calculate the total price

for (let i = 1; i <= numberOfTickets; i++) {
if (numberOfTickets <= 2) {

60
// Condition A: Tickets ≤ 2, price is Rs. 150 each
totalPrice += BASE_TICKET_PRICE;
} else {
// Condition C: Tickets between 3 and 5, price is Rs. 130 each
totalPrice += DISCOUNTED_TICKET_PRICE;
}
}

// Display the results

document.getElementById("result").innerHTML = `
<p>Number of Tickets: ${numberOfTickets}</p>
<p>Total Price: Rs. ${totalPrice}</p>
`;

// Logging the process with a while loop

let counter = 1;
while (counter <= numberOfTickets) {
console.log(`Processing ticket #${counter}...`);
counter++;
}
}

61
Output:

62
4a)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

63
</head>
<body>
<h1>Book Movie Tickets</h1>
<label for="tickets">Enter number of tickets:</label>
<input type="number" id="tickets" placeholder="Number of tickets" step="1">
<button onclick="handleBooking()">Book Tickets</button>

(Script.js)
// Constants for ticket prices
const BASE_TICKET_PRICE = 150;
const DISCOUNTED_TICKET_PRICE = 130;

// Function to handle ticket booking

function handleBooking() {
const numberOfTickets = parseInt(document.getElementById("tickets").value);

// Check for valid input

if (isNaN(numberOfTickets) || numberOfTickets <= 0) {
document.getElementById("result").innerText = "Please enter a valid number of tickets.";
return;
}

// Call calculateTotal function and display the result

64
const result = calculateTotal(numberOfTickets);
document.getElementById("result").innerHTML = result;
}

// Function to calculate total price

function calculateTotal(tickets) {
// Nested function to validate conditions
const isBookingAllowed = (tickets) => {
if (tickets >= 6) return false; // Condition B
return true;
};

// Check if booking is allowed

if (!isBookingAllowed(tickets)) {
return "Booking not allowed for 6 or more tickets.";
}

// Arrow function to calculate the price

// Calculate total price

const totalPrice = calculatePrice(tickets);

65
// Return result as a string
return `
<p>Number of Tickets: ${tickets}</p>
<p>Total Price: Rs. ${totalPrice}</p>
`;
}

// Example of a built-in function usage

console.log("Ticket booking system loaded at:", new Date().toLocaleString());

Output:

66
4b)Course Name: Javascript
Module Name: Working With Classes, Creating and Inheriting Classes

Program:
// Base class: Person
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

// Method to display person's details

getDetails() {
return `Name: ${this.name}, Age: ${this.age}`;
}
}

// Derived class: Employee (extends Person)

class Employee extends Person {
constructor(name, age, role, salary) {
super(name, age); // Call the parent class constructor
this.role = role;
this.salary = salary;
}

// Method to display employee's details

getDetails() {
// Call the parent class's getDetails method
return `${super.getDetails()}, Role: ${this.role}, Salary: Rs. ${this.salary}`;
}
}

// Example usage
const person = new Person("John Doe", 30);
console.log(person.getDetails());

const employee = new Employee("Alice Johnson", 25, "Software Developer", 60000);

console.log(employee.getDetails());

67
Output:

68
4c)Course Name: Javascript
Module Name: In-built Events and Handlers

Program:
(ticketBooking.html)
<!DOCTYPE html>

<head>

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

<title>Movie Ticket Booking</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

h1 {

color: #007BFF;

input, button {

margin: 10px 0;

padding: 10px;

font-size: 16px;

#result {

margin-top: 20px;

font-weight: bold;

69
</style>

</head>

<body>

<h1>Book Movie Tickets</h1>

<label for="tickets">Enter number of tickets:</label>

<input type="number" id="tickets" placeholder="Number of tickets" step="1">

<button id="bookButton">Book Tickets</button>

</body>

</html>

(script.js)
// Constants for ticket pricing

const BASE_TICKET_PRICE = 150;

const DISCOUNTED_TICKET_PRICE = 130;

// Event handler function for booking tickets

function bookTickets(event) {

event.preventDefault(); // Prevent any default action for the button

// Get the number of tickets from the input field

const ticketInput = document.getElementById("tickets");

const numberOfTickets = parseInt(ticketInput.value);

70
// Check for valid input

if (isNaN(numberOfTickets) || numberOfTickets <= 0) {

displayMessage("Please enter a valid number of tickets.", "error");

return;

// Condition: Booking not allowed for 6 or more tickets

if (numberOfTickets >= 6) {

displayMessage("Booking not allowed for 6 or more tickets.", "error");

return;

// Calculate the total price based on the number of tickets

let totalPrice;

if (numberOfTickets <= 2) {

totalPrice = numberOfTickets * BASE_TICKET_PRICE;

} else {

totalPrice = numberOfTickets * DISCOUNTED_TICKET_PRICE;

// Display the total price

displayMessage(

`Number of Tickets: ${numberOfTickets} <br> Total Price: Rs. ${totalPrice}`,

"success"

);

// Utility function to display messages

function displayMessage(message, type) {

71
const resultElement = document.getElementById("result");

resultElement.innerHTML = message;

resultElement.style.color = type === "success" ? "green" : "red";

// Add an event listener to the "Book Tickets" button

document.getElementById("bookButton").addEventListener("click", bookTickets);

Output:

72
4d)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 Mode.

Program:
(cone.html)
<!DOCTYPE html>

<head>

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

<title>Interactive Cone</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin: 0;

padding: 0;

transition: background-color 0.5s ease;

h1 {

margin: 20px 0;

font-size: 18px;

img {

width: 150px;

73
height: auto;

margin: 20px 0;

transition: transform 0.5s ease;

display: inline-block;

margin-top: 20px;

text-decoration: none;

font-size: 18px;

color: white;

background-color: #007BFF;

padding: 10px 20px;

border-radius: 5px;

transition: background-color 0.3s ease;

a:hover {

background-color: #0056b3;

</style>

</head>

<body>

<h1 id="heading">Welcome!</h1>

<p id="message">Click the button to see the magic.</p>

<img id="coneImage" src="empty-cone.png" alt="Empty cone">

<br>

<a href="#" id="toggleButton">Click Me</a>

74
</body>

</html>

(script.js)
// Initial state object

let coneState = {

isEmpty: true, // Tracks whether the cone is empty

empty: {

heading: "Empty Cone",

message: "Oh no! The cone is empty. Click again to refill it.",

image: "empty-cone.png",

backgroundColor: "#f0e68c",

filled: {

heading: "Filled Cone",

message: "Yay! The cone is filled. Click again to empty it.",

image: "filled-cone.png",

backgroundColor: "#ffcccb",

};

// Destructure DOM elements

const headingElement = document.getElementById("heading");

const messageElement = document.getElementById("message");

const coneImageElement = document.getElementById("coneImage");

const toggleButton = document.getElementById("toggleButton");

// Function to update UI based on the cone state

function updateUI(state) {

75
const { heading, message, image, backgroundColor } = state;

// Update the DOM elements

headingElement.innerText = heading;

messageElement.innerText = message;

coneImageElement.src = image;

document.body.style.backgroundColor = backgroundColor;

// Add animation to the cone image

coneImageElement.style.transform = state === coneState.filled ? "scale(1.2)" : "scale(1)";

// Event listener for button click

toggleButton.addEventListener("click", (event) => {

event.preventDefault(); // Prevent the default link behavior

// Toggle cone state

coneState.isEmpty = !coneState.isEmpty;

// Use destructuring and conditional logic to get the correct state

const currentState = coneState.isEmpty ? coneState.empty : coneState.filled;

// Update the UI with the current state

updateUI(currentState);

});

// Initialize the UI with the default state

updateUI(coneState.empty);

76
output:

77
5a)Course Name: Javascript
Module Name: Creating Arrays, Destructuring Arrays, Accessing Arrays, Array Methods

Program:
(Movies.html)
<!DOCTYPE html>

<head>

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

<title>Movie List</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

h1 {

color: #007BFF;

.movie {

border: 1px solid #ddd;

margin: 10px 0;

padding: 10px;

border-radius: 5px;

background-color: #f9f9f9;

.movie h2 {

78
margin: 0;

color: #333;

.movie p {

margin: 5px 0;

</style>

</head>

<body>

<h1>Movie Details</h1>

</body>

</html>

(script.js)
// Array of movie objects
const movies = [
{
name: "Inception",
starring: ["Leonardo DiCaprio", "Joseph Gordon-Levitt", "Elliot Page"],
language: "English",
ratings: 8.8,
},
{
name: "Parasite",
starring: ["Song Kang-ho", "Lee Sun-kyun", "Cho Yeo-jeong"],
language: "Korean",
ratings: 8.6,
},
{
name: "The Dark Knight",

79
starring: ["Christian Bale", "Heath Ledger", "Aaron Eckhart"],
language: "English",
ratings: 9.0,
},
{
name: "3 Idiots",
starring: ["Aamir Khan", "R. Madhavan", "Sharman Joshi"],
language: "Hindi",
ratings: 8.4,
},
];

// Function to render movies on the page

function renderMovies(movieArray) {
// Get the container where movies will be displayed
const moviesContainer = document.getElementById("moviesContainer");

// Loop through the array and create movie cards

movieArray.forEach(({ name, starring, language, ratings }) => {
// Create a div for each movie
const movieDiv = document.createElement("div");
movieDiv.className = "movie";

// Create movie details using template literals

movieDiv.innerHTML = `
<h2>${name}</h2>
<p><strong>Starring:</strong> ${starring.join(", ")}</p>
<p><strong>Language:</strong> ${language}</p>
<p><strong>Ratings:</strong> ${ratings}</p>
`;

// Append the movie card to the container

moviesContainer.appendChild(movieDiv);
});
}

// Call the function to render movies

renderMovies(movies);

80
Output:

81
5b)Course Name: Javascript
Module Name: Introduction to Asynchronous Programming, Callbacks, Promises, Async and
Await, Executing Network Requests using Fetch API

Program:
(stockPriceSimulation.js)
// Helper function to generate a random stock price

function getRandomStockPrice() {

const min = 100; // Minimum stock price

const max = 500; // Maximum stock price

return Math.floor(Math.random() * (max - min + 1)) + min;

// Asynchronous function to simulate stock price changes

async function simulateStockPrices() {

let count = 0; // Counter to limit the number of updates

const maxUpdates = 10; // Maximum number of updates

console.log("Stock Price Simulation Started...");

// Function to update stock price periodically

const intervalId = setInterval(() => {

const stockPrice = getRandomStockPrice();

console.log(`Stock Price Update #${count + 1}: $${stockPrice}`);

count++;

// Stop the simulation after maxUpdates

if (count >= maxUpdates) {

82
clearInterval(intervalId);

console.log("Stock Price Simulation Stopped.");

}, 3000); // 3-second interval

// Start the simulation

simulateStockPrices();

Output:

83
5c) Course Name: Javascript
Module Name: Creating Modules, Consuming Modules

Program:
(login.js)
// login.js

export class User {

constructor(username, password) {

this.username = username;

this.password = password;

// Method to validate username and password

validate(inputUsername, inputPassword) {

if (this.username === inputUsername && this.password === inputPassword) {

return "Login Successful";

} else {

return "Login Failed";

(main.js)
// main.js

import { User } from "./login.js";

// Create a new user object

const registeredUser = new User("testUser", "password123");

84
// Simulate user input

const inputUsername = prompt("Enter your username:");

const inputPassword = prompt("Enter your password:");

// Validate user credentials

const result = registeredUser.validate(inputUsername, inputPassword);

// Display the result

console.log(result);

alert(result);

(Main.html)
<!DOCTYPE html>

<head>

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

<title>Login Validation</title>

</head>

<body>

<h1>Login Validation Module</h1>

<p>Open the browser console to see the result of your login attempt.</p>

<script type="module" src="main.js"></script>

</body>

</html>

85
Output:

86
87

Source Code1
No ratings yet
Source Code1
14 pages
Index
No ratings yet
Index
12 pages
Skill Developmen LAB Manual
No ratings yet
Skill Developmen LAB Manual
32 pages
WT Internal 1 Programs
No ratings yet
WT Internal 1 Programs
23 pages
SDC Program 01
No ratings yet
SDC Program 01
17 pages
SDC Manual With Outputs
No ratings yet
SDC Manual With Outputs
31 pages
Node JS
No ratings yet
Node JS
58 pages
Responsive Shopping Cart App with CSS3 & Bootstrap
No ratings yet
Responsive Shopping Cart App with CSS3 & Bootstrap
47 pages
MSD Lab (1-4 Exp)
No ratings yet
MSD Lab (1-4 Exp)
39 pages
EXP2
No ratings yet
EXP2
5 pages
SDC Lab Course File
No ratings yet
SDC Lab Course File
22 pages
Responsive Shopping Cart App Guide
No ratings yet
Responsive Shopping Cart App Guide
72 pages
Web With Inserted Outputs
No ratings yet
Web With Inserted Outputs
22 pages
SDC Lab Internal
No ratings yet
SDC Lab Internal
16 pages
Code
No ratings yet
Code
8 pages
Iat I Iii Year
No ratings yet
Iat I Iii Year
19 pages
Web Tech
No ratings yet
Web Tech
55 pages
Online Book Store (Exp 1)
No ratings yet
Online Book Store (Exp 1)
8 pages
M
No ratings yet
M
3 pages
WT Lab Fie
No ratings yet
WT Lab Fie
23 pages
Week 3 Code
No ratings yet
Week 3 Code
10 pages
020,021 (WTLAss3)
No ratings yet
020,021 (WTLAss3)
14 pages
FSWD 4 Experment
No ratings yet
FSWD 4 Experment
16 pages
Css MP
No ratings yet
Css MP
17 pages
How To Create A Shopping Cart UI Using CSS
No ratings yet
How To Create A Shopping Cart UI Using CSS
15 pages
Sodapdf
No ratings yet
Sodapdf
11 pages
HTML Lang Charset Name Content: Styled List (: :,, : ) (: ) (: )
No ratings yet
HTML Lang Charset Name Content: Styled List (: :,, : ) (: ) (: )
44 pages
Assignment 1
No ratings yet
Assignment 1
37 pages
Lab Manual
No ratings yet
Lab Manual
41 pages
Web 8
No ratings yet
Web 8
14 pages
Answer of Web
No ratings yet
Answer of Web
32 pages
Pract. BCA505 E-Commerce
No ratings yet
Pract. BCA505 E-Commerce
24 pages
Experiment 1 Record Format
No ratings yet
Experiment 1 Record Format
7 pages
Web Engineering
No ratings yet
Web Engineering
8 pages
Web Technologies
No ratings yet
Web Technologies
21 pages
Wtminiproject
No ratings yet
Wtminiproject
22 pages
Admin Dashboard-Record
No ratings yet
Admin Dashboard-Record
27 pages
DOCTYPE HTML
No ratings yet
DOCTYPE HTML
8 pages
JKLMN
No ratings yet
JKLMN
17 pages
Screenshot 2025-01-10 at 10.22.02 AM
No ratings yet
Screenshot 2025-01-10 at 10.22.02 AM
14 pages
Web Design Record
No ratings yet
Web Design Record
19 pages
Experiment 1
No ratings yet
Experiment 1
41 pages
HTML Page with Forms and Tables
No ratings yet
HTML Page with Forms and Tables
10 pages
Web Technology Cognizant
No ratings yet
Web Technology Cognizant
44 pages
Web Workshop File
No ratings yet
Web Workshop File
52 pages
Final Project Question
No ratings yet
Final Project Question
16 pages
TW Lab 1
No ratings yet
TW Lab 1
13 pages
HTML Program
No ratings yet
HTML Program
26 pages
Module 2
No ratings yet
Module 2
35 pages
Web Assignment
No ratings yet
Web Assignment
10 pages
20191CSE0568 (IOT Record)
No ratings yet
20191CSE0568 (IOT Record)
16 pages
Experiment 1
No ratings yet
Experiment 1
20 pages
JavaScript Parking & Webpage Scripts
No ratings yet
JavaScript Parking & Webpage Scripts
29 pages
Day 2 Alltask
No ratings yet
Day 2 Alltask
19 pages
Web Lab
No ratings yet
Web Lab
5 pages
Vidhyacharan FN1 1509
No ratings yet
Vidhyacharan FN1 1509
5 pages
B3
No ratings yet
B3
8 pages
Laporan Web
No ratings yet
Laporan Web
14 pages
Website Design and Development
No ratings yet
Website Design and Development
18 pages
Tools
No ratings yet
Tools
3 pages
BOQ For SSSP 27.5M (4-30)
No ratings yet
BOQ For SSSP 27.5M (4-30)
72 pages
Rear Window Motor Initialization General Procedures
0% (1)
Rear Window Motor Initialization General Procedures
2 pages
Kiln Trunnion Lubrication
No ratings yet
Kiln Trunnion Lubrication
6 pages
2.motion QP2
No ratings yet
2.motion QP2
9 pages
Datacar Manual Repair: Up! Ecofuel 2013...
No ratings yet
Datacar Manual Repair: Up! Ecofuel 2013...
14 pages
2000 Audi TT Coupe: Trim Levels, Colors and Available Options
No ratings yet
2000 Audi TT Coupe: Trim Levels, Colors and Available Options
4 pages
Unix and Shell Programming: 1. Overview of Operating System
No ratings yet
Unix and Shell Programming: 1. Overview of Operating System
38 pages
Component Location: C1272 Engine Speed Input Malfunction General Information
No ratings yet
Component Location: C1272 Engine Speed Input Malfunction General Information
7 pages
Analysis of Potentiometric Methods Used For Crack
No ratings yet
Analysis of Potentiometric Methods Used For Crack
4 pages
Anjali Verma Mba Iii Sem Roll No. - 097603
No ratings yet
Anjali Verma Mba Iii Sem Roll No. - 097603
15 pages
Besi H
No ratings yet
Besi H
5 pages
LMTD Correction Factor
No ratings yet
LMTD Correction Factor
13 pages
Threads No19
100% (1)
Threads No19
4 pages
ESP Training Course Overview 2016
No ratings yet
ESP Training Course Overview 2016
82 pages
Lab 08 - Capacitors and Inductors
No ratings yet
Lab 08 - Capacitors and Inductors
9 pages
Intelsat 19 Satellite Footprints
No ratings yet
Intelsat 19 Satellite Footprints
6 pages
Train Sim World 2020 User Manual en
No ratings yet
Train Sim World 2020 User Manual en
101 pages
Sri Vidya College of Engineering & Technology, Virudhunagar: Cs8491 - Computer Architecture Unit-Iv
No ratings yet
Sri Vidya College of Engineering & Technology, Virudhunagar: Cs8491 - Computer Architecture Unit-Iv
35 pages
Sap MM - Course
No ratings yet
Sap MM - Course
7 pages
New Company Profile
No ratings yet
New Company Profile
15 pages
Aspects of Saf Smelting of Ferrochrome
100% (1)
Aspects of Saf Smelting of Ferrochrome
14 pages
02 Samss 005 PDF
No ratings yet
02 Samss 005 PDF
16 pages
Casting Pattern Allowances Guide
No ratings yet
Casting Pattern Allowances Guide
10 pages
Biogas Production Enhancement
No ratings yet
Biogas Production Enhancement
10 pages
Car-Parrinello Molecular Dynamics: An Ab Initio Electronic Structure and Molecular Dynamics Program
No ratings yet
Car-Parrinello Molecular Dynamics: An Ab Initio Electronic Structure and Molecular Dynamics Program
172 pages
Article PDF
No ratings yet
Article PDF
36 pages
ITGCC Control Template
100% (2)
ITGCC Control Template
2 pages
S116S02 Series S216S02 Series: I (RMS) 16A, Zero Cross Type SIP 4pin Triac Output SSR
No ratings yet
S116S02 Series S216S02 Series: I (RMS) 16A, Zero Cross Type SIP 4pin Triac Output SSR
13 pages
Design of Isolated Foundation - 18
No ratings yet
Design of Isolated Foundation - 18
1 page

Mean Stack

Uploaded by

Mean Stack

Uploaded by

2.

a Course Name: HTML5 - The Language

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

<title>IEKart Shopping Application</title>

font-family: Arial, sans-serif;

border-top: 1px solid #ccc;

border: 1px solid #ddd;

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

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

<a href="#home-appliances">Home Appliances</a>

<h3>Available Mobile Inventory</h3>

<th rowspan="2">S. No</th>

<td>Redmi Note 13</td>

<p>&copy; 2024 IEKart. All rights reserved.</p>

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

font-family: Arial, sans-serif;

margin: 2rem auto;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

input, select, button {

border: 1px solid #ddd;

<h1>Sign Up for IEKart</h1>

<h2>Create Your Account</h2>

<form action="submit_signup.html" method="POST">

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

<input type="text" id="name" name="name" placeholder="Enter your full name" required>

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

<input type="email" id="email" name="email" placeholder="Enter your email" required>

<input type="password" id="password" name="password" placeholder="Enter your password"

<label for="dob">Date of Birth</label>

<input type="date" id="dob" name="dob" required>

<label for="color">Favorite Color</label>

<input type="color" id="color" name="color">

<select id="gender" name="gender" required>

<label for="category">Preferred Shopping Category</label>

<input list="categories" id="category" name="category" placeholder="Start typing...">

<option value="Home Appliances">

<input type="text" id="address" name="address" placeholder="Enter your address" required>

<input type="checkbox" name="terms" required> I agree to the <a href="terms.html"

<button type="submit">Sign Up</button>

2.c Course Name: HTML5 - The Language

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

<title>IEKart Enhanced Sign-Up</title>

font-family: Arial, sans-serif;

margin: 2rem auto;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

input, select, button {

border: 1px solid #ddd;

<h1>Sign Up for IEKart</h1>

<h2>Create Your Account</h2>

<form action="submit_signup.html" method="POST">

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

<input type="text" id="name" name="name" placeholder="Enter your full name" required

minlength="3" maxlength="50" autocomplete="name">

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

<input type="email" id="email" name="email" placeholder="Enter your email" required

<input type="password" id="password" name="password" placeholder="Enter your password"

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

<input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter

<label for="dob">Date of Birth</label>

<p>© 2024 IEKart. All rights reserved.</p>

<p>© 2024 IEKart. All rights reserved.</p>