Soc 3

1
MEAN STACK TECHNOLOGIES-MODULE I

(HTML 5, JAVASCRIPT, EXPRESS.JS, NODE.JS AND TYPESCRIPT)
(Skill Oriented Course)(PART 1 only html)

1a. 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.
<head>
<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.">
m

co
</head>
ot.
1b. Enhance the Homepage.html of IEKart's Shopping Application by adding
appropriate sectioning elements.
sp
<!DOCTYPE html>
<html>
log
<head>
<title>IEKart's Shopping Application</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,
1.b
Accessories etc.">
</head>
<body>
<header>
tn

<nav>

Ni
</nav>
</header>
<main>

<section id="featured-products">
<h2>Featured Products</h2>

</section>
<section id="product-categories">
<h2>Product Categories</h2>

</section>
2
Nitn1.blogspot.com GPSR
Nitn1.blogspot.com gpsr.
<section id="new-arrivals">
<h2>New Arrivals</h2>

</section>
<section id="deals">
<h2>Deals</h2>

</section>
</main>
<footer>
m

</footer>
co
</body>
</html>
ot.
1c. Make use of appropriate grouping elements such as list items to "About Us" page
of IEKart's Shopping Application.
sp
<!DOCTYPE html>
<html>
<head>
log
<title>About Us - IEKart's Shopping Application</title>
<meta name="description" content="Learn more about IEKart's, an online shopping
website that sells goods in retail.">
</head>
1.b
<body>
<header>
<nav>
tn


</nav>
</header>
Ni
<main>
<section>
<h1>About Us</h1>
<h2>Our Story</h2>
<p>IEKart's was founded in 2023 with a vision to provide customers with a convenient and
affordable way to shop online for a wide range of products. Since then, we have grown into
a leading online retailer, serving millions of customers around the world.</p>
<h2>Our Mission</h2>
<p>At IEKart's, our mission is to provide our customers with the best possible shopping
3
experience. We do this by offering a wide selection of high-quality products at competitive

prices, backed by exceptional customer service and fast, reliable shipping.</p>
<h2>Our Team</h2>
<ul>
<li>
<span class="team-member-name">Sandeep Pradeep</span>
<span class="team-member-title">CEO</span>
</li>
<li>
<span class="team-member-name">Gopi Ram</span>
<span class="team-member-title">COO</span>
</li>
m
<li>
<span class="team-member-name">Sai</span>
co
<span class="team-member-title">CFO</span>
</li>
</ul>
</section>
</main>
ot.
sp
<footer>
</footer>
log
</body>
</html>
1d. Link "Login", "SignUp" and "Track order" to "Login.html", "SignUp.html"

1.b
and "Track.html" page respectively. Bookmark each category to its details of

IEKart's Shopping application.
<!DOCTYPE html>
tn
<html>
<head>
Ni
<meta name="description" content="An online shopping website that sells goods in

retail.">
</head>
<body>
<header>
<nav>
<ul>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="signup.html">SignUp</a>
<a href="track.html">Track order</a>
</ul>
4
</nav>
</header>
<main>
<section>
<h1>Welcome to IEKart's Shopping Application</h1>
<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>
m
</ul>
co
<h2 id="electronics">Electronics</h2>
<p>Explore our wide range of electronic products, including smartphones, laptops,
tablets, cameras, and more.</p>
ot.
<p><a href="product/electronics.html">View all electronics</a></p>
<h2 id="clothing">Clothing</h2>
sp
<p>Find the latest fashion trends in clothing for men, women, and kids. We offer a
variety of styles and sizes to suit every taste and budget.</p>
<p><a href="product/clothing.html">View all clothing</a></p>
log
<h2 id="accessories">Accessories</h2>
<p>Complete your look with our collection of accessories, including jewelry, watches,
sunglasses, hats, and more.</p>
1.b
<p><a href="product/accessories.html">View all accessories</a></p>

