Scribd
Upload
3 views68 pages

Web Programming

The document contains multiple HTML code snippets for various web pages, including a tourist destination list, a hotel booking site, product catalogs, and an event page for Tech Innovators 2025. Each section is structured with headings, paragraphs, images, and tables to present information clearly. The code examples demonstrate basic HTML structure and elements used for web development.

Uploaded by

231001223
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
3 views68 pages

Web Programming

The document contains multiple HTML code snippets for various web pages, including a tourist destination list, a hotel booking site, product catalogs, and an event page for Tech Innovators 2025. Each section is structured with headings, paragraphs, images, and tables to present information clearly. The code examples demonstrate basic HTML structure and elements used for web development.

Uploaded by

231001223
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

WEEK-2 TYPE THE CODE

<!-- write you code here -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Tourist Destinations</title>
</head>
<body>
<h1>Top Tourist Destinations</h1>
<ol>
<li>
<h2>Paris</h2>
<ul>
<li>
<p><b>Description:</b>
Known for its romantic ambiance and iconic
landmarks like the Eiffel Tower.
</p>

</li>
<li>
<img src="./[Link]" alt="paris" width="300px">
</li>
</ul>
</li>

<li>
<h2>New York</h2>
<ul>
<li>
<p><b>Description:</b>
Famous for the Statue of Liberty, Times Sqaure,
and Central Park.
</p>

</li>
<li>
<img src="./[Link]" alt="new-york"
width="300px">
</li>
</ul>
</li>

<li>
<h2>Tokyo</h2>
<ul>
<li>
<p><b>Description:</b>
A blend of modern skyscrapers and
traditional temples, with vibrant districts
like Shibuya.
</p>

</li>
<li>
<img src="./[Link]" alt="tokyo" width="300px">
</li>
</ul>

</li>
<li>
<h2>Rome</h2>
<ul>
<li>
<p><b>Description:</b>
Known for its ancient history, including
landmarks like Colasseum and Vatican City.
</p>

</li>
<li>
<img src="./[Link]" alt="rome" width="300px">
</li>
</ul>

</li>
<li>
<h2>London</h2>
<ul>
<li>
<p><b>Description:</b>
Famous for its rich history, the Tower of London,
Buckingham Palace, and the London Eye.
</p>

</li>
<li>
<img src="./[Link]" alt="london" width="300px">
</li>
</ul>

</li>
</ol>

</body>
</html>
WEEK-2 FIX THE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luxury Stays - Book Your Dream Room</title>
<meta name="description" content="Luxury Stays offers the finest rooms
and amenities.">
</head>
<body>

<header>
<h1>Welcome to Luxury Stays</h1>
<h2>Your Dream Stay Awaits</h2>
<img src="[Link]" alt="Luxury Stays Logo" width="100"
height="100">
<nav>
<ul>
<li><a href="#about">About the Hotel</a></li>
<li><a href="#rooms">Rooms and Pricing</a></li>
<li><a href="#services">Hotel Services</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact Us</a></li>
<!-- <li><a href="#special-offers">Special Offers</a></li>
-->
</ul>
</nav>
</header>

<section id="about">
<h2>About the Hotel</h2>
<p>Luxury Stays offers the finest hospitality with exceptional
service, comfortable rooms, and world-class amenities.
<!-- <strong>Best stay ever</strong> -->
</section>

<section id="rooms">
<h2>Rooms and Pricing</h2>
<table border="1">
<thead>
<tr>
<th>Room Type</th>
<th>Price per Night</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Single Room</td>
<td>$200</td>
<td>A comfortable room with a single bed and basic
amenities.</td>
</tr>
<tr>
<td>Double Room</td>
<td>$150</td>
<td>A spacious room with a king-size bed and a
beautiful view.</td>
</tr>
<tr>
<td>Suite</td>
<td>$250</td>
<td>A luxurious suite with a living area, jacuzzi, and
premium amenities.</td>
</tr>
<tr>
<td>Presidential Suite</td>
<td>$500</td>
<td>An extravagant suite with multiple rooms, a
private balcony, and butler service.</td>
</tr>
</tbody>
</table>
</section>

<section id=services>
<h2>Hotel Services</h2>
<ul>
<li>Free Wi-Fi</li>
<li>24/7 Room Service</li>
<li>Swimming Pool</li>
<li>Gym</li>
<li>Airport Shuttle</li>
</ul>
</section>
<section id="gallery">
<h2>Gallery</h2>
<img src="[Link]" alt="Room 1" width="300" height="200">
<img src="[Link]" alt="Room 2" width="300" height="200">

<img src="[Link]" alt="Hotel Pool" width="300" height="200">


<!-- <img src="[Link]" alt="Undefined" width="300"> <!- -->
</section>
<aside>
<h3>Customer Reviews</h3>
<h4>John Doe</h4>
<p><q>The Stay was amazing. The service was exceptional,
and the room was perfect!</q></p>
<h4>Jane Smith</h4>
<p><q>A wonderful exprerience. Highly recommend
the suite for a luxury stay!</q></p>
<h4>Mark Johnson</h4>
<p><q>Great location, fantastic amenities, and friendly
staff. Will definitely return!</q></p>

</aside>

<footer id="contact">
<h2>Contact Us</h2>
<p>For booking inquiries, contact us at: info@[Link]</p>
<p>&copy 2025 Luxury Stays. All rights reserved.</p>
</footer>

