Go ahead and try it out!
1
Team
Just Me - Shadiya
2
Tools
CSS, HTML and JavaScript
3
timeline
April 20th, 2022 - May 2nd, 2022
How it all began
I wanted to try out a simple project to improve my skills in web development and content management. My goal was to create an online cookbook that shows recipes from culturally diverse states of India in an easy-to-navigate structure.
Each recipe will have certain parameters defined such as preparation time, serving size and spice level, etc. with a mix of appetizers, entrees, desserts and drinks.
Another key feature I wanted in the website is a Menu Generator. The generator feature would take inputs from the user such as desired prep time, serving size, spice level, number of dishes and complexity. Based on these inputs, the generator would look up the recipes associated with the parameters, rank them and provide a list of dishes as a set menu.
About MenuMaker
This feature is developed using web SQL to create a static table with JS elements, which is truncated and regenerated every time you load the page. The table contains parameters like name, state, type of recipe, spice level, complexity in terms of cooking, serving size, and total time in mins. This table is queried by the inputs entered by the user and the results are filtered accordingly. The result is then hyperlinked to take you to the specific recipe section of the page. Apart from the SQL stuff, the MenuMaker utilizes JS buttons and drop-downs for a seamless input UI. Simple yet very effective!
About recipe section
In this section, I used JS to make the images dynamic based on user clicks. Once you click the buttons under each State, the page will take you to the recipe section of that particular state
Want To Check Out My Website?
Here’s the link to the website: https://sf-online-cookbook.glitch.me/index.html
What were the constructive lessons I learned from the design?
This is my very first website created from scratch. Working on this website taught me the foundations of web development as well as content management – two skills that would help me breach the basic scope of a UX designer and foray into the field of front-end management. I put into application my understanding of HTML+ CSS features and also learned how to create an algorithm for functional features like the MenuGenerator and improved my debugging skills.