Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
styles
README.txt
granim.min.js
index.html
main.js

README.txt

Hello! This is a recipe quiz app using jquery. Basically, users are asked to answer 3 questions in a form about their preference for ingredient, number of people being served and cooking time. After they submit the form, some information about a recipe that meets their preferences will be rendered on the page. Besides, I provide a reset button under the recipe information, and I also show a reminder when users haven't answered all three questions. There are more details about my app functions in my JavaScript code.
The largest ideal screen width for my app is 1600px. And 320px is the smallest screen width that my app adapts to.
Since all the font awesome icons and kaomoji/emoticons I use in my app are purely decorative, I hide them from screen readers. 
Another point to mention is that when I submitted my project scope outline, I wrote in my pseudo code and wireframe that I would show both ingredient and cooking method. Then, for a better layout I changed my idea and only display the cooking method in my app.

Thank you for reviewing my project!


My thanks for:
1.two awesome codepen from which I used and tweaked the code to style my buttons and recipe image information
https://codepen.io/hans/pen/hanBu
https://codepen.io/a_noodles/pen/avXjZb
2.BBC Good Food —— all recipes, including their pictures, are from the website.
3.Ella Olsson on Unsplash for the Background Photo. 
4.granim.js for the animated gradient background color.
You can’t perform that action at this time.