</section>
</main>
tn
<footer>
</footer>
Ni
</body>
</html>
1e. Add the © symbol in the Home page footer of IEKart's Shopping application.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="An online shopping website that sells goods in
retail.">
</head>
<body>
5
<header>
</header>
<main>
</main>
<footer>
<p>© 2023 IEKart's Shopping Application. All rights reserved.</p>
</footer>
</body>
m
</html>
co
1f. Add the global attributes such as contenteditable, spellcheck, id etc. to enhance
the Signup Page functionality of IEKart's Shopping application.
<html>
<head> ot.
<!DOCTYPE html>
sp
<meta name="keywords" content="Online, Shopping" /> <title> IEKart's Shopping
application </title>
</head>
log
<body>
<header>
<h1>Sign Up! GPSR </h1>
</header>
1.b
<article>
<form action="success.html" method="get">
<table>
<tr>
tn
<td><br><label for="username">Username:</label></td>
<td><br><input type="text" id="username" placeholder="Enter
your username" required /></td>
Ni
</tr>
<tr>
<td><label for="email_id">Email ID:</label></td>
<td><input type="email" id="email_id" placeholder="Enter your email
ID" required /></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" placeholder="Enter
your password" required /></td>
</tr>
<tr>
<td><label for="gender">Gender:</label></td>
6
<td><label for="male">Male<input type="radio" id="male" name="gender" value="M"

/> <label for="female">Female<input type="radio" id="female" name="gender"
value="F" /></td>
</tr>
<tr>
<td><label for="dob">DOB:</label></td>
</tr>
<td><input type="date" id="dob" required /></td>
</tr>
<tr>
<td><label for="phone_no">Phone number:</label></td>
<td><input type="text" id="phone_no" placeholder="Enter your
contact number" pattern="+ [0-9] {12}" required /></td>
m
</tr>
<tr>
co
<td><label for="country">Country:</label></td>
<td><select id="country" placeholder="Select your country"> <option value="India"
/>India <option value="India" />USA
ot.
<option value="India" />UK
<option value="India" />Canada
<option value="India" />Belgium
sp
<option value="India" />France </select></td>
</tr>
<tr>
log
<td><label id="language">Languages Known:</label></td>
<td><input type="checkbox" name="language" id="english"
value="English" checked="checked" /><label for="english">
English </label> <input type="checkbox" name="language"
1.b
id="hindi" value="Hindi" /><label for="hindi"> Hindi

</label> <input type="checkbox" name="language" id="french"
value="French" /><label for="french"> French</label></td>
</tr>
tn
<tr>
<td><label for="pic">Profile pic:</label></td> <td><input type="file" id="pic" required
/></td>
Ni
</tr>
<tr>
<td><label for="yourself" dir="ltr">About yourself:</label></td>
<td><textarea></textarea></td> 
</tr>
<tr>
<td><input type="submit" value="Register" /> <td><input type="reset" value="Reset"
/> </tr>
</table>
</form> <br /> <br /> <br /> <br />
</article>
<footer>
7
<nav> About Us | Privacy Policy | Contact Us | FAQ | Terms & Conditions </nav>
Copyright © 2023 | GPSR nitn1.blogspot.com
</footer>
<aside> gopi pradeep sandeep ram sai </aside>
</body>
</html>
m
co
2a. Enhance the details page of IEKart's Shopping application by adding a table element
to display the available mobile/any inventories.
ot.
<h1>IEKart's Shopping </h1>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th colspan="2">Mobile/Any Inventory</th>
sp
<th colspan="2">Price</th>
<th>Availability</th>
log
</tr>
<tr>
<td colspan="2">Samsung Galaxy S21 Ultra</td>
<td colspan="2">$1,199.99</td>
1.b
<td>In stock</td>
</tr>
<tr>
<td rowspan="2">Apple iPhone 12 Pro Max</td>
tn
<td>Description</td>
<td colspan="2">A14 Bionic chip, Pro camera system, Ceramic Shield front cover</td>
<td rowspan="2">Out of stock</td>
Ni
</tr>
<tr>
<td>Price</td>
<td colspan="2">$1,099.99</td>
</tr>
<tr>
<td rowspan="3">Google Pixel 5</td>
<td>Description</td>
<td colspan="2">5G capable, 90Hz OLED display, Night Sight camera mode</td>
<td>In stock</td>
</tr>
<tr>
<td>Price</td>
<td colspan="2">$699.99</td>
8
<td rowspan="2">One left in stock</td>

