0% found this document useful (0 votes)

22 views62 pages

Web Dev Final

The document outlines a web development project featuring a recipe website and a local-storage based sticky notes application, utilizing HTML, CSS, and JavaScript for functionality and design. It includes acknowledgments, tools and technologies used, an introduction to the projects, and code snippets for the recipe website. The project aims to provide a user-friendly experience with features like search and sorting for recipes, demonstrating the author's skills in front-end web development.

Uploaded by

Akansha Rajput

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

0% found this document useful (0 votes)

22 views62 pages

Web Dev Final

Uploaded by

Akansha Rajput

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

INDEX

S. No. Title Remarks

1. Acknowledgment

2. Tools and Technology

3. Introduction
(Recipe Website)
4. Recipe Website
(Project code)
(Output screen)

5. Introduction
(Local-Storage based
Sticky Notes)
6. Local-Storage
based Sticky Notes
(Project code)
(Output screen)
7. Conclusion

8. Bibliography
ACKNOWLEDGEMENT
I would like to express my special thanks of gratitude to
my Teacher for their able guidance and support in
completing this project.

I would also like to extend my gratitude to our

college Principal for providing me with all the
required facilities.

Secondly, I would also like to thank my parents,

elders and friends who helped me a lot in completing
this project within the limited time. Just because of
them I was able to create my project and make it
working and presentable experience.

Thanks again to all who helped me during the

necessity required in this project completion.

Thank you.
Tools and Technology

In developing this web development project, a variety of tools and technologies

were employed to create a dynamic and user-friendly experience.

1. HTML (Hypertext Markup Language): HTML was used as the foundational

language to create the structure of both projects—the recipe website and the
sticky note application. HTML provided the backbone for defining the elements
and layout of the webpages, such as headings, paragraphs, lists, and forms. It
enabled the organization of content in a manner that is both visually appealing
and easy to navigate.

2. CSS (Cascading Style Sheets): CSS was utilized to enhance the presentation
and design aspects of the projects. By applying different styles, colors, fonts, and
layouts, CSS helped in making the website more aesthetically pleasing and
engaging. CSS was also used for responsive design to ensure the projects function
seamlessly across various devices, including desktops, tablets, and mobile
phones.

3. JavaScript: JavaScript was implemented to bring interactivity and

functionality to both projects. For the recipe website, JavaScript enabled the
search and sorting features, allowing users to find recipes based on their
preferences quickly. In the sticky note application, JavaScript facilitated the
dynamic creation and management of notes, enhancing the user experience by
providing real-time interactivity.

4. Visual Studio Code: Visual Studio Code (VS Code) was used as the primary
integrated development environment (IDE) for writing and editing the code. VS
Code's features, such as syntax highlighting, code suggestions, debugging tools,
and extensions, made the development process efficient and streamlined.
INTRODUCTION
(RECIPE WEBSITE)

For my semester exam project, I developed a dynamic

Recipe website using HTML, CSS, and JavaScript. This
website is designed to provide users with a comprehensive
and user-friendly platform to explore a wide range of
recipes. It features an intuitive search functionality that
allows users to quickly find specific recipes by name or
ingredients.
Additionally, a sorting feature enables users to organize
recipes based on categories such as cuisine, cooking time,
or difficulty level, ensuring a personalized browsing
experience. The website's design is clean and responsive,
optimized for both desktop and mobile devices, making it
accessible to all users.
The project was developed using Visual Studio Code and
showcases my ability to integrate core web technologies
while enhancing user experience through interactive
elements.
This website serves as a practical demonstration of my
understanding of front-end web development concepts and
my commitment to creating functional and aesthetically
pleasing web applications.
PROJECT CODE
(RECIPE WEBSITE)
(with searching and sorting)

HTML CODE:

Page 1:
<!DOCTYPE html>

<head>

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

<title>The Kitchn</title>

<link rel="stylesheet" href="[Link]">

<link rel="stylesheet" href="[Link]

awesome/6.5.1/css/[Link]" integrity="sha512-
DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9
QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous"
referrerpolicy="no-referrer" />

</head>

<body>

<main>

<p id="title">the kitchnn</p>

<img src="[Link]" id="im2">

<img src="[Link]" id="im4">

</div>

<p id="para">What do you want to cook ?</p>

<img src="[Link]" alt="" class="image">

<input type="text" placeholder=" Find 9000 expertly-tested

recipes" id="search">

<button class="btn"> <a href=""

class="linking">SEARCH</a></button>

<div>

<button id="tbs"> <a

href="[Link]">CAKES</a></button>

<button id="tbs"> <a href="[Link]">

PIZZAS</a></button>

<button id="tbs"> <a

href="[Link]">PASTAS</a></button>

<button id="tbs"> <a

href="[Link]">COOKIES</a></button>

<button id="tbs"> <a

href="[Link]">SNACKS</a></button>
<button id="tbs"> <a
href="[Link]">LUNCH</a></button>

<button id="tbs"> <a

href="[Link]">DINNER</a></button>

<button id="tbs"> <a