<section>
<h2>Register Now</h2>
<ul>
<li>Standard Pass - $99</li>
<li>VIP Pass - $199</li>
<li>Student Pass - $49</li>
</ul>
</section>

WEEK-2 PRACTICE AT HOME-1


<!-- write you code here -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Catalog</title>
</head>
<body>
<h1>Welcome to Our Product Catalog</h1>
<p>
Welcome to our product catalog. Here you will find a selection
of the latest and most popular products available in our
store.
</p>

<h2>Our Products</h2>
<ul>
<li>Electronics</li>
<li>Accessories</li>
<li>Home Appliances</li>
</ul>

<table border="1">
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$1200</td>
<td>A high-performance laptop</td>
</tr>
<tr>
<td>Smartphone</td>
<td>$800</td>
<td>A latest model smartphone</td>
</tr>
<tr>
<td>Headphones</td>
<td>$150</td>
<td>Noise-cancelling headphones</td>
</tr>
<tr>
<td>Smartwatch</td>
<td>$250</td>
<td>Fitness tracking smartwatch</td>
</tr>
<tr>
<td>Tablet</td>
<td>$500</td>
<td>A lightweight tablet with great features</td>
</tr>

</tbody>
</table>

</body>
</html>
WEEK-2 PRACTICE AT HOME -2
<!-- write you code here -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Product Catalog</title>
</head>
<body>
<header>
<h1>Welcome to Our E-Commerce Store</h1>
<p>We offer a wide variety of products to suit all your needs.</p>
</header>

<section>
<h2>Product Categories</h2>
<ul>
<li>Electronics</li>
<li>Clothing</li>
<li>Home Appliances</li>
</ul>
</section>
<section>
<h2>Product Catalog</h2>
<table border="1">
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Description</th>
<th>Image</th>
</tr>

</thead>

<tbody>
<tr>
<td>Laptop</td>
<td>$1200</td>
<td>A high-performance laptop</td>
<td><img src="./[Link]" alt="laptop"
width="300" height="200"></td>
</tr>
<tr>
<td>Smartphone</td>
<td>$800</td>
<td>Latest model smartphone</td>
<td><img src="./[Link]" alt="smartphone"
width="300" height="200" ></td>
</tr>
<tr>
<td>Headphones</td>
<td>$150</td>
<td>Noise-cancelling headphones</td>
<td><img src="./[Link]" alt="headphones"
width="300" height="200" ></td>
</tr>
<tr>
<td>Smartwatch</td>
<td>$250</td>
<td>Fitness tracking smartwatch</td>
<td><img src="./[Link]" alt="smartwatch"
width="300" height="200" ></td>
</tr>
<tr>
<td>Tablet</td>
<td>$500</td>
<td>A lightweight tablet with great features</td>
<td><img src="./[Link]" alt="tablet"
width="300" height="200" ></td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Best-Selling Products</h2>
<article>
<h3>Laptop</h3>
<p>A high performance laptop for work and environment.</p>
<img src="./[Link]" alt="laptop" width="300" height="200">
<ul>
<li>Fast Processor</li>
<li>Large screen</li>
<li>Long battery life</li>
</ul>
</article>
<article>
<h3>Smartphone</h3>
<p>Latest model smartphone with advanced features.</p>
<img src="./[Link]" alt="smartphone" width="300"
height="200">
<ul>
<li>High-resolution camera</li>
<li>Fast performance</li>
<li>Long battery life</li>
</ul>
</article>
<article>
<h3>Smartwatch</h3>
<p>Fitness tracking smartwatch for a healthy lifestyle.</p>
<img src="./[Link]" alt="smartwatch" width="300"
height="200">
<ul>
<li>Track steps and heart rate</li>
<li>Water-resistant</li>
<li>Long battery life</li>
</ul>
</article>

</section>

<sidebar>
<h3>Special Offers</h3>
<ul>
<li>50% off on selected electronics</li>
<li>Buy 1, Get 1 Free on accessories</li>
<li>Seasonal sale: Up to 40% off on home appliances</li>
</ul>
</sidebar>

<section>
<h2>Customer Testimonials</h2>
<h3>John Doe</h3>
<p><q>I am thrilled with my new laptop from this store.
The delivery was fast, and the product is amazing!</q></p>

<h3>Jane Smith</h3>
<p><q>The smartphone I bought exceeded my expectations. Great
performance and value for money!</q></p>

<h3>Mark Johnson</h3>
<p><q>The smartphone I purchased is exactly what I needed
to stay fit. Highly resommended!</q></p>

</section>

<footer>
<p>Contact us at <u>info@[Link]</u></p>
<p>2025 E-Commerce Store. All rights reserved.</p>
</footer>
</body>
</html>
WEEK-2 CHALLENGE YOURSELF
<!-- write you code here -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tech Innovators 2025 - Event Page</title>
</head>
<body>
<header>
<h1>Tech Innovators 2025</h1>
<h2>Innovating the Future of Technology</h2>
<img src="[Link]" alt="event-logo"
width="100" height="100">
</header>

<section>
<h2>About the Event</h2>
<p>Tech Innovators 2025 is a premier event that brings minds
in technology. Join us to explore the latest trends and
innovation in the tech industry, network with thought leaders,
and gain insights into the future of technology.
</p>
</section>

<section>
<h2>Event Schedule</h2>
<table border="1">
<thead>
<tr>
<th>Time</th>
<th>Session</th>
<th>Speaker</th>
</tr>

