This is a random dog image generator. It was developed using the following tools:

🦴 Overview

The inspiration for this app came from Brian Holt's introduction to web development on Frontend Masters. He uses the dog.ceo API to create a basic JavaScript image generator. You can view the original project here

🦴 Dog.ceo API

The script that I used calls the API URL, parses the .json data and copies the link for each randomized image. Here is the API call URL that I used:

https://dog.ceo/api/breeds/image/random

This URL returns the following .json example data:

{ "message": "https://images.dog.ceo/breeds/spaniel-japanese/n02085782_1143.jpg", "status": "success" }

You can read more about the API in their documentation here.

🦴 HTML

The original code was very basic, it included a header and a button. This project is silly, but it gave me a goal to focus on.

I wanted to keep the layout basic and functional, but improve usability. I thought it would be cool to be able to add as many pictures as you'd like

🦴 CSS / Grid

This was my first time using Grid for a layout. I chose it because I wanted to learn a new skill. I used a template from a tutorial and then tweaked it for my purposes.

You can see an example of how the elements are separated in the screenshot below.

In addition to grid, I custom coded CSS to add a pop of color. I also added easy to read Sans-Serif fonts and some large buttons to add and remove dog images.

🦴 Vanilla JavaScript

The only functionality of the base code ws to add new images using the api call. This meant that images were returned in random sizes. Without any container structure, the results were really messy.

I updated the JavaScript logic to display the images in a fixed width. In addition to that, I added a second function for deleting the images. If I return to this project, I would like to adjust this functionality so that each image is called as part of an array and each array item can be removed.