href="[Link]">BREAKFAST</a></button>

<p id="tabs"> All recipes -></p>

</div>

</header>

<h1>WHAT TO COOK TODAY</h1>

</div>

<img src="[Link]" alt="">

<p id="uptxt1">EXPERT ADVICE</p>

<p id="dwntxt1"> How to Make Colourful Dumplings</p>

</div>

<p id="uptxt1">RECIPES AND MENUS</p>

<p id="dwntxt1"> 67 Best Summer Salad Recipes</p>

</div>

</div>

<img src="Caprese_RECIPE_051922_34205.webp" alt="">

<p id="uptxt1">EXPERT ADVICE</p>

<p id="dwntxt1"> Colourful Caprese Salad</p>

<p>You only need a few ingredients for this classic summer side dish.

This version has been a reader favorite for decades.</p>

</div>

<p id="chota">Latest Recipes</P>

<hr>

<P id="u">RECIPES & MENU</P>

<p id="d">Easy Oat Crumble Toppings</p>

<i class="fa-solid fa-star"></i>

</div>
</div>

</div>

<hr>

<P id="u">RECIPES & MENU</P>

<p id="d">Pistachio Ice-Cream</p>

<i class="fa-solid fa-star"></i>

</div>

</div>

<hr>

<P id="u">RECIPES & MENU</P>

<p id="d">Fresh Cucumber Raita</p>

<i class="fa-solid fa-star"></i>

</div>

</div>

<hr>

<P id="u">RECIPES & MENU</P>

<p id="d">Tomato and Cherry Quinoa With Pistachios</p>

<i class="fa-solid fa-star"></i>

</div>

</div>

<hr>

<P id="u">RECIPES & MENU</P>

<p id="d">Ruffled Galette With Stone Fruit</p>

<i class="fa-solid fa-star"></i>

</div>

</div>

<hr>

</div>

</section>

<div>

<img src="Screenshot_23-6-2024 [Link]" id="srfphotu">

</div>

</section>

</div>

</section>

</main>

</body>
</html>

Page 2:

<!DOCTYPE html>

<head>

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

<title>Pasta</title>

<link rel="stylesheet" href="[Link]">

<link rel="stylesheet" href="[Link]

awesome/6.5.1/css/[Link]" integrity="sha512-
DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9
QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous"
referrerpolicy="no-referrer" />

</head>

<body>

<main>

<img src="[Link]" id="im">

<p id="title">the kitchnn</p>

<img src="[Link]" id="im2">

</div>

<hr>

</header>

<div>

<p>Search Results for</p>

<h1>Pasta</h1>

</div>

<select name="Relevence" id="">

<option value="0"><button>CHOOSE</button></option>

<option value="1"><button>Cooking Time</button></option>

<option value="2"><button>User Ratings</button></option>

<option value="3"><button>Most Reviewd</button></option>

<option value="4"><button>Calories</button></option>

</select>

</div>

<p id="p1">Recipes</p>
<div class="container2" id="container2">

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Pasta With Buttered Tomatoes</h2>

<p>Cooking Time : <span> 30 mins</span> </p>

<p>User Ratings : <span> 4.2</span></p>

<p>Calories : <Span>1300</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t"> <a href="[Link]

menus">RECIPES & MENU</a></P>

<h2>Dark Greens and Noodles With Yogurt</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="PastaSalad_RECIPE_070722_36875.webp" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Easy Pasta Salad</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins
</p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Delicious Tadka Pasta</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<P id="t">RECIPES & MENU</P>

<h2>Pasta al Pomodoro</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>

mins </p>

<p id="txt">User Ratings : <span class="two">

4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>
</div>

<P id="t">RECIPES & MENU</P>

<h2>Baked Pasta alla Norma</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>

mins </p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Fresh Pasta With Buttered Tomatoes</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>

mins </p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Pasta With Feta, Olives, and Raisins</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>
mins </p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Kale, Tomato, and Lemon Magic One-Pot Spaghetti</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>

mins </p>

<p id="txt">User Ratings : <span class="two">

4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<P id="t">RECIPES & MENU</P>

<h2>Rice Noodles al Pomodoro</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>

mins </p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>
</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Fresh Pasta With Buttered Tomatoes</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Llubav’s Green Spaghettis</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

</section>
</main>

</body>

Page 3:

<!DOCTYPE html>

<head>

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

<title>Pizza</title>

<link rel="stylesheet" href="[Link]">

<link rel="stylesheet" href="[Link]

awesome/6.5.1/css/[Link]" integrity="sha512-
DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9
QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous"
referrerpolicy="no-referrer" />

</head>

<body>

<main>

<img src="[Link]" id="im">

<p id="title">the kitchnn</p>

<img src="[Link]" id="im2">

<img src="[Link]" id="im4">

</div>

<p id="para">What do you want to cook ?</p>

<img src="[Link]" alt="" class="image">

<input type="text" placeholder=" Find 9000 expertly-tested

recipes" id="search">

<button class="btn"> <a href=""

