REPORT FOR RECIPE MAKER WEBSITE

As a project work for Course

CSE326
__________________________________________________

Name : Ravi Yadav

Registration Number : 12408298
Section : K24AP
Roll Number : 35
Program : B.Tech CSE
Submitted To : Dr. Chirag Sharma
 TABLE OF CONTENT PAGE
INTRODUCTION 1

Technologies used 2

Feature of the 3
website

Workflow 4

Functionality of the 5
website

CODE snippets 6-13

Screen-shots 14-16

Conclusion 17
refrences 18-19

GitHub Repository Link:

https://github.com/Ravi-Dahiya-00/recipe-maker
https://github.com/Ravi-Dahiya-00/recipe-maker

Direct Code Link :

https://github.com/Ravi-Dahiya-00/recipe-maker/tree/main/Webpage%20Code
Project Report: Recipe Maker Website

1. Introduction
The "Recipe Maker" project is an interactive web-based application aimed at helping users
explore, create, and share recipes. The website was developed using HTML, CSS, and
JavaScript, with additional features powered by external APIs and design resources. As a
first-year Computer Science Engineering student specializing in Artificial Intelligence and
Machine Learning, this project allowed me to apply my learning in web development and
gain hands-on experience in building a functional and visually appealing website.

In today's digital world, online recipe platforms are highly popular among food enthusiasts.
The aim of this project was to create a user-friendly recipe website where users can discover
new recipes, view detailed descriptions, and watch related cooking videos. The website's
primary features include a homepage showcasing featured recipes, recipe pages with
ingredients and instructions, and interactive elements such as buttons and animations for an
enhanced user experience.

To make the site more engaging, I integrated several external APIs like Spoonacular to fetch
recipe data and utilized design elements such as 3D animations, hover effects, and responsive
layouts to create a modern, interactive user interface. The project was also designed to be
responsive, adapting seamlessly to different screen sizes through CSS Grid and media
queries.
In conclusion, this project helped me gain valuable experience in web development, API
integration, and user interface design, while also teaching me how to create an engaging and
functional web application. It marks an important step in my journey as a web developer,
with the potential to expand further in the future.

2. Technologies Used
For the development of the "Recipe Maker" website, I used several key technologies to
ensure a functional, user-friendly, and visually appealing site.

1. HTML (Hypertext Markup Language)

HTML was used to structure the website, including the homepage, recipe pages, navigation
bar, and footer. It provided the foundational layout and organization of the content, ensuring
users could easily navigate the site.

2. CSS (Cascading Style Sheets)

CSS was used to style the website, applying colors, fonts, and layouts. I employed Flexbox
and Grid for responsive design and used media queries to adjust the layout for different
screen sizes. CSS animations and hover effects were added for better interactivity, such as
zooming images and 3D animations.

3. JavaScript

JavaScript added interactivity to the website, such as dynamic recipe data fetching through
APIs and form validation. It allowed users to interact with the site more effectively, providing
real-time content and interactive buttons.
4. External APIs

 Spoonacular API: Used to fetch recipes and ingredients dynamically.

 Unsplash API: Provided high-quality images for recipes.

5. Cloudflare CDN for Icons

Social media and other icons were integrated using Cloudflare’s free CDN, allowing easy
access to a wide variety of icons for a consistent user experience.

6. 3D Animations and Button Effects

 CodePen: Provided code for 3D animations and hover effects.

 Dev.to: Inspired the use of animated buttons for enhanced interactivity.

These technologies worked together to create a smooth, engaging, and responsive website
that provides users with a rich and interactive experience.

3. Features of the Website

The "Recipe Maker" website provides a simple and interactive platform for exploring and
adding recipes. Key features include:

1. Responsive Design: The website adapts to various screen sizes, ensuring a smooth
experience on desktops, tablets, and mobile devices.
2. User-Friendly Navigation: A simple navigation bar allows easy access to different
sections, such as the homepage and recipe pages.
3. Recipe Display Cards: The homepage features recipe cards with images and names.
Clicking a card leads to detailed recipe pages with ingredients, instructions, and
videos.
4. Detailed Recipe Pages: Each page includes a recipe name, embedded YouTube
video, ingredients, and a description of the recipe.
5. Social Media Links: Social media icons are included for sharing and following the
website on various platforms.
6. Interactive 3D Effects: Logo and images feature smooth 3D animations, enhancing
the user experience.
7. Search Functionality: Users can search for recipes by keyword, displaying relevant
results.
8. Add Recipe Page (Under Development): A feature for users to contribute their own
recipes.
9. Author and Date Information: Each recipe page displays the author's name and
publication date.

These features create a functional and engaging website for discovering and sharing recipes.
4. Workflow :
5. Functionality of the Website
The "Recipe Maker" website offers a set of features designed to enhance user interaction and
provide a seamless browsing experience. Here are the key functionalities of the website:

1. Homepage Navigation:
o Users can easily navigate through the homepage using the navigation bar.
o The logo in the header acts as a home button, taking users back to the
homepage from any page.
2. Recipe Card Interaction:
o On the homepage, each recipe is displayed as a card with an image, title, and
brief description.
o When a user hovers over a card, the image scales up slightly for a visual
effect, offering a more interactive experience.
o Clicking on a card opens a dedicated recipe page where the recipe's details are
displayed.
3. Recipe Page:
o Each recipe page includes a detailed description, the ingredients list, and a
YouTube video embedded for easy viewing of preparation steps.
o Users can read the recipe description, view the author's name, and check the
date of posting.
4. Social Media Links:
o Users can connect with the website’s social media profiles via icons placed at
the top of the page.
o The icons are linked to various platforms, enhancing user engagement.
5. Add Recipe Button:
o The website provides an "Add Recipe" option, which links to a placeholder
page ("coming-soon.html"). This feature is intended for future expansion,
where users can submit their own recipes.
6. Interactive Hover Effects:
o Buttons and recipe cards have hover effects that change their appearance
when the mouse pointer is over them, improving the overall user experience.
7. 3D Animation:
o The website incorporates a 3D animation on the logo and buttons, creating a
dynamic feel. The logo rotates slightly when hovered over.

These features combine to deliver a functional and user-friendly website that makes exploring
and interacting with recipes easy and enjoyable.
 6. Code Snippets:

#1. Web Logo and Social Links

(HTML)

<header class="head_for_every_page">
<div>
<a href="1_main_page1.html">
<img src="images/logo.png" alt="Website Logo"
class="web_logo">
</a>
</div>

<!-- social icons using api -->

<div>
<ul class="slider-nav">
<li class="slider-nav-item">
<a href="https://www.facebook.com/"><i class="fab fa-
facebook"></i></a>
</li>
<li class="slider-nav-item">
<a href="https://x.com/RaviDahiya00"><i class="fab fa-
twitter"></i></a>
</li>
<li class="slider-nav-item">
<a href="https://www.instagram.com" target="_blank"><i
class="fab fa-instagram"></i></a>
</li>
<li class="slider-nav-item">
<a href="https://www.youtube.com/@Lol_food"><i class="fab fa-
youtube"></i></a>
</li>
<li class="slider-nav-item">
<a href="https://github.com/Ravi-Dahiya-00"><i class="fab fa-
github"></i></a>
</li>
</ul>

</div>

</header>
 (Style of social icons and web logo)

.head_for_every_page{
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
display: flex;
justify-content: space-between;
align-items: center;
}

.web_logo{
width: 120px;
height: 80%;
object-fit: cover;
border-radius: 70%;
}

/* for 3d animation of web logo */

.web_logo{
/* transform: perspective(400px) rotate3d( 1, 0, 1, 15deg); */
opacity: linear-gradient (135deg, #00c 40% , #000, #000c 60%);
}
.web_logo:hover {
transform: perspective(400px) rotate3d( 1, -1, 1 , -15deg);
/* transform: scale(1.2); */
}
/* list of social media tags */

/* social icons using api */

.slider-nav {
list-style: none;
display: flex;
gap: 30px; /* gap between the social icons */
padding: 0;
}

.slider-nav-item {
font-size: 30px;
margin: 20px;
}

a{
 text-decoration:none;
}

#2. Recipe Finder via API :

(HTML)

<h1>Recipe Search</h1>
<form id="search-form">
<input type="text" id="ingredients" placeholder="Ingredients (e.g.,
tomato, cheese)" />
<select id="cuisine">
<option value="">Any Cuisine</option>
<option value="italian">Italian</option>
<option value="mexican">Mexican</option>
<option value="indian">Indian</option>
</select>
<select id="diet">
<option value="">Any Diet</option>
<option value="vegetarian">Vegetarian</option>
<option value="non-vegetarian">Non-Vegetarian</option>
</select>
<button type="submit">Search</button>
</form>
<div id="recipe-container" class="grid"></div>
<script src="2_foodcater.js"></script>

JAVASCRIPT FOR API INTEGRATION WITH API KEY :

const apiKey = '8e6b425de77e499fa3555c771d1c2f85';

document.getElementById('search-form').addEventListener('submit', async (e) =>

{
e.preventDefault();
const ingredients = document.getElementById('ingredients').value;
const cuisine = document.getElementById('cuisine').value;
const diet = document.getElementById('diet').value;

const apiUrl =
`https://api.spoonacular.com/recipes/complexSearch?apiKey=${apiKey}&includeIng
redients=${ingredients}&cuisine=${cuisine}&diet=${diet}&addRecipeInformation=t
rue`;
 try {
const response = await fetch(apiUrl);
const data = await response.json();
displayRecipes(data.results);
} catch (error) {
console.error('Error fetching recipes:', error);
}
});