</tr>
<tr>
<td colspan="2">Color options: Just Black, Sorta Sage</td>
</tr>
</table>
2b. Creating Form Elements, Color and Date Pickers, Select and Datalist Elements.
Using the form elements create Signup page for IEKart's Shopping application.
<!DOCTYPE html>
<html>
<head>
m
<title>IEKart Signup</title>
</head>
co
<body>
<h1>IEKart Signup</h1>
<form action="process-signup.php" method="post">
ot.<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
sp
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
log
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
1.b
required> <br>
<label for="confirm-password">Confirm Password:</label>

<input type="password" id="confirm-password" name="confirm-password"
tn
required>
<br>
Ni
<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob" required>
<br>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<br>
<label for="favorite-color">Favorite Color:</label>

9
<input type="color" id="favorite-color" name="favorite-color">

<br>
<label for="interests">Interests:</label>
<input type="text" id="interests" name="interests">
<br>
<label for="newsletter">Subscribe to Newsletter:</label>

<input type="checkbox" id="newsletter" name="newsletter"
value="yes"> <br>
<label for="agreement">Agree to Terms and Conditions:</label>

<input type="checkbox" id="agreement" name="agreement"
m
required> <br>
<input type="submit" value="Signup">
co
</form>
</body>
</html>
ot.
2c. Enhance Signup page functionality of IEKart's Shopping application by adding
sp
attributes to input elements.
<!DOCTYPE html>
log
<html>
<head>
<title>IEKart Signup</title>
</head>
1.b
<body>
<h1>IEKart Signup</h1>
<form action="process-signup.php" method="post">
<label for="username">Username:</label>
tn
<input type="text" id="username" name="username" required minlength="6"

maxlength="20" pattern="[a-zA-Z0-9]+">
<small>Must be between 6 and 20 characters and contain only letters and
Ni
numbers.</small>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<small>Enter a valid email address.</small>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required
minlength="8">
<small>Must be at least 8 characters long.</small>
<br>
10
<label for="confirm-password">Confirm Password:</label>

<input type="password" id="confirm-password" name="confirm-password"
required minlength="8">
<small>Must be at least 8 characters long.</small>
<br>
<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob" required
max="2005-01-01"> <small>You must be at least 18 years old to
signup.</small>
<br>
m
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
co
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
ot. <option value="other">Other</option>

</select>
<br>
sp
<label for="favorite-color">Favorite Color:</label>
<input type="color" id="favorite-color" name="favorite-color">
log
<small>Choose your favorite color.</small>
<br>
<label for="interests">Interests:</label>
1.b
<input type="text" id="interests" name="interests">

<small>Enter your interests, separated by commas.</small>
<br>
tn
<label for="newsletter">Subscribe to Newsletter:</label>

<input type="checkbox" id="newsletter" name="newsletter"
value="yes"> <small>Check this box to subscribe to our
Ni
newsletter.</small>
<br>
<label for="agreement">Agree to Terms and Conditions:</label>

<input type="checkbox" id="agreement" name="agreement"
required> <small>You must agree to our terms and
conditions.</small>
<br>
<input type="submit" value="Signup">

</form>
</body>
</html>
11
2d. Add media content in a frame using audio, video, iframe elements to the Home
page of IEKart's Shopping application.
<!DOCTYPE html>
<html>
<head>
<title>IEKart Shopping</title>
</head>
<body>
<h1>Welcome to IEKart Shopping</h1>
<h2>Featured Products</h2>

m
<h2>Featured Videos</h2>
co
<video src="featured-video.mp4" controls width="640" height="360"></video>
ot.
<h2>Featured Music</h2>
<audio src="featured-music.mp3" controls></audio>
sp
<h2>External Content</h2>
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560"
height="315"></iframe>
log
<p>Visit our <a href="shop.html">Shop</a> page to see more products.</p>
</body>
</html>
1.b
3a. 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)
// using var
tn
var radius = 5;
var pi = 3.14159;
var area = pi * radius * radius;
Ni
console.log("The area of the circle is: " + area);
// using let
let newRadius = 10;
let newArea;
const newPi = 3.14159;
newArea = newPi * newRadius * newRadius;
console.log("The new area of the circle is: " + newArea);

