We have an application that uploads photos. That's it.
All of the photos are stored in the db.json
file. You'll want to access this data using a JSON server. In order to do this, run the following two commands:
npm install -g json-server
json-server --watch db.json
This will create a server storing all of our photo data with restful routes
at http://localhost:3000/photos
. You can also check out
http://localhost:3000/photos/:id
On the index.html
page, there is a div
with the id
"photoContainer."
When the page loads, make a 'GET' request to fetch all the photo objects. With the
response data, make a <div class="photo">
for each photo and add it to the
photoContainer div
.
Each Photo Div should have the following child elements:
h3
tag with the photo's namep
tag with photo's ownerimg
tag with thesrc
of the photo's url attributebutton
tag with a class "removeButton" and inner text of Remove
After all of that, the Photo Div should resemble:
<div className="photo">
<h3>Photo Name</h3>
<p>By Not-Rei</p>
<img src="https://lh4.googleusercontent.com/-biLWrHsnoj4/AAAAAAAAAAI/AAAAAAAAADM/VQfqDfNKF10/photo.jpg">
<button class="removeButton">Remove</button>
</div>
- When a user clicks on the add new photo button, the hidden form will pop up. When the form is submitted, a
POST
request is sent tohttp://localhost:3000/photos
and the new photo is added to PhotoContainer. - The photo should render to the page.
- In order to send a POST request via Fetch, give the fetch a second argument of an object. This object should specify the method as
POST
and also provide the appropriate headers and the JSON-ified data for the request. If your request isn't working, make sure your headers and keys match the documentation.
POST http://localhost:3000/photos
headers:
{
"Content-Type": "application/json",
"Accept": "application/json"
}
body:
{
"name": "Rei's Photo",
"owner": "Not Rei"
"photo_image_url": "https://lh4.googleusercontent.com/-biLWrHsnoj4/AAAAAAAAAAI/AAAAAAAAADM/VQfqDfNKF10/photo.jpg",
}
- For examples, refer to the documentation.
{
"name": "Sample 1",
"photo_image_url": "https://uc30c8a0afd0a0a9d15ade47f26a.previews.dropboxusercontent.com/p/thumb/AAll56msw8YL1sz4N87Ja0LSX6BpNXfp0RLm-k5SUOKHDV2TIGOxy0MImb4KwUAcsAVk5k3mx6vNcsr2cFRMXsEZsU1pwLC1-gMRUnr0PuwRREl7iHqW17sRmudqiKSpl-vTzIE2CfZw7SsIXFhit-DnsONlA0_JFAR2SrIyMkQzLoMTDO_FXzB-IrUnKGvmA866bT0zt4vqdeXkycpVrtIW8LhiQsSwgaOdNVeuadCBUXA04bC2revhNiOKl1HmORXheGsHNtsyBrg5ZlA2JSZIbNbJnOHsGRZmJXSPd9TDEiIRCOOlEwozWUiEPtk4gfBzrDOqvBSz71UmmmSVGDNyhgzlmmEyXNPFpxR7wWRcdg/p.jpeg?fv_content=true&size_mode=5",
"owner": "Eric"
},
{
"name": "Sample 2",
"photo_image_url": "https://cdn-images-1.medium.com/max/1200/1*[email protected]",
"owner": "Leizl"
}
When a user clicks on a photo's remove button, the photo div should be removed and also removed from the database.
- A delete request sent to the server at
http://localhost:3000/photos/:id
DELETE http://localhost:3000/photos/:id
If we have an update button, and When a user clicks on a Photo's update button, two things should happen:
- bring up an edit form with the fields populated with the specific photo's information except the owner.
- A patch request sent to the server at
http://localhost:3000/photos/:id
updating the the information of the photo. - Headers and body are provided below (If your request isn't working, make sure your header and keys match the documentation.)
PATCH http://localhost:3000/photos/:id
headers:
{
"Content-Type": "application/json",
Accept: "application/json"
}
body:
{
"name": <new number>,
"photo_image_url": <new photo url>
}