Skip to content

Latest commit

 

History

History
122 lines (85 loc) · 6.22 KB

README.md

File metadata and controls

122 lines (85 loc) · 6.22 KB

Advanced Javascript On the Job

Project Description 📄

In this ongoing assignment, imagine you’re helping a local store set up a basic product showcase on their website. Your task is to use the FakeStoreAPI to fetch and display product data. The store wants to display their products in a way that makes it easy for customers to browse and view details of each item.

Throughout this assignment, you'll be tasked with building out and working on an e-commerce site, and the different functionality from getting and creating products, to putting them on the screen.

Scenario 🌟

You have taken on a client who is a small but growing business. Your task is to build them a new website to showcase their products/services and build an online presence.

Resources 📦

Read the documentation for the Fake Store API and get familiar with the functionality. For now focus on only the GET endpoints that get data. Notice how each of the examples uses the .then method for handling asynchronous code. Make sure to follow best practices and use async/await instead.

Utilize documentation such as W3 Schools and MDN for all things related to Javascript, and HTML and CSS as they become relevant in the later portions of this project.

Use AI tools such as ChatGPT and Claude to help you learn. As you integrate AI tools into your learning process, it's essential to use them responsibly. AI can be a powerful resource to assist you, but it’s important to ensure that you truly understand and engage with the content it generates. This will not only enhance your learning experience but also help you develop critical thinking and problem-solving skills.

Checkpoint 1 ✋

Working with APIs 📄

In this section, you will practice retrieving and working with data using GET requests from an API. This exercise will help you understand how to interact with an API, retrieve specific types of information, and work with the data returned in JSON format. You’ll focus on making requests to different endpoints, exploring the data structure, and preparing the data for further processing or display.

Deliverables ✅

  1. Create a new directory and index.js file.
  2. Initialize a new directory for your project and connect it to your GitHub repository.
  3. Write a basic JavaScript file where you will make API requests and log responses to the console.
  4. Use a fetch GET request to retrieve a list of products from https://fakestoreapi.com/products and display the resulting data in the console. Review the structure of the data.

Example:

async function main() {
  const response = await fetch('https://fakestoreapi.com/products')
  const data = await response.json()

  console.log(data)
}

main()
  1. Loop through the retrieved product data and print the title, price, and rating.

Example:

data.forEach(item => {
  console.log('title', item.title)
  console.log('price', item.price)
  console.log('rating', item.rating.rate)
})
  1. Use a GET request to retrieve a single product by ID (/products/{id}) and log the response to the console.

Example:

const response = await fetch('https://fakestoreapi.com/products/1')
const data = await response.json()
console.log(data)
  1. Use a GET request to retrieve all product categories (/products/categories) and log the categories in the console.

Example:

const response = await fetch('https://fakestoreapi.com/categories')
const data = await response.json()
console.log(data)
// loop through the data here
  1. Use a GET request to retrieve products by category (e.g., /products/category/{category}) and log the response to see the filtered results. Replace {category} with one of the categories from the previous steps.
  2. Explore additional query parameters (like limit) to modify your GET requests and observe the changes in the returned data. Review the documentation here
  3. Use Git to add, commit, and push your changes to the repository for your project.

Tips 💡

  • Use AI tools like ChatGPT to help you troubleshoot any issue. You can even give it the url to the Fake Store API and it can help you come up solutions.

    • As developers we do this pretty consistently. It is important that you make sure you understand the output it gives you. Feel free to ask it follow up questions on the output it gives you to help you understand everything it is doing.

  • Don't forget that you have to parse the returned data in order to read it.

  • Use async/await instead of .then.

    • Remember that you can only use async/await in functions.

Example:

async function main() {
  const response = await fetch('https://fakestoreapi.com/products')
  const data = await response.json()

  console.log(data)
}

main()

Grading Criteria 💯

Criteria Exemplary Performance (Full Marks) Proficient Performance (Partial Marks) Developing Performance (Half Marks) Needs Improvement (No Marks)
Technical Acceptance Criteria (60 pts) 54-60 42-53 30-41 0-29
Workflow Appropriacy (15 pts) 14-15 11-13 8-10 0-7
Documentation (15 pts) 14-15 11-13 8-10 0-7
User Experience (10 pts) 9-10 7-8 5-6

Solution codebase 👀

🛑 Only use this as a reference 🛑

💾 Not something to copy and paste 💾

Note: This lab references a solution file located here (link not shown).

© All rights reserved to ThriveDX