12
3b.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.
// initialize variables
const movieName = "GPSR";
const starring = ["SANDEEP", "PRADEEP","RAM","GOPI","SAI"];
const language = "English";
const ratings = 10.0;
// display movie details using template literals

console.log(`Movie Name: ${movieName}`);
console.log(`Starring: ${starring.join(", ")}`);
console.log(`Language: ${language}`);
console.log(`Ratings: ${ratings}`);
m
3C.Write JavaScript code to book movie tickets online and calculate the total price,
co
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.
ot.
const ticketPrice = 150;
let numOfTickets = 3;
sp
let totalPrice = numOfTickets * ticketPrice;
const festiveSeasonDiscount = 0.1;
let discountedAmount = totalPrice * festiveSeasonDiscount;
log
let finalPrice = totalPrice - discountedAmount;
// display booking details

console.log(`Booking Details`);
1.b
console.log(`Number of tickets: ${numOfTickets}`);

console.log(`Ticket Price: Rs. ${ticketPrice}`);
console.log(`Total Price: Rs. ${totalPrice}`);
console.log(`Festive Season Discount: ${festiveSeasonDiscount * 100}%`);
tn
console.log(`Discounted Amount: Rs. ${discountedAmount}`);

console.log(`Final Price: Rs. ${finalPrice}`);
Ni
3D.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. (c) If se
let ticketPrice = 150;
let totalPrice;
// apply conditions to calculate total price

if (numOfTickets <= 2) {
totalPrice = numOfTickets * ticketPrice;
} else if (numOfTickets >= 6) {
console.log(`Sorry, booking is not allowed for 6 or more seats.`);
13
} else {
ticketPrice = 120;
}

if (totalPrice) {
}
3E.Write a JavaScript code to book movie tickets online and calculate the total price
m
ticket remains Rs. 150. (b) If seats are 6 or more, booking is not allowed. (c) If
co
ot.
let totalPrice;
sp
// apply conditions to calculate total price
log
console.log(`Sorry, booking is not allowed for 6 or more seats.`);
} else {
ticketPrice = 120;
1.b

}

tn
if (totalPrice) {
Ni

}
14
4A. JWrite a JavaScript code to book movie tickets online and calculate the total
pricebased 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. (c)
If .
function bookMovieTickets(numOfTickets) {
let totalPrice;
console.log("Booking is not allowed for 6 or more seats.");
return;
} else {
m
ticketPrice = 120;
co
}
console.log(`Booking Details\nNumber of tickets: ${numOfTickets}\nTicket Price:
}
ot.
Rs. ${ticketPrice}\nTotal Price: Rs. ${totalPrice}`);
// Example usage
sp
bookMovieTickets(2); // Outputs: Booking Details
// Number of tickets: 2
log
// Ticket Price: Rs. 150
// Total Price: Rs. 300
bookMovieTickets(4); // Outputs: Booking Details