function displayRecipes(recipes) {
const recipeContainer = document.getElementById('recipe-container');
recipeContainer.innerHTML = recipes.map(recipe => `
<div class="recipe-card" onclick="getRecipeDetails(${recipe.id})">
<h2>${recipe.title}</h2>
<img src="${recipe.image}" alt="${recipe.title}">
</div>
`).join('');
}
async function getRecipeDetails(recipeId) {
const detailsUrl =
`https://api.spoonacular.com/recipes/${recipeId}/information?apiKey=${apiKey}`
;

try {
const response = await fetch(detailsUrl);
const recipe = await response.json();
displayRecipeDetails(recipe);
} catch (error) {
console.error('Error fetching recipe details:', error);
}
}

function displayRecipeDetails(recipe) {
const detailsContainer = document.getElementById('recipe-details');
detailsContainer.innerHTML = `
<h2>${recipe.title}</h2>
<img src="${recipe.image}" alt="${recipe.title}">
<p>${recipe.instructions}</p>
<ul>
${recipe.extendedIngredients.map(ingredient =>
`<li>${ingredient.original}</li>`).join('')}
</ul>
`;
}
async function getRecipeDetails(recipeId) {
 const detailsUrl =
`https://api.spoonacular.com/recipes/${recipeId}/information?apiKey=${apiKey}`
;
window.open(detailsUrl, '_blank');
}
function displayRecipes(recipes) {
const recipeContainer = document.getElementById('recipe-container');
if (recipes.length === 0) {
recipeContainer.innerHTML = `<p class="no-results">No recipes found.
Try adjusting your search criteria.</p>`;
} else {
recipeContainer.innerHTML = recipes.map(recipe => `
<div class="recipe-card" onclick="getRecipeDetails(${recipe.id})">
<h2>${recipe.title}</h2>
<img src="${recipe.image}" alt="${recipe.title}">
</div>
`).join('');
}
}
function getRecipeDetails(recipeId) {
window.location.href = `recipe-details.html?id=${recipeId}`;
}

#3. RECIPE CARDS :

(HTML)

<!-- card 1 start -->

<div class="card_container">
<a href="https://youtu.be/zAICu_dIlUs?si=qNV0szds3knNW-dc"
class="card_image_container">
<img
src="recipe_images/pizza_image.jpg"
alt="card 1 image"
class="card_image"
loading="lazy"
 />
</a>

<div class="card_title_container">
<h2 class="card_title">Garden Fresh Veggie Pizza</h2>
<p class="card_desc">
A delightful blend of fresh veggies, melted cheese,
and a crispy crust. Perfect for veggie lovers,
topped with bell peppers, onions, olives, and tomatoes
for a burst of flavor in every bite!
</p>
</div>

<div class="card_footer_container">

<div class="author_container">
<div class="author_avatar_container">
<img
src="https://api.dicebear.com/7.x/notionists/s
vg?seed=Ranveer?size=64"
loading="lazy"
class="author_avatar"
alt="avatar 1"
/>
</div>
<div class="author_info_container">
<span class="author_name">
<a
href="https://en.wikipedia.org/wiki/Ranveer_Brar">Chef Ranveer Brar
</a>
</span>
<span class="author_date">
8 February 1978
</span>
</div>
</div>

<div >
<span class="card_tag_container">Veggie
Delights</span>
</div>
</div>
</div>
<!-- card 1 ends here -->
(CSS )

.card_container{
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid rgb(233, 224, 224);
border-radius: 8px;
}

.card_image_container{
position: relative;
overflow: hidden;
height: 7rem;
}

@media (min-width: 768px) {

.card_image_container{
height: 12rem;
}
}

.card_image{
object-fit: cover;
object-position: center;
position: absolute;
height: 100%;
width: 100%;
}

.card_title_container{
display: flex;
flex-direction: column;
padding: 1.5rem;
}

.card_container:hover .card_image{
transform: scale(1.1);
transition-duration: 200ms;
}

.card_title{
font-size: 1rem;
font-weight: 600;
line-height: 1.5rem;
margin-bottom: 0.3rem;
color: rgb(25, 23, 23);
}
.card_title_anchor:hover .card_title{
color:rgb(67, 67, 191);}
.card_desc{
color: rgb(113, 107, 107);
font-size: 1rem;}

.card_footer_container{
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 1.5rem;
padding-bottom: 1.5rem;}

.author_container{
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;}

.author_avatar_container{
height: 2.5rem;
width: 2.5rem;
overflow: hidden;
border: 1px solid rgb(150, 147, 147);
border-radius: 50%;
background-color: rgb(243, 239, 239);}

