Skip to content

A frontend website with HTML, CSS and JavaScript. The website will communicate and integrate with a Food and Recipes API.

Notifications You must be signed in to change notification settings

NurdinDev/what-do-I-cook

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

About

A frontend website with HTML, CSS and JavaScript. The website will communicate and integrate with a Food and Recipes API.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published