Tehnologii Web/2022-2023/Laborator 4

In this laboratory, we will fetch data from an external server, and we will create a page containing products.


 * Using fetch - we will retrieve data from a REST API, from a GET method.
 * Using fetch - we will POST new entries.

We will use Javascript in the following steps, ES6 (ECMA Script 2015) is at this time - a browser standard, but older browsers might only support older Javascript.

If your environment from the first lab with Parcel is being set correctly - Parcel should be doing this conversion automatically.

Step 1
Find a dummy JSON-api service. For instance: DummyJSON  would be an option.

Visit: https://dummyjson.com/products/1

The resulted page would look like this: By default, our browsers would call the GET method.

Step 2
Implement the static HTML and CSS (no JS) in order to replicate the user interface for this assignment.

You should have a container and multiple products, your HTML hierarchy should look like this:

Step 3
Retrieve the container (using Javascript).

Step 4
Add product entries dynamically using Javascript.

First, we create a helper function that will return an HTML string - representing a product HTML template.

Please note Javascript template literals. Next, we will add the resulted HTML string to a newly created child.

Step 5
By now, you should have at least 2 products (added from static HTML code), and a product created from your Javascript code.

Visit: https://dummyjson.com/products in your browser to see the expected JSON data.

Step 6
Call the fetch function and open the browser inspector console, you should see your JSON data.

Step 7
Finally, we iterate through the products and we add them in the DOM dynamically.

Your assignment
Take input from user (navbar) and using fetch - call add products endpoint . Your fetch call should look like this: Note: you might experience CORS problems, Parcel settings should allow bypass this by default.

Bonus
Implement a real-time search (will search both partially the title and the description).