Build a Weather App with HTML, CSS & JavaScript

[Music] hello everyone in this tutorial i'm going to show you how to make a weather app this weather app will display information which it gets from an api and display on the page using html css and javascript you can also search for locations like denver and will display weather for any location you enter let's get started to begin we'll make a boilerplate using the exclamation point emit shortcut and we will type in the title as weather app now in the body we'll need to create different parts of our weather app so inside will make a card because that will just display the weather inside of a card inside of this card we have to make the things we need let's say we need a search box so i'll create a search which contains a input which we'll call which will have a type text and we can call it class um search bar and we can have a button which inside should have a icon of a of a search icon so we can use the react icons extension for vs code to search for icons i'll look for a search icon and i'll copy this one svg and we'll paste inside this button so now this svg will generate a search icon let's make it a width of 1.5 and a height of 1.5 em and now let's preview this so i'm going to use the live server extension so we can see it on our page okay so now we create a search bar and a search button with an icon next we'll need to create the other fields we'll create an element for our weather which will have the city we'll make an h2 i'll fill in placeholder text here so we can see what's going on we can see whether in denver and it'll say the temperature we'll need um let's say 51. let's get a degree symbol so i'll search for a degree symbol copy this one 51 degrees celsius let's say and um i'll make an image this will be like the icon for our weather we can leave this blank for now we'll get back to this later we'll have a class of icon and then we'll also have the description of the weather and whether it's partly cloudy or sunny that will be the description also have humidity and we will also have wind description i'll say cloudy humidity i'll say humidity 60 and wind speed say 6.2 kilometers per hour now let's um style this a little bit i'll need to link a style sheet so i'm going to say link route equals stylesheet and href is going to be style.css and we also have a script so i'll add that as well the source this is going to be script.js now let's start on the style sheet i like to do within the developer tools so i'll open this up over here and we'll start off by making the body a flex box because this will allow us to center the card on the page so i'm going to make a new element body inside we'll say display flex justify content center align item center let's make it have the height of the full viewport height so say 100 vh zoom in over here and over here we'll say margin of zero because we don't want to go over the viewport height so that way we don't have the scroll bar over here when it's not necessary and let's say we put a background for now it will be just a solid color say 2 2 2. we can make it have a image later on okay now let's style this card and add a selector for the card we'll say background let's say e a e a e a that'd be like a light gray color uh we'll need to add some padding there say padding 1em or 2em let's say um and we'll make our have rounded corners border radius of let's say 30 pixels width of 100 but we don't want to always have the full width we'll also want to have a max width of let's say 420 pixels so that will only take up this much space if we have a large screen on a small screen it will fill the entire viewport but maybe we still want a margin around there so adding margin as well of one em so now we have this box it works on all screen sizes so let's add these to the style sheet and click on spectre.stylesheet and copy this into style.css and now when we reload this page they'll still be applied let's get a font from google fonts i think open sans is a good font so we will get this from google fonts you just have to like just select the style you like let's say select this style and when you're ready click on this button at the top you can copy paste this part into the head and then we can paste this part anywhere we want to apply open sam's font so let's apply this to the body and now we have open sans font let's make this degrees for the temperature a little bit bigger so we can actually make this an h1 tag and that'll make it bigger now let's get like a nice background image you can go to unsplash you can actually say source dot unsplash dot com this will allow us to get random images from unsplash with a random search term you can copy this link i'll set this as the body background image we'll say background image of url and parentheses this url over here and let's say we want the search to be a landscape we'll get like nature photos let me move this up so the background is together and now we reload this page we see a landscape picture in our background let's make this background a little bit transparent let's say we make it zero zero but also have a transparency of d0 so now we get this let's make the text white say color white okay and now let's style the search box a little bit we have dot search as our search box so you can say dot search let's make this a flex box as well so we can align things in the center display flex align items center and then we can put space you around say justify content and say space around actually let's make this center okay we just need to put some margin around these inner elements let's go back to our developer tools to customize this for the button we'll need to have let's say margin of 0.5 am and let's say we make it round so let's say border radius say 50 border none to get rid of the order there we'll make the height be the same as the width so let's say 2 em and let's make it maybe 2.5 am and a width of 2.5 am okay and let's make the input box similar we can say border none also want to get rid of the outlines say outline none the button has the outline as well so let's get rid of that as well outline none go back to the input let's say padding 1 em now let's make it like point a i'll make a border radius we only use 50 because that will actually make it like an oval shape we make a number that's half of the height which is um 18 i'll make the border have a rounded edge like a half circle and let's make the background color of this be say zero zero zero zero zero actually let's make it a lighter color so let's make it 7c 7c7c 2b let's say that's gonna make like a faint whitish search box let's make the color of this white so we have white text in here so now we have this we also want the font family to be open sounds let's say font family inherit that will get it from the parent and let's say the font size is 120 to make this bigger and now that we make the font bigger the this increase in size and our border radius is not perfectly rounded i will lower the padding a little bit let's make it like 0.5 and we'll increase the border radius now the height is 46 let's make it let's make it 24 and inside we could have a little bit more padding on the left and right so let's say one em over here to make more inner padding than on top and bottom now we have like a nice search box for the button we can make this a little bit larger say we'll make it match the height over here so it'll make this like 46 pixels and 46 pixels and also i have the same background say background 7 c 7 c 7 c 2 b make the color white as well and when we hover on it we also want to apply effects so let's say button hover we can actually apply the hover state here so we can see what it would look like we can say background of let's say we make it a little bit um less transparent so it's going to be a bit brighter so when we hover or remove this temporarily you can hover over and it'll show it later now let's add a cursor pointer here that way we'll get the mouse over to have a pointer and also we can add transition say transition 0.2 seconds ease in out and that will make this a nice smooth transition we hover over the box let's add all this to our css now let's also make this search box a little bit bigger we can say width 100 but we don't want to go all the way to get this magnifying glass we can actually say calc 100 minus 50 pixels or even let's say 80 pixels to leave some room for the magnifying glass and then it'll fill this entire width so let's um copy this as well okay and let's add a placeholder to this search box you can say um placeholder equals search now i'll get the word search here you can make the text a little bit bigger by saying font size say 120 to change like the default font size make sure i'm at the semicolon over here right now everything's bigger you can remove the margin around this temperature so you can say margin 0 to make it a little bit closer in so i can add that as well to the css we'll put this at the bottom i'll have these like in the order they appear on the page i think this could be a bit smaller so i'll make this a little bit smaller say make this 105 percent and have less padding on the top say 0.4 em i think that's good and the button we will have to make it the same height so this is 44. so we can make this let's say 44 pixels as well and we can go to style and copy this entire style sheet now let's take a look at the javascript i'll create an object for storing the functions and variables that will be necessary for using the api first we'll need an api key to access weather i'm going to get my weather from openweathermap.org so i'm going to go to openweathermap.org and you have to click sign in so we need to create an account over here click create an account check the rest of these boxes and confirm you're not a robot verify your email address and then you're ready to get started with the api so you click on api keys over here and we get an api key we can use for this app so i'm going to copy this and put into our field api key this will be useful when using the api you can go to the api over here and click on api doc to see what this api is capable of here you see we can have a city name as a parameter here and the api key as a second parameter so let's try this you can open this in a new tab api.openweathermap.org we'll put let's say denver and for the app id i'll put the api key it says invalid api key if you see invalid api key it means that they're still waiting to process your api key so you have to just wait a little bit longer like maybe half an hour to an hour and it should be working correctly once your api key is activated you should see this information when you access this page i'm using the json viewer chrome extension to make this a prettier format but you might see it like it's just text i definitely recommend getting the json to your extension if you want to see nicely formatted data like this so you'll see that over here we have the name of the city for name over here at the bottom we have the description is clear sky even icon which is a code that they use on their website you see on their website they have different icons like this one over here open a new tab you'll notice that the ends that ends with 0 1n as the icon over here and that's the icon code base stations temp so this is the temperature that's not in fahrenheit or celsius so we need to make sure that we understand the documentation of this api to know how we can get into the right format so here we have units and we could say metric so i'll say as a parameter to this api and units equals metric and now it says it's 2.93 degrees and that is celsius okay now we get the minimum maximum temperature wind speed we get humidity over here and all this information is accessible from this api so let's copy this into our code because we'll be able to use a url like this in order to get information about the weather so i'll create a function called fetch weather which will be a function it doesn't take any parameters and we'll just do fetch of a url so we'll give it the url let's say this one and then we'll say dot then that will be once it's fetched this url it will do the response and we'll say response dot json and then we can say dot then we can take that data and let's say log daily in the console for now so now let's see what happens when we go to the console and type in weather.fetchweather it logs in the console this information about the weather great now we just need to allow it to work with any city so here we have q equals denver so that's instead of saying denver will say plus city which would be a parameter instead of app id here we already have the app id stored over there so we can just say plus app key is what i think we called it separate this onto multiple lines you can see it more easily so we have the first part of the url then city units equals metric and app id equals app key we can write a new function that will display the weather on the page so we can write a function display weather that'll be the function that will take in the data and display the weather now over here we have the parameter city which is definitely important so let's put city as a parameter over here so when we call fetch weather just have to tell what city and we'll look it up for any city so now if you notice actually it says there's a there's a missing parentheses all right so we can have a semicolon there so i notice we call weather.fetchweather with denver api key not app key if we call this with denver api key is not to find it so it's this dot api key great now we have the weather for denver and if we call this a different city like tokyo you'll get different weather since it's the weather for tokyo let's see name tokyo there so yeah this is working now to display the weather we'll have to find out all the elements on the page and replace their content so in the data like we can look at what this looks like over here we did an example of what the data looks like so first to get the city name we can just say const name this will like get it out of the data we can say equals data and now this will extract the name from this object the other top-level stuff we don't need but then over here we have um inside weather we have some information like um it's a description we want and the icon we want so let's say const icon and description equals data dot weather so now this will get the data.weather object and extract the icon and description and we'll be able to use those as the variables and then const for main we want temp and humidity so say temp humidity equals data.maine and lastly we'll need the wind speed so we'll say const speed equals data dot wind so data.when contains speed so speed is going to be taken out of that object and made into a variable so now we have different variables we can log these in the console say name icon description temp humidity and speed and instead of console.log here we will write this dot display weather now let's check this out we say fetch weather it logs out all five of these things here it says undefined undefined let's see what might have caused that so we're taking from data.weather because this isn't actually an array containing this object and not the object itself so you can put a zero here and you'll get the first element of the data.weather object and it'll extract the icon description from there so now if we run this again you get 0 4n is the icon and broken clouds is the description okay now we just need to display this information on the page so let's say document.queryselect let's say city dot inner text equals weather in and we'll attach the name over there so now when we say tokyo we need to make sure this dot city because the class name city it says weather in tokyo and then the rest of this information is still not changed so we have to make sure we change all the other information as well so document.queryselector.icon we can set the source of this um we have the example url over here so just copy this and replace where it says the icon id we can just insert inside of here the icon okay and now we have the icon and it shows up over here we can make this smaller by removing that at two times now we get a smaller icon over here next we can say document.queryselector of the description and we'll say dot inner text equals description and we can say document.queryselector of the temperature we'll set the inner text to be temp and we'll also add on the degree symbol let's get that from our html degrees celsius and then next we have the humidity and the wind speed say dot humidity humidity dot inner text equals the humidity say humidity colon plus humidity and then add a front percent symbol after that and lastly the wind speed so i think we call the dot wind so it's dot wind and we'll say wind speed of speed i'll say kilometers per hour and now let's fetch the weather for tokyo and we got 9.71 degrees celsius broken clouds humidity 62 and wind speed is 3.6 kilometers per hour now we're nearly done let's just make a few adjustments to the styling over here before we get to the search bar for the description we can say text transform capitalize and i'll make all these words capitalize that's a cool feature and also the icon description you could put those on the same line because the icon is described by the description so let's say dot icon you will create a flexbox so first i will copy my changes here i'll put the description there and we'll make a flexbox around the icon in the description we'll say like dot flex let me just put that around there because all we need this to do is just display flex so we'll say dot flex is display flex and we also want a line item center and we don't need justify con center because we want to be left aligned let's put a default image in here actually let's like copy this image address and put it over here and let's add a little bit more space below the temperature say margin bottom of say 10 px let's say 1em a lot less than that 0.5 okay go with 0.4 and now we have the cloudy and the icon aligned you can actually like um put a little bit on the left some margins and margin left on the description will be let's say 10 pixels and actually maybe a little less eight now that's good we have this icon aligned with the text and this looks pretty good so now what we need to do is just make this search bar work so first thing i'll do is i'll say document.queryselector of dot let's get the button we'll say dot search button we'll say add event listener of click and then the click it's when we click it it's going to do a function the function is going to be we just need to search for the weather so we can create a function here called search and all this is going to do is just get the content of the search bar so it'll say document.queryselector of the search bar dot value that's going to be what we're searching for so you can say this dot fetch weather of this and let's say over here weather dot fetch weather not fetch this search and this will automatically get the content of the search bar and search for it and now you can actually try this out let's say tokyo here click search but it says can't add event listener i think we need to make this run at the end of the javascript so we can say defer here because the because this was low at the very beginning before the button was created so that's why it was not actually able to add the event listener because this button didn't exist when it was trying to call this line so now if we say defer in the script it will check only at the end for this button so now if we try this again you can say tokyo click search and it says weather in tokyo and denver you'll get the weather in denver and now let's just add an event listener to the input box for when they press the enter key so we can do that by saying document.queryselector and on the search bar you'll add an event listener of key up now this function will actually take in the event as the parameter so say event then we can say let's say if event dot key is equal to enter then weather.search and now if we type in something and press enter we'll search for it as well let's remove this log statement because it's we're no longer testing it and now let's say we want to make sure this dummy text over here that we just insert randomly into html doesn't get displayed when they load the page until you can actually display weather so you can also on the when the page loads we can call the weather.fetchweather function say weather.fetchweather denver when they load the page and they can search for a new location when they want but you notice when we load the page until it finishes fetching the weather they get the wrong information so we don't want to see that so let's say we start out with a class of loading on this weather so say weather loading and when we have weather loading will display none so we can hide the um you can hide the dummy text by saying dot weather dot loading we'll say visibility hidden and when we load through the weather we do call display weather we will remove that so we'll say document.queryselector.weather and then we'll say dot classlist dot remove so this will remove it if it's there and won't do anything if it's not so after the first time we'll still be this line will still work without a problem you can say remove of loading and now as soon as the weather loads it shows up now let's say we want to give some feedback that's loading we could make a loader or we can just say the word loading you can do that by making after sudo element we can say visibility visible and we'll say content is loading color white now we have the word loading there let's make this shorter we can say max height 20 pixels and now we get 20 pixels there we want a position relative here and a position absolute here to make it so these pseudo elements will actually be a line where the original content started let's make sure we say top zero and now we have loading and rip gets replaced with the content let's actually move it a little bit more to the right you can say left 20 pixels and now i get loading and it gets replaced with weather this is good let's say you type in tokyo it replaces with tokyo as soon as that loads now these background images are just generic landscapes you can actually get photos from each city using different search terms with unsplash so let's copy this url and over here we're going to say um document dot body dot style dot background image we're gonna set that equal to url and in here the same url but instead of saying landscape here i will insert in the middle the city name so say name so now i see weather in denver it gets us a picture from the search term denver if i search tokyo it will give us a tokyo picture so now we get this picture of a chef making japanese food now we can search london and we get a picture of london and i think this is where i'll leave you all for this video i hope you learned something if you like this video please give it a thumbs up and subscribe for more content just like this please let me know in the comments what you want to see me do next and have a great day bye [Music] you

Channel: Jonah Lawrence • Dev Pro Tips

Views: 54,681

Keywords: weather app, javascript tutorial, javascript api, weather app in javascript, weather website, how to make weather app, how to make weather website in html, html weather app, javascript weather app, beginner javascript tutorial, html tutorial, css tutorial, web development, web development tutorial, simple javascript projects, programming tutorial, weather api, openweatherapi, how to use weather api, javascript weather api, weather app javascript, javascript api tutorial

Id: WZNG8UomjSI

Length: 37min 36sec (2256 seconds)

Published: Thu Dec 10 2020