class="linking">SEARCH</a></button>

<div>

<button id="tbs"> <a

href="[Link]">CAKES</a></button>

<button id="tbs"> <a href="[Link]">PIZZA</a></button>

<button id="tbs"> <a

href="[Link]">PASTAS</a></button>

<button id="tbs"> <a

href="[Link]">COOKIES</a></button>

<button id="tbs"> <a

href="[Link]">SNACKS</a></button>

<button id="tbs"> <a

href="[Link]">LUNCH</a></button>

<button id="tbs"> <a

href="[Link]">DINNER</a></button>
<button id="tbs"> <a
href="[Link]">BREAKFAST</a></button>

<p id="tabs"> All recipes -></p>

</div>

</header>

<div>

<p>Search Results for</p>

<h1>Pizza</h1>

</div>

<select name="Relevence" id="">

<option value="0"><button>CHOOSE</button></option>

<option value="1"><button>Cooking Time</button></option>

<option value="2"><button>User Ratings</button></option>

<option value="3"><button>Most Reviewd</button></option>

<option value="4"><button>Calories</button></option>

</select>

</div>
<Hr id="hr2">

<p id="p1">Recipes</p>

<img src="Sicilian-Pizza_RECIPE.webp" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Sicilian Pizza</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t"> RECIPES & MENU</P>

<h2>All-Purpose Pizza Dough</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="37 great [Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>37 Best Pizza Recipes</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Hawaiian Pizza With Barbecue Sauce and Beef Bacon</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Bon Appétit's "Making Perfect" Pizza</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>

mins </p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>
<div class="recipebox">

<P id="t">RECIPES & MENU</P>

<h2>Healthyish Pan Pizza</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>

mins </p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Sheet-Pan Corn Pizza With Kimchi and Hot Dogs</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>

mins </p>

<p id="txt">User Ratings : <span class="two">

4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Food Processor Pizza Dough</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>

mins </p>
<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Pan-Fried Pizza With Peaches and Burrata</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>

mins </p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<P id="t">RECIPES & MENU</P>

<h2>Breakfast Pizza</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span>

mins </p>

<p id="txt">User Ratings : <span class="two">

4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>
<div class="recipebox">

<P id="t">RECIPES & MENU</P>

<h2>Summer Pizza With Salami, Zucchini, and Tomatoes </h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

<img src="51255840_cal-italia-pizza_1x1.webp" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Cal-Italia Pizza with Prosciutto and Figs</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ratings : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three"

> 927</Span></p>

</div>

</section>

</main>

Page 4:

<!DOCTYPE html>

<head>

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

< tle>Cake</ tle>

<link rel="stylesheet" href="[Link]">

<link rel="stylesheet" href="h ps://[Link]ﬂ[Link]/ajax/libs/font-

awesome/6.5.1/css/[Link]" integrity="sha512-
DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAI l+Vegovlnee1c9QX4Tc
tnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-
referrer" />

</head>

<body>

<main>

<img src="[Link]" id="im">

<p id=" tle">the kitchnn</p>

<img src="[Link]" id="im2">

<img src="[Link]" id="im4">

</div>

<hr>

</header>

<div>

<p>Search Results for</p>

</div>

<select name="Relevence" id="">

<op on value="0"><bu on>CHOOSE</bu on></op on>

<op on value="1"><bu on>Cooking Time</bu on></op on>

<op on value="2"><bu on>User Ra ngs</bu on></op on>

<op on value="3"><bu on>Most Reviewd</bu on></op on>

<op on value="4"><bu on>Calories</bu on></op on>

</select>

</div>

<p id="p1">Recipes</p>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<p id="txt">CookingTime :<span class="one"> 30</span>mins </p>

<p id="txt">UserRa ngs :<span class="two"> 4.21</span></p>

<p id="txt">Calories :<Span class="three"> 1350</Span></p>

</div>

<img src="[Link]" alt="">

<p id="t">RECIPES & MENU</P>

<h2>Classic Vanilla Bundt Cake</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ra ngs : <span class="two"> 4.16</span></p>

<p id="txt">Calories : <span class="three" > 998</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Super-Moist Yellow Cake</h2>

<p id="txt">Cooking Time : <span class="one" > 25</span> mins

</p>

<p id="txt">User Ra ngs : <span class="two"> 4.23</span></p>

<p id="txt">Calories : <span class="three" > 927</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Life-of-the-Party Layer Cake</h2>

<p id="txt">Cooking Time : <span class="one" > 20</span> mins

</p>

<p id="txt">User Ra ngs : <span class="two"> 4.34</span></p>

<p id="txt">Calories : <span class="three" > 2100</Span></p>

</div>

<img src="Lemon-Cake_RECIPE.webp" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Any me Lemon Cake</h2>

<p id="txt">Cooking Time : <span class="one" > 65</span> mins

</p>
<p id="txt">User Ra ngs : <span class="two"> 4.65</span></p>

<p id="txt">Calories : <span class="three"

> 1800</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<p id="txt">Cooking Time : <span class="one" > 85</span> mins

