Skip to content

Latest commit

 

History

History
45 lines (30 loc) · 1.83 KB

instructions.md

File metadata and controls

45 lines (30 loc) · 1.83 KB
Raw

Instructions about the project

Navigating this repository

We have provided a starter kit for your project in the GitHub repo. It includes an HTML file, a CSS file, and a JS file. Don't forget to connect the files.

index.html

Here you will create some HTML elements. Don't forget to add IDs to the elements so you can access and update them later in the JavaScript file.

script.js

In order to simplify the execution of this project, we have provided you with two arrays with data. Remove the one you are not using (or both if you create your own).

How to get started

Requirements

  • Your page should display all of the elements (and their information) in the chosen array when the website is loaded
  • Your page should have at least one filter, e.g. on genre or cuisine type
  • Your page should be able to sort on at least one property, e.g.:
    • for books:
      • from newest to oldest and vice versa
      • from the highest to lowest rating and vice versa
    • for recipes:
      • from most to least ingredients and vice versa
      • from longest to shortest cooking time and vice versa
  • Your page should feature a button that selects a random book/recipe, and your page should display the selected item

Stretch Goals

So you’ve completed all the steps above? Great job! Make sure you've committed and pushed a version of your project before starting on the stretch goals. Remember that the stretch goals are optional.

Intermediate stretch goals

  • Go wild with the filtering. Add a filter to:
    • only show the recipes with less than 5 or 10 ingredients
    • only show the books from the 21st century
  • Go wild with the sorting. Sort on:
    • Alphabetical order

Advanced stretch goals

  • Create a search bar where the user can search for specific keywords
  • Recreate the same design as the one provided in the example on Figma