1.b
// Number of tickets: 4
// Ticket Price: Rs. 120
// Total Price: Rs. 480
tn
bookMovieTickets(8); // Outputs: Booking is not allowed for 6 or more seats.
4B. Create an Employee class extending from a base class Person. Hints: (i) Create
Ni
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
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
class Employee extends Person {

constructor(name, age, role) {
super(name, age);
15
this.role = role;
}
}
// Example usage
const john = new Employee("John Doe", 30, "Manager");
console.log(john); // Outputs: Employee { name: 'John Doe', age: 30, role: 'Manager' }
4C.Write a JavaScript code to book movie tickets online and calculate the total price
ticket remains Rs. 150. (b) If seats are 6 or more, booking is not allowed. (c) If se
// Get the number of seats and the "Book Now" button element
const seatsInput = document.querySelector("#seats-input");
const bookNowButton = document.querySelector("#book-now-button");
m
// Add a "click" event listener to the "Book Now" button
co
bookNowButton.addEventListener("click", function() {
// Get the number of seats entered by the user
const numSeats = Number(seatsInput.value);
ot.
// Check if the number of seats is valid
if (numSeats <= 0) {
sp
alert("Please enter a valid number of seats.");
return;
} else if (numSeats > 5) {
log
alert("Sorry, we cannot book more than 5 seats at a time.");
return;
}
1.b
// Calculate the total price

let totalPrice = numSeats * 150;
if (numSeats === 2) {
totalPrice = totalPrice - (totalPrice * 0.1);
tn
// Display the total price to the user

Ni
alert(`Total price for ${numSeats} seats is Rs. ${totalPrice}.`);

});
4D.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 diffe
CODE
To achieve the desired functionality, we can use the Document Object Model (DOM)
to manipulate the HTML elements on the page.
16
First, we can create an HTML page with a link element and an empty div element
with an id of "container" where we will display the content.
<!DOCTYPE html>
<html>
<head>
<title>Click to see the magic</title>
</head>
<body>
m
<a href="#" id="link">Click me</a>
<div id="container"></div>
co
</body>
</html>
ot.
sp
Next, we can write JavaScript code to handle the click event on the link
element and update the content of the container div.
log
// Get the link and container elements
const link = document.getElementById('link');

1.b
const container = document.getElementById('container');

tn
// Add a click event listener to the link

Ni
link.addEventListener('click', () => {
// Create a new heading element with text content
const heading = document.createElement('h1');
heading.textContent = 'Welcome to the Magic Cone';
// Create a new paragraph element with text content
const message = document.createElement('p');

17
message.textContent = 'Click again to see the magic';
// Create a new div element for the cone
const cone = document.createElement('div');
cone.classList.add('cone');
// Set the background color of the cone
if (container.classList.contains('filled')) {
m
cone.style.backgroundColor = 'white';
co
container.classList.remove('filled');
} else {
ot.
cone.style.backgroundColor = 'pink';
sp
container.classList.add('filled');
}
log
1.b
// Clear the container and append the new elements
container.innerHTML = '';
container.appendChild(heading);
tn
container.appendChild(message);
Ni
container.appendChild(cone);
});
In this code, we first get the link and container elements using their respective ids.
We then add a click event listener to the link element that creates a new heading,
message, and cone elements. We also set the background color of the cone based
on whether the container already has the "filled" class or not. We then clear the
container and append the new elements to it.
18
Finally, we can add some CSS to style the cone and the container. We can use the
following code for that:
/* CSS */
.cone {
width: 0;
height: 0;
border-bottom: 50px solid pink;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#container {
display: flex;
flex-direction: column;
m
align-items: center;
margin-top: 50px;
co
font-family: Arial, sans-serif;
}
} ot.
#container.filled {
background-color: lightgray;
sp
This code styles the cone element as a triangle using border properties and centers
the elements inside the container using flexbox. It also changes the background
log
color of the container when the cone is filled.
5A.Create an array of objects having movie details. The object should include the
1.b
movie name, starring, language, and ratings. Render the details of movies on the
page using the array.
<!DOCTYPE html>
<html>
tn
<head>
<title>Movie Details</title>
</head>
Ni
<body>
<h1>Movie Details</h1>
<ul id="movies"></ul>
<script>
// Create an array of objects for movies
const movies = [
{
name: "The Shawshank Redemption",
starring: "Tim Robbins, Morgan Freeman",
language: "English",
ratings: 9.3
},
19
{
name: "The Godfather",
starring: "Marlon Brando, Al Pacino",
language: "English, Italian, Latin",
ratings: 9.2
},
{
name: "The Dark Knight",
starring: "Christian Bale, Heath Ledger",
language: "English",
ratings: 9.0
}
];
// Render movie details on the page
m
const moviesList = document.getElementById("movies");
movies.forEach(movie => {
co
const movieDetails = `
<li>
<h2>${movie.name}</h2>
ot.
${movie.starring}</p>
${movie.language}</p>
<p><strong>Starring:</strong>
<p><strong>Language:</strong>
sp
<p><strong>Ratings:</strong>
${movie.ratings}</p>
log
</li>
`;
moviesList.insertAdjacentHTML("beforeend", movieDetails);
});
1.b
</script>
</body>
</html>
tn
5B.Simulate a periodic stock price change and display on the console. Hints: (i)
Create a method which returns a random number - use Math.random, floor and other
methods to return a rounded value. (ii) Invoke the method for every three seconds
Ni
and stop when.
function getStockPrice() {
// generate a random price between 100 and 200
return Math.floor(Math.random() * 100) + 100;
}
function logStockPrice() {
const price = getStockPrice();
console.log(`Stock price: ${price}`);
}
// log the stock price every three seconds