</p>

<p id="txt">User Ra ngs : <span class="two"> 4.46</span></p>

<p id="txt">Calories : <span class="three"

> 1600</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>PB&J Dome Cake</h2>

<p id="txt">Cooking Time : <span class="one" > 28</span> mins

</p>

<p id="txt">User Ra ngs : <span class="two"> 4.12</span></p>

<p id="txt">Calories : <span class="three" > 1100</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>No-Mixer Vanilla Cake</h2>

<p id="txt">Cooking Time : <span class="one" > 33</span> mins
</p>

<p id="txt">User Ra ngs : <span class="two"> 4.09</span></p>

<p id="txt">Calories : <span class="three" > 990</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Ice Cream Cake With So Many Sprinklers</h2>

<p id="txt">Cooking Time : <span class="one" > 22</span> mins

</p>

<p id="txt">User Ra ngs : <span class="two"> 4.76</span></p>

<p id="txt">Calories : <span class="three" > 940</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Sheet Cakes Recipes for the Big Crowd</h2>

<p id="txt">Cooking Time : <span class="one" > 21</span> mins

</p>

<p id="txt">User Ra ngs : <span class="two"> 3.56</span></p>

<p id="txt">Calories : <span class="three" > 800</Span></p>

</div>

<img src="7upCake_RECIPE_051922_34436.webp" alt="">

<P id="t">RECIPES & MENU</P>

<p id="txt">Cooking Time : <span class="one" > 24</span> mins

</p>

<p id="txt">User Ra ngs : <span class="two"> 4.57</span></p>

<p id="txt">Calories : <span class="three" > 920</Span></p>

</div>

<img src="[Link]" alt="">

<P id="t">RECIPES & MENU</P>

<h2>Black Cake</h2>

<p id="txt">Cooking Time : <span class="one" > 35</span> mins

</p>

<p id="txt">User Ra ngs : <span class="two"> 4.0</span></p>

<p id="txt">Calories : <span class="three" > 1900</Span></p>

</div>

</sec on>

<img src="WhatsApp Image 2024-07-28 at 15.18.23_7d5c071a.jpg"

class="bgphotu">

</main>

</body>
CSS FILE:

body {

margin: 0;
padding: 0;
overflow-y: scroll;
overflow-x:hidden;
z-index: 3;

}
.header-container{

display: flex;
justify-content: center;
margin-left: 60px;
}
#title{
margin-top: 10px;
margin-bottom: 25px;

font: 50px sans-serif;

}
#im{
margin-top: 10px;
height: 50px;
margin-left: 10px;

top: 6px;}
#im2{
height: 30px;
width: 30px;

position: relative;
left: 32%;
top: 13px;
margin-left: 3px;
}
#im3{
height: 40px;
width: 40px;

position: relative;
left: 34%;
top: 9px;
margin-left: 3px;

}
#im4{
height: 40px;
width: 40px;

position: relative;
left: 36%;
top: 9px;

}
.second{
width:100%;
height: 250px;
background-color: rgb(102, 152, 141);
margin-top: -4%;

}
#para{
position: relative;
top: 75px;
font-size: 40px;
left: 13%;
color: white;
}
#search{
position: relative;
top: -7%;
font-size: 22px;
left: 40%;
width: 510px;
height: 50px;
background-color: white;
border: none;

}
.btn{

position: relative;
top: -7.3%;
font-size: 22px;
left: 40%;
width: 150px;
height: 53px;
margin: 0px;
background-color: black;
border: 2px solid black;
color: white;

}
.image{
height: 47px;
width:47px;
top: -01.3%;
position: relative;
left: 43.7%;
z-index: 1;
}
#tbs{
position: relative;
left: 25%;
margin-top: 2%;
background-color: white;
border: 2px solid white;
width: 100px;
height: 33px;
font-weight: 850;

}
#tabs{
position: relative;
left: 80%;
margin-top: -1.5%;
font-weight: 850;
color: white;
}
.container{
background-color: #F5F1E7;
height: 100%;
width: 100%;
display: flex;
margin-left: 1%;
padding: 1%;
}
.upar{
background-color: #F5F1E7;
display: flex;
align-items: center;
justify-content: center;
position: relative;

font-size:20px;
}
.line{
height: 2px;
position: relative;
left: 10%;
width: 80%;
background-color: black;
}
.leftdibba{
height: 950px;
width: 28%;

z-index: 1;
}
.beechdibba{
height: 950px;
width: 45%;

z-index: 1;
}

