Fork, Commit, Merge - Hard Issue (TypeScript)

[nikohoffren]

Fork, Commit, Merge - Hard Issue (TypeScript)

Implement Fetch and Display Functions for Product List

Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!

Description

We have a TypeScript file (main.ts) with several functions that are incomplete. The task is to implement these functions to fetch a list of products from an API, display them in a table, and apply filters.

How to get started

First, run npm i from the root of the project to get all the necessary dependencies.
Then, open the tasks/typescript/hard directory.
After that you can open the main.ts file and start implementing your solution!
Note: You don't need to modify the products.html or styles.css files for this task.

Objectives:

• Implement the fetchData() function to fetch products from the API https://dummyjson.com/products and populate the products array.
• Implement the displayProducts() function to display the products in the table (#productTable) on the HTML page.
• Implement the filter function inside applyFilters() to filter the products based on user inputs for minimum and maximum price, and rating.

Refer DummyJSON Docs for more documentation about the API.

Task Breakdown:

fetchData()

• Use fetch to retrieve data from https://dummyjson.com/products
• Populate the products array with the data fetched

displayProducts(products: Product[])

• Take in an array of products as an argument
• Populate the table (#productTable) in HTML
• Make sure to clear previous rows in the table before populating new ones

applyFilters()

• Retrieve user inputs for minimum and maximum price, and rating
• Filter the products array based on these inputs
• Call displayProducts() to display the filtered list

How to Test:

First you have to compile the TypeScript code to JavaScript with the command tsc tasks/typescript/hard/main.ts.
That will create main.js file to the directory which products.html will be able to use.

After compiling, if you are using VS Code and have for example Live Server extension, you can simply open products.html with the server and check how the page looks.
If you do not have Live Server extension, you'll find information about installing and how to use it here.

• Check if the products are displayed correctly in the table.
• Apply some filters and verify if the table gets updated according to the filters.
  If the page works as requested, you are ready to make a pull request!

Expected Outcome:

Tips:

• Make sure to cast HTML elements to their specific types when using TypeScript.
• Test each function independently before integrating them together.

---

Check out README.md for more instructions and how to make a pull request.

Feel free to ask any questions here if you have some problems!

Also, kindly give this project a star to enhance its visibility for new developers!