Building a Node.js app (as a JavaScript noob) | 🔴 LIVE CODING

[Music] hello everyone in this video we'll be building this dinosaur generator web app using node.js and javascript it's nothing too fancy but when you click the button it'll generate a fake dinosaur name and a random dinosaur image to go with it the cool part is that the dinosaur information is coming from two apis the app uses javascript to get the api data on the server and then passes it to the client side to display the data on the website the apis themselves are loaded through rapid api which has an api hub with lots of different ones you can use rapid api is sponsoring this video and i thought it would be a good opportunity to build something using apis which is an important skill to have the only problem is that i've literally never used node to build a website i'm not exaggerating here i have programmed a little in c sharp but i'm a javascript noob so i figured i'd show you how much i have to look up when i'm coding it'll be fun i did have to research a bunch to get this working and i'm super grateful to the coding trained youtube channel with their playlist on apis and javascript webdav simplified's video on building a weather app code stacker with their video on using multiple apis and anya kubo's videos explaining asynchronous javascript they were all extremely helpful resources and i've put links to all of them down in the description all right let's get into it [Music] okay so the first thing we want to do is we want to set up our website so since i am using node need to install express because i'm going to be using that to make the website so in our terminal window let's go up here and we're going to install npm install express um actually i first need to npm init entry point yes index.js okay i think that's what i need so got a package.json file i think what i saw in i believe is the video from web they've simplified is under scripts we're going to set dev and then in here we want to use nodemon which will automatically reload your node server anytime you make a change and the entry point is going to be index.js so we got that now let us install express and we need to install nodemon npm install node mon save dev too excited okay so now we got express and we have our nodemon installed the next thing i want to do is actually create the like the the app one thing i found was pretty helpful was express has pretty good documentation so here on their website is a hello world example so for our app here we're going to require express so i'm going to copy that i don't think i need that version number in our project we're going to create index.js and this is going to be where we run node so this is our server side javascript so i'll paste that in and i don't know i use semicolon to the end of my line i know not everybody does that but basically the first line is importing the express module then we're going to create an app an express app and then we want to set the port so this is where which port we're going to load our local website the next thing i want to do i believe is let's go back to the docs so what i want to do is i'm not running the apps strictly from javascript but i'm going to have like an index.html file and some other static files like css and javascript so i think here serving static files okay so use a following code to serve images css files and javascript files and directory named public so i believe this is what i want to use so this will say that we're using the public folder and i think i forgot one thing oh yeah here we go so listen so this is telling the server to listen for any requests made at the port which is three thousand and it includes this hyperlink here so the server is going to listen for 3000 um if the browser makes requests to load this local website using port 3000 then it'll serve the website so the next thing i need to do is since i'm serving my static assets from the public folder i need to make a public folder so public and in the public folder i'm going to create index.html and then i'm also going to create a style.css file and then my client-side javascript which will just say script.js so in our index.html just to create some boilerplate and change the tile to dinosaur generator and i'll just add some text here the same thing dinosaur generator okay and then even though we have blank css let's just add the references so that's correct um and then we're going to add a script to load the script.js file is that right oh boy yeah i think that's right we'll find out let's just test console.log script.js loaded and then for style i guess i can just start adding some boilerplates so font size 100 this will make things more responsive uh box sizing quarter box and then for all elements as well as the before and after pseudo elements we will say box sizing inherit and then for the body we'll just say margin zero adding zero and i think this is fine for now okay so now that we have our static files i think i can just try to run this now so in our package.json file when we created this we said we have a dev script and when we run dev in the command line it's going to run nodemon index.js so let's try that so npm run dev and see what happens okay cool so it's saying example app is listening so load this up in our browser see if that loaded oh and it did so if we inspect this it is loading and let's just make sure that we yeah so our script.js did load and then our um css so let's just see yeah so you can see here font size 100 box sizing border blocks coming from style.css make this a little bit bigger so you can see it better there we go okay so it looks like things are loading all of our static assets are loading so this is our local express site so i guess that was kind of easy it's kind of funny because i i definitely wouldn't say that i'm like a expert programmer but i used to do more full stack stuff i'm in c sharp and this is just much different it's pretty interesting how you can just with these few lines of code spin up an entire server so i can kind of see the appeal of this because you can just write this in vs code you don't need to set up a whole bunch of other stuff now the next thing we want to do since we have our website running now is to look at getting the api data so i'm going to go to rapid api website and what i'm going to do is i'm using two apis i'm using the dinosaur lorem ipsum thing and then i'm also going to use the bing image search api so let's just load the dinosaur one thing first so it's called dyno ipsum one cool thing about rapid api is that they have this tester here so if i click test endpoint it's going to give me a response so you can see here in the results tab this is what it's giving you back now i don't need all this alarm if some filler i actually just want two two words really so we scroll down here are the parameters that you can set so paragraphs it's giving me 30 paragraphs i really just want one and words number of words per paragraph i want to [Music] and then format let's do json just because i think i feel like most apis will give you json so we may as well do that even though i guess text would be just as good so now with our new parameters let's retest the endpoint and we can see the result is an array with these two dinosaur names i don't even know if they're real dinosaur names but you know we'll see so what we're going to do is we are going to copy the code from rapid api we're going to use the fetch function so i'm going to leave this here and we're going to go back to our code so what we need to do is right now we want to create a route in express so in our index.js file which is the server javascript we want to create a route which is i don't know if i understand it fully but it's almost like sort of like an api and that the client can make an http request to the server to either get information or to post information if you're submitting information from the client to the server we're going to be using get because we just need to get information we're not filling out a form or submitting anything like that so we are going to create our first route and this is going to load the name of dinosaur so app dot get and then this takes a couple parameters the first one is the path that you're going to use to access this route so i'm just going to say dyno name and the second one is the handler function so code that you run when this route is hit so we're using an async function request and response and that's the parameters that the async function is going to take use a little arrow function here this is all very new to me so okay so then in here is we will you know run the code run code stuff so the reason we're using an async function instead of just i guess a regular function is because we are pulling data from api we don't know exactly how long it's going to take to get you know the api data to our server so that's why you use async so that you can wait until you've received the data and then do something with it otherwise i think it would just try to run everything at the same time and then that may not work out very well so from what i understand when you use an async function then you use the awake keyword for the things that you want to run i guess in sequence so the first thing i want to do is you want to get or fetch the api data from the api using the javascript fetch function so if we go back to the rapid api site we're just going to copy this part here and i do want to make a note here that you can see my api key displayed here but i'm going to delete it after i finish building this before the video goes out so it's really important to make sure your api keys stay secure when you're working with them so i'm only going to copy this fetch section because we're using the async await thing instead of fetch and then chaining a bunch of thens just from what i was reading that seems to be considered a little bit better syntactically so we pasted this stuff in here and you notice every time we save the file it sort of restarts our node server let me just scoot that down a tiny little bit okay so we got the fetch thing here but we want to set it as a constant so const um i'll just say fetch api so we're saving this as a constant so this is getting the api data so once we get the data from the api the fetch function returns a javascript promise something i don't completely understand again but i do know that we need to convert the promise into json format so what we can do is create another constant and i think this needs to be a weight yeah there we go okay another constant and we're going to call that the response so dino name response and this is going to be another await because we're running this after the fetch api thing so await and then we're going to load the fetch api but we're going to parse it into json and then the last thing we want to do is because this is a route on the server we need to respond to any client request with whatever you know data we want to send to a client so the last thing is going to be setting our response which is this parameter here response and then saying it's a json object and then the parameter will take the dyno name response and the other thing we want to do is maybe console.log this thing so i'm going to console blog dino name response and this will write to our console down here in our node thing so in order for the website to be able to get this data from the server we need to write some code in our client-side javascript so we go into script.js what we need to do is create another get request to get the data from the server so the server used a get request to get data from the api then we need to have another get request on the client side the website to get the data from our server i'm going to create another async thing because we need because again since we're using a route an api we need to use asynchronous javascript so we're going to create an async function and i'm going to call this get dyno name um let me make sure i named everything correctly yeah so dyno named name yeah async function get dyno name and this is sort of similar to the server side javascript so we're going to create another constant we'll call this the response so the response from the server this is going to do await and then fetch instead of the api stuff that we had used previously in our server side javascript we're fetching the route that we just created so dyno name then we want to again format the um response the the fetch response since it's a promise into json and if i have any mistakes in inaccuracies and what i'm saying please leave a comment down below and you know if i've made any giant giant mistakes i will i'll pin a comment or something with the corrections but i don't know i think i've heard that people sometimes feel like you shouldn't do stuff until you know it completely but i've just learned so many things over the course of working as a dev that i often work on projects that i would do things i didn't 100 understand how they worked but i knew that it kind of worked maybe that's not the best way obviously it's better to understand everything but i feel like it's a pretty realistic scenario that you're going to at some point have to build something that you're not 100 confident to know how to do so kind of my purpose in making this video this way is that so i can show you the sort of research process and the testing and just being really honest about things i don't understand like javascript promises okay so where were we so we got our response from the route and then we have a we're making another constant um of the data and we are formatting it as json so i think at this point i'm just going to console.log the data and hopefully this will mean that the data will come from the api to the server here to the browser and we'll see in the browser console whatever data comes back from that yeah so i think that's good um the next thing we want to do is we want to actually execute the get dyno name function when we load the page okay so all the parts are in place let's just see how the website looks so here's our website here and reload this see if anything happened um looks like nothing has happened so let's think about this oh i got a error here [Music] oh fetch is not defined um let's see if it tells you any kind of line number okay so i think that the problem here is it says the error fetch is not defined i kind of forgot i'm using fetch which is a javascript function i'm using it in our node code and you have to install node fetch which is another module so let me create a new terminal thing npm install node fetch and we'll need this outside of dev as well so we'll install it normally okay so now that we've installed node fetch we can say i'll just do it right here so const fetch and we will require node fetch which we just installed this allows you to use the fetch function in node so let's go back to our node thing and oh hey look at that oh man this is very exciting okay might be too big so we can see here the dinosaur names have come out so this is great let's check our website too so we load here maybe i'll put this on the right side so it's not blocking stuff okay so here is our dinosaur names which is pretty awesome so we can see here that it is coming in an array which has one array item and that right item is another array which contains these strings so what we need to do is i want to take the items out of this array and put them into a string so that the fake name of the dinosaur is these two words so first let's take things out of the array and try to put it into a string so let's go into our client-side javascript and i think we want so data is that the big array that we got and since there's only going to be one item let's say data and then square brackets and zero this will return the child the first child so let's reload here so now we can see now there's just an array here what i want to do is take these items out of the array and convert it into a string so how do i figure out how to do that so let's use good old duckduckgo so javascript convert array to string okay w3schools i think isn't an okay thing so this will do fruits to string return the string with all the array values separated by commas i'm not sure if that's what i want but let's just try see what happens back to our site okay so separated by a comma obviously i don't want that i want that to be a space instead of a comma let's see convert it right to string um and then let's say space how to convert it right into a string without a comma separated by space yeah so this is what i did here array to string separated by a comma oh we can do array join instead of two string let's try that so join and then it's saying to use whatever separator you want so since i want a space we'll do quote with a space in there all right now reload the website hey so here is our dinosaur name nice so i think what i want to do is i'm going to create another constant i guess maybe i should use let in case we want to change that value so i'll just say dino name equals and then we'll get this out here and then console.log dyno name so let's go back to the website okay looks pretty good looks like everything's working so back in our function what i want to do for our final website is i i don't necessarily want to run this on page load i mean i guess i could but i want to have a button so every time you click the button it'll generate a new dinosaur image and then a dinosaur name so let's create our button and then we're going to wire up our javascript to the button click event so over here in our index.html i'm just going to create a button and i'm going to give it an id of button load and then generate dinosaur i think that's all i need so now i can take this button load and i can create um a event listener some document query selector button load um add event listener and then i think i can just do another arrow thing maybe see if that works i think that's right and then when we click the button then it's going to run this function okay let's see if i did that right so here's my button i'm gonna click it oh yeah so we have the dinosaur name the next thing we want to do is do kind of the same thing for the dinosaur image that we're going to get from the bing image search so we'll start by creating the route again in our index.js file and then we'll create another function here for the get dyno image so index.js we're going to do basically the same thing here so i might just copy this and then change the route name so instead of dyno name the route will be called dyno image and then of course we need to replace this info with whatever's in the rapid api thing so going back to the rapid api um thing image search okay so i don't want trending images i want the image search [Music] so their only required parameter is the search term so dinosaur and let's see mark it i don't think this matters too much um and count that is important so this is this is an image search i think let's return a bunch of images and then we're going to choose one one image one random image from the collection of images so now let's do test endpoint and we can see that it's giving us these are the items so there's a lot of stuff in this array here so there's some info up there and then the actual results are in this value field so we'll have to remember that so value is an object that contains these other each result and then each result has a bunch of fields name thumbnail url they published all kinds of things so i think the field i'm looking for is um i need the image url so i think i might just take the thumbnail url instead of the content url because thumbnail is a smaller file so i don't need a giant file here okay so i'll just remember this for for later so let's go back to the code snippets and then select javascript fetch so you can see here the parameter that i added dinosaur and then count equals 10 is included in here so they make this pretty easy to use um okay so going back here now we're going to replace the fetch that was loading the name and replace that with the bing image search okay awesome so let's make sure we have everything named here correctly so dyno image is the name of the route which is good and then dyno name response let's just call that dino image response and then replace that there okay now let's add the client side javascript so going back to our script.js file we're going to do the same thing similar things here so instead of get dyno name is going to be get dyno image and we're going to update the route to be dyno image um and then okay obviously this data stuff is something that we it's going to be different because the data looks different so i think what i'm going to do is we'll just say data for now and then we'll see what we want to how we want to sort of parse the data so dyno image equals data and we'll replace this with dyno image cool all right so then we want to add running this function when we click the button okay so let's see if this works i'll go back to our website reload and click the button oh yeah look at this okay so i guess we can just use a console thing we don't need the inspector at the moment so we have the dinosaur name which is good and then we have the object from bing so again it's let's see in here we need value and then all this stuff so what i'm going to do right now is in the end i do want to just select a random dinosaur from this collection of items but just to make sure we have all the fields named right and everything we're just going to hard code the first result so it's a value and then the first result so under the get dyno image let dino image equals data and then value which is that field and then we're going to take the first result so now let's reload the website click the button okay so now it's returning just the first image and the field that we wanted was the thumbnail url so let's take that oh is there an error no it looks okay reload the website click the button okay and now we have an image url let's just see let's just see what this looks like and it's a dinosaur image how about that we have our dinosaur image working so now let's add in that the logic to load a random item from the 10 items that we're getting from bing so remember we hard coded the zero to get just the first item but what we want to do is we want to insert a random number so a random number between zero and then however long the array is so since we have received 10 images we want a random number between 0 and 9. so let's look up how to do that so javascript get random number and let's see what we come back with okay so w3schools is the top thing turn around number between zero and one okay and it's inclusive so it includes zero and then it is exclusive it excludes one so i think that's good because um we're returning ten items but the max the last the tenth item is actually going to be index of nine because we started from zero so we need to take this and this is only zero to one so it's a basically a fraction um get random array items so i think we need something on top of the random thing okay get a random item for my javascript array this is good because you can see there's a ton of votes here so that kind of indicates that this is probably a good answer also it was asked 10 years ago so let's see what the answers are um okay items is the array and then math floor and then math random so math floor rounds down so if it's like a fractional round down to zero and then math random which will generate a number between zero and one times the item's length okay so that makes sense [Music] so take copy that and then here we'll add it here so what's happening is math random is going to be let's say 0.5 and then you multiply it by the items by the length of the array which i should actually change items to data right yeah data so data length is 10 because we're getting 10 items so some fraction times 10 so it'll be somewhere between i guess 0 and 10 or it'll be 0 and then maximum will be 9 i guess and then we round down in case there's a decimal so that should work let's go back to our website reload click the button um oh something's undefined what was undefined oh instead of data length it actually needs data value because data is like the whole thing so like i'm guessing that's what was wrong there so let's try again reload click the button yes cool so if i click the button again without reloading is it going to load a new image or the old image okay they look like different images let's just check so i'll make sure that we're loading a different image every time nice and we are sweet so now we actually have everything we need to um we have everything we need in terms of the data to put into our website so the next step is going to be going into our client-side javascript as well our index.html and then you know displaying the name as well as loading an image from our api data so for the for the name i think i might just create a div and we'll say dyno name and then i guess i could create an image tag but i feel like it's not great practice to have a blank image tag um maybe it's not good practice have a blank div either but i guess we'll just do these two different approaches so i think what i'm going to do for the images actually generate an image element in the javascript when we are loading the api so first things first let's take care of the name so dyno name if we go into our script.js file going back up to get dyno name so dyno name is the string that's formatted correctly and everything so what we're going to do is get that div we just made document query selector dino name and set the text content to dino name all right see if that works reload the site click the button nice if we click the button again it changes that's awesome okay so that was simpler um now for the dyno image we need to we want to create an image element in javascript so let's look up how to do that so javascript so when i'm looking up stuff i usually try to put the language name or whatever first just to sort of filter out all the results so javascript generate image maybe image element how to create an image element dynamically using javascript okay so here we go let me zoom in a little bit so var image document create element with image and then you set the image.src for the source and then you append the element you just created to the body let's copy this obviously the source is something else we want the source to be dyno image so we'll just replace that so now we want to create image and maybe instead of var we'll use a let um and we're going to use a let because we want to change the image if you use a constant i think it will not change so let image equals document create element img image source set to dyno image i guess we could also set the alt tag for the image can we just do that alt is that and we'll set it to another field from the api let's see let's go down to the results let's find the name of that field for the alt so i guess the best thing would be probably the name so we'll set that to the alt alt text oh i wanna i probably need to create a new thing so maybe let um dino alt equals data oh actually i think what i need to do is have this just be the like the item itself and then i'll make a new variable for the image url and then a new variable for the alt text so let down it is going to be this but not thumbnail url it's just going to be the image then we'll say let dino image url equals dino image dot thumbnail then a new one let dino alt equals dino image dot name i think um and then we'll just add this here just so it'll show up so now i just need to change this image sources dyno image url image alt equals dino alt okay let's see if that worked oops something was wrong maybe name this should be the right field um let me let's just comment out the alt stuff for now just make sure that this thing's working with just the image source okay let's try again this is throwing an error i mean it is returning the item which is good so script.js um line 27 let's see here why is that get element by id is null oh this is a copy code so my body does not have an idea of body so i'm going to do query selector my favorite thing there we go reload so you notice that when i'm trying to put a fix in for something i didn't uncomment the alt so i just want to change one thing at a time and then just keep testing every step because if you change multiple things and it either works or doesn't work then you don't know exactly what caused it so you kind of have to go one by one okay yay okay so now the image is showing up we're going to add back in the image alt text let's try again all right now we'll inspect this and see yes so the alt text is getting set which is great and if we click the button again oh um the name change so there's two problems here it's generating the image every time we click the button so we need to fix that so the problem is here um get dyno image yeah so like we're generating an image tag every single time and then appending it to the body so i think what i want to do is add some logic so that when you click the button it's going to delete images any image that there is because there's only one image on that page and then generate the new one so let's go back to duckduckgo and say javascript delete element okay here we go w3 schools so okay so just remove that seems pretty easy and sometimes for the heck of it if i'm not positive the first result that i look at is correct i'll sort of try to check other things um let's try stack overflow so there's not many upvotes on this so it's i'm not sure if the solution is going to be great [Music] i'm not sure about that maybe es6 syntax since we're doing that nice okay cool because that other stack overflow result it seemed like it was maybe an old way of doing things just because one it's eight years old and then the solution it just kind of seemed like it was using some outdated syntax and i understand it's something that you can't like know right off the bat but i think the whole thing with the parent node and whatever just seemed like javascript has kind of evolved from that point which it has when we added you know es6 to the syntax when we added when we added es6 to the search you know it sort of tells you yeah oh that's interesting oh here we go es6 remove modern post stream of an element is used to remove method so that seems pretty that seems like it's the right thing to do right okay so what i want to do is when we click the button before we create the image i think i need to check if the image exists so i wonder if i should create an id so like image and i'm assuming id is going to be dino image and then i can maybe use this to identify if the image exists or not so let's [Music] reload okay let's check this okay so the id is set so this means i can check for document query selector dino image and check if what the length is um hmm what undefined so length doesn't work i guess maybe because i'm not sure why length doesn't work let me just let's just check for the h1 tags we know that exists h1 length um so how to what do we want to do javascript um check if element exists this is so this is really like the real life of a developer trying to do something having it not work and then looking something up okay for example if the element had an id of find me it will either return a reference to the element or a null oh um let's go back to the site so dyno image so it exists now so it is not null so let's check if it is null it is not null let's reload the site so now oh so now it is null because it doesn't exist yet so i guess we can use this so before we generate the new image we're going to say if document query selector dyno image is not if it is not null um which means if the image exists then we want to delete that image so document query oh can i use this keyword this remove let's see if that works i'm hoping that this will refer to whatever is in here i don't think this is gonna work yeah i don't think it's gonna work let's just experiment and see yeah this removes not a function so i think it only works when you're doing something with this but that also might just be my jquery background coming out because that's mainly what i worked with in the past and not even that advanced okay so let's try again if you click the button hopefully the image will just get replaced and there won't be two images um let's try again oh it did change so maybe that one time and replace it with the same one okay that works for me um okay so i think we have all the functional stuff working now that we have the dinosaur name and image showing i wanted to go back to the security issue when it comes with working with api keys so again it is extremely important when you're working with apis to not publicly share your api key so one way we're doing that is we are using server side javascript to actually get all the api data so this is better than having it in your client-side javascript because the browser can literally see everything in your client-side javascript and i could be wrong but i think it's generally not a good practice to get api stuff with an api key in your client-side javascript so that's why it's in the server side because the browser can't see all the code here it only sees what the server actually sends to the client and the other thing we need to be careful about is let's say this is this code is going into a github repository well when we commit our code here it's going to have our api key listed here so that's kind of dangerous too because then if your github repository is public and even if it is private i still wouldn't want to put it in like you don't want it in your your git history because you never know what could happen so what we want to do is we want to take this api key out put it in some place that is not going to be part of your git repo but we obviously want to commit our index.js file so one solution to that is to store the api key value itself in what's called an environmental variable so what that is is it's actually a separate file and i'll create it now dot env so this dot emv file is where we can actually store sensitive information like the api key and we can access it in our server-side javascript but it won't be we're not going to include the env file in our git repo so that way it's kept safe and this is something that you only really need for when you're doing development because you can set the environmental variable directly on your production server if you're deploying this to a server but when you're working locally you can use this env file so the way that we need to use this is we actually need to install a package called.env so [Music] dot emv is a zero dependency module that loads environmental variables from a dot env file into process.env so this tells you how to use it so as early as possible in your application require and configure env so first things first let's install env in our project so we'll go back to our other command line here so npm install dot enb and we only need this for development so we'll say save dev and now in our package package.json we see dot env here so that's great so going back to the website it's a requiredconfigure.env so we'll add this to our code here this is as early as possible so i guess i can put at the very top and then create a env file in the root directory which we did add environment specific variables on new lines in the form of name equals value okay so we just need one so we're going to do api underscore key equals and then we're going to take this api key here copy that paste it here and that's pretty much it yeah there's no semicolons just put everything on its own line so we'll save this and then now in our server side javascript instead of the key we can use um what was it process.env dot the name of the variable so process.enb so wait is this right i think actually what i might do is since we're using this twice i'm going to create a new variable um i guess i'll just make it here so const api key equals pro oops nope process dot env dot api key so now i can just use this variable in both places instead of the actual api key and this is because i'm using rapid api and it actually gives you one api key and you can use multiple apis so it kind of makes things a bit easier for you so this is good and the other thing to remember with this.env file is just make sure you add this to your git ignore file um and don't commit it so i think that's everything we need to add actually let's see so the thing is with dot env as we said this is only for development we don't want this to be used on a production environment so we can add um some kind of logic to let's see don't commit invaded for version control i want to like not use dot env if we're not like in dev um maybe it's in the express documentation okay let's go back to the go so i guess node dot env only run only on production running only oma.env only on production maybe condition oh here we go what website is this app dividend okay so if process enb node environment is not production then use dot env so i think i can just use that let's just actually do a search for this to see what happens just to find some more sources how to set node environment to production um i don't think that's what i need maybe condition [Music] okay so there's another process env.node underscore equals production so the scene is the same thing so i'm guessing this is probably okay to use let's see where was this here we go so i'll copy this and i guess they'll put it at the top again i don't know we'll see if this works or not if the environment is not production which it's not since i'm working locally then required.env.config all right let's go to website click the button uh oh something is not working let's go back to here oh no it says i'm not subscribed to the api what okay i'm not sure what's going on let's let's use the hard-coded api key just to make sure things are working oh boy okay let's try this again so that's working so something about the way i actually why don't we try um the just take this value here and see if that works so somehow it's not getting the right value out of here so let's double check the syntax oh let's um take this out of the condition just to see if that's the reason why okay so condition is not the problem put that back um so i think something is wrong with the oh shoot i put the env file in the public folder which is very not right it needs to be in your web root like the root directory of your website okay that's probably why i was not able to load the environmental variable so if we go back here we'll just use this variable again okay reload the website click the button okay everything's working everything's fine so slimes love the same image i'm guessing just because i'm i'm only getting 10 dinosaurs so it's just hard to hard to not have a repeat sometimes maybe i'll get more so maybe instead of 10 i'll do 20. see if that helps with the randomness all right that's good enough for me okay so let's double check our code make sure everything is secure and saved we're not you know publicly showing any important information so api key variable api key variable um yeah and then we're using this thing to only run in not production so i think we are pretty good in terms of functionality so now that we have the sort of javascript side all set now we can kind of make this website look a little cooler than this because this is not that cool so let's let's make it look a bit cooler so first thing i think i'm gonna do is let's get a background image on splash and then let's look for rainforests find that what would be a good background for dinosaurs right this might be kind of oh this would be cool i think um i mean it doesn't really matter but this is cool but it's uh pretty cool let's try landscape i sort of like this one all right we'll just download it so let's take the file it's one megabyte okay that's it's whatever so we'll just put it up here into our public folder so now in our public folder here's the image so let's do some styles so let's set the background of the body so background url i'm just doing this to get the name of the image but it should just be this oh and i think i can just do background like size cover let's see if that works hmm why is the image not showing up body i'm gonna close the console since we don't need javascript stuff anymore okay this is not right i promise i know how to do css i just usually use separate properties but i was just trying to use the background um shorthand property all right trust the old mdn let's just use background image just to make sure i have this correct i need the slash all right let's try reloading the thing oh there we go [Music] let's try to use the shorthand thing url cover maybe cover needs to go first [Music] hmm why is background size not work center contain so i need to do center slash cover [Music] so center center center slash cover oh there we go and then i don't want it to repeat um why is it not stretching oh my gosh okay first of all let's do no repeat no repeat weird background size is cover which should cover everything i don't know this is strange if i just do center auto okay i guess that worked yeah just center is fine okay so we'll just take this use the background shorthand okay so reel of the page all right so it looks fairly jungly i suppose now let's click the button see how it looks looks okay maybe i'll add like a container for the content in the site just so at least for the generator part [Music] hmm i'll just make this a section and we'll give it a class of generator so now generator let's make background oh my gosh back ground white and let's also add some padding so padding all the way around maybe just two rims and then you'll just set a default color to a really dark gray all right reload [Music] oh boy maybe that was not the right thing to do because i kind of like the jungle-y thing okay so this is okay looking see how tall oh the body let's say min height 100 v vh [Music] and then maybe you also want to sort of center everything display flex oh boy um flex direction column and then oh i can do display grid place items center and i think i don't want this height 100b it's not these things are sort of centered there we go so let's add these to the body or we're not trying to be super fancy here okay i am okay with that well then maybe i should put it into a container ugh this is what happens when you don't work from a design okay so we're going to do this stuff here for the generator let's try again now the body i think i do want that to be min height 100 bh [Music] all right cool generate dinosaur okay i am okay with that why is the image not getting included here oh shoot because it was getting appended to the body so let's append it to the generator element that's going to be in i think this script yeah so query selector we want to append it to generator there we go so now the image should be in the same element as everything else let's see oh it's class of generator not id so reload click the button yay so now this looks better things are centered um i think maybe i kind of want to center this vertically to see what we can do here so body so let's see body is 100 vh 100 viewport height units and then what if i say body is display flex flex direction column and then that would be i think justify content center oh there we go and maybe we'll just add some space but i think that looks all right and then it'll it'd also be kind of responsive i think so we have to fix some css to the image so add this to the body so maybe i like putting the alignment stuff at the top okay that's the weird part there is that the stuff moves it's maybe not centered yeah we'll just leave things at the top i don't need to be too crazy here okay i'm okay with that i don't know if we even need this is good to center it why do we have scroll bars here oh because of this margin top zero so let's add that to the styles as well orange and top zero and then i i will delete this stuff here oh no i want the text line to be stay okay let's add some padding padding of two rims all around so we're getting there right and things don't move that much so one thing we want to do is make the image 100 width max width of 100 so now it'll be more responsive this is for the dyno image element so okay i'm okay with that maybe we'll also add a little border radius of one rim so cute okay let's make the let's make these fonts a bit better some google fonts make like a kind of a fun looking font or something like that so under categories let's do display because that's where the fun fonts are and we'll say dinosaur generator what would be a good font this one's okay i don't know if there's a caveman font or something but something maybe a little bit more fun oh this one looks pretty good or this one this one looks actually let's try this one it looks sort of i don't know if it's a dinosaur theme i suppose let's copy this put it in our html head and we'll put it before our actual style.css file and then now the font family is sigmar1 so for h1 we'll say not family then let's make the default font [Music] family like just ariel or whatever [Music] okay [Music] nice maybe we'll make it a little bigger [Music] font size two rounds line height should be one oh nice kinda like that [Music] there we go [Music] next we want to do is i think make the button look a bit better of course so button element um i think what you want to do is border or background blue i'm just sort of trying to get rid of the default style so border none and then padding color white padding one rim and then two rims horizontal and then maybe add a border radius again maybe less than one room 0.5 rooms okay so we'll do something like this but we're going to change the background color that's not blue maybe the button will go first [Music] button and what color do we want let's pick maybe some kind of green color i think actually they say you should use hsl when you can [Music] so let's use the hsl [Music] change all the colors hsl [Music] cool um let's make the button stand out maybe a red color is better purple's okay i think red's good so i'll take that go down to button and now it's red nice okay so that looks pretty good so now let's add a hover state to the button and since i'm using css not sas we're going to have to do button hover background and we'll take this but make it maybe a little bit darker or here we go darker and we'll add a transition background color i think i'll just give you some default timings and easings it should just be background i need to add a timing oh i guess i didn't need to add the timing [Music] maybe 150 milliseconds and then ease in out there we go and then we also want to make the cursor a pointer i believe so it looks like you can click it there you go not bad um they will also make it all caps so text transform uppercase okay cool so now i click it and let's add some spacing here so under the button we'll add a margin and add another margin under the name let's add two rims [Music] oh and maybe we could make it look like a label so dino name will say background is white and then padding 0.5 rams maybe 0.25 grams and then on the image we'll make the border radius only on the the bottom so zero zero one ram one room so that's a little bit more um cohesive and then border radius on the label two we'll do one ram one rem zero zero so now it's like the label type of thing that makes it look a bit better okay so this is for the dyno name [Music] oops dino name add these styles and oh yeah let's make this hsl oh i feel like it matters less when you're using like um white or black and then dino image and then i guess that's good he'll add a little bit more margin [Music] bottom foreign seems like it's okay oh oh because this the white thing here is because of the label thing so i might actually need to add logic to generate this thing dynamically the same way we did the image let's see so it's document create element so under dino name so const or was it a let let let dino div equals um document create element and i guess div and then dino name div dot id equals dino dino name and we need to add that condition again if it's if it exists or not then remove so i'll copy that so if the dyno name thing exists then remove it so hopefully this will work oh right because there we go now it shouldn't exist yeah so now it doesn't exist let's open this just to see what happens now click the button okay um it didn't generate it it does not exist i'm not even sure if like this is correct let's paste this in the browser i didn't see an error so i don't know what's going on oh sorry i want to oh i didn't append it of course um here we go document query selector generator append child [Music] [Music] oh and i think i need to actually append it at the end and instead of document query selector i'm going to go here and hopefully the text content will work and then append child dino name div all right now let's see if it will append the name yay it's a little bit janky because the name comes back before the image so it's like yeah oh geez that's not good so i'll just make the label i'm gonna be lazy and just separate them again yeah let's do that so we're just going to under dino name margin bottom of one rim and then border radius is going to be actually let's keep the label square and then border radius for the image is one room okay let's try the end i mean it looks cool but okay it doesn't look great i think when i click the button i want to hide all that stuff or maybe just remove it straight out yeah so yeah i'm going to do this so i'm going to move the condition things to remove it right when you click the button and i think that will help with the jankiness right now all right let's see if that helps oh much better oh yeah look at that maybe i can put back the stuff here okay i'll try to make them the cohesive label thing i thought that looked kind of cool it's okay you know what i kind of think this is good enough oh yeah that's bad that's bad the problem is this needs to be the same width so what i actually need to do is make another div encompassing the name and the image i might be overthinking this but i'm going to create an empty div here dino we'll call it dino wrapper so this blank thing is where we'll append the label and the image so instead of appending it to the generator thing i'm going to append it to dino wrapper and then we should be able to use css to sort of style things better okay so now let's see we got here so we could do is set a width for dino wrapper so we'll say width is maybe 60 percent i guess the problem is we don't know how wide the images are because if it's smaller i think it just happens to be smaller than the let's say with this 50 max width is 400 pixels display block margin auto to center it and i'll maybe add a little media query for this so dino wrapper and then at a media query so media min width of what would a good desktop or mobile width be maybe 500 ems maybe 600 yams i think 600 em and then we'll do we'll make this maybe 80 for mobile and then we want to not use pixels but we want to use rams so 400 divided by 16 is 25 rems this is for um responsiveness um i'm sorry this is for accessibility so that when you zoom in or out on the browser it will change and not be stuck at 400 pixels like this may not be right so decent maybe 700 pixels for maybe 600 pixels 600 pixels divided by 16 is 37.5 ems this is gonna be way too big 37.5 this is just kind of a general thing and i think we can just do this okay let's give it another go not bad maybe we'll do another media query for the h1 size so we'll do three rooms for desktop and two rams for mobile it is still slightly janky but i think we really just wanted to show the logic on this so i'm okay with it being slightly janky okay so we got our dinosaur generator working we're pulling the data from the api from rapid api and then we're generating the name and the image so one other thing to note and what i will probably be doing when this is done is going to refresh my api key so it can't be taken from here so what i'm gonna have to do is here it sort of creates a default application for you um maybe you can't see that let's do this so under security this is the api key so this is the key that i pasted in my app um but you can add a new key and you can delete the old key so i'm gonna be deleting this one when we're done with this video but yeah so this is kind of different kind of video um the last video i did when i was doing research on building the dark light toggle which i'll link up somewhere here people seem to like the whole research process so let me know what you think down in the comments and yeah