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.
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.
Those are good tips regarding the (not) edge cases. I also like that extra credit idea; I think building a guessing game like that using React could be a fun new video for the channel; added it to my list.
I am on the first app on your udemy course but can't connect to the database. I get mongdb.connect is not a function and can't get it to work even-though i asked a question on stackoverflow. So I cant continue with the rest of the course.
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.
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.
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
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.
😁 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!
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!.
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.
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'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 :>
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!
**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 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 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.
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..." 😅
will there be a chance we can make a tutorial how to make our own API from scratch & host it? not using the json -server. with a crud functionality. upload pics or maybe vids and fetch them? never seen 1 showing it
how is it possible to create a file withour creating a folder in node.js? He has just index.html without a folder name , does anyone one how to do that?????
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
im having this problem that when I select a breed the first image appears then goes blank for a couple secs and then only the second image appears. I also dont understand how is it looping through the images, don't you need some kind of loop... im a novice at this.
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]); }
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.
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
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!
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.)))
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.
Hey, nice video. Is the .json method in response.json() a native js function or is this a promise thing? Could i call the .json() on other objects or only in conjunction with a promise?
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.
Love the way this man explains things! very understandable. He goes where others do not! Much respect!
now I am working as a software engineer in a well known firm just because of you. Thanks Brad. Follow you blindly. Thanks
thanks you so 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.
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.
Those are good tips regarding the (not) edge cases. I also like that extra credit idea; I think building a guessing game like that using React could be a fun new video for the channel; added it to my list.
I am on the first app on your udemy course but can't connect to the database. I get mongdb.connect is not a function and can't get it to work even-though i asked a question on stackoverflow. So I cant continue with the rest of the course.
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.
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.
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%}
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.
Excellent instructor, speaks every word clearly, concise, straight to the point and simple to understand. I'm hooked with 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.
😁 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!
High quality tutorial - The Goldilocks approach works very well for me!
Hey man i just have one heart and how many times your gonna win it?😅💚ur awesome Bradd
I am sorry. But I am founding hard time to understand this. May be I am novice and that's why. Anyway
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!.
Really great tutorial, perfect for applying all the basics that I've learnt in HTML, CSS and JS. Explained everything clearly, thanks mate.
You are fantastic teacher out there. Thank you for everything 😊
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.
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.
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 !
Feeling confident until he mentions maths. Bye everyone.
Don't give up. You can do it. And if it was easy in the first place, you could not make a dime with it. Good luck!
my math is horrible, but i made insane arc calculations based on distance.. i was like.. "thanks god i can google"
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 :>
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 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
**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!
Thank you, I have an idea for a series for you.
You magically took me from stupid i hate this, to wow now it is clear and simple. Thanks Brad.
This Geezer is the bomb.Thank you kindly Sir, really appreciate your time and work.
you are not a semicolon JS developper ! shame on you !! just joking , awsome tut thank you keep shining :) !
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 really enjoy your videos.
what are you using to make that rectangle to point to a specific part of the screen?
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!
It's such a brilliant video. So easy to understand!! Thank you!!
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.
Awesome Video Man !! understood Concept from you 👍👍👍👍 👍 🏆 🏆 🏆 🏆
"Long video, but I think it should be a fun video" MEOW! Yep YEP fun video first 15 seconds
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..." 😅
Yes! Once again. Best instructor ever! Thank you for your being!!
Excellent tutorial using public APIs. Thanks, Brad
{2022-01-19}
Why do we use: Object.keys().map then join them
why don't we just target the data.map :
${ data.map(breed=> `${breed}` ) }
That data is an object. You have to convert it to an array in order to use map method.
This is exactly what I was looking for, you're awesome!
One gem of a person! We are lucky to have his tutorials! Thank you Brad!
will there be a chance we can make a tutorial how to make our own API from scratch & host it? not using the json -server. with a crud functionality. upload pics or maybe vids and fetch them? never seen 1 showing it
how is it possible to create a file withour creating a folder in node.js? He has just index.html without a folder name , does anyone one how to do that?????
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.
@17:20 Using await keyword consumes the result. I thought it would return promise object but it does not.
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
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
Amazing clarification. Thanks a lot
im having this problem that when I select a breed the first image appears then goes blank for a couple secs and then only the second image appears. I also dont understand how is it looping through the images, don't you need some kind of loop... im a novice at this.
Great drop down animation and design bro...almost looks like the apple theme you know, animations they use in the os
I just wanted to say thank you so much 🙏. It helped me a lot to understand this difficult topic
These timestamps are really helpful
super awesome but actually super complex; Lisa thx
Wow, using template literal inside another template literal
Sure I will share your awesome channel with my friends 😋
i always check your videos if you have new interesting one and this is it.
Sir I purchased your Wordpress Developer Course on Udemy. Great course Sir. No University will teach such courses.
thank you so much , please do as this project about API
very pleased to learn notations of promise and async at the same time. thanks a lot
Great video. Love the way you say "corgi"
thank you man
it's very useful
OMG : THANK YOU
Best ever instructor! Period!
Bro your videos are awesome, thanks a million
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!
for anyone who got confused about background in .slideshow
Just Replace the flex:1 to flex: none;
jan- 2023
and height : 100%;
Just love nothing else
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]);
}
I wish get that level of knowledge
awesome and an amazing video. We Love it
Really great tutorial, thank you
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.
Brilliantly explained. You made the API fetch command very clear in your explanation-thanks!!
great explaination. good job
Great content :) Thank you.
why is your door handle missing
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
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!
After this video, I subscribed. Really helpful to a noob like me. Thanks man
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.)))
Your way of explaining is incredible. I am happy to have found your channel. Hug
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.
♥️♥️♥️♥️♥️You are amazing♥️♥️♥️♥️♥️
I don't understand where "images" is being set to the array of images from the API. Where is that being done?
Nevermind, I used CSS text-transform: capitalize;
Before 50th minute everything was very clear. But after it is difficult to understand.
Brad:
Thank you very much for your incredible and magnificent courses.
Very useful tutorial. And very well explained. Thanks a lot 👍
Your voice is crystal clear
999th like is MINE, hahaha.
The best explaination/ Thank you very much!!!
Great teaching...again! I want to include a pause button beside the breed selection. Can you direct me or show code example?
the best Javascript tutor on TH-cam.Thanks a lot for this clear explanation.
Hey, nice video. Is the .json method in response.json() a native js function or is this a promise thing? Could i call the .json() on other objects or only in conjunction with a promise?
Useful way to populate a select box, nice idea for a fade-in + fade-out slideshow, two thumbs up!
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.
Thank you very much 💖