day-1

🐒 Day 1 - Components, map, reduce, and filter 🐈

🎯 Learning Objectives

• Use Components to create reusable elements on a webpage
• Apply a function to a list of data, using map
• Condense a list of values to a single value, using reduce
• Filter a list using the filter method

📔 Assignment

Download the provided data folder from here, which includes a json file containing a list of details for different animals, as well as the images for each animal.

Each animal has the following attributes:

• type - animal type
• state - emotional expression
• img - path to the image
• adoption_fee - the cost to adopt the animal

Then do the following, to the list of animals:

1. filter a decided attribute out of the list of animals (ex. no lizards, or only costs 20 dollars or less)
2. Use reduce to get the total cost of all of the animals, and display it on the page somewhere
3. Then use map to display each of the animals in their own Component

🔗 Resources

• Lecture Notes - super detailed overview of the lecture
• Next.js Setup - official documentation for setting up Next.js
• Tailwind Setup - setting up tailwind with Next.js
• Potion Seller - inspiration for the potion demo 😂