.rightdibba{
margin-left: 10px;
height: 950px;
width: 28%;

z-index: 1;
}
.l1 img{
position: relative;
height: 240px;
width: 340px;
margin-top: 40px;

margin-left: 65px;
margin-right: 40px;
}
.l2 img{
position: relative;
height: 240px;
width: 340px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 65px;
margin-right: 40px;
}
#uptxt1{
color: REd;
font-weight: 600;
margin-left: 65px;

}
#dwntxt1{
font-size: 23px;
font-weight: 900;
margin-left: 65px;
margin-bottom: 35px;
margin-top: -8px;
}
#hr{
margin-left: 65px;
}
.beechdibba img {
position: relative;
height: 700px;
width: 100%;
margin-top: 40px;

object-fit: cover;

}
img{
border-radius: 15px;
}
#u{
color: REd;
font-size: 13px;
font-weight: 900;
margin-left: 15px;
}
#d{
font-size: 18px;
font-weight: 900;
margin-left: 15px;
}
.same img{
position: relative;
height: 80px;
width: 80px;
margin-left: 40px;

}
.same{
display: flex;

}
.text{
width: 60%;
font-size: 18px;
}
#chota{
margin-left: 15px;
font-size: 14px;
font-weight: 900;
}
.star{
margin-left: 14px;
}
#srfphotu{
position: relative;

