Recipe Ingredient Calculator

Through the web and digital media design program, I had the opportunity to learn not only HTML and CSS but also JavaScript and its library jQuery. For my final project in my JavaScript class, I created the Recipe Ingredient Calculator, a hand-coded website with five pages plus two subpages. This site lets users easily double recipe ingredient amounts or cut them in half. It provides recipe tips and allows users to save recipes and ask recipe measuring-related questions.

I would encourage you to try out the Recipe Ingredient Calculator. Please note, while the site is fully functional, I did not connect it with MySQL or another database.

The JavaScript/jQuery

I coded a lot of JavaScript/jQuery for the Recipe Ingredient Calculator. On the Recipe Tips page, a jQuery slider plugin shows which measuring utensil works best based on the ingredient. Both the Calculator and Account pages have a jQuery popup plugin that adds a secondary form to the page, for example, to reset a password. Every input field utilizes JavaScript to validate the content entered by the user. Recipes are saved on the Calculator page through web storage and then displayed on the signed-in Account page. Yet, that is only one view of the signed-in Account page.

I could go on and on explaining all of the interactivity on the site. Instead, I am going to encourage you to explore the site.