This app is a useful tool for choosing what to cook for dinner! You can generate randomized sides, main dishes, desserts, or a combination of all three. You can visit the application here.
- When the page loads, the user is presented with a header and two boxes. The "Add a Recipe" button in the header is not functional. The box on the left asks what you are looking for. Below this are four radio buttons. Below these is a "Let's Cook!" button. When the page loads, the button is disabled and displays partially opaque, to let the user know that they are unable to click the button. The box on the right displays an image of a cook pot.
- When the user clicks on one of the radio buttons, the "Let's Cook!" button is enabled and changes to a darker, less opaque shade to let the user know that they may now click the button.
- When the user clicks the button, the cook pot on the right side disappears and a loading image appears for 1.5 seconds, to simulate searching for a recipe. The loading image then disappears and the recommendation fades in. A "Clear" button also appears at the bottom right side of the box.
- When the "Clear" button is clicked, the selection on the radio button is removed, the recommendation disappears, the cook pot fades in, and the "Let's Cook!" button is disabled.
- The page is responsive to various screen sizes and orientations. When the user views the app on a screen in portrait layout, the boxes are stacked vertically, instead of horizontally.
- Turing School of Software & Design Frontend Students
- Phil Lewis
- Add section for user to add their own recipes
- Make "Add a Recipe" button functional
- "Save" or "favorite" feature, where the user can click a button to save the recipe
- All recipes interface, where the user can view all saved recipes and delete ones they no longer want
-HTML, CSS, Javascript
The spec for this project can be found here.
- Fork this project to your own Github account
- Clone the repository to your local machine
cdinto the project- Run open
index.htmlto see the app