Dog Show Challenge in 5 Minutes
There are a lot of .js files in our src folder, but we’re going to most of them and code everything index.js. Don’t forget to start your server with
json-server --watch db.json(install the json-server package with command 'npm install -g json-server' if you get an error)
Okay! We should now be able to open our index.html page and see our starter code at work:

We don’t want to get too far without reading the deliverables, so here they are:
Deliverables
- On page load, render a list of already registered dogs in the table. You can fetch these dogs from http://localhost:3000/dogs.
- The dog should be put on the table as a table row. The HTML might look something like this
<tr><td>Dog *Name*</td> <td>*Dog Breed*</td> <td>*Dog Sex*</td> <td><button>Edit</button></td></tr> - Make a dog editable. Clicking on the edit button next to a dog should populate the top form with that dog’s current information.
- On submit of the form, a PATCH request should be made to http://localhost:3000/dogs/:id to update the dog information (including name, breed and sex attributes).
- Once the form is submitted, the table should reflect the updated dog information. You can either use the response from the PATCH request for this or use optimistic rendering. This means you can update the frontend before you have gotten the response from the backend.
- In order to locate one row on the DOM and update specific data cells within it, you may need to assign id and or class values to locate each attribute.
Let’s go through one at a time, starting from the top!
- On page load, render a list of already registered dogs in the table. You can fetch these dogs from http://localhost:3000/dogs.
- The dog should be put on the table as a table row. The HTML might look something like this
<tr><td>Dog *Name*</td> <td>*Dog Breed*</td> <td>*Dog Sex*</td> <td><button>Edit</button></td></tr>
Pretty basic start. Open your index.js file. The only thing here right now is an addEventListener for DOMContentLoaded, to make sure that all of the index.html has been rendered before going through our javascript. Delete that, I don’t like it. Instead, double check that in your index.html file, your .js files are at the bottom of the <body> tag. We can double check that the index.html file has been loaded with a simple
console.log("DOM loaded");at the top of our index.js. Save your file, go back to your browser and refresh. Open your console, and you should see the “DOM loaded” message printed. Great! Now let’s get those dogs.
If we look at the index.html and inspect the page, we’ll see that we have a table. The table head (thead) has a class=”blue”, and underneath, we see what we really came here for — the table body (tbody), which has an id=”table-body”. Grab that, and set a global variable to that id. Your code should look like:
Now we need to actually get the data from the URL mentioned in the README. That requires a fetch!
Here we’ve fetched from the URL; our first .then parses the JSON data, and with the second .then we’re going to console.log the output. Go back to your browser and refresh, and in the console you should now see an array of hashes with all of our dog info. Now we need to start building out functions so instead of logging to the console, we can add it to the DOM!
First, we’ll change the .then(console.log) to .then(json => addDogsToPage(json). This tells the fetch that after it parses, it needs to send the data to the addDogsToPage function. Let’s build that out!
Here we’re iterating through each of the dogs, and adding each dog to the table — which means another function! Let’s call it addDogToTable(). This one is a little trickier. First, we know we’re making a table of dogs, so we need to add a new table row for each dog. That requires .createElement, so we’ll set a variable newDogTr to create the new element at the top. The table row’s innerHTML should be populated with the fields from the original image, which was also provided in the README — name, breed, sex, and a button that we’ll soon be able to use to edit each dog.
At this point when you refresh your browser, you should see this:

Great! Onward!
- Make a dog editable. Clicking on the edit button next to a dog should populate the top form with that dog’s current information.
Let’s make that edit work! First, we know we need an addEventListener on the dogTable, so when we click edit it’ll actually listen to us and do something. Event Listeners always need two variables — what it should be expecting, and what it should do. Here, we want it to listen for a “click”, and will send it to a new function (we’ll call it clickedEdit).
dogTable.addEventListener("click", clickedEdit)Which means, time to build out that clickedEdit()! It’s taking the event as an argument, and we’ll use an ‘if’ statement telling it that if the edit button is clicked on a specific dog, that dog’s current info should generate in the “Edit Existing Dog” form. It sounds like we’re telling it to do something again — so why not make another function? What the heck, we’ll call this one addDogToForm().
To build out the addDogToForm function, we need to first grab the edit form itself. Using the inspector, we can see it’s id is “dog-form.”
Once you’ve set that to a variable, we want the function to generate the dog info in the form’s row. Use your inspect tool to click on a dog’s “edit” button, and find out which elements include the dog’s name, breed, and sex. We’ll then set the form’s innerText to those values. Your code should now look like this:
Check it in your browser, and you’ll see when you click a dog’s edit button, it’s information autogenerates in the edit fields! Now try another! And another! Okay now we can move on.
- On submit of the form, a PATCH request should be made to http://localhost:3000/dogs/:id to update the dog information (including name, breed and sex attributes).
- Once the form is submitted, the table should reflect the updated dog information. You can either use the response from the PATCH request for this or use optimistic rendering. This means you can update the frontend before you have gotten the response from the backend.
So we can select a dog to edit, but we haven’t listened to a “submit” event yet. Time to build it out so we can change our dogs!
First, set an addEventListener to the form, which “submit” as the listener and a new function — let’s call it “clickedSubmit” as the product.
form.addEventListener("submit", clickedSubmit)In clickedSubmit(), we first need an event.preventDefault(); to make sure the page doesn’t refresh every time we hit submit. We want it to do everything without refreshing!
Next, we’ll set variables to the same values we used in addDogToForm, so we’re pulling from the right element. We’re then going to call a function within a function, which will patch the edit for us to the database. Let’s call that editDog. This will match up our table row information with the new dog data.
Great, but we want to save it to the database too. Anytime we pull or send information to the database, we need a fetch. Most of the information is going to be the same, but because it’s within a function, we need to say return fetch. Make sure your url is that of the dog’s id, and the body should be the variables that match up to your clickedSubmit variables.
Great! Now refresh, and test! Try editing a dog and saving — you should see it saved! Refresh the page, and it should still show your edited version. You patched it to the database!
Full code:
