Creating a webpage for Cruella De Vil: Fetching to the JSON server
Hey friends and welcome!
Disney’s Cruella recently came out in theaters and on Disney+. In honor of the fur-loving fashionista, I thought it would be a fun tribute if I made a single-page application about her love of fashion and furs!
Here I will show you how I created an MVP (Minimum Viable Product) for a single-page application with an API.
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.
From this code, the webpage would be focused on fetching to a public API server and on a Javascript file to connect and append to the DOM. However, having a blank webpage without a design would be boring. So, we would need a stylesheet to create designs.
After getting this setup, I focused my attention on creating the event listeners for my webpage in the index.js file.
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.
For this webpage, I wanted to have a like button and a comment section.
Inside a DOMContentLoaded event listener, I declared the variables for my classes and ids: ‘like-btn’, ‘comment-form’, ‘ul’, “list” globally.
For the like button, I wanted to create a way for the user to interact with the page while still being able to stay on theme. Going back to our index.html, I used querySelector and getElementByID as a way to get the class for each of my declared variables. Then I made two main event listeners, one for the element id “like-btn” and one for the element id “comment-form”; identified here as “button” and “list” respectively.
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.
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.
To fetch the image, I created the function “cruelly” declared a variable to the API endpoint URL which is a constant because I didn’t want the variable to change throughout developing the website. I also added the function getPuppies to append the images to the DOM.
Next, to get the JSON body content from the response; I used the .JSON() which returns a promise that resolves the Response to the request with data from the API.
Since I wanted pictures from a specific breed of dog, I converted them into an array using an Object.keys() to loop the array starting at an index 0.
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.
RESOURCE LINKS:
Website