</thead>
<tbody>
<tr>
<td>9:00 AM</td>
<td>Keynote: The Future of AI</td>
<td>Dr. John Doe</td>
</tr>

<tr>
<td>11:00 AM</td>
<td>Blockchain for Business</td>
<td>Jane Smith</td>
</tr>

<tr>
<td>1:00 PM</td>
<td>Innovation in Cloud Computing</td>
<td>Mark Johnson</td>
</tr>

<tr>
<td>3:00 PM</td>
<td>Tech Startups: How to Disrupt the Market </td>
<td>Alice Brown</td>
</tr>

<tr>
<td>5:00 PM</td>
<td>Clouding Remarks & Networking</td>
<td>Event Organization</td>
</tr>

</tbody>
</table>
</section>

<section>
<h2>Speakers</h2>
<article>
<h3>Dr. John Doe</h3>
<p>Dr. John Doe is a renowned expert in AI with over
20 years of experience in the field. He will be
discussing the future of artificial intelligence and
its impact on various industries.
</p>
<img src="./[Link]" alt="john-doe" width="100"
height="150">
</article>

<article>
<h3>Jane Smith</h3>
<p>Jane Smith is a leading blockchain expert
and a thought leader in decentralized technologies. She will
discuss the impact of blockchain on business and finance.
</p>
<img src="./[Link] " alt="jane-smith" width="100"
height="150">
</article>

<article>
<h3>Mark Johnson</h3>
<p>Mark Johnson is a cloud computing visionary and CEO
of CloudTech Innovations. He will share his insights into
the latest
advancements in cloud infrastructure.
</p>
<img src="./[Link] " alt="mark-johnson" width="100"
height="150">
</article>

</section>

<section>
<h2>Venue</h2>
<p>The event will be held at the Grand Tech Conference
Center, located in downtown Silicon Valley.
</p>
<img src="./[Link]" alt="venue" width="'200" height="200">
</section>

<aside>
<h3>Our Sponsors</h3>
<ul>
<li>TechCorp</li>
<li>Innovate Solutions</li>
<li>Global Technologies</li>
</ul>
</aside>

<footer>
<h2>Contact Us</h2>
<p>For more information, email us at
<u>info@[Link]</u></p>
<p>Copyrights, 2025 Tech Innovators 2025. All rights reserved.</p>

</footer>

<section>
<h2>Register Now</h2>
<ul>
<li>General Admissions: $1000</li>
<li>VIP Admissions: $250</li>
<li>Student Admissions: $50</li>
</ul>
</section>

</body>
</html>
WEEK-3 TYPE THE CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Card</title>
<style>
/* Custom styles here */

