A web application is a static webpage that fetches a list of dog breeds, displays a random picture of that breed, and creates a unique name, likes, and dislikes.
- Static webpage deployed with GitHub
- Responsive to mobile viewports
- SEO implemented
- Mock design layout from Shay Howe's Stlyes Conference
- Error handling
- Interacts with Dog.CEO API on pageload to populate a dropdown menu which displays 95 different breeds of dog
- Displays an image of the selected breed
- Displays a name and fun facts from a pre-generated list
- Add a "generate random breed" button.
Add better legibility to generated Facts & HobbiesFrom the prior list of optimizations, I completed one. I did add a few changes which enhances accessibility with screen readers, increases performance with pageload, and a more modern layout with updated component design.
- HTML: Drop down menu with select tag & option tags
- JavaScript: Fetching from API, createElement method, and Fisher Yates Shuffle
- Git: Version control of a project start to finish
- Optimizations: Adding an
asyncattribute to the<script>tag allows the script to load with the page rendering, improving page load time. Preloading my stylesheets and fonts download resources asap and helps with performance.
The Dog CEO API is easy to work with and great for beginner projects. It requires no authentication and a simple fetch is enough to start interacting with it.