What Do I Cook?

Sample website for search and get random recipes

TODO

General

• build first HTML structure
• meta tags
• add tailwindcss using CDN <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
• add style.css header
• add script.js in the footer
• build header with links
  • link to home page
  • link to meal plan section
  • button to get random recipe
  • JS: fix the header on scroll
  • JS: hide Get Random button in hero section and show in the others
  • JS: smooth scroll for sections
  • JS: active menu item on each section
• add footer the website
  • link to my repo
  • made with love ♥️

Home page

• build hero page
  • full screen hight
  • JS: show random background using API like https://source.unsplash.com/1600x900/?cooking
• add search input with submit button
  • handle press enter and button to submit search
  • JS: on submit open search page with send value as query string
• add Get Random button
  • on click open random page
• Meal Plan section
  • add header
  • fetch data from API https://api.spoonacular.com/recipes/mealplans/generate
  • show items as a grid
    • 3 in the row for desktop
    • 2 in the row for tablet
    • 1 in the row for mobile
• New Recipes section
  • JS: fetch data
  • show items as a grid
    • 3 in the row for desktop
    • 2 in the row for tablet
    • 1 in the row for mobile

Search Page

• show search input with search value
• load 10 items
• show load more to fetch more data
• show loading spinner while fetching
• show result items as a grid
  • 3 in the row for desktop
  • 2 in the row for tablet
  • 1 in the row for mobile

Random Page

• JS: fetch data from: https://api.spoonacular.com/recipes/random
• JS: presenting data in the page
• add title of the page
• add one recipe card in the middle
• js: fetch 10 item and refetch again before the end
• js: show next and previous item

Single Recipe Page

• the page smeller to this page https://spoonacular.com/recipes/pan-fried-potato-wedges-1099404

• show cover in the page

• show the title middle of the cover

• show ingredients section

• add responsive table of ingredients

• JS: show fetching loader

Performance enhancements

• save copy of API data in global window object
• show loading in home page until fetch the data
• in random page fetch 3 items each time to show quick results