Dogs, JavaScript & An API 🐶 Fetch, Promises & Async Await

26
Published on June 27, 2022 by

Let’s learn what an API is and build an app that asks you to choose a dog breed and then it displays a slideshow of images for that breed. We’ll accomplish all of this with JavaScript.

0:00 Intro
1:38 Getting Started
3:37 What Is An API?
8:27 Promises
15:12 Async Await
18:43 Build The Select Dropdown
29:14 Load By Breed
35:41 HTML / CSS UI
44:58 Back to JavaScript
1:01:55 Edge Cases
1:05:05 Try / Catch
1:07:59 Outro

CodePen Finished Product https://codepen.io/learnwebcode/pen/LYNWQgg
Playlist for this full series: https://www.youtube.com/playlist?list=PLpcSpRrAaOargYaCNYxZCiFIp9YTqEl-l />The 10 Days of JS Playlist https://www.youtube.com/playlist?list=PLpcSpRrAaOaoIqHQddZOdbRrzr5dJtgSs />GitHub Public APIs https://github.com/public-apis/public-apis

Follow me for updates on new episodes:
Instagram: https://www.instagram.com/javaschiff/
Twitter: https://twitter.com/learnwebcode
Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/
Twitch: https://www.twitch.tv/learnwebcode

Check out my premium courses:
https://www.udemy.com/user/bradschiff/

Category

Add your comment

17 Comments

  • Mohammed Alnoaimi 5 months ago

    I wish there is more than one like feature in youtube .. waiting for more course on Udemy and more projects other than the social media and task apps .. looking for delivery app

  • Prerna Pranav 5 months ago

    great explaination..

  • Prerna Pranav 5 months ago

    great explaination..

  • 2nci el krom malzeme 4 months ago

    dogs javascript and an api video i am try to create wiyh tour code buti couldnot get #333 color in my firefox browser.Ä°s it normal or is it my mistake?????

  • Quietude Cafe 4 months ago

    Hey Brad….nice job on the video…always enjoy them. Got a question that may or may not be on topic for this video but I know you're the guy to ask…I have a question and answer type form that I'm building and wanted to know what would be the best way of formatting the data using HTML for the data returned from the database. So a user selects a question from a dropdown, the data is retrieved from the database from the dropdown selection and data is returned to the page but it needs to be formatted using either <div> or <p> or combo not html tables…if I'm using jquery to return the data how do I format the data before assigning it to an Id ? Thanks for your help.

  • Frank Herbert 4 months ago

    Long but good, thanks

  • Leather Class 4 months ago

    At 28.14 where a list of dog names appears, I only get numbers : 1, 2, 3, 4, etc. I've not been able to work out how to fix this. Can anyone, help? It'd be much appreciated.

  • Christine Pellicane 4 months ago

    About halfway through, everything was fine, then my drop-down menu vanished somehow. Kept on going with the rest of the code, and tried to go back to reinstall the menu, but I never could get it back. Even switched browsers, re-did a bunch, replicated everything line-by-line, and now it's a tangled mess 😫So much for "hey it's about an hour, shouldn't be too bad…" 😅

  • Ten C 3 months ago

    One gem of a person! We are lucky to have his tutorials! Thank you Brad!

  • happy99 3 months ago

    He wont do silly face to attract people to watch like other youtuber .I like he teach

  • Colin Dante 3 months ago

    Thankyou for sharing with us the logic required when working with api's and your approach on stringing it all together. Your tutorials have given me such insight on how to work with template literals and manipulate functions. So very grateful.)))

  • Irin Sajan 3 months ago

    Great content 🙂 Thank you.

  • Winter's midnight moon madness! 2 months ago

    Brilliantly explained. You made the API fetch command very clear in your explanation-thanks!!

  • Vishma Das 2 months ago

    Great drop down animation and design bro…almost looks like the apple theme you know, animations they use in the os

  • Ben Cotta 2 months ago

    Great video. Love the way you say "corgi"

  • Tobias Fuchs 2 months ago

    At the end you said that we can experiment with other APIs to make custom projects. In addition to that, one could also play with this API some more: Create a quiz app where you are shown a dog image and select which of the four answers is the correct breed. This could also be done the other way around: You are given a dog breed name and have to select which of the four images is the correct one. Add a 1-minute counter and score, local highscores (with localStorage), etc.

    Another thing I wanted to point out: Having a collection of only two dog images is not really an edge case. It was in your case because you set the initial index to 2 and incrementing it at the end of the nextSlide function. This could be fixed by setting the initial index to 1 and incrementing at the start of the nextSlide function. The only real edge case is having a single dog (or none, of course). Also, I think you should almost always use ===, !==, etc. instead of ==, != because the latter can result in unwanted bugs.

  • Ilhom Dadadjanov 2 months ago

    Very useful tutorial. And very well explained. Thanks a lot 👍