> For the complete documentation index, see [llms.txt](https://tbhp.gitbook.io/web-course/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tbhp.gitbook.io/web-course/examples/bonsai-project.md).

# Bonsai Project

## Bonsai Project

## Part 1: populating products list and using URL to pass data

{% embed url="<https://www.youtube-nocookie.com/embed/G628VG9a5q0>" %}

### Video Notes

#### Adding data to url parameter for page

```
http://localhost:8099/test/second?name=Tom&age=10
```

The above request is a get request so we can add data to the url: *'name=Tom\&age=10'*

| Parameter | Value |
| --------- | ----- |
| name      | "Tom" |
| age       | 10    |

#### How use data in url to pass information to another page

This is very useful as we can use it to pass data to another page.

For example you may want to do this: When a user clicks on a product, we go to the products detail page and display data for that product. *But do not want to have to create a page for each product.*

What we can do instead:

1. On product list page we redirect on a product button click

```javascript
productOneBtnElement.onclick = function(e){
   let newUrl = "/product.html?id=1"
   document.location.href = newUrl;
}
```

or just using an a link in the html

```html
<a href="/product.html?id=1">More info</a>
```

Notice our use of html query string *'?id=1'*. [More info on query string](https://en.wikipedia.org/wiki/Query_string)

2\. On the *product.html* page we need to get the query string from our url\
In the js page for it:

```javascript
// our url is .../product.html?id=1

let searchParams = new URLSearchParams(window.location.search)
// searchParams.has('id') // We can do this to check if param exists
let param = searchParams.get('id') // returns string "1"

// We can now fetch the data with id 1 from the server using the fetch api or axios
```

#### Using js to automatically insert html

{% hint style="info" %}
Note this is advanced: We would recommend instead of using js to create the elements you can copy and paste the html for the products and use js to update the name, price and the link to the product details page,&#x20;

```
// html
...
<p id='product1-price'></p>
..

// js
document.getElementById('product1-price').innerhtml = product[0].price;
document.getElementById('product2-price').innerhtml = product[1].price;
....
```

{% endhint %}

The js dom api can be used to insert html. The important methods are 'document.createElement' 'appendChild' and 'innerHTML' property

```javascript
// 1. Use document.createElement to create your new element
let newDiv = document.createElement('div')
// 2. You can use inner html too. Not as recommended
newDiv.innerHTML = "<p style='font-size:32px;'>My Test text</p>"
// 3. Now attach the html element where you want
document.body.appendChild(newDiv);
```

We could instead find an element and attach our new element as a child to it:

```javascript
document.getElementById('generate-here').appendChild(newDiv);
```

Or use innerHTML

```javascript
let generateHere = document.getElementById("generate-here");
generateHere.innerHTML = '<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>';
```