Fork, Commit, Merge - Hard Issue (TypeScript) #649
Labels
first-contributor
first-contributors
good first issue
Good for newcomers
hard
help wanted
Extra attention is needed
typescript
up-for-grabs
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
orstyles.css
files for this task.Objectives:
fetchData()
function to fetch products from the APIhttps://dummyjson.com/products
and populate the products array.displayProducts()
function to display the products in the table (#productTable
) on the HTML page.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()
https://dummyjson.com/products
displayProducts(products: Product[])
#productTable
) in HTMLapplyFilters()
displayProducts()
to display the filtered listHow 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 whichproducts.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.
If the page works as requested, you are ready to make a pull request!
Expected Outcome:
Tips:
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!
The text was updated successfully, but these errors were encountered: