Creating a webpage for Cruella De Vil: Fetching to the JSON server

Creating the workspace

You can use any other IDE you’re comfortable using; since I have VS Code, open up the editor and in the new directory create index.html, index.js, and styles.css.

index.html
alt text: styles.css sheet with css code.
styles.css

Creating the index.js file and fetching the API from the server

For this project, I wanted to make sure that the user was able to interact with the page. In the index.js file, I made a DOMContentLoaded event listener so that way, when the page is loaded on the user’s device, they are able to immediately interact with the features.

code for the index.js

Like Button

For the like button, I created an event listener that is attached to the “button” variable. Inside the event listener, I then created an ordered list item variable (“li”) and declared globally that “i = 0”. I then added the onclick event for when the user clicked the button, they are able to see how many people liked hating puppies. The reset button was added because I refused to have sprawling lists without clean-up.

Comment Section

For the comment section, I created an event listener that is attached to the “list” variable. Inside the event listener, I then created an ordered list item variable (“li”), added preventDefault, and created a delete button. For the delete button, I appended it to the “li” so the user could delete their comment.

Counter, Add button and Reset for Counter

It wouldn’t be a Cruella De Vil website without a little math right? I added a counter variable, along with an add button to increase the counter number and a reset button to restart the count.

variables for the counter
code for the three variables

Getting the API image.

For my single-page application, I used the Dog API from the Stanford Dog Dataset; specifically for the dalmatian images that I used.

API URL

Final Thoughts

And that is basically how I created my webpage! This personal project was a lot of fun and it was really helped me understand many of the different components that make up creating the DOM.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store