Chef Circle
book image

The recipe book

Name Your Delicious Recipe

All fields are required
Recipe created successfully

Eg. Salt: 100g, Milk: 1ltr, apples: 3

Cooking Instructions

Image 1 Image 2 Image 3

Great Recipes Await! More to Discover

This is the resources where i refered for completing this page

Main glasmorphism design

Leveraging the tutorial by Developedbyed, I utilized my skills to create a customized glasmorphism design that reflects my unique style and creativity.

View in new tab

Recipe card inspiration

Drawing inspiration from this card design, I incorporated my own design elements to craft a visually appealing and functional recipe card.

View in new tab

Illustrations are from Storyset

I integrated visually engaging SVG illustrations sourced from Storyset, adapting them to align seamlessly with the overall design and purpose of my project.

View in new tab

Images from Pixabay

With my careful selection and customization, images from Pixabay enhanced the visual appeal and cohesiveness of my project.

View in new tab

Thanks to font awsome

All icons are from fontawsome. Without it, I would have struggled to add icons.

View in new tab

The features of my page

Ingredient Processing

The ingredients input field processes the input into key-value pairs (e.g., "flour: 200g"), converting user input into a structured format for better storage and display in the recipe.

Dynamic Recipe Steps Management

The ability to dynamically add and remove cooking steps within the form, allowing users to customize the number of steps based on the recipe. Each step has its own text area, with an option to remove individual steps, providing flexibility to users when submitting a recipe.

Custom Image Slider with Auto-Slid

The recipe page includes an image slider that automatically transitions between images every 3 seconds. The slider pauses when hovered over, offering a better user experience by preventing distraction when the user is interacting with the page.

jQuery UI Accordion for Credits/Resources:

An accordion-style component that neatly organizes the resources and credits used in building the page, such as design inspiration, illustrations, and images.

Recipe Display Cards

A clean and interactive way to display recipes in cards, where users can view the name, category, and a short preview of ingredients and steps. The recipe cards include a "View full recipe" button that opens a detailed view of the full recipe.

Real-Time Validation

As users interact with the form, it provides real-time validation. Fields that are left empty are highlighted with a red outline, immediately guiding users to fix errors before submission.