For those who have problems with the background. You just have to add the following at the top of the CSS file: html, body { height: 100%; } That should fix it.
Thanks so much for this tutorial. Added to my knowledge of Fetch API. Surprisingly though my biggest take away was learning "Separation of concerns" or "Single Responsibility Principle" part of the SOLID code writing principles. The current project i'm working on now has 4 functions. Old me would have probably left it all in 1 function. Lols.
Thank you for explaining things so clearly. I don't have a lot of experience with front end development and am trying to learn some basic concepts and this helped a lot.
I have been learning from you for as long as I can remember. You never cease to amaze me and captivate my attention in ways that allow me to learn things fully. You truly changed my life for the better with the way you bring knowledge over and my family and I will forever be grateful for the opportunities your teaching has allowed me to jump on.
One of the best comment! I hope you are in a better position in the field of Web Development by now. Any progress mate? I would love to hear your update! Kind regards from France!
Thank you so very much! Finally I got this right! You really know how to explain just enough and not too little, not too much.. thats a gift! again.. thank you!
I've never seen such an amazing teaching style like.Everything is cristal clear ! Keep up your awesome efforts and I wanna let you know that I've enrolled in one of your courses on udemy about wordpress, it was a tremendous help to me and really really great and rich content! thanks to you a lot braad! you're the best :>
Great little Project. Super fun, just what i need. Iam done studying, i think what i need is to build many small little projects to cement the knowledge. Thanks again
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.)))
**Dabs sweat from brow** Fwoof! For me, that was like running a marathon and constantly having things going wrong, like: "This is fine. This is Fine. OMG I'M ON FIRE! STOP, DROP and ROLL!" **Gets back up to run more, trips, falls flat on face, gets back up to dust self off and keep running** "Oh No... WHAT'S THAT?! NOT THE BEES!" -- I WAS eventually successful in creating the app the way you intended it to work, only it probably took me about 2 1/2 hrs. Thank you for the "Guided Running Tour of Peril" through this tutorial. Keep up the good work!
I watched your video first time and I am already fallen in love ... Thanks a lot man for such a great knowledge . I am going to watch your 10days JS too.
Thanks for all the awesome videos that you produce Cody. You have a natural gift for teaching! Question though: Is it still good practice to use inline JS on the select tab?
I did it like this: function createBreedList(breedList){ breed.innerHTML = ` Choose a Dog Breed ${Object.keys(breedList).map(breed => `${breed}`).join('')} ` let options = document.querySelector('select'); options.addEventListener('click', (e) => { let target = e.target if(target.matches('option')){ if(target.innerText !== "Choose a Dog Breed" ){ getBreedImage(target.innerText) } } }); } async function getBreedImage(breedName){ image.src = "" const response = await fetch(`dog.ceo/api/breed/${breedName}/images`) const data = await response.json() image.src = data.message[0] console.log(data.message[0]); }
Brad, Simply great! Perfectly covered a full cycle of fetching a public APi and displaying it on HTML.. Keep up the great videos, I have subscribed to your channel!
Hey Brad, love your courses, just a note - when trying to 'code along' with the screen, it's a bit difficult (I always find this difficult w/ tutorials, but you're such a great teacher, I'm sure you'll understand this consideration) when what you're typing is in the bottom half of the video window, because I basically have nowhere I can put my code editor to code alongside. It becomes a never-ending cycle of stop, start, scroll. Many thanks for this video, though, this is literally the first time I've been able to successfully understand how to use a public API to provide visual data on your site. Your courses are what's allowing me to steer towards more work in coding.
Thanks for the kind words! I'm glad the videos are helpful. That's a good point about the screen positioning, I'll try to remember when filming. If you haven't already, you might try having TH-cam and your Text Editor windows side by side, each taking up 50% of the screen's horizontal space, and 100% of vertical space.
Thanks Brad. Easy Peasy learning with you! Bought your uDemy js course and enjoying the complex app build. Got 99% of all your coding. Looking forward to the future past your complex app build. I am hoping to do a bit of part time freelance when I 'graduate' -) thanks!
Thank you so much Brad, I've to testimony, I've learned a lot from you, and I love the way you explain anything you give in your channel, With you all the best :)
Thanks so much for that tutorial. It was fantastic. I understand async and await much better now. I still don't understand promises but it looks like I don't need to.
26.36 part I realized something when i was trying to do same to spotify api (trying to get song names into option). That, using Object.keys will only add the 1 2 3 4 5...etc. So i think Object.Keys is good when dealing with an object? but when it comes to an array of objects not so ideal in my opinion. [{" "}] - array of object {" "} - object easy fix for this is = ${x.map(function (y){ return `${y.something}` hope this helps people :)
Thanks for sharing that! Absolutely, 99% of the time an array + map is what I'd use here, it just so happened the way the Dog API formatted their data it didn't give us an array.
I cannot make the background visible on slideshow. No color, no image. In any browser. Not even with Brad's code from codepen. Does anybody have an idea why? I would love to finish this cool project! Thanks Brad!
@@gracezhu4270 I figured out the problem, I don’t know why exactly but in css change “body” tag to “html,body” and added “height:100%; width:100%” to it. I hope this solves it for you
Hi Brad, I use Linux and I could run your app without problems, after changing the body css with the following line: html, body { height: 100%; margin: 0; font-family: sans-serif}. Source: Understandig Flexbox by Ohans Emmanuel. Awesome Bootcamp!.
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 or 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.
Nice Brad, Thank you for the great training. I have just an issue with styling the div with a class of slideshow. I don't know why the backgroundColor will not apply while having the div with a class of slideshow empty. I have to put something on it to have the backgroundColor applied?
@@GeorgeaBrooks Yes I couldn't fix that. Even I started from scratch and got the same issue. What I found is something related to flex when I remove display flex and flex direction from the class of app I can see the background color, not at the class of slideshow.
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
Strugling on a STOP and CONTINUE Button Handler for the Slideshow. How to retain the State when stopping in order to enable CONTINUE? Would be a nice Bonus to this super tutorial.
Your're the goat bro. I'm a big fan. Is it possible to make some videos on JS frameworks such as Angu;lar. Or maybe on databases such as FIREBASE or MonjgoDB.
Unable to complete dog app bc of "cors" problem within fetch. Unable to solve cors issue after doing lookups on subject. Regardless, Brad you should consider a teaching career due to the outstanding methodology you have developed! Thanks for your awesome tutorials!
😁 and i am back! Definitely i could not understand everyyything covered in this video... But i did get the basic idea of all of it soooooooo buddy thaaaankyouuu! This time i am leaving a lemon for you 🍋. Vitamin c would help you to stay fit in this pandemic ♥️🙃tata!
PROMISES made more sense to me than 'Async Await'. The syntax is easier to follow and understand. I believe 'Async Await' is nothing but a syntactic sugar.
For those who have problems with the background. You just have to add the following at the top of the CSS file:
html, body {
height: 100%;
}
That should fix it.
Love the way this man explains things! very understandable. He goes where others do not! Much respect!
Best ever instructor! Period!
the best Javascript tutor on TH-cam.Thanks a lot for this clear explanation.
Thanks so much for this tutorial. Added to my knowledge of Fetch API.
Surprisingly though my biggest take away was learning "Separation of concerns" or "Single Responsibility Principle" part of the SOLID code writing principles.
The current project i'm working on now has 4 functions. Old me would have probably left it all in 1 function. Lols.
I recently discovered your channel from your backend video. Loving your work buddy! ❤️
❤️ Thank you so much! Glad the backend video showed up in the algorithm for you and that it was helpful!
Excellent instructor, speaks every word clearly, concise, straight to the point and simple to understand. I'm hooked with your videos.
omg , before seeing your video i've seen others (with API) from decent tutorials pages , but your way in teaching is just NEXT Level ;) thank you !
Brilliantly explained. You made the API fetch command very clear in your explanation-thanks!!
One gem of a person! We are lucky to have his tutorials! Thank you Brad!
Useful way to populate a select box, nice idea for a fade-in + fade-out slideshow, two thumbs up!
Get this human a medal!
This Geezer is the bomb.Thank you kindly Sir, really appreciate your time and work.
I just found you, you are so calm and explain enough without trying to go over it to fast. Very great Video. Good Job Man Thank You Very Much
Thank you for explaining things so clearly. I don't have a lot of experience with front end development and am trying to learn some basic concepts and this helped a lot.
Love your teaching style. I’m in the Goldilocks phase and you are right, there are not many tutorials for this level. Thanks for your help!
I have been learning from you for as long as I can remember. You never cease to amaze me and captivate my attention in ways that allow me to learn things fully.
You truly changed my life for the better with the way you bring knowledge over and my family and I will forever be grateful for the opportunities your teaching has allowed me to jump on.
One of the best comment! I hope you are in a better position in the field of Web Development by now. Any progress mate? I would love to hear your update! Kind regards from France!
I can't imagine a better introduction to fetch and Ajax. I watched it twice and follow the code throughout. I highly recommend this.
Thank you so very much! Finally I got this right! You really know how to explain just enough and not too little, not too much.. thats a gift! again.. thank you!
I've never seen such an amazing teaching style like.Everything is cristal clear ! Keep up your awesome efforts and I wanna let you know that I've enrolled in one of your courses on udemy about wordpress, it was a tremendous help to me and really really great and rich content! thanks to you a lot braad! you're the best :>
High quality tutorial - The Goldilocks approach works very well for me!
Really great tutorial, perfect for applying all the basics that I've learnt in HTML, CSS and JS. Explained everything clearly, thanks mate.
You magically took me from stupid i hate this, to wow now it is clear and simple. Thanks Brad.
very pleased to learn notations of promise and async at the same time. thanks a lot
You are fantastic teacher out there. Thank you for everything 😊
Great little Project. Super fun, just what i need. Iam done studying, i think what i need is to build many small little projects to cement the knowledge. Thanks again
Yes! Once again. Best instructor ever! Thank you for your being!!
Simply one of the best videos out there! Looking forward to learn more from the other videos 👍
I just wanted to say thank you so much 🙏. It helped me a lot to understand this difficult topic
Your voice is crystal clear
Brad:
Thank you very much for your incredible and magnificent courses.
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.)))
**Dabs sweat from brow** Fwoof! For me, that was like running a marathon and constantly having things going wrong, like: "This is fine. This is Fine. OMG I'M ON FIRE! STOP, DROP and ROLL!" **Gets back up to run more, trips, falls flat on face, gets back up to dust self off and keep running** "Oh No... WHAT'S THAT?! NOT THE BEES!" -- I WAS eventually successful in creating the app the way you intended it to work, only it probably took me about 2 1/2 hrs. Thank you for the "Guided Running Tour of Peril" through this tutorial. Keep up the good work!
This video is a total game changer for me.
I owe you a lot man. Keep going! You have legendary teaching skiws!
Damn a 1 hour long video and that too by Brad Schiff...woah! Needless to say it must be packed with tons of knowledge! Lets watch !
I watched your video first time and I am already fallen in love ... Thanks a lot man for such a great knowledge . I am going to watch your 10days JS too.
I Just came across this course... and i love your teaching man... thanks for the lesson.. I Subscribed and shared
Thank you so much 🙏 I'm glad the videos are helpful!
Sir I purchased your Wordpress Developer Course on Udemy. Great course Sir. No University will teach such courses.
Thanks a ton! this was the easiest explanation to understand all things asynchronous in js.
These timestamps are really helpful
Thanks for all the awesome videos that you produce Cody. You have a natural gift for teaching! Question though: Is it still good practice to use inline JS on the select tab?
I did it like this:
function createBreedList(breedList){
breed.innerHTML = `
Choose a Dog Breed
${Object.keys(breedList).map(breed => `${breed}`).join('')}
`
let options = document.querySelector('select');
options.addEventListener('click', (e) => {
let target = e.target
if(target.matches('option')){
if(target.innerText !== "Choose a Dog Breed" ){
getBreedImage(target.innerText)
}
}
});
}
async function getBreedImage(breedName){
image.src = ""
const response = await fetch(`dog.ceo/api/breed/${breedName}/images`)
const data = await response.json()
image.src = data.message[0]
console.log(data.message[0]);
}
It's such a brilliant video. So easy to understand!! Thank you!!
This man Made my career. Thanks Brad
now I am working as a software engineer in a well known firm just because of you. Thanks Brad. Follow you blindly. Thanks
Great video. Love the way you say "corgi"
I really love your style of teaching. Great job!!!
This is exactly what I was looking for, you're awesome!
Brad, Simply great! Perfectly covered a full cycle of fetching a public APi and displaying it on HTML.. Keep up the great videos, I have subscribed to your channel!
Hey Brad, love your courses, just a note - when trying to 'code along' with the screen, it's a bit difficult (I always find this difficult w/ tutorials, but you're such a great teacher, I'm sure you'll understand this consideration) when what you're typing is in the bottom half of the video window, because I basically have nowhere I can put my code editor to code alongside. It becomes a never-ending cycle of stop, start, scroll. Many thanks for this video, though, this is literally the first time I've been able to successfully understand how to use a public API to provide visual data on your site. Your courses are what's allowing me to steer towards more work in coding.
Thanks for the kind words! I'm glad the videos are helpful. That's a good point about the screen positioning, I'll try to remember when filming. If you haven't already, you might try having TH-cam and your Text Editor windows side by side, each taking up 50% of the screen's horizontal space, and 100% of vertical space.
@17:20 Using await keyword consumes the result. I thought it would return promise object but it does not.
Very useful tutorial. And very well explained. Thanks a lot 👍
Your way of explaining is incredible. I am happy to have found your channel. Hug
Thanks Brad. Easy Peasy learning with you! Bought your uDemy js course and enjoying the complex app build. Got 99% of all your coding. Looking forward to the future past your complex app build. I am hoping to do a bit of part time freelance when I 'graduate' -) thanks!
Great drop down animation and design bro...almost looks like the apple theme you know, animations they use in the os
After this video, I subscribed. Really helpful to a noob like me. Thanks man
Amazing clarification. Thanks a lot
Thank you so much Brad, I've to testimony, I've learned a lot from you, and I love the way you explain anything you give in your channel, With you all the best :)
i always check your videos if you have new interesting one and this is it.
You are an amazing teacher!
Awesome Video Man !! understood Concept from you 👍👍👍👍 👍 🏆 🏆 🏆 🏆
Thanks so much for that tutorial. It was fantastic. I understand async and await much better now. I still don't understand promises but it looks like I don't need to.
teaching level: 9999!!
I have a problem with flex: 1 on the slide, it aint growing even though I set display flex on the parent container.
yeah I am having the same issue!! Did you manage to fix that?
@@ozanefetopcu6428 in css, try html,body { height: 100%}
26.36 part
I realized something when i was trying to do same to spotify api (trying to get song names into option). That, using Object.keys will only add the 1 2 3 4 5...etc. So i think Object.Keys is good when dealing with an object? but when it comes to an array of objects not so ideal in my opinion.
[{" "}] - array of object
{" "} - object
easy fix for this is =
${x.map(function (y){
return `${y.something}`
hope this helps people :)
Thanks for sharing that! Absolutely, 99% of the time an array + map is what I'd use here, it just so happened the way the Dog API formatted their data it didn't give us an array.
I cannot make the background visible on slideshow. No color, no image. In any browser. Not even with Brad's code from codepen. Does anybody have an idea why? I would love to finish this cool project! Thanks Brad!
Hey it seems like nobody answered you did you find what was causing the problem? I am having the same issue.
would you care to share if somebody helped u or u resolved on ur own, how u dealt with it?
@@gracezhu4270 I figured out the problem, I don’t know why exactly but in css change “body” tag to “html,body” and added “height:100%; width:100%” to it. I hope this solves it for you
@@ozanefetopcu6428 you saved my life man, thank you!
@@thomasturtle23 ahaha yeah I know that feeling I was almost going crazy.
Hi Brad, I use Linux and I could run your app without problems, after changing the body css with the following line: html, body { height: 100%; margin: 0; font-family: sans-serif}. Source: Understandig Flexbox by Ohans Emmanuel. Awesome Bootcamp!.
Excellent tutorial using public APIs. Thanks, Brad
{2022-01-19}
Goldilocks all the way - I love these tutorials. Thanks!
This was great. Thank you!
Sure I will share your awesome channel with my friends 😋
Thank u very much Brad.
Your tutorial is amazing.
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 or 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.
Great teaching...again! I want to include a pause button beside the breed selection. Can you direct me or show code example?
Nice Brad, Thank you for the great training. I have just an issue with styling the div with a class of slideshow. I don't know why the backgroundColor will not apply while having the div with a class of slideshow empty. I have to put something on it to have the backgroundColor applied?
I'm also having this issue!!
@@GeorgeaBrooks Yes I couldn't fix that. Even I started from scratch and got the same issue. What I found is something related to flex when I remove display flex and flex direction from the class of app I can see the background color, not at the class of slideshow.
@@GeorgeaBrooks By the way Thank you, George
@@farzinfaezirazi361 I think I understand. Gonna try it now. Thank you.
no, I can't make that work either. Gonna do some deep googling
Your are making very useful tutorials. Thank you! :)
You are very very clear thanks for you video !!!!
awesome and an amazing video. We Love it
super awesome but actually super complex; Lisa thx
Really great tutorial, thank you
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
The best explaination/ Thank you very much!!!
Strugling on a STOP and CONTINUE Button Handler for the Slideshow. How to retain the State when stopping in order to enable CONTINUE? Would be a nice Bonus to this super tutorial.
Bro your videos are awesome, thanks a million
This is the perfect Goldilocks zone of difficulty I was going for. Thanks dude.
Your're the goat bro. I'm a big fan. Is it possible to make some videos on JS frameworks such as Angu;lar. Or maybe on databases such as FIREBASE or MonjgoDB.
Unable to complete dog app bc of "cors" problem within fetch. Unable to solve cors issue after doing lookups on subject. Regardless, Brad you should consider a teaching career due to the outstanding methodology you have developed! Thanks for your awesome tutorials!
😁 and i am back! Definitely i could not understand everyyything covered in this video... But i did get the basic idea of all of it soooooooo buddy thaaaankyouuu! This time i am leaving a lemon for you 🍋. Vitamin c would help you to stay fit in this pandemic ♥️🙃tata!
Thank you, I have an idea for a series for you.
I really enjoy your videos.
PROMISES made more sense to me than 'Async Await'. The syntax is easier to follow and understand. I believe 'Async Await' is nothing but a syntactic sugar.
Great explanations, thanks a lot!
Great, this is a very helpful lesson! thanks a lot for your great effort.
what are you using to make that rectangle to point to a specific part of the screen?
great explaination. good job
Great video, thank you for sharing, Cheers
Love your courses thank you!
thank you man
it's very useful
Long but good, thanks
Great video. Can you make a video about "real" async programming in Javascript/TypeScript?
Great content :) Thank you.