.author_info_container{
display: flex;
flex-direction: column;}

.author_name{
color: rgb(38, 38, 149);}

.author_date{
color: rgb(136, 126, 126);
}

.card_tag_container{
font-size: 0.79rem;
border: 1px solid rgb(76, 71, 71);
border-radius: 4px;
line-height: 1.3rem;
padding: 0.25rem 0.5rem;
color: grey;}
7.Screen Shots:
(Home Page)

(Veg Recipes)
(Non-Veg Recipes)

(About Us)
(Shopping)

(Find Recipes)
9.Conclusion
In conclusion, the recipe website project demonstrates a well-structured and visually
appealing web application that integrates key front-end technologies like HTML, CSS, and
JavaScript. The website is designed to be user-friendly, providing easy navigation, clear
categorization of recipes, and interactive features such as search and social media sharing.
The design leverages modern UI/UX principles to ensure a smooth and engaging user
experience.

The use of APIs, including Spoonacular for recipe data and social media sharing, enhances
the functionality of the site by providing users with detailed recipe information and easy ways
to share content across platforms. Additionally, the creative use of 3D animations, icons, and
images further improves the aesthetic appeal and overall feel of the site.

This project has provided a valuable learning experience in web development, from working
with APIs to implementing dynamic content updates, and has reinforced my understanding of
front-end technologies. By combining design principles, functionality, and third-party
resources, this recipe website serves as a robust example of how to create an interactive,
responsive, and visually engaging web application.

Throughout the development process, I was able to enhance my problem-solving skills and
apply theoretical knowledge to real-world scenarios. This project has not only helped me
strengthen my technical abilities but also inspired me to explore more complex features and
tools for future projects. The positive user feedback from testing the website further
encourages me to continue learning and improving my web development skills.

8. Future Enhancements

 User Feedback: Adding a rating or comment section for each recipe.

 Search Functionality: Allowing users to search for recipes based on ingredients or
cuisine type.
 Personalization: Enabling users to save their favorite recipes or create a shopping list
for ingredients.
10. References

1. Spoonacular API
The recipe data used in this project was sourced from the Spoonacular API. This API
provided a vast collection of recipe information, including ingredients, nutritional
facts, and images. It played a critical role in helping me fetch recipe data dynamically
and ensure that the content on the website was accurate and relevant.
Link: https://spoonacular.com/
2. Cloudflare Icons
For the social media icons in the navigation bar, I used Cloudflare's CDN service to
include the icons from their free icon library. These icons are widely used for their
ease of use and accessibility.
Link: https://cdnjs.cloudflare.com/
3. Unsplash for Avatars
The avatar images used for the author sections in the recipe cards were sourced from
Unsplash, a platform providing high-quality, free-to-use images. Unsplash helped me
provide realistic and visually appealing avatars for the recipe authors.
Link: https://unsplash.com/
4. Dicebear Avatars
For generating user avatars dynamically, I used Dicebear Avatars, a free API service
that creates customizable avatars. This added a personalized touch to the website,
ensuring that each recipe author's profile appeared unique.
Link: https://www.dicebear.com/
5. Free Images from Internet
To ensure that the recipe images were high quality and legally free to use, I sourced
various images from public domain and free image websites across the internet. These
resources helped me avoid copyright issues while still providing appealing visuals for
each recipe.
6. Cool Text
For generating styled text used in the website’s header and button labels, I used Cool
Text, a website that offers free text generator tools to create customizable text styles
for web projects. It was especially useful for creating attention-grabbing titles and
headings.
Link: https://cooltext.com/
7. CSS Gradient
The gradient backgrounds used in the header section of the website were created with
the help of CSS Gradient, an online tool that simplifies the process of generating
complex CSS gradients. This added a modern, visually appealing touch to the site.
Link: https://cssgradient.io/
8. CodePen for 3D Animation
The 3D animation effect for the website logo was inspired by CodePen’s open-source
code snippets. I found various examples of 3D effects and adapted them to create an
 interactive experience for users hovering over the logo.
Link: https://codepen.io/
9. Dev.io for 3D Animation Buttons
For the 3D animation on the buttons used in the recipe cards, I referred to code
snippets available on Dev.io, which provided insights into creating interactive and
visually dynamic buttons.
Link: https://dev.to/
10. ChatGPT and Online Resources
ChatGPT, along with a range of free online resources, was indispensable in helping
me learn and troubleshoot various coding challenges. It provided valuable
explanations for API documentation and guidance in coding practices. I also
extensively used resources from YouTube and other educational platforms to deepen
my understanding of front-end development and API integration.
11. YouTube
YouTube was a key resource in learning how to implement various features for my
website. Tutorials and coding walkthroughs on YouTube helped me better understand
how to integrate the Spoonacular API, use CSS Grid, Flexbox, and implement
interactive UI components.