height: 900px;
width: 100%;

}
/* .searchkebaad{
display: flex;
justify-content: center;
align-items: center;

} */
.searchkebaad p{
font-size: 25px;
font-weight: 600;
margin-top: 20px;
text-align: center;

}
.searchkebaad h1{
font-size: 64px;
font-weight: 600;
margin-top: -20px;
text-align: center;

}
#hr1{
position: relative;
height: 1px;
width: 95%;
color: black;
background-color: black;
margin-top: -35px;
}
.sort p{
position: relative;
font-size: 22px;
font-weight: 500;
left: 40px;
}
.sort{
display: flex;
}
.sort select{
position: relative;
font-size: 15px;
font-weight: 300;
left: 40px;
height: 30px;
top:21px;
}
#p1{
text-align: center;
font-size: 24px;
font-weight: 600;
}
#hr2{
position: relative;
height: 1px;
width: 95%;
color: black;
background-color: black;
margin-top: -1px;
}
.container2{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: 2300px;
width: 72%;
margin-left: 14%;
margin-right: 14%;
}
.recipebox{
height: 520px;
width: 32%;

}
.recipebox img {
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
height:310px;
width: 330px;
object-fit:cover;
border-radius: 20%;

.recipebox p{
margin-left: 37px;
}
.recipebox h2{
margin-left: 37px;
}
#t
{
margin-left: 38px;
color: REd;
font-size: 15px;
font-weight: 900;

}
.container3
{
background-color: rgb(13, 16, 18);
height: 550px;
width: 100%;
}
#txt
{
font-weight: 800;
}
#txt2
{
font-weight: 800;
}
#txt3
{
font-weight: 800;
}
.bgphotu
{
z-index: -2;
height: 3000px;
width: 100%;
position: absolute;
top:0px;
opacity: 50% ;
}
.btn a{
text-decoration: none;
color: white;
font-size: 20px;
font-weight: 500;
}
JAVASCRIPT CODE:

PART 1

const ﬁlter2=()=>{

[Link]("hello");

// [Link]="hidden";

let arr=[];

let me=[];

for(let i=0;i<[Link];i++){

me[i]=detail[i].querySelector(".two").innerText;

[Link]((a,b)=> a -b);

[Link]( me);

for(let i=0;i<[Link];i++){

for(let j=0;j<[Link];j++){

let dam=detail[j].querySelector(".two").innerText;

if( me[i]==dam){

arr[i]=detail[j].innerHTML;

for(let i=0;i<[Link];i++){

detail[i].innerHTML=arr[i];
}

};

let tr=[Link](".try");

let big=[Link](".container2");

let detail=[Link]("div");

[Link](detail[0].querySelector(".one").innerText);

const ﬁlter=()=>{

[Link]("hello");

// [Link]="hidden";

let arr=[];

let me=[];

for(let i=0;i<[Link];i++){

me[i]=detail[i].querySelector(".one").innerText;

[Link]((a,b)=> a -b);

[Link]( me);

for(let i=0;i<[Link];i++){

for(let j=0;j<[Link];j++){

let dam=detail[j].querySelector(".one").innerText;

if( me[i]==dam){

arr[i]=detail[j].innerHTML;

}}}

for(let i=0;i<[Link];i++){

detail[i].innerHTML=arr[i];

}
};

const selectDropdown = [Link]('select');

[Link]('change', func on (e) {

if([Link]==1) ﬁlter();

if([Link]==2) ﬁlter2();

if([Link]==4) ﬁlter4();

});

const ﬁlter4=()=>{

[Link]("hello");

// [Link]="hidden";

let arr=[];

let me=[];

for(let i=0;i<[Link];i++){

me[i]=detail[i].querySelector(".three").innerText;

[Link]((a,b)=> a -b);

for(let i=0;i<[Link];i++){

for(let j=0;j<[Link];j++){

let dam=detail[j].querySelector(".three").innerText;

if( me[i]==dam){

arr[i]=detail[j].innerHTML;

for(let i=0;i<[Link];i++){

detail[i].innerHTML=arr[i];

};

PART 2
let search=[Link]("#search");
let lin=[Link](".linking");
[Link]("click",change);
[Link]=" ";
func on change(){

let name=""

name=[Link];
name=[Link]();
if(name==" pasta")
{
[Link]=`[Link]`;
}
else if(name==" pizza")
{
[Link]=`[Link]`;
}
else if(name==" cake")
{
[Link]=`[Link]`;
}

[Link](name);
//[Link]=`[Link]`;
};
[Link]("keyup",function(event){
if([Link]==="Enter"){
[Link]();
[Link]();
}
});
OUTPUT SCREEN
INTRODUCTION
(LOCAL STORAGE-BASED STICKY NOTES)

For my semester exam project, I created a dynamic Sticky

Notes application using HTML, CSS, and JavaScript. This
project is designed to provide a simple yet efficient way for
users to create, customize, and manage their notes.

The application allows users to add as many notes as they

need and offers the flexibility to change the color of each note.
Users can choose from four vibrant colors: red, yellow, pink,
and light blue, making the notes visually organized and
personalized.

The application also includes a delete feature, allowing users

to remove notes they no longer need. With a user-friendly
interface and responsive design, the Sticky Notes application
enhances productivity and organization, making it ideal for
daily use.

This project demonstrates my skills in front-end web

development and my ability to create interactive, functional
web applications that prioritize user experience and design
aesthetics.
PROJECT CODE
(LOCAL STORAGE-BASED STICKY NOTES)

HTML FILE:

<!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]">

</head>
<body>
<h1>ADD YOUR NOTES HERE</h1>
<div id="app">
<button class="add-note" type="button">+</button>
</div>
<script src="[Link]"></script>
</body>
</html>
CSS FILE:

body {
margin: 0;
background: #009578;
}

#app {
display: grid;
grid-template-columns: repeat(auto-ﬁll, 200px);
padding: 24px;
gap: 24px;
}

.note {
height: 200px;
box-sizing: border-box;
padding: 16px;
border: none;
border-radius: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
resize: none;
font-family: sans-serif;
font-size: 16px;
}

.add-note {
height: 200px;
border: none;
outline: none;
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
font-size: 120px;
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}

.add-note:hover {
background: rgba(0, 0, 0, 0.2);
}

.delete-note {
background-color: #f52549;
height: 40px;
font-family: arial;
le er-spacing: 1px;
width: 65px;
margin-top: none;
cursor: pointer;
border-radius: 5px;
margin-le : 9px;
color: white;
border: none;
}

.color-bu on {
height: 28px;
margin-le : 3.5px;
width: 28px;
border-radius: 50%;
}

h1 {
font-size: 2.5rem;
margin-le : 550px;
font-family: "arial";
color: white;
}

JAVASCRIPT FILE:

const notesContainer = [Link]("app");

const addNoteButton = [Link](".add-note");

getNotes().forEach((note) => {
const noteElement = createNoteElement([Link], [Link], [Link]);
[Link](noteElement, addNoteButton);
});

[Link]("click", () => addNote());

function getNotes() {
return [Link]([Link]("stickynotes-notes") || "[]");
}

function saveNotes(notes) {
[Link]("stickynotes-notes", [Link](notes));
}

function createNoteElement(id, content, color = "yellow") {

const noteDiv = [Link]("div");
[Link]("note-div");
const element = [Link]("textarea");
[Link]("note");
[Link] = content;
[Link] = "Empty Sticky Note";
[Link] = color;

const buttonContainer = [Link]("div");

[Link]("button-container");

const deleteButton = [Link]("button");

[Link] = "Delete";
[Link]("delete-note");

[Link]("click", () => {
deleteNote(id, noteDiv);
});

const colors = ["#f06e75", "#ede964", "#f099ca", "#99a6f0"];

[Link]((color) => {
const colorButton = [Link]("button");
[Link]("color-button");
[Link] = color;
[Link]("click", () => {
[Link] = color;
updateNoteColor(id, color);
});
[Link](colorButton);
});
[Link](deleteButton);

[Link](element);
[Link](buttonContainer);

return noteDiv;
}

function addNote() {
const notes = getNotes();
const noteObject = {
id: [Link]([Link]() * 100000),
content: "",
color: "white",
};

const noteElement = createNoteElement(

[Link],
[Link],
[Link]
);
[Link](noteElement, addNoteButton);

[Link](noteObject);
saveNotes(notes);
}
function updateNote(id, newContent, newColor) {
const notes = getNotes();
const targetNote = [Link]((note) => [Link] == id)[0];

[Link] = newContent;
[Link] = newColor;
saveNotes(notes);
}

function updateNoteColor(id, newColor) {

const notes = getNotes();
const targetNote = [Link]((note) => [Link] == id)[0];

[Link] = newColor;
saveNotes(notes);
}

function deleteNote(id, element) {

const notes = getNotes().filter((note) => [Link] != id);

saveNotes(notes);
[Link](element);
}
OUTPUT SCREEN
CONCLUSION
In conclusion, the development of the Sticky Notes
application and the Recipe Website reflects my skills in
creating dynamic and interactive web applications using
HTML, CSS, and JavaScript.

The Sticky Notes application allows users to effortlessly

add, delete, and change the color of notes, offering a
personalized and efficient way to manage tasks or ideas
with four color options: red, yellow, pink, and light blue.
The Recipe Website provides an engaging platform to
explore various recipes, such as cakes, pizzas, and pasta,
featuring search and sorting capabilities to help users
quickly find what they are looking for.

Both projects demonstrate my proficiency in front-end

development and my ability to build user-friendly and
functional web interfaces. By incorporating features that
enhance user experience, I have showcased my
dedication to developing web solutions that are both
practical and enjoyable to use.
BIBLIOGRAPHY
We’ve used these following websites and books as a source for our
projects:

1. [Link]

2. [Link]

3. [Link]

4. IVan Bayross, HTML , DHTML , Javascript , perl, CGI,

BPB

5. Vikas Gupts , .NET Programming , Dreamtech

Final Report Cse 326 PDF
No ratings yet
Final Report Cse 326 PDF
23 pages
Kishvar Ssa2
No ratings yet
Kishvar Ssa2
9 pages
CSE326 Project Report
No ratings yet
CSE326 Project Report
23 pages
10 Htmlcorinthians
No ratings yet
10 Htmlcorinthians
24 pages
Front End Development Assignment
No ratings yet
Front End Development Assignment
8 pages
Pdfabc
No ratings yet
Pdfabc
12 pages
Recipe Corinthians
No ratings yet
Recipe Corinthians
9 pages
Services Demi
No ratings yet
Services Demi
2 pages
Services Corinthians
No ratings yet
Services Corinthians
2 pages
Tutorial Corinthians
No ratings yet
Tutorial Corinthians
11 pages
CSS Rohan
No ratings yet
CSS Rohan
16 pages
RKR21 WT Lab Record
No ratings yet
RKR21 WT Lab Record
89 pages
WT Lab Codes
No ratings yet
WT Lab Codes
11 pages
Index Corinthians
No ratings yet
Index Corinthians
3 pages
HTML Webpage Design Projects
No ratings yet
HTML Webpage Design Projects
27 pages
Food Recipe Website Formatted Report
No ratings yet
Food Recipe Website Formatted Report
3 pages
Sem Iv Final
No ratings yet
Sem Iv Final
16 pages
Blog Structure
No ratings yet
Blog Structure
3 pages
DeepSeek Prompts Content
No ratings yet
DeepSeek Prompts Content
4 pages
Recipes
No ratings yet
Recipes
2 pages
Image
No ratings yet
Image
2 pages
Source Code. Print Black and White
No ratings yet
Source Code. Print Black and White
23 pages
8: Design and Create Web Pages For A Recipe Book With More Than 3 Pages
No ratings yet
8: Design and Create Web Pages For A Recipe Book With More Than 3 Pages
1 page
Prompt
No ratings yet
Prompt
3 pages
Morphyrichards Intellisteam Recipe-E-Book Final
No ratings yet
Morphyrichards Intellisteam Recipe-E-Book Final
44 pages
Module 8
No ratings yet
Module 8
30 pages
Heee
No ratings yet
Heee
1 page
Prompt Amelioré
No ratings yet
Prompt Amelioré
2 pages
Shreeharan Project 1
No ratings yet
Shreeharan Project 1
32 pages
New Microsoft Word Document (2) - 1
No ratings yet
New Microsoft Word Document (2) - 1
5 pages
Web Dev: Restaurant & Airline Forms
No ratings yet
Web Dev: Restaurant & Airline Forms
19 pages
Wmad Assigment 1
No ratings yet
Wmad Assigment 1
9 pages
Project Report
No ratings yet
Project Report
23 pages
Rescued Document
No ratings yet
Rescued Document
1 page
Cod Report
No ratings yet
Cod Report
16 pages
Build a Recipe Webpage with HTML/CSS
No ratings yet
Build a Recipe Webpage with HTML/CSS
5 pages
Recipe Finder Report
100% (1)
Recipe Finder Report
15 pages
UTT Books 54
No ratings yet
UTT Books 54
18 pages
٥٠٠ اشهر وصفة طعام
No ratings yet
٥٠٠ اشهر وصفة طعام
53 pages
Ice Cream & Food Lovers Guide
No ratings yet
Ice Cream & Food Lovers Guide
7 pages
ThermoKitchen From Scratch Revised Ebook
No ratings yet
ThermoKitchen From Scratch Revised Ebook
21 pages
Wireframe - 20
No ratings yet
Wireframe - 20
1 page
Recipe Finder CPP Proposal
No ratings yet
Recipe Finder CPP Proposal
9 pages
Year 9 Recipe Book 2023
100% (1)
Year 9 Recipe Book 2023
37 pages
Final Doc18.03.2018
No ratings yet
Final Doc18.03.2018
53 pages
Prue's Walnut Whirls Recipe
No ratings yet
Prue's Walnut Whirls Recipe
18 pages
Digital Work Plan Vegan
No ratings yet
Digital Work Plan Vegan
8 pages
Mitul Ec Assignment
No ratings yet
Mitul Ec Assignment
18 pages
Before
No ratings yet
Before
4 pages
Holiday at Home
No ratings yet
Holiday at Home
19 pages
Class : Recipes-List
No ratings yet
Class : Recipes-List
2 pages
WPD MP
No ratings yet
WPD MP
47 pages
Restaurant Website HTML & CSS Guide
No ratings yet
Restaurant Website HTML & CSS Guide
12 pages
Dish Dash
No ratings yet
Dish Dash
1 page
Healthy Eating & Recipes
No ratings yet
Healthy Eating & Recipes
4 pages
Acro Recipe Menu 2 Dca April 2011
No ratings yet
Acro Recipe Menu 2 Dca April 2011
14 pages
Oster Kitchen Center Manual
63% (8)
Oster Kitchen Center Manual
28 pages
Weekly Meal Planner and Chat Times
No ratings yet
Weekly Meal Planner and Chat Times
11 pages
Practicum 2b Teaching Insights
No ratings yet
Practicum 2b Teaching Insights
9 pages
Industrial Training Report Sufi
No ratings yet
Industrial Training Report Sufi
39 pages
Chipotle 1
No ratings yet
Chipotle 1
13 pages
Biology SSC I Syllabus 2025
No ratings yet
Biology SSC I Syllabus 2025
74 pages
Limiting Factors Worksheet
No ratings yet
Limiting Factors Worksheet
2 pages
Urban Design for Sustainable Growth
No ratings yet
Urban Design for Sustainable Growth
8 pages
Wetland PDF
No ratings yet
Wetland PDF
40 pages
Acute Osteomyelitis Overview and Management
No ratings yet
Acute Osteomyelitis Overview and Management
40 pages
ENVIRONMENTAL HEALTH AND SAFETY Module 1 To Students
No ratings yet
ENVIRONMENTAL HEALTH AND SAFETY Module 1 To Students
87 pages
Superconductivity and Nanomaterials Overview
No ratings yet
Superconductivity and Nanomaterials Overview
15 pages
OSCE Checklist Dizziness History Taking
100% (1)
OSCE Checklist Dizziness History Taking
2 pages
Atlantis XR2 Water Softener Manual
No ratings yet
Atlantis XR2 Water Softener Manual
27 pages
Fairland Dehumidifier-Full-inverter
No ratings yet
Fairland Dehumidifier-Full-inverter
3 pages
2018 BMW 5 Series Saloon Brochure
No ratings yet
2018 BMW 5 Series Saloon Brochure
22 pages
B. Pharm: Your Path to Pharma Success
No ratings yet
B. Pharm: Your Path to Pharma Success
3 pages
The City of Fear - Script
No ratings yet
The City of Fear - Script
26 pages
Baby Brezza Formula Australia Measuring Settings Chart
No ratings yet
Baby Brezza Formula Australia Measuring Settings Chart
4 pages
Ranking Obesity by Country Adults 1EN
No ratings yet
Ranking Obesity by Country Adults 1EN
7 pages
Basicsvibration
No ratings yet
Basicsvibration
8 pages
Effects of Rise - Fall Times On Signal Spectra
No ratings yet
Effects of Rise - Fall Times On Signal Spectra
32 pages
M.pharm (Quality Assurance Syllabus)
No ratings yet
M.pharm (Quality Assurance Syllabus)
27 pages
Chapter 4 Buoyancy (Archimede's Principle)
No ratings yet
Chapter 4 Buoyancy (Archimede's Principle)
5 pages
08a PPIA Styropor Recycling Technology
100% (1)
08a PPIA Styropor Recycling Technology
71 pages
Septic System Package
No ratings yet
Septic System Package
10 pages
.Trashed-1759588736-Community Medicine Question Bank
No ratings yet
.Trashed-1759588736-Community Medicine Question Bank
12 pages
Acetonitrile Extraction from Wastewater
No ratings yet
Acetonitrile Extraction from Wastewater
2 pages
Pemanfaatan Hasil Perikanan Sebagai Produk Bernilai Tambah (Value-Added) Dalam Upaya Penganekaragaman Pangan
No ratings yet
Pemanfaatan Hasil Perikanan Sebagai Produk Bernilai Tambah (Value-Added) Dalam Upaya Penganekaragaman Pangan
8 pages
Tourism Feb-March 2015 Memo Eng
No ratings yet
Tourism Feb-March 2015 Memo Eng
15 pages
Immediately Loaded FP-1 Interim Fixed Implant Prosthesis For A Patient With Amelogenesis Imperfecta Using Photogrammetry and A Same Day 3D-Printing Protocol
No ratings yet
Immediately Loaded FP-1 Interim Fixed Implant Prosthesis For A Patient With Amelogenesis Imperfecta Using Photogrammetry and A Same Day 3D-Printing Protocol
5 pages
LACHESIS MUTUS - HOMOEOPATHIC MATERIA MEDICA - by William BOERICKE
No ratings yet
LACHESIS MUTUS - HOMOEOPATHIC MATERIA MEDICA - by William BOERICKE
3 pages