codex-lv3-may-2025

Fetch Kata with Map Assignment

Objective

Complete the fetch kata that uses the Fetch API and the map() method to fetch and display data from an API.

---

Instructions

📖 Complete the kata: Kata 12: Fetch and Display Pokemon (Promises)

Optional: Also try Kata 13: Fetch and Display Pokemon (Async/Await) to see the async/await approach.

Then extend it to use map() to display multiple pokemon from a list endpoint.

Recommended next steps:

• Fetch from https://pokeapi.co/api/v2/pokemon?limit=20 to get a list
• Use .map() to display multiple pokemon
• Show each pokemon’s name, weight, and height

---

Required Deliverables

Submit the following through Moodle:

1. GitHub Repository Link
   • Include your React component file
   • Make sure the repository is public or shared with your instructor
2. Screenshot
   • Show your component displaying the fetched pokemon data
   • Show the browser console (to verify the API call)
3. Brief Explanation (2-3 sentences)
   • How did you use map() to display multiple pokemon?
   • What challenges did you face?

---

Grading Criteria

• 40% - Fetch Implementation (Correctly fetches data from API)
• 40% - Map Usage (Properly uses .map() to transform and display data)
• 20% - Code Quality (Clean, readable code with proper structure)

Total: 100 points

---

Resources

• Kata 12: Fetch and Display Pokemon - Complete kata instructions
• MDN: Fetch API - Fetch API documentation
• MDN: Array.map() - Array map method documentation

---

Questions? Ask in the discussion forum or review the React documentation on useEffect.

Good luck! 🚀