Solving the Woof Woof JavaScript Challenge

Woof Woof is a Flatiron lab that requires you to build a JavaScript Website that renders Dogs. It should look something similar to the below image. In this article we will show you how to solve this challenge step by step.

Woof Woof Webpage

The Deliverables for the Woof Woof Challenge

The Read Me specifies the deliverable for this website.

Read Me for Woof Woof

index.html specifies the boilerplate for the website.

The index.html is crucial because we can add defer to the script to prevent the index.js script from running before the actual page load or we can use the DOM Content Loaded Event Listener.

Defer option to prevent index.js from loading.

DOM Content Loaded in index.js file

Test to see if you get access to the server using fetch request after you run the server.

Running the server.

json-server — watch db.json

Testing Server with console log

Create the function using the deliverables.

Function for Rendering Pup

The function includes the ability to render pup and the ability to add Event Listeners for specific buttons.

Finishing the JavaScript for filter option (bonus challenge)

Full Code

Full Code for Woof Woof Challenge

The full code delivers all the deliverable for this challenge. It helps to render all the pups and use a filter option for the dogs displaying based on their “good” or “bad” attribute.

You are a JavaScript Developer Now!