For this challenge, you will be building a Beer info webpage.
You should be able to finish within 90 minutes
— As a user, when the page loads, I should see a list of beer names retrieved from an API on the left hand side of the screen.
— As a user, when I click a beer name, the application should reveal more information about that particular beer.
— As a user, when looking at the details of a beer, I can edit the current description of a beer. Clicking the ‘Save’ button will save any changes added to the description in the database
Instead of actually accessing the data from a remote API, this challenge uses a package called [json-server](https://github.com/typicode/json-server) to create a fake API for development and testing.
It is very easy to set-up.
1 — Run the command `npm install -g json-server` in the command line from this directory
2 — Run `json-server — watch db.json`
That’s it. You will have a server running on `localhost:3000` that serves the JSON data contained in the `db.json` file.
Troubleshooting: If this fails, be sure you don’t already have something running on port 3000*
When the page loads, I should see a list of all of the beer names retrieved from the API on the left hand side of the screen. The API endpoint we need to retrieve all the beers is a conventional RESTful route
* **Route:** GET `http://localhost:3000/beers`
When I click a beer name, the application should reveal more information about that particular beer.
See the example above for the additional information that should be displayed.
* **Route:** GET `http://localhost:3000/beers/:id`
The beer details should be added to this div
html
<div id=”beer-detail”>
</div>The html should look something like:
html
<h1>Beer Name</h1>
<img src=”<add beer img url here>”>
<h3>Beer Tagline</h3>
<textarea>Beer Description</textarea>
<button id=”edit-beer” class=”btn btn-info”>
Save
</button>Edit beer details
When looking at the details of a beer, I can edit the current description of a beer. Clicking the 'Save' button will save any changes added to the description in the database. The edited beer should also update the DOM. For example, if I update the details of "Beer A" then click on another beer, when I go back to "Beer A", the description should be updated.To update a beer you'll need to make a PATCH request
* **Route:** PATCH `http://localhost:3000/beers/:id`
* **Body:**
```js
{description: "your new description"}
```
* **Headers:**
```js
{
'Content-Type': 'application/json',
'Accept': 'application/json'
}
```**Important Notes:**
* For all intents and purposes, PATCH behaves the same as POST. If you know how to POST, you know how to PATCH
* When using `fetch` to make a PATCH request, be sure to capitalize method: 'PATCH'
Answer
const ulTag = document.querySelector('#list-group');const divTag = document.querySelector('#beer-detail');const createBeerLi = (beer) => {
return `<li class="list-group-item" data-id="${beer.id}">${beer.name}</li>`
}const createBeerDiv = (beer) => {
return `
<h1 data-id="${beer.id}">${beer.name}</h1>
<img src="${beer.image_url}">
<h3>${beer.tagline}</h3>
<textarea name="description">${beer.description}</textarea>
<br/>
<button id="edit-beer" class="btn btn-info">
Save
</button>
`
}ulTag.addEventListener('click', (event) => {
if (event.target.className === 'list-group-item') {
// console.log(event.target.dataset.id)
return fetch(`http://localhost:3000/beers/${event.target.dataset.id}`)
.then(resp => resp.json())
.then(beer => {
divTag.innerHTML = createBeerDiv(beer)
// console.log('hi')
})
}
})const updateBeerInfo = (id, description) => {
fetch(`http://localhost:3000/beers/${id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
description: description
})
})
.then(resp => resp.json())
.then(beerDOM => {
beerDOM.innerHTML = description
// console.log('hi')
})
}divTag.addEventListener('click', (event) => {
event.preventDefault();
if (event.target.className === 'btn btn-info') {
// console.log(event.target.parentElement)
const updatedBeerDesc = event.target.parentElement.children[3].value;const beerId = event.target.parentElement.children[0].dataset.id;
// const currentBeerDesc =updateBeerInfo(beerId, updatedBeerDesc)// console.log('hi')
}})fetch('http://localhost:3000/beers')
.then(resp => resp.json())
.then(allBeers => {
allBeers.forEach(beer => {
ulTag.innerHTML += createBeerLi(beer)
})
})