Live-code with Us: Call an API | JavaScript, CSS, HTML

wowzer what a day what a week actually is it oh yeah it's friday is the mic on i don't know yes well it says it's on let us know if you can hear us yeah please oh hello to puff hey yeah victation free says hi dear friend says hello i'm zaru at juan carlos and kate says excited for today i've been really looking forward to these live streams oh wow me too and mark andre says nursing hello well yeah it's been an event for a week yeah yeah pretty good somebody asked us a few weeks ago are you going to do anything for oktoberfest you being screamer we're like no not really turns out we are um yes yeah we decided the last minute uh that we would in fact be doing what you call it not javascript oktoberfest october mass that thing yeah yes so it's hardcover first hacktoberfest is the first day today yeah it is so here we are and what we're doing for it is um yeah the old weekly web dev challenge submissions page is our repo that you can contribute to yeah and we've had lots of pull requests already oh wow really yeah nice yeah so i think three of them were previously when dave helped me yeah um but there's also been yeah well oh my word that's amazing i know wow so what will happen is um i didn't realize it would be this popular so i opened about seven or eight um issues at the same time that was a mistake because it's quite hard to manage so in future i'll only have about three open um but then i will yeah as people finish them i will add more issues and you can raise your own as well yes nice so it is very cool so we will be doing this throughout the whole of october oh my god there's a tiger yes that brings me nicely to my next point yes we do a thing here if you are new put a bunny in the chat some people already mentioned their new and if you've been before hit me with that tiger so we can see who's me and who's been before oh yes nobody's hit i do appreciate that me saying oh look there's a tiger to new people makes very little sense yes but now they all know hello to everyone else he said hello hello leon michael and pumpkin where is pumpkin uh where is pumpkin and he is snoozing he's our cat dear yes he's snoozing tom chance says my fave coding out of the week tom chase hello hello yeah tom chan made this footage that was his um here yeah he just made another one but i need to merge it yes nice amazing how do you manage to like uh like stay on top of all of this yeah well it's only day one there's a lot of days in october and you had a lot of uh club there's a lot of pr's already yeah yeah well all right look at all these bunnies and tigers you're gonna have to like create a list of all the contributors somewhere in the photo yes i'm going to raise that as an issue actually i'll do intend to say welcome to the bunnies welcome back to the tigers wow which api what we'll be using in azer is another contributor okay okay i um uh yes going to focus now on what we're actually doing yeah what are we doing we are calling an api oh wow how convenient is it for what well like to pull to pull the list of contributors you would need to call github api would you yeah okay well that's useful so there you go today you will learn how to do it yeah great well not you have api i reckon we're going to be calling somebody but you know it will give it'll give you the same it's all the same you know once you've called one api you've called them all yeah you've called them all um it is the foodish api foodish british yeah interesting um i picked this one because it doesn't need a key or anything so it's less comfortable okay okay you want to do something with this there's the link all right yeah nice api yeah very nice so this is what i mocked up many moons ago when i originally made this random pizza generator rather than pizza generic yeah and if you click on pizza i mean i don't it just grabs a random pizza rather than creates a random pizza creates as in it lands on your desk well no creating creates a recipe for some kind of monstrous frankenstein pizza that's got pineapples in it michael you're overthinking this all it does is it collects pictures of pizzas okay that's all it does okay it just it just shows you a picture of a pizza okay yeah get it we can do whatever we want with it so where's your list of normal topics of like you know things story points that you like to well yeah my plan where's your plan uh do i need to do this yeah so here's my plan call an api and run the pic they should be two separate points okay i was going to make a plan but then had some pull requests to do humble brag so that's as far as i got with that yes pumpkins always absent during the livestream he was there at yesterday's community meetup yeah yeah he was yeah and he was yesterday in my uh works um all hands meeting as well he for some reason he started enjoying meetings yeah yeah corporate what can i say yeah so what do you want to do uh well i mean to render a pic we need to call an api so let's do that then yeah let's do that well firstly yeah let's oh here he is oh hello okay so i'm gonna save let's see my scrim open a new page let's say we won't lose our work then i'm going to get rid of my noise running away get rid of my h1 look he's like oh no there's a stream going on i know i know i don't want to do it i don't want to do it oh come on pumpkin here he is yes ah nice it looks like today's project is delicious yes see what you did there live okay okay so um i hope you remember how to call an api yeah you do okay good because i don't yeah i'll show you i'll show you a little trick that you do not have to remember how to call it at all oh yeah yeah well yeah because at the moment we have nothing oh yeah well at least let's first show the vlog oh there you guys he just showed up and then like left here's our api api available here okay and uh so what what do you do oh you just literally call that and that's it and it gives you it gives you an image link yeah so if you refresh the page what happens then get a different one you get a different one but how do you know it's a pizza well you can crumbs you can choose from these options or let read documentation first yes good idea i like documentation yes so you can say random picture from food category and you can say so over there uh you can well i'm pointed to it yeah so you can say api images pizza and that should do it so if you go to that url link and we don't have to do pizza but yeah no if you guys say that you're relevant where it says ap api instead of api you just say images images let's find food smash pizza okay maybe do they oh okay sorry no you do need a oh yeah you don't need it oh that's the api slash food flash pizza i don't need images okay i don't need food i deleted it right didn't you need images but don't need food oh crumbs okay we have a pizza okay there you go so that's how you get a pizza cool read the docs how to use it okay awesome uh so in that case let's just create like a little container for the image and um that sounds good yeah i'll just create the container for the image happy weekend jose all the starter files anywhere uh yeah there's not much in them but you can get them whoa that's not good okay and all that uh this is what i wanted you fix that afterwards you can get them here those are much in it because we're basically building it from scratch oh i cut it's always around when i'm coding yeah it doesn't help me with editing youtube vids how about yours huh well he helps with me i path uh yes so we want a container yes here yes someone like a div yeah or an image um i reckon an image in it well we will update what do you have in mind well just have like some kind of div that's got like a little border or something you know all right okay yeah a class of containers i'll give it an id as well i don't know if we'll need it but yeah um okay so just add some kind of shadows to it you know oh yeah container i spelt it wrong height um [Music] 400 pixels i guess width is also 400 color color no border i reckon canal i know color color water tail i don't think i saved it well that's odd oh will i ever not make this mistake background color okay okay so that's that and now i will put it in the middle with the old display flex flex direction actually no i don't need that um justify content center so it's four isn't it it's always four oh you don't always need the fourth one for line content oh boy we do need um height 100 crunch viewport height hey why isn't that playing ball huh align items ah yes thank you fine yes okay some questions is that some kind of code name for this show oh tonight wwdc oh no that's not i don't know okay that can be yeah it was like you can make a web challenge but that's not really a weekly audio no i don't know it's like us operation code with us dev code hi from uganda hoping to learn to use an api before today and yes oh i hope so oh i sent you the div oh yeah will you guys post it after the live oh yeah yeah we can do i'll put it in the comments okay so we have this oh yes and what i'm going to do is css shadow um oh this is one i like to use you can just click these and copy which ones yeah no go for this one um i'm here that's nice isn't it just to show the difference ah i mean well it's meant to be subtle yeah kind of i guess okay so do we need anything else uh i think that's it yeah i think uh i think we might need a button to render it but oh like fetch your random image yeah i mean okay let's add the button and we'll wire it up a little bit later okay um outside of a container i think yes yeah awesome touch oh i didn't age my um flex direction great [Music] i should take a quick learner off my cv why didn't that work i probably need margin oh yeah i do want margin yeah and then i also want padding one m top and bottom two and left and right um i'm gonna fix this horrendous um default styling five pixels hello [Music] maybe font size apple and then yikes color white okay okay yeah font size i don't know what should we have 30 okay right 20. and i'll also put this shadow on there and don't forget the old um morning collar yes and focus how's the pointer which isn't a default even though isn't it no when would you not want that but anyway here it is for commenting a whole life on a mac it's uh command forward slash why is that not working uh oh it is wrong the one with the question mark on the uk keyboard well i know that that's going to be completely pointless to all of you next to a full stop anyway yeah it's the one that goes like right like that i guess what i mean for us it's like there's only two i'm sure yeah basically the one that tilts from bottom left to top right code name make us want pizza and beer by the end oh no we had pizza and beer last week and that was good did we well i had beer you didn't but yeah pizza yeah that pizza yeah correct pizza oh it was so good oh look why have you not added the code for the body in the html body sector uh because you don't want it to apply to html as well while i apply it to body i think it's that that works yeah i'm not sure what would happen if you also put all this display flex and everything on the it a html yeah it looks the same but i'm not convinced i definitely only want it on the body so yes well here's a cool name buggy college yes that's what we'll call ourselves this channel is one of the most underrated on youtube i just love you guys thank you very much plus that yes yes thank you thank you you too yeah and control for windows mods yeah yeah i suppose we should um kind of say for all the people who are new and maybe don't know we are from skarimba.com yes here is scribbler uh it's a place where you can come to learn to code yes we have plenty oh yeah i mean yeah there you go groups all of these courses that you can do fully interactive because so yes okay continuing on and this is we're using scrimba here to do this okay so now what to do remember you rock well thank you pastor yeah wow as we almost took the table yeah yeah nice cool okay so now uh we can probably fetch yeah facial image okay so do you remember how to write a fetch request no no i've got a tip okay yeah open vs code now what uh what it's already difficult you're writing well i mean most most of whom is watching this is going to be writing in ds code anyway i guess cool i learned what you need a new folder no you don't need a new folder just um [Music] just open a new javascript file let's move this over here yeah just hit command then and select language language.js okay now if you click on the extensions yep and type rest client rest client yes two words oh you have it installed with top one do i yeah you already have it installed [Music] you can just close this yeah ah maybe yeah so now what you want to do is you basically what was that api oh no you've closed the api that we were calling anyway all right come on shift tab come on shift time all right sorry i think i remember let's go back to the docs i guess where are the dogs again uh read the organization add foodish yeah let's go and read the talks so at the doors they tell us that if you want to do this you basically say this it says you hear roots and it says get api images food so what i'm gonna do is i'm just gonna copy that paste this into here actually sorry that wasn't meant to be the file will be http file there you go like that what shortcut did you use to change the file uh over here at the bottom at the bottom of the screen you've got the type of the file select language mode and then you can basically switch the type of the file between that so uh the well i would imagine that there you go here is the api available at so you need the whole thing from start to end but obviously it needs to be just one api so there you go images and then earlier we've decided they should be a pizza there you go pizza i'm just gonna say that this will be um oops i actually don't remember the syntax so there we go get ah there we are so the these snippets are provided by rest client uh so if you want to make a get http request you just type get and it will give you a hint onto what to do okay so now you have this is called uh by http reverse raw so this is like browser underneath the hood does this string for you what you can do is now you can say send request and it will respond so you can test your http call and now this is your http your response so we know that it works but now we need to convert this into javascript okay so what you do is you select all of everything you click control or command shift p and then you type rest client generate code snippet and then it basically gives you all sorts of different languages that you want you can generate these code snippets in any language you want but we want javascript and now you can also select jquery fetch xml or axios but we're just going to use fetch because it's built in the browser but if you're using node in on the back end then you need to install some kind of fishing library fish doesn't work on node oh yeah oh my neighbor's got his mower out again for the third time this week oh yeah actually it's his leaf blower it was actually quite funny because the other day he was mowing something and then periodically he was yelling oh my god that really is fighting lawn mowing i know like it's either really exciting or does something absolutely healers you know oh man either way i don't know what happened someone i know i won't say who when they were mowing the lawn mowed over the cable of the mower one i know exactly what you mean anyway back to this anyway so yeah you click on that and that will give you javascript snippets that you can run to create to do your face request honestly i'm not sure all this is easier than just kind of copying from stack overflow well yeah but if you need like http headers authorization you know then it will become it'll become more cost effective got it so now you have seen this rest client yeah yeah anyway so there you go you can just paste it in yeah and now uh we can just say can't what is that [Music] well const pizza i guess equals fetch yeah um then this is using promises but i mean let's let's see if it works right so we had something's happening yeah we had some response uh so now we have that response and let's cancel out the image in the response what was the image oh what did you actually get from this one image yeah you do oh actually no sorry uh i think you need to convert your response to jason probably [Music] yeah oh a really good microphone well yeah yeah microphoning the wrong things um tom chan says i missed how do you get to the page where you did the get and dev code says kindly repeat again set uh what's the name of this vs code extension yeah so this is inside yeah inside vs code you can command or control n is new file and then you can select a language which is http so this is basically you're going to say that it's an http file where you write raw call and inside there you can then get rest client extension and from the address guide extension you basically just write your call and then you can select crunch of p uh generate code snippet and literally any yeah any language you want you want to go sure let's do go right let's do javascript look at that it's actually i'm pushing you the whole code how awesome is that i think it's pretty awesome that's good yeah anyway so we can probably do to do um before that is probably a little bit unnecessary because the default method oops the default method is get we don't really need a user agent header so we can just remove that so this object is unnecessary but also this will be this is promise based i do prefer my um i think weight so we can probably just await fetch sounds good yeah so this is like um request await fetch and then we can just say cons json right equals weight request jason pom-pom and then we can just console.log jason i hope oops i actually need to remove this weight outside of my sync function uh okay uh so to well yeah this is kind of the problem that a lot of people face when they're doing the sync await inside of your just raw javascript html file so the trick here is to i think it's called five or something i think it's no i oh this immediately invokes functional expression yeah so i'm just gonna copy this like that so you can say basically it creates this little block and calls it straight away the name we're going to paste this code into it right but this needs to be a sync over here so we can actually use it so we can use a weight inside um oh sorry [Music] if you have a okay not 18 hey there we go image we have we have the image oh wow yes and now i have json image there you go so we have our adjacent image so now what is that actually um what's what um so if you run this then yeah that pizza 59 pizza 63. so it's a 52. yeah yeah you get a different point nice break more i don't realize you could test the response in code do you ever use postman um i used to use postman but not anymore because um yeah most of i don't use most of the features of postman i normally just make an http call and rest client does that so i don't need to switch the apps i just do it in some vs code yeah for most cases but i guess if you're doing some something that you can't do with vs code then yeah use postman yeah that's well let's wrap it in a function give it async nice one yeah you're sitting here hobby is coding yes ironic watching flash these days that's all that means well maybe one of the websites had flash really i don't know crumbs okay so now we need to render this bad boy don't we yeah uh you can continue writing code inside that yeah okay so we're gonna do how we're gonna do this so this i mean that that's just so we know that the is this actually just ah yeah right api it works how do we actually render the image though now we have basically done that this is we have proved that it gets an image on the page load right but we don't actually need to load i mean to be fair we do probably want i think we do want to load one on page like and then that button i will change it to switch pizza or something so you get a new one yeah so in that case what we can do is um okay michael we've got to pick up the pace of it yeah yeah let's just render this thing okay okay then let's just uh [Music] image well it's probably not images container equals document dot dot get element by d do we want to grab that every single time wouldn't that be better outside of the function yes but michael we've got to pick up the face make it work and then refactor later because otherwise it's going to be let's pick up the pace whoa anyway sorry uh start for that for that i'll let the console log if we got the image console.log image no don't know um can you click on index html have a look what's what's in there yeah but there isn't anything called image oh it's a container yeah sorry we need an image in it yeah yeah look like this okay sauce equals currently empty oh well that's going to be an issue actually how are we going to do the alts right we'll cross that bridge later yeah okay i'll think about that and i might be creating all of it but all right okay see that then so this this there's got to be container yeah container yeah and that should be contained and so come to log container that should work i'm not sure this is yeah okay that way so now what we're going to do is do we really want to create the image every single time though wouldn't it be better we will refactor it later it's okay to create it every single time for now okay yeah let's go for it okay map the data use component fn to display image yeah so then um once we got the json yeah we can say const uh pizza equals a weight with no we we're gonna just go jason dot image right so if we console or pizza whoops keyboard type that should give us just the url that's what we need okay awesome so now what we're gonna do is we're gonna say const image equals create uh what's that like document create element i think it's called document. create there's the one called create element element oh there we go yeah uh image so i'll create your like image html just to prove it that's console log it again there you go see it's a image like a tag okay so now we can say um so now we can say that image dot um was it source yeah sauce equals pizza cool now we can say they created that tag image source yeah let's do it again image source and that gives us url how do i wait what say that's made yeah so that created your html that's pizza jason dot image yeah okay let's let me just rename this to pizza image so it's a little bit clearer pizza image yeah and now we can basically say image dot out equals i mean we don't get out from the api so the only thing we can do is yeah pizza it's a pizza random pizza yeah it kind of sucks but random pizza image yeah i mean um because it's kind of like a toy api normal api when you fit like for example wordpress and stuff when you fetch images from cms normally you have out tags provided like you do have some way to tell what's an alternative for that image so you just render that uh but now you know that's what we get anyway and uh so now you can see that it's both source and out is already on it so what we're going to do is we're just going to say container dots and child and you just say image why whoa uh i think some of the styling we need to well we haven't styled the image so it's just bringing in the image at the full size that it actually is ah okay so probably what we want to do is also now i reckon we should do it in the css yeah yeah but you want to add class list add and you want to add that image right yeah we could just do it with the tag but well you can do it by the tag yeah does it really but normally you on a site you would have more than one image tag says yeah quite quick to do that so in that case uh yeah okay so we can now style the image yeah okay off to you because what to do with it then uh yeah just height how do you just switch it into the container 500 pixels that's not working yeah but the container is okay the container is 400 okay well then we need to make it smaller do you have like inherent inherent size of a container or something size and hear it or something i don't know i don't know if you can inherit the height but i don't think we'd want that anyway would we i think now what we can do is have these oh i know i know i know i know what is it ah it's like height look it's good oh is it i think it's good we can do a bit of refactoring because um body and oops i don't know a good one that contains are interesting body and container now both have um display flex yeah and so that doesn't need to be there and flex direction column and yeah these so now these can be removed from here that's nice isn't it uh you also have flake direction corn in body and both it's not in container though oh oh yeah it is i don't think it needs it but i mean it can stay there kind of yeah cool also i think we should have our border radius five pixels okay oh someone look at that someone said uh you have actually that's in the wrong place oops that needs to be on container and image i mean is that pizza what kind of pizza is that it's a white pizza i ordered one of those by accident once it was disappointing i know it's like conserved tomatoes that you've got a bishop came up with that i don't know that should be illegal disappointing yeah let's give the width oh um image a width of 100 oh should we what will that be what do you think i think it's stretching it yeah i think we should i think we should keep it the thing is though if we now reload it maybe the height um yeah i don't think we actually want uh you don't or maybe it's like well i don't know yeah i think it's like kiwis that is kiwis on all the pizza oh my word this is what it was we're gonna get demonetised for showing this okay so we've established there's an issue with our uh um what do you call it size so i think what we need to do probably percents like you you do want to force this somehow yeah well instead of that we can do width of eighty percent maybe yeah but you somehow need to like squish it aspect preserve an aspect right i mean if you do that you do preserve aspect ratio yeah but then the issue is um we have quite a big border on the outside so what we could do instead of having a container is we could um just add a border onto the what image you reckon and it would be dynamic border yeah so we could do border 1 for now solid teal this is going to break everything isn't it because it's now everything is made already inside the container so we're going to have to do something with the js why did you remove that i mean you you you um you can keep the container there yeah keep looking can you back into html html from the container so you remove the styling yeah but why do we need it well so it's it's good to have yeah but now it's got michael's oh no this is and now you can just do this yeah but it was also centering it wasn't it yes so we need to i don't think you want a remove container i think i think maybe we don't need okay well we don't need that that's for sure yeah okay all that okay okay right i think we're cooking on gas now michael oh wait i think we are it's quite expensive in the uk nowadays everything's expensive in the uk nowadays and i go okay well that seems okay doesn't it so do you want to move book shadow into onto the image then yeah well go on that sounds good that goes f oh i haven't wired up that button no we didn't huh yeah so really it would be good to have a max height on it height let's do 500 pixels do you think that changed anything all right 300. but now we've got an issue have we with the aspect ratio or maybe not anyway what's going on in the chat um where did you get the api ah i just randomly found it but um here it is yeah foodish foodish api oh look at that burger although something tells me it's vegetarian it might be yeah that party doesn't look very very meaty uh yes yeah cool what's the main reason of using async when fetching an api is that the only method of getting an api uh yes because you do not know how long request is going to take and you want basically if you go to javascript you see on the line 4 where we are getting uh we need to wait for api to respond because if api doesn't respond we can't get the json we can't get the image and we don't really want well i mean we can create elements before and then just wait until apr responds and then upload the image but really at some point we'll need to stop the code and tell it to wait until api gives us the image and you don't know how long it's going to take you could take 30 milliseconds could take 60. i mean depending on where you are in on planet earth sometimes api cannot respond them certainly if you're going through a tunnel or something uh i mean yeah it's kind of restricted by the bandwidth it's restricted by how quickly your network works so network network equipment um speed of light is a restriction well it doesn't change does it yeah but like you know for example if the server is in london and we're in wales then the response speed of light will be quicker but if you're like in japan or new zealand or something then the request will take physically longer to get to you because of skills alike real real story okay we want js says our craft okay okay cool yeah there it is let's see what we can do yes um are there also free courses on the scrimba website yes there are and there's a very good one in javascript as well yeah oh there's so much javascript in that course this one is a good one learn javascript for free yeah give that one a go cooking on gas we'll be cooking on dead right over candle by christmas time at the right we're going yes it's looking like a bleak christmas but never mind um ooh use overflow hidden on the image to prevent it from stretching yes i knew there was something john nice one i'm i'm like cheering but i have no idea what that means overflow hidden that changing there is that other thing um it's another something like um css image position or something is that what i want position absolutely no definitely not for the radius thumbnail images responsive images height auto maybe wouldn't it have high auto by default though i'm not sure that's actually stretched i think it's just a weird picture we are forcing it into some kind of width yeah 80 maybe i think it's fine let's not override it okay michael um oh you you use it on the container hey that makes sense overflow hidden um max height why did you just why did i just what you you've copied overflow hidden onto a container yeah that's what abdul ramen says he only said mike's height make mike's hide on the container yeah use it on the container and make the max height on the container i just think it needs to be slightly bigger let's see honestly all this css i'm like it made no difference object fit cover i think that's actually the one i was thinking of uh okay what does that do oh my word but then okay hold on let's copy this comment that out so much stuff css look you've just commented on two lines object fit cover is the one i wanted i'm pretty sure basically it makes it fit in we can remove like max height yeah and all that i think so yeah you want to remove that line yeah because you comment you're the start of the comment yeah okay right let's wire up the button do you want do you want to remove the width as well yeah what width uh with 80 if objects fit presumably if that's what i think it does no i think it is to do with it stretching it's not to do with the size of it we still want it to have a width of 80 percent otherwise it will be the width of the actual image okay okay button oh wow you didn't do a btn no because for some reason you don't like it when i do that type because well it shouldn't say that now should it it should say um get me a pizza yeah another one i might if there's time put an icon in there another one yeah okay now do you think we should do it above or below this uh well i think below because it's going to render a pizza on page load yeah you do want that spartan yeah big document dots get on with my id yeah russian dot ad event listener click you granted me the other day all the times you do button don't add event less than a click should you also be adding um an event listener for people if they're using the keyboard uh yes because i haven't been doing that well yeah uh like for keyboard navigation yeah you probably do unless like click also kind of registers the keyboard navigation we can test it in a minute yeah i think instead of call it uh random pizza or get random pizza why no because that's where it goes hold on a minute we don't no no michael that's not like what we can do surely is just reuse that yeah yeah well but yes doesn't have a name that's the only thing yeah well we're gonna give it a name okay so async function uh path is praying for us great get random pizza so this is async function so we would be able to then uh [Music] night michael why can't we just do look it's okay it's okay it's okay calm down it's okay [Applause] it's okay i just wanna put get random pizza into this and then run yeah just just hang on with me okay good night yeah okay okay hank just just hang on in there get random pizza so we're just gonna take this out paste this in yeah and then we where we say pizza image yeah we just want to return that return json image and we actually we want to return this pizza image equals a weight get random pizza and i think that should that should do it okay there we go that worked yeah yeah now that wouldn't work because you are calling uh get random peter so you're calling this piece of code so if we if we console log let us know in the chat if your thin crust awesome what's the other one fat crust thick crust deep pen yeah what type of crust there you go so when we click when we click a button this function does run okay but what we want to do is we want to display a pizza on the click of a display another pizza so that means that unfortunately we'll need to take all of this so this is the logic for displaying the pizza right yeah so what we want to do is we want to await display pizza or actually we can just call it render pizza and then async function render pizza just paste that stuff back in that should work okay cool that one looks nice people are saying thin crust yes then the way and this is round the pizza oh no now someone's saying thick crust oh no michael we're getting another one so we get more we say somewhere we need to be doing no so what we want to do it's okay we just so we don't need to draw a container every time so we can extract the container we can extract a container yeah uh we add an event listener to it we get another one an event listening on the container no on the button hey uh then we basically say create this create that we don't really need this logic well actually we do need that right so we can probably extract this and yeah we can so we extract that yeah but you're always appending them um and now yeah good shot so we just need to append it once and now we just update yeah i think that should work the alt is always the same right so so we did that if we could get it from the api we would leave it in the right so we just get the api update the image and that's that's that so let me remove console log well that one looks nice olives yeah yeah where where where where are we what's that we have an issue with the height though it's too big so hop over to i'll just move i'll just move this uh immediately invoke functional expression to the bottom of the file and there we go that's stuffed crust i didn't get stuffed crust why can't i get it it's like having a hot dog when i pizza yeah it's weird okay so now on the heart-shaped one now we should find okay that one's quite tall so in the css max height it should i already had a 300 before should have left it like that okay nice i think that's the job well well done yeah i mean if we don't you know thank ourselves and who else will uh path says background image would work i think it would um i tend not to use a background image unless it is a background if that makes sense whereas this is actually part of the app so also you can't add alt tags to background images right yeah good job at christmas i like my pizza to be deep and crisp christmas pizza for christmas that's a good idea if you ask me recipes yes incredible i wouldn't mind it yeah well we're turkey instead of the turkey yeah pizza instead of well i mean anything in south turkey would be would have been yeah yeah yeah i mean maybe fair enough there's a discussion about if um fingers think crust that and also is there an advantage to using async away over fetch plus then um not really i just prefer cinco it because i personally find it easier to read but if you like fetch then catch oh actually that's a good point um that's a good point so currently what we have is uh if all of a sudden this stuff over here so like um let me just simply all of a sudden let's say fetch and work bro new era whoops that didn't and oh my grandma i hope tom will forgive me uh as an english teacher didn't work there you go so all of a sudden like you don't know what happened what was the error uh this some error happened and they just stopped generating the image so you do want to then you basically want to start wrapping this into your try right right obviously catch error well some people like they just write e uh or some people write air some people write the whole thing um and now i can console.log yeah well that's that's the scrimba type is that what you wanted to happen or is that an error well that is an error that like if i yeah that's what you wanted to happen uh yeah but that's a scrum of peculiarity right so right now nothing but it just says that it doesn't know what kind of error is fetching the work is so it's like um but if we open the devtools yeah so we'll say that yeah if you open here you will see oops fetch didn't work yeah oops face didn't work nice um you can also do this yeah but again be careful with this because uh console log uh inside the screen but that wouldn't work anyway and basically yeah you want you want this um but every time you're using a sinker weight you do want to then wrap it into try and catch right and then you can say catch uh i think also you can do like if you don't really care you can just say catch like that but quanta log i just say error happens c f 12 for details because we're like because we're we are sorry we are in we are in uh scrim i promise i type the rest of it there you go okay uh so that says unexpected token well i basically say the same thing right so there you go did i do that right oh i want i want the whole thing sorry okay pizza mushrooms uh oh and also yeah you do want to wrap this inside of try catch too but anyway i can't be bothered oh it's already six oh right yeah so there you go um personally it's a preference because with fetch.then you can then say dot catch and you do your catch logic inside of that block but i prefer try catch and then a sinky weight i don't know why well maybe because i used to write c sharp previously and there is no then dot catch so you have to do try catch so for me translates really well and there is a sync away which is a very similar kind of pattern so yeah long story short does make a difference choose what your what you prefer we didn't get tom tom chance joke oh or the pizza this one there you go see and you're like oh no that's okay it's a joke at christmas no one is no one is that mad well i think that was bad evidently you are but we are not having a piece just that's that's just not on i think i mean to be fair i don't care because i'm not i'm not british but even i think that that's a step too much ah i'm glad to see that this is working because earlier i thought it wasn't but it is oh yes um i have a feeling that i have oh yeah look at that just released a new video oh wow you were sitting here and it got released indeed yeah wow gradient generator which is very handy for the latest weekly web dev challenge so you can check it out if you want yeah and don't forget that over on github we are going oktoberfest all month so there will be issues added here um yeah so you'll be playing your bag fixes because let's be honest it's always like that new code new bugs lots of exciting things coming up this month so keep an eye on the repo if you want to contribute well yeah that was good michael what do you reckon yeah sounds good have fun and uh don't forget to test your code before you propose appear yes yes great video says thank you very much yes i hope you enjoyed it yes oh yeah talking about enjoying don't forget uh apparently it really helps click the like and subscribe and whatever yeah that kind of stuff yes okay have a lovely weekend everyone [Music] [Applause]

Channel: Scrimba

Views: 656

Rating: 5 out of 5

Keywords: web development, coding, learning to code, coding tutorial, learn web development, web development 2021, web development tutorial, front end developer, frontend, learn coding, web dev, software development, JavaScript, javascript tutorial, javascript for beginners, learn javascript, javascript tutorial for beginners, javascript basics, javascript tutorials, javascript beginners, javascript functions, learning javascript, js tutorial, call an api, api, rest api, what is an api

Id: OvFJMdrtaNw

Length: 66min 58sec (4018 seconds)

Published: Fri Oct 01 2021