.profile-card{
display: flex;
align-items: center;
flex-direction: column;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 0.75rem;
margin:0px;
overflow: hidden;
background-color: rgb(255,255,255);

.headerClass{
color:white;
background-color:rgb(76,174,79);
width:97vw;
text-align: center;
border-radius: 0.75rem;
padding:20px;
margin-top: 0px;
margin-bottom: 20px;

p{
text-align: center;
}
.button{
background-color: rgb(76,174,79);
color:white;
border-radius: 0.5rem;
border:none;
border-color: none;
padding:8px;
margin-top: 20px;
margin-bottom: 20px;

.button:hover{
background-color: rgb(69,170,63);
}
</style>
</head>
<body>

<div class="profile-card">
<header class="headerClass">
<h2>John Doe</h2>

</header>

<section >
<p>Web Developer at XYZ Company.</p>
<p>Loves coding and coffee.</p>
</section>

<button class="button">
Contact
</button>
</div>

</body>
</html>
WEEK-3 FIX THE CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkillUp Login</title>
<link rel="stylesheet" href="./[Link]">
</head>
<body>
<div class="login-form">
<h1>Welcome to SkillUp-Learn,Grow,Succeed!</h1>
<form>
<h2>Login Form</h2>
<username>
Username
</username>
<input type="text" name="username" id="username">
<br>
<password>
Password
</password>
<input type="password" name="password" id="password">
<br>
<button type="submit" id="submitButton">Login</button>

</form>
</div>
<script> src="[Link]" </script>
</body>
</html>
.login-form {
background-color: rgb(255,255,255);
border-radius: 5px;
margin-top: 50px;
padding: 30px;
}

h1 {
color: rgba(255, 0, 0);
font-size: 100px;
}

input[type="text"], input[type="password"] {
width: 250px;
height: 50px;
font-size: 16px;
padding: 20px;
margin: 10px 0;
border: 1px solid;
background-color: transparent;
}

button[type="submit"] {

padding: 15px 30px;


width:250px;
cursor: non-resizable;
text-align: center;
}

#submitButton{
background-color: rgb(0,0,255);
font-size: 16px;
color: white;

input[type="text"]:focus, input[type="password"]:focus {
outline: none;
}

label {
font-size: 18px;
font-weight: bold;
display: block;
text-align: left;
color: red;
}

span {
display: none;
}

form{
display: flex;
align-items: center;
flex-direction: column;
}
WEEK-3 PRACTICE AT HOME - QN 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us Web Page</title>
<link rel="stylesheet" href="./[Link]" >
</head>
<body>
<!-- write your code here -->
<header>
<h1>Contact Us</h1>
</header>
<nav class="navcont">
<ul class="ultext" >
<a href="#home">HOME</a>
<a href="products">PRODUCTS</a>
<a href="#about">ABOUT</a>
<a href="#contact">CONTACT</a>
</ul>
</nav>
<section class="container">
<h1>Get in Touch</h1>
<p>Feel free to reach out to us for any queries or feedback.</p>
<form class="contact-form">
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
<input type="text" placeholder="Your message">
<button type="submit">Send Message</button>
</form>

</section>
<footer>
<p>2024 Online Store. All Rights Reserved.</p>
</footer>

</body>
</html>
header{
background-color: rgb(0,115,230);
padding: 16px;

margin-bottom: 0;
}

header h1{
color:white;
text-align: center;
}

nav{
display:flex;
align-items: center;
justify-content: center;
background-color: rgb(77, 146, 215);
margin-top: 0;

a{
text-decoration: none;
color:white;
margin-left: 20px;

.ultext{

text-transform: uppercase;
}

.container{
display: flex;
align-items: center;
flex-direction: column;
max-width: 1200px;
}
.contact-form{
display: flex;
align-items: center;
border-radius: 0.75rem;
flex-direction: column;

input{
border: none;

margin:10%;
width:150%
}

button{
text-align: center;
color: rgb(255,255,255);
background-color: rgb(0,115,230);
border:none;
border-radius: 0.2rem;
padding:5px
}

footer{
margin-top: 7%;
color:rgb(255,255,255);
padding:5px;
text-align: center;
background-color: rgb(0,115,230);
}
WEEK-3 PRACTICE AT HOME QN-2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant Menu</title>
<link rel="stylesheet" href="./[Link]">
</head>
<body>
<!-- write your code here -->
<section class="menu-section">
<header>
<h1>Delicious Restaurant</h1>
</header>
<nav>

<a href="#home">Home</a>
<a href="#menu">Menu</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>

</nav>

</section>

<section class="container">

<h2 class="section-title">Starters</h2>
<section class="menu-items">

<div class="item">
<h2>Garlic Bread</h2>
<p>Crispy bread with garlic and herbs.</p>
<h2 class="price">$5.99</h2>
</div>
<div class="item">
<h2>Tomato Soup</h2>
<p>Fresh tomato soup with basil.</p>
<h2 class="price">$4.99</h2>
</div>

</section>

<h2 class="section-title">Main Course</h2>


<section class="menu-items">

<div class="item">
<h2>Grilled Chicken</h2>
<p>Served with vegetables and fries.</p>
<h2 class="price">$12.99</h2>
</div>
<div class="item">
<h2>Veggie Paste</h2>
<p>Pasta with fresh vegetables and herbs.</p>
<h2 class="price">$10.99</h2>
</div>

</section>

<h2 class="section-title">Desserts</h2>
<section class="menu-items">

<div class="item">
<h2>Chocolate Cake</h2>
<p>Rich and moist chocolate cake.</p>
<h2 class="price">$6.99</h2>
</div>
<div class="item">
<h2>Ice Cream</h2>
<p>Choice of vanilla,chocolate, or strawberry.</p>
<h2 class=price>$3.99</h2>
</div>

</section>

</section>

<footer>
<p>&copy 2024 Delicious Restaurant. All rights reserved.</p>

</footer>
</body>
</html>
header{
background-color: rgb(195, 7, 7);
padding: 16px;
margin-bottom: 0px;
}
header h1{
text-align: center;
color: rgb(255,255,255);

}
nav{
display: flex;
align-items: center;
justify-content: center;
margin-top: 0px;
background-color: rgb(91, 3, 3);
padding: 1%;
}

a{
text-decoration: none;
color:rgb(255,255,255);
margin-left:20px;

.container{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;

.menu-items{
display: flex;
align-items: center;
justify-content: center;}
.item{

width:500px;
background-color: rgb(255,255,255);
border: 2px solid rgb(237, 230, 230);
border-radius: 0.75rem;
margin-right: 1%;
padding: 1%;

.section-title{
color:rgb(195, 7, 7);
}

footer{
margin-top: 1%;
background-color: rgb(195, 7, 7);
color: rgb(255,255,255);
text-align: center;
padding: 0.2%;
}

.price{
color:rgb(195, 7, 7);

}
WEEK 3 - CHALLENGE YOURSELF

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Introduction Project</title>
<link rel="stylesheet" href="./[Link]">

</head>
<body>
<!-- Write your HTML here -->
<nav class="navbar">

<a href="#introduction">Introduction</a>
<a href="csssynatx">CSS Syntax</a>
<a href="cssproperties">CSS Properties</a>

</nav>

<main>
<section class="card">
<h2 class="heading">Introduction to CSS</h2>
<p>CSS stands for <span style="color: rgb(237, 185,
89);">Cascading Style Sheets. </span>
It is used to style and layout web pages, CSS allows you
to apply styles to <span style="font-weight: bold;">web
pages.</span>
More importantly, CSS enables you to do this independently
of the HTML that makes up the web page.

</p>

<h3 class="subheading">CSS Syntax</h3>


<p>The syntax of CSS consists of a selector
and a declaration block.
</p>

<div class="code-block">
<p>selector { </p>
<p>&nbsp;&nbsp;&nbsp;property: value;</p>
<p>}</p>

</div>

<h3 class="subheading">CSS Properties</h3>


<p>
There are numerous CSS properties that can be used to
style elements. For example, the <span style="color:
rgb(247, 67, 67);">color</span> property defines
the text color, and the <span style="color: rgb(247, 67,
67);">font-size</span> property
defines the size of the text.
</p>

</section>
</main>

<footer class="footer">
<p>&copy; 2024 CSS Introduction Project</p>

</footer>

</body>
</html>
body{
background-color: rgb(52,73,94);
}

.navbar{
background-color: rgb(44,62,80);
display: flex;
align-items: center;
justify-content: center;
padding: 1%;
margin-bottom: 2%;
}

a{
text-decoration: none;
margin-left: 10%;
color:rgb(255,255,255);
padding: 0.5%;
}

.card{
background-color: rgb(255,255,255);
padding: 0.5%;
}

.heading{
color:rgb(192,57,43)
}

.subheading{
color: rgb(41,128,185);
}

.code-block{
background-color: gainsboro;
padding: 0.5%;
}

.footer{
margin-top: 4%;
background-color: rgb(44,62,80);
text-align: center;
color:rgb(255,255,255);
padding: 1%;
}

a:hover{
background-color: rgb(157, 238, 37);
color:black;
}
WEEK-4 TYPE THE CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Building Material Inventory Management System</title>
<link rel="stylesheet" href="./[Link]">
</head>
<body>

<div class="formdiv">
<h3 >Building Material Inventory</h3>
<form>

<label for="materialName">Material Name:</label>


<input type="text" id="materialName" placeholder="Enter material name" >
<label for="category">Material Category:</label>
<select id="category">
<option value="Wood">Wood</option>
<option value="Cement">Cement</option>
<option value="Steel">Steel</option>
<option value="Bricks">Bricks</option>
<option value="Glass">Glass</option>
</select>
<label for="quantity">Quantity</label>
<input id="quantity" type="number" placeholder="Enter quantity">
<label for="supplierName">Supplier Name:</label>
<input id="supplierName" placeholder="Enter supplier name" type="text">
<label for="costPerUnit">Cost Per Unit(RS):</label>
<input id="costPerUnit" type="number" placeholder="Enter cost per unit">
<button type="button" id="addMaterialBtn">Submit Material</button>
<span id="error-message"></span>
</form>

</div>

<section>
<table id="materialTable">
<caption>Material List:</caption>
<thead id="headerRow">
<tr>
<th>Material Name</th>
<th>Category</th>
<th>Quantity</th>
<th>Supplier</th>
<th>Cost Per Unit (RS)</th>

</tr>
</thead>
<tbody>

</tbody>

</table>

</section>

<div class="summary">
<h3>Inventory Summary:</h3>
<h3>Total Products: <span id="totalProducts">0</span></h3>
<h3>Most Expensive Product: <span id="mostExpensive">None</span></h3>

</div>

<script src="./[Link]"></script>
</body>
</html>
form{
display: flex;
width:60%;

justify-content: center;
flex-direction: column;
}

.formdiv{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

input{
margin-bottom: 1%;
}

select{
margin-bottom: 1%;
}

#addMaterialBtn{
background-color: rgb(76,175,80);
padding: 1%;
color:rgb(255,255,255);
font-size: large;
font-weight: bold;

thead{
background-color: rgb(76,175,80);
}

.summary{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

#error-message{
opacity:0;
color:red;
text-align: center;
font-weight: bold;
}

.headerTxt{
text-align: center;
}
#materialTable{
margin-top: 2%;
margin-left: 20%;
width:60%

#headerRow{
background-color: rgb(76,175,80);
color:rgb(255,255,255);

#headerRow th{
text-align: center;

padding: 1%;
}

caption{
font-weight: bold;
font-size: large;

.trow{
text-align: center;
}

label{
font-weight: bold;
font-size: large;}
[Link]("addMaterialBtn").addEventListener("click",()=>{

const name=[Link]("materialName").[Link]();
const qty=[Link]("quantity").[Link]();
const sn=[Link]("supplierName").[Link]();
const cpi=[Link]("costPerUnit").[Link]();
const errMsg=[Link]("error-message");
const cat=[Link]("category");
const catVal=[Link][[Link]].text;

if(!name || !catVal || !sn || !cpi || !qty){


[Link]="Please fill out all fields!";
[Link]=1;
return;
}

else{
[Link]=0;
const table=[Link]("materialTable");
const tbody=[Link]("#materialTable tbody");
const trow=[Link]("tr");
const tp=[Link]("totalProducts");
const eItem=[Link]("mostExpensive");
let arr=[name,catVal,qty,sn,cpi];

for(let i=0;i<5;i++){
let tdata=[Link]("td");
if(i==4){
let c=parseFloat(arr[i]).toFixed(2);
[Link]=`RS ${c}`;
}
else{
[Link]=arr[i];
}

[Link](tdata);
}

[Link]("trow");
[Link](trow);

let n=[Link]-1;
[Link]=n;
const data=getTableData(tbody);
[Link]=`${[Link]} (R S ${[Link]})`;
[Link]("form")[0].reset();
}

})

const getTableData=(tbody)=>{
let mc=0;
let ei="";
for(let row of [Link]){
const name=[Link][0].[Link]();
const txt=[Link][4].[Link]();
const cost=parseFloat([Link](/[^\d.]/g,"")).toFixed(2);
if(cost>mc){
mc=cost;
ei=name;
}

return {name:ei,cost:mc}
}
WEEK 4-PRACTICE AT HOME-1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Habit Tracker</title>
<link rel="stylesheet" href="./[Link]">

</head>
<body>
<div class="main-cont">
<form>
<h1>Habit Tracker</h1>
<div class="formdiv">
<input type="checkbox" id="chkWater">
<label for="chWater">Drink Water</label>
</div>

<div class="formdiv">
<input type="checkbox" id="chkExercise">
<label for="chkExercise">Exercise</label>
</div>

<div class="formdiv">
<input type="checkbox" id="chkReading">
<label for="chkReading">Read a book</label>
</div>

<div class="btnDiv">
<button id="mark-progress" type="button">Mark Progress</button>
<button id="reset-progress" type="button">Reset</button>
</div>

</form>

<p id="summary">You have completed <span id="count">0</span> habits today.</p>


</div>
<script src="./[Link]"></script>
</body>
</html>
.main-cont{
width:50%;

background-color: whitesmoke;
border:2px solid white;
border-radius: 1rem;
margin-left: 30%;

}
form{
display: flex;
margin-left:36%;
justify-content: center;
flex-direction: column;

.btnDiv{
display: flex;
align-items: center;

#mark-progress{
background-color: rgb(41,168,71);
margin-right: 2%;
}
#reset-progress{
background-color: red;
}

button{
margin-top: 2%;
color:white;
padding: 2%;
}

p{

margin-left: 34%;
}
.formdiv{
margin-bottom: 1%;}
[Link]("mark-progress").addEventListener("click",()=>{

const dw=[Link]("chkWater");
const de=[Link]("chkExercise");
const rb=[Link]("chkReading");
const sumTxt=[Link]("count");
let n=0;

if([Link]){
n=n+1
}
if([Link]){
n=n+1
}
if([Link]){
n=n+1
}

[Link]=n;

})

[Link]("reset-progress").addEventListener("click",()=>{
[Link]("form")[0].reset();
const sumTxt=[Link]("count");
let n=0;
[Link]=n;

})
WEEK-4 PRACTICE AT HOME -2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./[Link]">
<title>Multiplication Table Generator</title>
</head>
<body>
<div class="mulClass">
<h3>Multiplication Table Generator</h3>
<label for="number">Enter a number:</label>
<input id="number" type="number" placeholder="Enter a number">
<label for="start">Start Value:</label>
<input id="start" type="number" placeholder="Start of range">
<label for="end">End Value:</label>
<input id="end" type="number" placeholder="End of range">
<button type="button" id="generateBtn">Generate Table</button>

<span id="errormessage">All fields are required!</span>


<div id="table">

</div>

</div>
<script src="./[Link]"></script>

</body>
</html>
body{
display: flex;
align-items: center;
justify-content: center;
}

.mulClass{
display: flex;
flex-direction: column;
background-color: white;
box-shadow: 2px 2px 2px rgb(224, 220, 220);
border-radius: 1rem;
width:40%;
padding: 2%;
min-height: fit-content;
}

#generateBtn{
background-color: rgb(77,176,80);
color: rgb(255,255,255);
padding: 1%;
}

input{
margin-bottom: 2%;
padding: 1%;
}

label{
font-weight: bold;
}

#table{
display: flex;
flex-direction: column;
}
#errormessage{
color:red;
opacity:0;
text-align: center;
}
[Link]("generateBtn").addEventListener("click",()=>{

const maindiv=[Link]("mulClass")[0];
const num=[Link]("number").[Link]();
const start=[Link]("start").[Link]();
const end=[Link]("end").[Link]();
const errtxt=[Link]("errormessage");

if(!num || !start || !end){


[Link]=1;
return;

}
else{
[Link]=0;
let i=parseInt(start);
let j=parseInt(end);
let n=parseInt(num);
const tdiv=[Link]("table");
[Link]="";
const ptxt=[Link]("p");
[Link]=`Multiplication Table of ${n}`;
[Link]="bold";
[Link](ptxt);
for(let k=i;k<=j;k++){
let mele=[Link]("p");
let res=n*k;
[Link]=`${n} x ${k} = ${res}`;
[Link](mele);

})
WEEK 4-CHALLENGE YOURSELF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Write your code -->
<h1>Grade Calculator</h1>
<div>

<span id="marksLabel">Enter your marks (0-100): </span>


<input id="marks" type="number">
<button type="button" id="getGradeButton">Convert</button>
<p id="gradeResult"></p>
</div>
<script src="./[Link]"></script>
</body>
</html>
[Link]("getGradeButton").addEventListener("click",()=>{

const mark=parseInt([Link]("marks").[Link]());
const result=[Link]("gradeResult");

if(!mark){
[Link]="Enter any marks to get the grades.";
return;
}

else if(!(mark>=0 && mark<=100)){


[Link]="The marks should be between 0-100.";
return;
}

else{
if(mark>=90){
[Link]=`For marks ${mark}, your grade is: A`;

}
else if(mark>=80 && mark<=89){
[Link]=`For marks ${mark}, your grade is: B`;
}

else if(mark>=70 && mark<=79){


[Link]=`For marks ${mark}, your grade is: C`;
}

else if(mark>=60 && mark<=69){


[Link]=`For marks ${mark}, your grade is: D`;
}

else{
[Link]=`For marks ${mark}, your grade is: F`;
}

}
})
WEEK-4 FIX THE CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Album Collection Manager</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h3>Music Album Collection</h3>
</header>

<form>
<label for="albumName">Album Name: </label>
<input id="albumName" type="text" required placeholder="Enter album name">
<br><br>

<label for="releaseYear">Release Year: </label>


<input id="releaseYear" type="number" required placeholder="Enter release year">
<br><br>

<label for="genre">Genre: </label>


<select id="genre">
<option value="">Select genre</option>
<option value="Pop">Pop</option>
<option value="Rock">Rock</option>
<option value="Jazz">Jazz</option>
<option value="Classical">Classical</option>
</select>
<br><br>

<input type="checkbox" id="favorite">


<label for="favorite">Mark as Favorite </label>
<br><br>

<button id="addAlbumBtn" type="button">Add Album</button>


<span id="error-message"></span>
</form>

<h2>Album List:</h2>
<ul id="albumList"></ul>

<h2>Favorite Albums:</h2>
<ul id="favoriteAlbumList"></ul>

<script src="[Link]"></script>
</body>
</html>
body{
font: 18px Arial, sans-serif;
background: lightblue;
padding: 10px;
}

h1 {
font-family: 'Times New Roman';
font-size: 40px;
}

#albumList {
/* color: blue; */
background-color: lightgray;
text-align: center;
font-size: 14px;
}

ul {
margin-left: 10px;
padding-left: 20px;
list-style-type: square;
}

input[type="text"] {
padding: 5px 10px;
width: 180px;
}

button {
background-color: rgb(76,175,80);
color: red;
padding: 10px 20px;
border: none;
/* cursor: not-allowed; */
}

#error-message {
color: #ff0000;
font-weight: normal;
font-size: 14px;
display: block;
text-align: left;
}

#favoriteAlbumList li {
/* color: green; */
font-size: 12px;
font-weight: light;
}

input[type="number"] {
width: 120px;
padding: 8px;
margin-top: 5px;
background-color: yellow;
}
[Link]("addAlbumBtn").addEventListener("click",()=>{
const an=[Link]("albumName").[Link]();
const ry=[Link]("releaseYear").[Link]();
const gl=[Link]("genre");
const genre=[Link][[Link]].text;
const fav=[Link]("favorite");
const em=[Link]("error-message");

if(!an || !ry ||!([Link]())){


[Link]="Please fill out all fields!";

[Link]("form")[0].reset();
return;
}

else if([Link]){
[Link]="";
const favoriteAlbumList=[Link]("favoriteAlbumList");
const liEle=[Link]("li");
// const hEle1=[Link]("h2");
// const hEle2=[Link]("h2");

[Link]=`<strog>${an}</strong><br><em>Released: ${ry} | Genre: ${genre}


</em> `;
// [Link](hEle1);
// [Link](hEle2);
[Link](liEle);
[Link]("form")[0].reset();
return;

}
else {
[Link]="";
[Link]=0;
const albumList=[Link]("albumList");
const liEle=[Link]("li");
// const hEle1=[Link]("h2");
// const hEle2=[Link]("h2");
// [Link]=an;
// [Link]=`<em>Released: </em> ${ry} | <em>Genre: </em> ${genre}`;
[Link]=`<strog>${an}</strong><br><em>Released: ${ry} | Genre: ${genre}
</em> `;
// [Link](hEle1);
// [Link](hEle2);
[Link](liEle);
[Link]("form")[0].reset();
return;

})
WEEK-5 TYPE THE CODE
<!-- write you code here -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link
href="[Link]
css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5Y
BujZqJLB" crossorigin="anonmyous">
<link rel="stylesheet" href="./[Link]">
</head>
<body>
<div class="maindiv">
<p id="textPara">This is a sample paragraph to be highlighted.</p>
<label for="highlightBtn"></label>
<button id="highlightBtn" type="button" class="btn
btn-primary">Highlight</buton>

</div>

<script src="./[Link]"></script>

</body>
</html>
// write you Scripts here

[Link]("DOMContentLoaded",(event)=>{
[Link]("highlightBtn").addEventListener("click",()=>{
const btnclass=[Link]("textPara");
[Link]("highlight");

})
})

/* write you stylings here */

.maindiv{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.highlight{
background-color: yellow;
}
WEEK 5 - PRACTICE AT HOME -1

<!-- write you code here -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="[Link]
rel="stylesheet">
<link href="./[Link]" rel="stylesheet">
</head>
<body>

<div>
<div id="btn1" class="btn btn-primary">Image 1</div>
<div id="btn2" class="btn btn-secondary">Image 2</div>
<div id="btn3" class="btn btn-danger">Image 3</div>
</div>

<div class="image-container">
<img id="img1" style="position: absolute; z-index: 1;width: 200px;height:300px"
src="./[Link]">
<img id="img2" style="position: absolute;z-index: 2;width: 200px;height:300px"
src="./[Link]">
<img id="img3" style="position: absolute;z-index: 3;width: 200px;height:300px"
src="./[Link]">
</div>

<script src="./[Link]"></script>

</body>
</html>
/* write you stylings here */

.image-container{
/* display: flex;
align-items: center;
justify-content: center; */
position: relative;
margin-top: 2%;

}
// write you Scripts here

[Link]("DOMContentLoaded",(event)=>{

const btn1=[Link]("btn1");
const btn2=[Link]("btn2");
const btn3=[Link]("btn3");
const img1=[Link]("img1");
const img2=[Link]("img2");
const img3=[Link]("img3");

[Link]("click",()=>{

[Link]=10;
[Link]=1;
[Link]=1;

})

[Link]("click",()=>{

[Link]=1;
[Link]=10;
[Link]=1;

})

[Link]("click",()=>{

[Link]=1;
[Link]=1;
[Link]=10;

})

})
WEEK 5 -PRACTICE AT HOME - 2

<!-- write you code here -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"
href="[Link]
<link rel="stylesheet" href="./[Link]">
</head>
<body>
<h1>Live TextArea Editor</h1>

<div class="headerGrp">
<div class="grp">
<label for="fontSizeSelect">Font Size</label>
<select id="fontSizeSelect" class="form-select">
<option value="12px">12px</option>
<option value="16px">16px</option>
<option value="20px">20px</option>
</select>
</div>

<div class="grp">
<label for="fontColorSelect">Font Color</label>
<select id="fontColorSelect" class="form-select">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
</select>
</div>

<div class="btn-group">

<button id="boldBtn" class="btn btn-outline-dark" data-bs-toggle="button">


Bold
</button>
<button id="italicBtn" class="btn btn-outline-dark" data-bs-toggle="button">
Italic
</button>
<button class="btn btn-outline-secondary" id="resetBtn">Reset</button>

</div>
</div>

<textarea id="editor" placeholder="Type something here..."></textarea>

<script src="./[Link]"></script>
<script
src="[Link]
</body>
</html>
/* write you stylings here */
#fontColorSelect{
width:500px;
}

#fontSizeSelect{
width:300px;
}

.headerGrp{
display: flex;

.grp{
display: flex;
flex-direction: column;
margin-right:5%;
}

#editor{
font-size: 12px;
color: black;
font-weight: normal;
font-style: normal;
width:50%;
height:200px;
}
// write you Scripts here

[Link]("DOMContentLoaded",(event)=>{
const fontSize=[Link]("fontSizeSelect");
const color=[Link]("fontColorSelect");
const fontWeight=[Link]("boldBtn");
const fontStyle=[Link]("italicBtn");
const resetBtn=[Link]("resetBtn");
const target=[Link]("editor");

[Link]("change",()=>{
[Link]=[Link]();
})

[Link]("change",()=>{
[Link]=[Link]();
})

[Link]("click",()=>{

if([Link]("active")){
[Link]("fw-bold");
}else{
[Link]("fw-bold");
}
})

[Link]("click",()=>{
if([Link]("active")){
[Link]("fst-italic");
}else{
[Link]("fst-italic");
}
})
[Link]("click",()=>{

[Link]="";
[Link]="";
[Link]="12px";
[Link]="black";
if([Link]("active")){
//[Link]("italicbtn");
[Link]("fst-italic");
[Link]("active");
}

if([Link]("active")){
//[Link]("italicbtn");
[Link]("fw-bold");
[Link]("active");
}

})

})
WEEK 5 - FIX THE CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Validation</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link href="[Link]
rel="stylesheet" />
</head>
<body class="p-4">

<div class="container">
<h3 class="mb-4">User Information Form</h3>

<form id="userForm" novalidate>


<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" id="name" class="form-control" required />
<div id="nameError" class="invalid-feedback">Please enter your name.</div>
</div>

<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" id="email" class="form-control" id="email" required />
<div id="emailError" class="invalid-feedback">Please enter a valid email address.</div>
</div>

<div class="mb-3">
<label for="age" class="form-label">Age</label>
<input id="age" type="number" class="form-control" id="age" min="18" max="150" required
/>
<div id="ageError" class="invalid-feedback">Age must be between 18 and 150.</div>
</div>

<button id="submitBtn" type="submit" class="btn btn-primary">Submit</button>


</form>

<div id="successMessage" class="mt-3 alert alert-success d-none">


<p>Success! Here is the data:</p>
<p id="successData"></p>
</div>
</div>

<script src="[Link]"></script>

</body>
</html>

// write you Scripts here

[Link]("userForm").addEventListener("submit",(event)=>{
[Link]();
const nameField=[Link]("name");
const emailField=[Link]("email");
const ageField=[Link]("age");
const successMessage=[Link]("successMessage");
const successData=[Link]("successData");
const nameError=[Link]("nameError");
[Link]("nameError").[Link]("d-none");
[Link]("emailError").[Link]("d-none");
[Link]("ageError").[Link]("d-none");

let valid=true;

if([Link]()===""){
[Link]("is-invalid");
[Link]("d-none");
valid=false;
} else{
[Link]("is-invalid");
[Link]("nameError").[Link]("d-none");

const emailPattern=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if(![Link]([Link]) || ![Link](".com")){

[Link]("is-invalid");
[Link]("emailError").[Link]("d-none");
valid=false;
} else{
[Link]("is-invalid");
[Link]("emailError").[Link]("d-none"); }
const age=parseInt([Link]);

if(isNaN(age) || age<18 || age>150){


[Link]("is-invalid");
[Link]("ageError").[Link]("d-none");
valid=false;
} else{
[Link]("is-invalid");
[Link]("ageError").[Link]("d-none");

if(valid){
[Link]=`Name : ${[Link]}<br>
Email : ${[Link]}<br>
Age : ${[Link]}`;

[Link]("d-none");
[Link]("userForm").reset();

}else{
[Link]("d-none");
}

})

You might also like