const intervalId = setInterval(logStockPrice, 3000);
20
// stop logging after 10 seconds

setTimeout(() => clearInterval(intervalId), 10000);
5D. Validate the user by creating a login module. Hints: (i) Create a file login.js with a
User class. (ii) Create a validate method with username and password as
arguments. (iii) If the username and password are equal it will return "Login
Successful" else w
Here's an example implementation of the login module using a User class and a
validate method in a login.js file:
// login.js
m
class User {
constructor(username, password) {
co
this.username = username;
this.password = password;
}
}
ot.
function validate(username, password) {
if (username === password) {
sp
return "Login Successful";
} else {
log
return "Invalid Credentials";
}
}
1.b
module.exports = { User, validate };

And here's an example of how to consume this module in another file:
// index.js
tn
const { User, validate } = require('./login');

Ni
const user1 = new User('john', 'doe');
console.log(validate(user1.username, user1.password)); // should output "Invalid

Credentials"
const user2 = new User('jane', 'jane');
console.log(validate(user2.username, user2.password)); // should output "Login

Successful"
Ni
tn
1.b
log
sp
ot.
co
m
21
Ni
tn
1.b
log
sp
ot.
co
m
22

Soc 3

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Soc 3

Uploaded by

Copyright:

Available Formats

1

MEAN STACK TECHNOLOGIES-MODULE I

(Skill Oriented Course)(PART 1 only html)

experience. We do this by offering a wide selection of high-quality products at competitive

1d. Link "Login", "SignUp" and "Track order" to "Login.html", "SignUp.html"

and "Track.html" page respectively. Bookmark each category to its details of

<meta name="description" content="An online shopping website that sells goods in

<p><a href="product/accessories.html">View all accessories</a></p>

<td><label for="male">Male<input type="radio" id="male" name="gender" value="M"

id="hindi" value="Hindi" /><label for="hindi"> Hindi

<td rowspan="2">One left in stock</td>

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

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

<label for="favorite-color">Favorite Color:</label>

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

<label for="newsletter">Subscribe to Newsletter:</label>

<label for="agreement">Agree to Terms and Conditions:</label>

<input type="text" id="username" name="username" required minlength="6"

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

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

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

<input type="text" id="interests" name="interests">

<label for="newsletter">Subscribe to Newsletter:</label>

<label for="agreement">Agree to Terms and Conditions:</label>

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

console.log("The area of the circle is: " + area);

console.log("The new area of the circle is: " + newArea);

// display movie details using template literals

// display booking details

console.log(`Number of tickets: ${numOfTickets}`);

console.log(`Discounted Amount: Rs. ${discountedAmount}`);

// apply conditions to calculate total price

// display booking details

totalPrice = numOfTickets * ticketPrice;

// display booking details

console.log(`Ticket Price: Rs. ${ticketPrice}`);

console.log(`Booking Details\nNumber of tickets: ${numOfTickets}\nTicket Price:

bookMovieTickets(4); // Outputs: Booking Details

bookMovieTickets(8); // Outputs: Booking is not allowed for 6 or more seats.

class Employee extends Person {

// Calculate the total price

// Display the total price to the user

alert(`Total price for ${numSeats} seats is Rs. ${totalPrice}.`);

<title>Click to see the magic</title>

// Get the link and container elements

const link = document.getElementById('link');

const container = document.getElementById('container');

// Add a click event listener to the link

// Create a new heading element with text content

const heading = document.createElement('h1');

heading.textContent = 'Welcome to the Magic Cone';

// Create a new paragraph element with text content

const message = document.createElement('p');

message.textContent = 'Click again to see the magic';

// Create a new div element for the cone

const cone = document.createElement('div');

// Set the background color of the cone

// Clear the container and append the new elements

// Render movie details on the page

and stop when.

// log the stock price every three seconds