YouDream
WBT Content
<!-- 1. Create two tables using rowspan and colspan. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tables</title>
</head>
<body>
<h2>Tables Using Rowspan and Colspan</h2>
<h3>Table 1</h3>
<hr>
<!-- First table -->
<table border="1" width="50%">
<tr align="center">
<!-- Cell A occupies 2 rows and 2 columns -->
<td colspan="2" rowspan="2" bgcolor="red">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr align="center">
<td>D</td>
<td>E</td>
</tr>
<tr align="center">
<td>F</td>
<td>G</td>
<!-- Cell H occupies 2 rows and 2 columns -->
<td colspan="2" rowspan="2" bgcolor="green">H</td>
</tr>
<tr align="center">
<td>I</td>
<td>J</td>
</tr>
</table>
<h3>Table 2</h3>
<hr>
<!-- Second table -->
<table border="1" width="50%">
<tr align="center">
<!-- Cell A occupies 3 rows -->
<td rowspan="3" bgcolor="yellow">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr align="center">
<!-- Cell D occupies 2 columns -->
<td colspan="2" bgcolor="blue">D</td>
</tr>
<tr align="center">
<td>E</td>
<!-- Cell F occupies 2 rows -->
<td rowspan="2" bgcolor="green">F</td>
</tr>
<tr align="center">
<td>G</td>
<td>H</td>
</tr>
</table>
</body>
</html>
<!-- 2. Create a bookmark link that moves to the top header. -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Sets the character encoding -->
<meta charset="UTF-8">
<!-- Makes the webpage responsive on different screen sizes -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title shown in the browser tab -->
<title>Jalebi Syllabus</title>
</head>
<!-- id="top" is used by the Back to Top links -->
<body id="top">
<!-- Website heading with Jalebi image -->
<center>
<img src="../Assets/jalebi.png" alt="jalebi" height="100px" width="100px">
<font color="blue" size="25px">Jalebi</font>
</center>
<!-- Horizontal line -->
<hr color="red" size="5">
<!-- Navigation links for all chapters -->
<nav>
<center>
<a href="#ch1">Chapter 1</a> |
<a href="#ch2">Chapter 2</a> |
<a href="#ch3">Chapter 3</a> |
<a href="#ch4">Chapter 4</a> |
<a href="#ch5">Chapter 5</a> |
<a href="#ch6">Chapter 6</a> |
<a href="#ch7">Chapter 7</a> |
<a href="#ch8">Chapter 8</a> |
<a href="#ch9">Chapter 9</a> |
<a href="#ch10">Chapter 10</a>
</center>
</nav>
<hr color="red" size="5">
<!-- Chapter 1 section -->
<section id="ch1">
<h1>Chapter 1 - Introduction to Jalebi</h1>
<p>
Jalebi is a popular traditional Indian sweet known for its bright
orange colour, spiral shape, crispy texture and sweet syrup.
It is commonly enjoyed as a dessert and is especially popular
during festivals, celebrations and special occasions.
Jalebi is made by preparing a fermented or non-fermented batter,
shaping it into circular spirals and deep-frying it in hot oil
or ghee. The fried spirals are then soaked in sugar syrup.
The combination of a crispy outside and juicy, sweet centre makes
jalebi one of the most recognizable and beloved Indian sweets.
</p>
<hr color="red">
<!-- Bookmark link to move back to the top -->
<center>
<a href="#top">⬆ Back to Top</a>
</center>
</section>
<!-- Chapter 2 section -->
<section id="ch2">
<hr color="red" size="5">
<h1>Chapter 2 - History of Jalebi</h1>
<p>
Jalebi has a long history and is believed to have developed from
sweets made in the Middle East and Central Asia. Historical
references connect jalebi with an older sweet known as zalabiya
or similar names.
Over time, the sweet travelled across different regions and
became adapted to local ingredients, cooking methods and tastes.
In India, jalebi became deeply associated with traditional
sweet-making and festive food culture.
Today, jalebi is prepared throughout India and has also become
popular in several other South Asian countries. Different regions
have developed their own variations of the sweet.
</p>
<hr color="red">
<center>
<a href="#top">⬆ Back to Top</a>
</center>
</section>
<!-- Chapter 3 section -->
<section id="ch3">
<hr color="red" size="5">
<h1>Chapter 3 - Ingredients of Jalebi</h1>
<p>
Traditional jalebi is made using ingredients such as refined
wheat flour, water and sugar. Depending on the recipe, ingredients
such as yogurt, gram flour or other raising and fermenting agents
may also be used.
The batter needs the right consistency so that it can be squeezed
into thin circular shapes. A small amount of food colouring or
saffron may be used to give jalebi its familiar golden-orange
appearance.
The sugar syrup is another important part of jalebi. It is usually
prepared by boiling sugar and water together and may be flavoured
with cardamom, saffron or rose water.
</p>
<hr color="red">
<center>
<a href="#top">⬆ Back to Top</a>
</center>
</section>
<!-- Chapter 4 section -->
<section id="ch4">
<hr color="red" size="5">
<h1>Chapter 4 - Preparation of Jalebi Batter</h1>
<p>
The first step in making jalebi is preparing the batter. Flour is
mixed with water until a smooth mixture is formed. Traditional
recipes may include yogurt and allow the batter to ferment for
several hours.
Fermentation can give jalebi a slightly tangy flavour and helps
develop its characteristic texture. Modern recipes sometimes use
instant methods that do not require a long fermentation period.
The finished batter should be smooth and flowing enough to pass
through a piping bag, squeeze bottle or traditional cloth used
for shaping the jalebi.
</p>
<hr color="red">
<center>
<a href="#top">⬆ Back to Top</a>
</center>
</section>
<!-- Chapter 5 section -->
<section id="ch5">
<hr color="red" size="5">
<h1>Chapter 5 - Shaping Jalebi</h1>
<p>
Jalebi gets its distinctive appearance from the way the batter is
poured into hot oil or ghee. The batter is squeezed in a continuous
circular motion to create spirals and loops.
Skilled sweet makers can create many jalebi spirals quickly while
maintaining a consistent size and shape. The shape is important
because it affects how evenly the jalebi cooks.
The spirals are generally made relatively thin so that they become
crisp on the outside while still absorbing the sugar syrup after
frying.
</p>
<hr color="red">
<center>
<a href="#top">⬆ Back to Top</a>
</center>
</section>
<!-- Chapter 6 section -->
<section id="ch6">
<hr color="red" size="5">
<h1>Chapter 6 - Frying Jalebi</h1>
<p>
After the batter is prepared and shaped, the jalebi is deep-fried
in hot oil or ghee. The cooking temperature must be controlled
carefully so that the jalebi becomes crisp without burning.
As the batter enters the hot oil, it quickly forms a firm outer
layer. The jalebi is fried until it develops a golden or orange
colour and a crisp texture.
Once fried, the jalebi is removed from the oil and immediately
placed into warm sugar syrup. This allows the syrup to enter the
crispy spirals and gives jalebi its characteristic sweetness.
</p>
<hr color="red">
<center>
<a href="#top">⬆ Back to Top</a>
</center>
</section>
<!-- Chapter 7 section -->
<section id="ch7">
<hr color="red" size="5">
<h1>Chapter 7 - Sugar Syrup</h1>
<p>
Sugar syrup, also known as chashni, is an essential part of jalebi.
Sugar and water are boiled together until the syrup reaches the
desired consistency.
The syrup may be flavoured with ingredients such as cardamom,
saffron, rose water or lemon juice. The flavouring depends on the
recipe and regional style.
The fried jalebi is dipped into the warm syrup for a short period.
It absorbs the syrup while retaining some of its crispness, creating
the sweet and juicy texture associated with jalebi.
</p>
<hr color="red">
<center>
<a href="#top">⬆ Back to Top</a>
</center>
</section>
<!-- Chapter 8 section -->
<section id="ch8">
<hr color="red" size="5">
<h1>Chapter 8 - Regional Varieties of Jalebi</h1>
<p>
Jalebi is prepared in different forms across the Indian
subcontinent. The ingredients, thickness, fermentation method and
texture can vary from one region to another.
Imarti, although different from ordinary jalebi, is another
traditional Indian sweet made by deep-frying a batter into a
decorative shape and soaking it in sugar syrup. It is usually
made from urad dal rather than refined wheat flour.
Some regions also prepare thicker and softer versions of jalebi.
These variations demonstrate how traditional sweets can change
according to local food traditions and preferences.
</p>
<hr color="red">
<center>
<a href="#top">⬆ Back to Top</a>
</center>
</section>
<!-- Chapter 9 section -->
<section id="ch9">
<hr color="red" size="5">
<h1>Chapter 9 - Jalebi in Indian Culture</h1>
<p>
Jalebi is closely associated with Indian celebrations and
everyday food culture. It is commonly sold at sweet shops,
markets, fairs and street-food stalls.
During festivals and family celebrations, jalebi is often served
as a dessert. In some parts of India, it is also enjoyed with
breakfast foods or paired with other traditional dishes.
Jalebi is sometimes served with milk, rabri or other dairy-based
accompaniments. The combination of hot jalebi and cool rabri is
particularly popular in many places.
</p>
<hr color="red">
<center>
<a href="#top">⬆ Back to Top</a>
</center>
</section>
<!-- Chapter 10 section -->
<section id="ch10">
<hr color="red" size="5">
<h1>Chapter 10 - Nutritional Information and Conclusion</h1>
<p>
Jalebi is primarily a sweet food and contains a significant
amount of carbohydrates and sugar. Since it is deep-fried, it
also contains fat. The exact nutritional value depends on the
recipe, size and amount of syrup absorbed.
Jalebi is best enjoyed as an occasional treat as part of a
balanced diet. Its appeal comes from its distinctive combination
of crispness, sweetness, aroma and attractive spiral shape.
From its historical origins to its many regional varieties,
jalebi has become an important part of South Asian food culture.
Its simple ingredients and unique preparation have helped make
it one of the most recognizable traditional sweets.
</p>
<hr color="red">
<center>
<a href="#top">⬆ Back to Top</a>
</center>
</section>
</body>
</html>
<!-- 3. Create image links for six images. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Phones</title>
</head>
<body>
<h2>Checkout any Phone you want to get Information About</h2>
<a href="iphone18.html">
<img src="../Assets/iphone18.jpg" alt="iphone18" width="15%">
</a>
<a href="s26.html">
<img src="../Assets/s26ultra.jpg" alt="Samsung Galaxy S26 Ultra" width="15%">
</a>
<a href="oneplus15.html">
<img src="../Assets/oneplus15.jpg" alt="Oneplus 15" width="15%">
</a>
<br>
1. Iphone 18
2. Samsung Galaxy S26
3. Oneplus 15
<br><br><br>
<a href="xiaomi.html">
<img src="../Assets/xiaomi.jpg" alt="Xiaomi 17 Ultra" width="15%">
</a>
<a href="oppo.html">
<img src="../Assets/oppo.jpg" alt="Oppo Find X9 Ultra" width="15%">
</a>
<a href="vivo.html">
<img src="../Assets/vivo.jpg" alt="Vivo X300 Ultra" width="15%">
</a>
<br>
4. Xiaomi 17 Ultra
5. Oppo Find X9 Ultra
6. Vivo X300 Ultra
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPhone 18</title>
</head>
<body>
<h1>iPhone 18</h1>
<img src="/Assets/iphone18.jpg" alt="iPhone 18" width="25%">
<h2>About the Phone</h2>
<p>
The iPhone 18 is included here as a phone in the assignment list.
It includes a large display, high-end performance, photography,
and iOS features with the new variable aparture camera system.
</p>
<a href="./assignphone.html">Back to Mobile Phones</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OnePlus 15</title>
</head>
<body>
<h1>OnePlus 15</h1>
<img src="/Assets/oneplus15.jpg" alt="OnePlus 15" width="25%">
<h2>About the Phone</h2>
<p>
The OnePlus 15 is a performance-focused flagship smartphone running
OxygenOS 16 based on Android 16. It combines a high-refresh-rate
display, a large battery, fast charging and a triple-camera setup.
</p>
<br>
<a href="./assignphone.html">Back to Mobile Phones</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPPO Find X9 Ultra</title>
</head>
<body>
<h1>OPPO Find X9 Ultra</h1>
<img src="/Assets/oppo.jpg" alt="OPPO Find X9 Ultra" width="25%">
<h2>About the Phone</h2>
<p>
The OPPO Find X9 Ultra is a premium smartphone built around photography,
display quality and high-end performance. It uses a multi-camera system
with dedicated telephoto hardware and Hasselblad-related camera features.
</p>
<br>
<a href="./assignphone.html">Back to Mobile Phones</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Samsung Galaxy S26 Ultra</title>
</head>
<body>
<h1>Samsung Galaxy S26 Ultra</h1>
<img src="/Assets/s26ultra.jpg" alt="Samsung Galaxy S26 Ultra" width="25%">
<h2>About the Phone</h2>
<p>
The Galaxy S26 Ultra is Samsung's flagship Ultra smartphone for 2026.
It focuses on a large display, high-end performance, photography,
Galaxy AI features and S Pen support.
</p>
<br>
<a href="./assignphone.html">Back to Mobile Phones</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vivo X300 Ultra</title>
</head>
<body>
<h1>vivo X300 Ultra</h1>
<img src="/Assets/vivo.jpg" alt="vivo X300 Ultra" width="25%">
<h2>About the Phone</h2>
<p>
The vivo X300 Ultra is a premium camera-focused smartphone. It combines
a large high-resolution display, a Snapdragon flagship processor,
ZEISS camera technology and a large battery.
</p>
<br>
<a href="./assignphone.html">Back to Mobile Phones</a>
</body>
</html>
<!-- 4. Design a website according to the given diagram. -->
<!DOCTYPE html>
<html>
<head>
<title>Snack World</title>
<link rel="stylesheet" href="assignment.css">
<link rel="icon" href="../Assets/icon.png">
</head>
<body>
<!-- Website header -->
<header>
<div class="logo">🍿</div>
<h1>SNACK WORLD</h1>
</header>
<div class="top-section">
<!-- Snacks list with marquee animation -->
<div class="left-list">
<h2>Snacks</h2>
<!-- Moves snack items from bottom to top -->
<marquee direction="up" height="400" scrollamount="4">
<div class="snack">
<img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?w=300" alt="Samosa">
<p>Samosa</p>
</div>
<div class="snack">
<img src="https://images.unsplash.com/photo-1626082927389-6cd097cdc6ec?w=300" alt="Pakora">
<p>Pakora</p>
</div>
<div class="snack">
<img src="https://images.unsplash.com/photo-1630383249896-424e482df921?w=300" alt="French Fries">
<p>French Fries</p>
</div>
<div class="snack">
<img src="https://images.unsplash.com/photo-1601050690117-94f5f6fa8bd7?w=300" alt="Kachori">
<p>Kachori</p>
</div>
<div class="snack">
<img src="https://images.unsplash.com/photo-1528735602780-2552fd46c7af?w=300" alt="Sandwich">
<p>Sandwich</p>
</div>
<div class="snack">
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=300" alt="Pizza">
<p>Pizza</p>
</div>
</marquee>
</div>
<!-- Snacks image gallery -->
<div class="right-gallery">
<h2>Our Snacks Gallery</h2>
<div class="gallery">
<img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?w=500" alt="Samosa">
<img src="https://images.unsplash.com/photo-1626082927389-6cd097cdc6ec?w=500" alt="Pakora">
<img src="https://images.unsplash.com/photo-1630383249896-424e482df921?w=500" alt="French Fries">
<img src="https://images.unsplash.com/photo-1601050690117-94f5f6fa8bd7?w=500" alt="Kachori">
<img src="https://images.unsplash.com/photo-1528735602780-2552fd46c7af?w=500" alt="Sandwich">
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=500" alt="Pizza">
</div>
</div>
</div>
<div class="bottom-section">
<!-- Snack order form -->
<div class="form-section">
<h2>Snack Order Form</h2>
<form>
<label>Name:</label>
<input type="text" placeholder="Enter your name">
<label>Email:</label>
<input type="email" placeholder="Enter your email">
<label>Select Snack:</label>
<select>
<option>-- Select Snack --</option>
<option>Samosa</option>
<option>Pakora</option>
<option>French Fries</option>
<option>Kachori</option>
<option>Sandwich</option>
<option>Pizza</option>
</select>
<label>Quantity:</label>
<input type="number">
<label>Message:</label>
<textarea></textarea>
<button>Order Now</button>
</form>
</div>
<!-- Google Maps location -->
<div class="location">
<h2>Our Location</h2>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3769.5671743907246!2d72.83010759999999!3d19.1266348!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b716a5539e23%3A0x60a0ccff32d6f970!2zSm9leeKAmXMgUGl6emE!5e0!3m2!1sen!2sin!4v1790528267963!5m2!1sen!2sin"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
}
/* Header */
header {
height: 90px;
background: #222;
color: white;
display: flex;
align-items: center;
padding: 10px 30px;
border-bottom: 5px solid orange;
}
.logo {
width: 60px;
height: 60px;
background: orange;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
margin-right: 20px;
}
.top-section {
width: 95%;
margin: 20px auto;
background: white;
display: grid;
grid-template-columns: 20% 80%;
border: 1px solid #ccc;
border-radius: 8px;
}
.left-list {
padding: 15px;
border-right: 2px solid #ccc;
}
.left-list h2,.right-gallery h2,.form-section h2,.location h2 {
text-align: center;
margin-bottom: 15px;
}
.scroll {
height: 350px;
overflow-y: auto;
}
.snack {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 6px;
}
.snack img {
width: 60px;
height: 55px;
object-fit: cover;
}
.snack p {
font-weight: bold;
font-size: 14px;
}
.right-gallery {
padding: 15px;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.gallery img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 7px;
}
.bottom-section {
width: 95%;
margin: 20px auto;
background: white;
display: grid;
grid-template-columns: 50% 50%;
border: 1px solid #ccc;
border-radius: 8px;
}
.form-section,
.location {
padding: 25px;
}
.form-section {
border-right: 2px solid #ccc;
}
form {
width: 90%;
margin: auto;
}
label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
}
input,select,textarea {
width: 100%;
padding: 9px;
border: 1px solid #aaa;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
margin-top: 15px;
background: orange;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
}
button:hover {
background: darkorange;
}
.location iframe {
width: 100%;
height: 400px;
border: 0;
}
@media (max-width: 800px) {
.top-section,
.bottom-section {
grid-template-columns: 1fr;
}
.left-list,
.form-section {
border: none;
border-bottom: 2px solid #ccc;
}
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
<!-- 5. Design a website header with a logo and title. -->
<!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>
<header>
<center>
<!-- Website logo/image -->
<img src=".../Assets/vadapav.jpg"
alt="vadapav"
width="200px"
height="200px">
<br>
<!-- Website title with orange color and larger font size -->
<font size="5px" color="orange">
Vadapavvvvv.... Khaate Jaaaoooooo
</font>
</center>
</header>
<!-- Horizontal lines used as a decorative tricolor below the header -->
<hr color="red" size="5px">
<hr color="yellow" size="5px">
<hr color="green" size="5px">
<!-- Navigation section containing links to other websites/pages -->
<nav>
<!-- Opens Amazon in a new browser tab -->
<a href="https://www.amazon.in" target="_blank">Amazon</a> |
<!-- Opens Flipkart in a new browser tab -->
<a href="https://www.flipkart.in" target="_blank">Flipkart</a> |
<!-- Opens the images.html page in a new browser tab -->
<a href="./images.html" target="_blank">Images</a> |
<!-- Opens the list.html page in the current tab -->
<a href="./list.html">list</a>
</nav>
</body>
</html>
<!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>
<h2> Display images by using relative path</h2>
<h4>1. Nagpuri Poha</h4>
<img src="../Assets/poha.jpg" alt="Nagpuri Pohaa" width="17%">
<br>
<h4>2. Rameshwaram Dosa</h4>
<img src="../Assets/dosa.png" alt="Rameshwaram Dosa" width="20%">
<br>
<h4>3. Rameshwaram idli</h4>
<img src="../Assets/idli.jpg" alt="Rameshwaram idli" width="20%">
<br>
<h4>4. Ashok Vadapav</h4>
<img src="../Assets/vadapav.jpg" alt="vadapav" width="20%">
<br>
<h3>Video File</h3>
<video controls height="300px" width="300px" autoplay loop src="../Assets/video.mp4">
<!-- <source src="../Assets/video.mp4"> -->
</video>
<h3>Audio File</h3>
<audio controls>
<source src="../Assets/audio.mp3">
</audio>
<br>
<a href="assignment5.html">Visit My Website</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Types of List</title>
</head>
<body bgcolor="cream">
<h2>Ordered List</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Mango</li>
</ol>
<ol start="101">
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Mango</li>
</ol>
<ol type="a">
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Mango</li>
</ol>
<hr>
<h2>Unordered List</h2>
<ul type="circle">
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Mango</li>
</ul>
<ul type="square">
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Mango</li>
</ul>
<hr>
<h2>Desciption List</h2>
<dl>
<dt>Apple</dt>
<dt>Banana</dt>
<dt>Grapes</dt>
<dt>Mango</dt>
</dl>
</body>
</html>
<!-- 6. Use the Bootstrap grid system to make cards responsive on different screen sizes. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Responsive Cards</title>
</head>
<body>
<style>
/* Makes all card images the same size */
.card-img-top {
height: 200px;
object-fit: cover;
}
</style>
<!-- Bootstrap container -->
<div class="container mt-4">
<h2 class="text-center mb-4">Responsive Cards</h2>
<!-- Bootstrap row -->
<div class="row g-4">
<!-- 1 card on mobile, 2 on small, 3 on medium, and 4 on large screens -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card h-100">
<img src="../Assets/dosa.png" class="card-img-top" alt="Dosa">
<div class="card-body">
<h5 class="card-title">Dosa</h5>
<p class="card-text">A delicious South Indian dish.</p>
<button class="btn btn-primary">Order Now</button>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card h-100">
<img src="../Assets/jalebi.png" class="card-img-top" alt="Jalebi">
<div class="card-body">
<h5 class="card-title">Jalebi</h5>
<p class="card-text">A sweet and crispy Indian dessert.</p>
<button class="btn btn-primary">Order Now</button>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card h-100">
<img src="../Assets/vadapav.jpg" class="card-img-top" alt="Vadapav">
<div class="card-body">
<h5 class="card-title">Vadapav</h5>
<p class="card-text">A popular Maharshtrian Potato Snack.</p>
<button class="btn btn-primary">Order Now</button>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card h-100">
<img src="../Assets/poha.jpg" class="card-img-top" alt="Poha">
<div class="card-body">
<h5 class="card-title">Poha</h5>
<p class="card-text">A light and healthy breakfast.</p>
<button class="btn btn-primary">Order Now</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- 7. Change multiple images by clicking different buttons -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Dish</title>
<style>
/* Main box containing the image, name, and buttons */
.box {
width: 320px;
min-height: 400px;
margin: 40px auto;
padding: 25px;
border: 2px solid black;
border-radius: 12px;
text-align: center;
}
/* Border around the dish image */
.image-box {
border: 2px solid red;
border-radius: 20px;
padding: 10px;
}
/* Makes all dish images the same size */
img {
width: 140px;
height: 120px;
object-fit: cover;
}
/* Styles all buttons */
button {
padding: 8px 18px;
margin: 5px;
}
</style>
</head>
<body>
<div class="box">
<!-- Displays the selected dish image -->
<div class="image-box">
<img id="foodImage" src="../Assets/dosa.png" alt="Dosa">
</div>
<!-- Displays the selected dish name -->
<h2 id="foodName">Dosa</h2>
<!-- Dish buttons will be created here -->
<div id="buttonBox"></div>
<p>Select the dish you want to see...</p>
</div>
<script>
// Stores all dish names and their image paths
let foods = [
{
name: "Dosa",
image: "../Assets/dosa.png"
},
{
name: "Idli",
image: "../Assets/idli.jpg"
},
{
name: "Jalebi",
image: "../Assets/jalebi.png"
},
{
name: "Poha",
image: "../Assets/poha.jpg"
}
];
// Gets the area where buttons will be displayed
let buttonBox = document.getElementById("buttonBox");
// Creates one button for every dish
foods.forEach(function(food) {
let button = document.createElement("button");
// Sets the button text
button.innerHTML = food.name;
// Changes the image and name when the button is clicked
button.onclick = function() {
document.getElementById("foodImage").src = food.image;
document.getElementById("foodImage").alt = food.name;
document.getElementById("foodName").innerHTML = food.name;
};
// Adds the button to the button box
buttonBox.appendChild(button);
});
</script>
</body>
</html>
<!-- 8. Create an image toggle task. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Image</title>
<style>
.box {
width: 320px;
min-height: 400px;
margin: 40px auto;
padding: 25px;
border: 2px solid black;
border-radius: 12px;
text-align: center;
}
.image-box {
border: 2px solid red;
border-radius: 20px;
padding: 10px;
}
img {
width: 140px;
height: 120px;
object-fit: cover;
}
button {
padding: 8px 18px;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="box">
<!-- Dish image -->
<div class="image-box">
<img id="foodImage" src="../Assets/idli.jpg" alt="Idli">
</div>
<!-- Dish name -->
<h2 id="foodName">Idli</h2>
<!-- Button to change the image -->
<button onclick="toggleImage()">Another</button>
<p>Click to change the dish</p>
</div>
<script>
// Stores all dish names and image paths
let foods = [
{
name: "Idli",
image: "../Assets/idli.jpg"
},
{
name: "Poha",
image: "../Assets/poha.jpg"
},
{
name: "Dosa",
image: "../Assets/dosa.png"
},
{
name: "Jalebi",
image: "../Assets/jalebi.png"
}
];
// Stores the current dish position
let count = 0;
// Changes the image to the next dish
function toggleImage() {
count = (count + 1) % foods.length;
document.getElementById("foodImage").src = foods[count].image;
document.getElementById("foodImage").alt = foods[count].name;
document.getElementById("foodName").innerHTML = foods[count].name;
}
</script>
</body>
</html>
<!-- 9. Create a view where the temporary address is the same as the permanent address. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 9</title>
<style>
/* Places both textboxes and the button in one row */
.address-container {
display: flex;
align-items: center;
gap: 20px;
margin: 100px auto;
width: fit-content;
}
/* Styles the address textboxes */
textarea {
width: 180px;
height: 100px;
}
</style>
</head>
<body>
<!-- Contains the temporary address, button, and permanent address -->
<div class="address-container">
<!-- Temporary address field -->
<div>
<label>Temporary Address:</label><br>
<textarea id="d1"></textarea>
</div>
<!-- Copies the temporary address to the permanent address -->
<button type="button" onclick="sameAddress()">Same as Temp</button>
<!-- Permanent address field -->
<div>
<label>Permanent Address:</label><br>
<textarea id="d2"></textarea>
</div>
</div>
<script>
// Copies the value of the temporary address textbox
// into the permanent address textbox
function sameAddress() {
document.getElementById("d2").value = document.getElementById("d1").value;
}
</script>
</body>
</html>
<!-- 10. Perform replace() and replaceAll() tasks according to the given design. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Replace and ReplaceAll</title>
<style>
.container {
width: 70%;
margin: 50px auto;
}
textarea {
width: 100%;
height: 50px;
}
.row {
margin-top: 35px;
text-align: center;
}
input {
width: 200px;
height: 22px;
}
</style>
</head>
<body>
<div class="container">
<!-- User writes text here -->
<textarea id="d1"></textarea>
<!-- Input for the word that should be replaced -->
<div class="row">
<label>Old text</label>
<input type="text" id="oldText">
<button onclick="replaceText()">Replace</button>
</div>
<!-- Input for the new replacement word -->
<div class="row">
<label>New text</label>
<input type="text" id="newText">
<button onclick="replaceAllText()">ReplaceAll</button>
</div>
</div>
<script>
// Replaces only the first occurrence of the old text
function replaceText() {
let message = document.getElementById("d1").value;
let oldText = document.getElementById("oldText").value;
let newText = document.getElementById("newText").value;
document.getElementById("d1").value = message.replace(oldText, newText);
}
// Replaces all occurrences of the old text
function replaceAllText() {
let message = document.getElementById("d1").value;
let oldText = document.getElementById("oldText").value;
let newText = document.getElementById("newText").value;
document.getElementById("d1").value = message.replaceAll(oldText, newText);
}
</script>
</body>
</html>
<!-- 11. Display the current month by getting its value from a Date class object and method. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Current Month</title>
</head>
<body>
<h2 id="d1"></h2>
<script>
// Creates a Date object
let dateObject = new Date();
// Gets the current month number
let monthNumber = dateObject.getMonth();
// Stores month names in an array
let months = [
"January", "February", "March", "April",
"May", "June", "July", "August",
"September", "October", "November", "December"
];
// Displays the current month name
document.getElementById("d1").innerHTML = "Current Month: " + months[monthNumber];
</script>
</body>
</html>
<!-- 12. Create and design a digital clock. -->
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
<style>
.clock {
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 50%;
margin: 100px auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
color: black;
}
</style>
</head>
<body>
<!-- Displays the current time -->
<div class="clock" id="d1"></div>
<script>
function showTime() {
let dateObject = new Date();
let hours = dateObject.getHours();
let minutes = dateObject.getMinutes();
let seconds = dateObject.getSeconds();
document.getElementById("d1").innerHTML = hours + ":" + minutes + ":" + seconds;
setTimeout(showTime, 1000);
}
showTime();
</script>
</body>
</html>
<!-- 13. Perform form validation for password, email, contact number, and gender. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<form class="was-validated">
<form method="get">
<div class="form-row">
<div class="form-group col-md-6">
<label for="txt1">Email</label>
<input type="email" class="form-control" name="uemail" id="txt1" required>
<span class="valid-feedback">valid data inserted</span>
<span class="invalid-feedback">invalid data inserted</span>
</div>
<div class="form-group col-md-6">
<label for="txt2">Password</label>
<input type="password" class="form-control" name="upass" id="txt2"
minlength="6" maxlength="16" required>
<span class="valid-feedback">valid data inserted</span>
<span class="invalid-feedback">invalid data inserted</span>
</div>
</div>
<div class="form-group">
<label for="txt3">Address</label>
<input type="text" class="form-control" name="uaddress" id="txt3"
placeholder="1234 Main St" required>
<span class="valid-feedback">valid data inserted</span>
<span class="invalid-feedback">invalid data inserted</span>
</div>
<div class="form-group">
<label for="txt4">Address 2</label>
<input type="text" class="form-control" name="uaddress2" id="txt4"
placeholder="Apartment, studio, or floor" required>
<span class="valid-feedback">valid data inserted</span>
<span class="invalid-feedback">invalid data inserted</span>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="txt5">City</label>
<input type="text" class="form-control" name="ucity" id="txt5" required>
<span class="valid-feedback">valid data inserted</span>
<span class="invalid-feedback">invalid data inserted</span>
</div>
<div class="form-group col-md-4">
<label for="state">State</label>
<select name="ustate" id="state" class="form-control" required>
<option selected value="">Choose...</option>
<option>Maharashtra</option>
<option>Gujarat</option>
<option>Delhi</option>
<option>Karnataka</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="txt6">Zip</label>
<input type="text" class="form-control" name="uzip" id="txt6"
maxlength="6" pattern="[0-9]{6}" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="check"
id="check1" required>
<label class="form-check-label" for="check1">Check me out</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</form>
</div>
</body>
</html>
<!-- 14. Design the view as shown in the images and write JavaScript to change each circle’s background to red, yellow, and green one by one after every three seconds. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traffic Light</title>
<style>
/* Centers the heading and traffic-light box */
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
}
/* Traffic-light container */
.box {
width: 180px;
border: 3px solid black;
padding: 20px;
background-color: grey;
}
/* Common style for all three circles */
.circle {
width: 100px;
height: 100px;
border: 3px solid black;
border-radius: 50%;
margin: 20px auto;
background-color: white;
}
</style>
</head>
<body>
<!-- Heading outside the traffic-light box -->
<h2 id="d1">Traffic Light</h2>
<!-- Traffic-light container -->
<div class="box">
<div class="circle" id="red"></div>
<div class="circle" id="yellow"></div>
<div class="circle" id="green"></div>
</div>
<script>
// Turns on the red light
function redLight() {
document.getElementById("red").style.backgroundColor = "red";
// Turns on the yellow light after three seconds
setTimeout(yellowLight, 3000);
}
// Turns on the yellow light
function yellowLight() {
document.getElementById("red").style.backgroundColor = "white";
document.getElementById("yellow").style.backgroundColor = "yellow";
// Turns on the green light after three seconds
setTimeout(greenLight, 3000);
}
// Turns on the green light
function greenLight() {
document.getElementById("yellow").style.backgroundColor = "white";
document.getElementById("green").style.backgroundColor = "green";
}
// Starts the traffic-light sequence (start the code)
redLight();
</script>
</body>
</html>
<!-- 15. Design the view as shown in the images and write JavaScript so that, when the Add List button is clicked, the name is added to the list. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Item to List</title>
<style>
.container {
width: 500px;
margin: 100px auto;
}
input, button {
padding: 12px;
font-size: 18px;
border: 2px solid black;
border-radius: 8px;
}
button {
margin-left: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<!-- Input field for entering an item name -->
<input type="text" id="itemName" placeholder="Enter item name">
<!-- Button to add the entered item to the list -->
<button onclick="addItem()">Add In List</button>
<!-- List where new items will be displayed -->
<ul id="list">
<li>Samosa</li>
<li>Jalebi</li>
<li>Vada Pav</li>
</ul>
</div>
<script>
// Adds the input value as a new list item
function addItem() {
let input = document.getElementById("itemName");
let itemName = input.value;
// Checks whether the input field is empty
if (itemName != "") {
let newItem = document.createElement("li");
newItem.innerText = itemName;
// Adds the new list item to the unordered list
document.getElementById("list").appendChild(newItem);
// Clears the input field after adding the item
input.value = "";
}
}
</script>
</body>
</html>