Build A Weather App Using HTML, CSS and JavaScript

what is going on everyone Opie here and today we're going to be building this weather app using HTML CSS JavaScript and open Weather API and let me just jump in and show you guys how it works we get some weather data here with the city and the country name we have the date as well and the time and the weather forecasts so clouds we've got this icon here and we have the temperature with the minimum and maximum temperatures here we also get the real feel as well as well as the humidity wind and pressure and if I click on one of these here let's say Fahrenheit you can see that the temperature changes to Fahrenheit I can also search for a city as well so if I type say Miami enter see we get the temperature for Miami let me try another country or city whatever Tokyo yeah there we go that's pretty much it and let's jump in all right so I'm here in the terminal I'm going to start by creating a HTML file and I'll call it index.html I run exclamation mark and tab to generate the boilerplate and for the title I'm just going to say weather app and I spelled that wrong okay and I'm actually going to create a style sheet as well we're going to need that as well so let me go ahead and do that and in index.html I'm going to link the style sheet that we just created and we'll start in the body I'm going to create a div with a class of container and inside of this container I'm going to create a div with a class of weather header this is where we're going to put the units and the search bar inside of this div I'll create a form with a class of weather double underscore search and an input with a type of text and a placeholder which says search for a city and I'll give it a class of weather search form okay and then underneath this I'm going to add the search icon so I'm going to head over to font awesome and sign in and then I'm going to head over to kits and copy this script code and paste it just above the closing body tag and then underneath the input I'm going to say I I'll give a class of fa solid if a magnifying glass and let me just open this in live server okay that's what we're working with so far the next thing I'm going to do is underneath the form I'm going to create a div and I'll call it and I'll give it a class of weather units this is where we're going to have the uh degree celsius and the green Fahrenheit symbols I'll create a span with a class of whether unit Celsius and then inside of here I'm gonna create a HTML entity which will allow us to get the degree symbol so I'll say ampersand hash 176 and I'll put C and if you see here we have the degree symbol and I'll copy this and just paste it one more time below and instead of Celsius I'll say Fahrenheit nothing all caps let me correct it and instead of C I'll put f okay all right so below the uh weather header div I'm going to create a div and I'll call it and I'll give it a class of weather body this is where we're going to put the main content so the temperature and stuff like that div with a class of weather double underscore body and inside of this div I'm going to create a H1 with a class of whether double underscore City and for now I'm just going to put London UK now underneath this H1 I'm going to create another div with a class of weather daytime but we're gonna put the d uh the date and the time so I'll create a paragraph and I'm just going to say Monday 14th this isn't probably right but Monday 14th of March 2023 whatever 11 14 a.m just a random bigger okay and then underneath this weather date time div I'm going to create another div where we're gonna put the weather forecast so Dave with a class of weather double underscore forecast and I'll create a paragraph and put clear that's the value and then underneath this weather forecast I'm gonna place the weather icon so I'll create div with a weather double underscore icon as a class and then inside I'm going to create image with a source of http open weather .org slash image slash WN and for the icon idea I put 10d at four times which makes it have a higher resolution so it makes it clearer and I'll say PNG and this seems to not work oh I didn't close the image tag must the issue open method.org http open weather oh open weather map overweathermap.org there you go okay so below this div I'm going to create a paragraph with a class of weather double underscore temperature and I'm going to add this value here so this HTML entity and paste it there and I'm just going to remove that F and just put 18 at the front to 18 degrees okay and then underneath this paragraph I'll create another div give a class of weather double underscore min max create a paragraph put them in 12 ampersam hash 176 copy this and paste it below and for this I'll put Max and we'll say something like 16 not 16. yeah 16 degrees whatever 16 just to have a placeholder value Okay so underneath the weather mid Max and underneath the body we're gonna create another div and give it a class of weather info this is where we're going to have the values for real fill humidity wind and I think pressure yep so David a class of Weber double underscore info and I'll create another div with a class of weather card okay and then inside of this card I'm gonna add an eye tag with a class of fa solid f a temperature full and underneath this I'm going to create a div and inside of this div I'll add a paragraph for the value real feel and then underneath that I'll add another paragraph So shift alt down arrow to do that and I'm just gonna put 18 ampersand hash 176 and I'll give this paragraph a class of weather double underscore real feel okay great uh seems like we have an issue with the icon chapter oh Dash four there we go and what I'm gonna do I'm just gonna copy this shift oh down arrow uh three more times and instead of temperature full I'll say f a dash droplet f a Dash droplet and instead of temperature for here f a dash wind and f a dash gauge spell that wrong gauge Dash hi okay there we go we have all these symbols let's replace the values here so instead of real fill I'll have humidity here wind and here pressure okay and let's change the class names as well so real feel humidity should be here wind should be here and pressure here all right so that is it for the HTML let's go over to our style sheet and start styling I'm gonna import pop-ins but you can use any font that you want so let me go to import copy this just paste that in here I'm gonna do a quick CSS reset so margin zero padding zero box sizing border box and for this project we'll give everything a font family of Poppins with Sans serif as a fallback font there we go okay so next thing we're gonna do is go ahead and start the container so container background will be one seven one seven one seven color White padding to ram all around and we'll give it a width of 40 percent margin on the top and bottom before Ram Auto on the left and right and we'll give it a border radius of 10 pixels all right next thing we're going to start is the header so weather double underscore header give it a display of flex justify content space between and we'll align the items to the center next we're going to style the input here input remove the border border none background will be uh one e one e one e and remove the outline as well so outline none color of FFF padding 0.5 RAM on the top and bottom 2.5 RAM on the left and right and we'll give it a border radius of 5 pixels yeah five pixels next let's start the placeholder so this value right here that says search for City input placeholder just gonna give it a color of FFF I'm going to start weather search next so where the double underscore search we'll give it a position of relative and we'll start the icon next so whether double underscore search I so the icon underneath the weather search div we're going to make it position absolute which will make it relative to the weather search div left 10 pixels top 10 pixels and a font size of 15 pixels with the color FFF let's go ahead and style the units so whether double underscore units we'll give it a font size of 1.5 Ram then we'll style these span elements inside of the weather units div we're just going to give them a cursor of pointer so that when we hover we get this icon next I'm just going to style the first span element so whether the underscore unit span first child it's just one colon first child foreign writes of 0.5 Ram okay the next thing we're going to do is style the weather body so whether double underscore body we're just going to align the text to the center margin top of three Ram okay that should be good and next we'll start the weather date time so this value here we'll give it a margin bottom of two REM and we'll make it a little bit smaller as well so we give a font size of 14 pixels okay that's good next we'll start the uh weather forecast so this value here weather double underscore forecast we're going to give it a background of that grayish color 181 e1e display of inline block padding 0.5 RAM on the top and bottom one ram on the left and right and we'll add border radius of 30 pixels okay next thing we're gonna do is style the image it's way too big so I'll say weather double underscore icon image we'll give a width of 100 pixels there we go now let's go ahead and sort out the temperature so whether the underscore temperature we'll give it a font size of 1.75 Ram thank you so make it a little bit bigger and let's go ahead and start styling the cards so double weather double underscore info we want to display we want it to have a display of grid so I'm going to use CSS grid a grid template columns repeat 2 1 f r so it will be two columns and they'll each take up an equal amount of space as you can see and we'll add some space in between each grid so we'll give it a grid gap of one REM and we'll add some margin to the top of three rim okay next thing we're going to do is style the minimum maximum values which I should have done before during the info about it okay so whether min max gonna give it a display of flex and justify content and we'll Style each paragraph inside of this div font size will be 14 pixels make it smaller and then we'll add some margin of 0.5 Ram all around okay so next thing we're going to do is style each card So Below weather info which is the container of each card so whether double underscore card we're gonna say display of flex welcome and we're gonna align the items to the center background will again be that grayish color so one e one e one e and we'll add a padding of one ram and a border radius of 10 pixels okay next we're going to style the icons inside of each card so weather doubles underscore card I give a font size of 1.5 Ram and margin right of one rim okay so we're going to start the paragraph next so it's a bit too big whether double underscore card paragraph give a font size of 14 pixels all right so let's go ahead and make this app responsive on all screenwifts so I'll create some media queries down here media Max width of say uh 936 pixels should be good we'll start a container and we'll give it a width of 90 percent okay great next we're going to style the weather header and give a flex direction of column style weather units and add some margin to the top okay great next thing we're gonna do is sort this out in mobile view so at media Max width of 400 pixels start the weather info and we'll add it onto a single column so grid template columns none and let me just resize that I'm checking the console should be good think that is okay okay so I think that is it for the CSS let's go ahead and start displaying the data using uh open Weather API so I'm going to create a file called app.js and in index.html we need to link the file we just created so script source app.js and head over back to app.js I'm going to create a function called get weather which is pretty self-explanatory we're going to get the weather about to begin with I'm just going to console.log testing just to see if everything works fine and we'll run the function when the document loads so document the body that add a web listener load we're going to run get weather and if I check in the console I reload the page testing okay great all right so what I need to do is head over to open Weather API so we can get the URL and start making our request so I head over there I've already signed in so I'll go to my account and I'll get the API key to begin with and if you don't have an API key which you probably don't you can create the key by pressing generate and it would do that for you and then you have to press this button to activate it which will change the status to active just a quick warning when you do create a API key for the first time it could take two hours or more for the process to go through so if you get an error when we're working on the project later just know that's most likely the issue all right so what I'm going to do is just copy this API key and I'll remove this console.log and let me go back to the app and I'll create a variable code API underscore key add some quotation marks and just paste that in there and I'm going to go back to open Weather API we need to start making our request so go to API and current weather data go to the documentation and you can see that it you can make an API call with the latitude and longitude but we don't need that we need to do it by sitting them so I'm just going to scroll down and try and find that okay building geocoding great so we'll copy this and I'll go back to the app and what we need to do is use the fetch API so that we can actually make this request so I'll say fetch add some quotation marks and just paste that in there looks like I didn't add it properly okay great and instead of API key I'm just going to remove that what we need to do is actually use backticks so that we can add our variable to the URL so backticks app ID will equal curly braces dollar sign curly braces and then we're going to put API key and what we're going to do is for the seat enable go to hard code London all right and I'll say dot then which will take a response and return response.json and then I'll add another dot then which will take data and I'm just going to contour.log the data for now let me go back to the app and reload the page you can see we get an object back with a bunch of data here get the name main temperature real feel humidity so if you actually look in the object and we go to main temperature you can see that the number is quite large that's because by default open web API uses standard units so if I go down here you need to have measurement standard metric and imperial units are available if you don't use the units parameter standard units will be applied by default so what we need to do is after the API key we're going to say Ampersand units and I'm just going to hard code in metric unit to start with which is degrees Celsius and if I go back to the app reload the page you can see that we now get the temperature in degrees Celsius all right so next thing I'm going to do is actually save the value here and the value here so the units and the city to a variable so I add some comments it says state we say let current city which by default will be London or whatever your city you want to make it and then I'll say let uh unit and by default it will be metric so instead of hard coding in here we're going to use dollar sign Cody braces units and current city we'll put in here okay now instead of const.lock this data let's start displaying this data so what I'm going to do is below the state I'm gonna get the selectors oh sorry get the HTML elements using selectors so selectors I'm going to say uh let's City equals document dot query selector and what we need to get is the city so whether okay weather double underscore City okay and so whether double underscore City here we're going to say we're going to add some curly braces and we'll say City dot in a HTML what that will equal to is data dot name so we'll add backticks data.name and write another uh curly braces and we'll say data dot sys dot country okay and if you can see here you have the country name sorry the country name and the city so city name and Country all right so here you can see that it Returns the country code rather than the full country name I don't want it to be like that I want it so that instead of GB it says Great Britain or United Kingdom or whatever so what I'm gonna do is actually create a function which will convert the country code to the full country name so up here I'll add some comments oh I'll add some comments convert country code to name so function convert country code and I'm going to pass in country all right and what I'm going to do is create a variable called region names make it equal to new Intel dot display names which will take an array with a string value of English so en and then I'll pass in an object with a type of region and what I'm going to do is just return regionnames.ov and then I'll pass in country all right so what we can do is in here I'll say convert country code and then pass in they to the sys the country now if you see we get the full country name which is great the next thing we're going to do is sort out the date and time so I'll create a variable called date time up here so let's select that make it equal to document the query selector oops need to add quotation marks and the weather double underscore date time okay and then down here we'll say date time dot in a HTML now with this if I actually just remove this for now just add some comments here and I come to download this data and I go to the console wrap you can see that it doesn't have that as the uh it doesn't have like the full um date and time what we get back is just a date and time uh Unix timestamp and the time zone so what we need to do is use these two values to be able to return the date and time in this format that we've displayed here so I'm gonna have to create another function which will do that it will convert the time zone and timestamp to the full country name so uh above the uh convert country code I'm going to create a function called convert timestamp and it will take a timestamp and a time zone and initially we're converting the seconds to hours so I'll say convert time zone and I make it equal to time zone divided by three thousand six hundred let me add some comments here so convert seconds to hours and then I'll say const date equals new date timestamp times a thousand to get the date and then I'll create an object call it options and the weekday will be long so it'll be displayed in a long format the day will be numeric month long yeah numeric our numeric minute also numeric and the time zone we've got to add some back ticks Etc slash GMT dollar sign curly braces I'm gonna say convert time zone greater than equal to zero if that's the case then we want to return this Dash else I'm gonna return Plus right and then afterwards we'll add another curly braces math dot abs convert time zone and then after this we're gonna pass hour say hour 12 will be true our 12 true okay and then we're going to return date dot two low cal string pass in English us so us and then afterwards options and then I'm going to take this function date time dot inner HTML or equal convert timestamp and we're going to pass in data.dt and the time zone so data dot time zone okay and uh date time uh what we've done here oh I see the issue uh I returned data.2 local string when I should have returned date.2 local string all right there we go I think that should be right Tuesday March 14 11 59 let me check yeah it's about right okay okay that's good next we're going to do uh the weather forecast so let weather forecast document dot query selector weather forecast and then here we're going to say weather double underscore forecast dot in a HTML will equal the image so in fact let's just copy all this and honestly let's just remove all the values we've ready put in place so let's remove this so move this okay and remove that for now okay so weather forecast not in a HTML will equal back case and then we paste that image in there and I'm not sure why that is doing that weather forecast oh uh I think that's incorrect yeah so not weather forecast the weather icon I don't know why I did that my mistake so weather forecast and I'll remove that okay so weather forecast dot inner HTML will equal paragraph and then I'll put um data the weather zero dot Main okay so that is the main weather forecast let me go to the HTML and remove clear okay all right next we're gonna handle the temperature so up here that weather double underscore temperature cool document dot query selector and then pass in whether double underscore temperature document of career selector a weather double underscore temperature okay cool and then say weather double unders uh number underscore temperature the inner HTML or equal data to backticks data dot Main dot temp replace that and afterwards we're going to add the uh degree symbol so Ampersand hash 176 okay now it gives us the value in two decimal places so we need to round that up to the nearest whole number so we'll use two fix to do that oops so I'll get two fixed okay next Let's uh get the weather icon so let weather icon called document dot query selector weather double underscore icon and then down here weather double underscore icon dot in a HTML uh I'm gonna actually copy this right here and then remove this don't need anymore okay just paste the image in there now instead of 10d we're gonna pass in data the weather zero dot icon okay so that we can get the uh appropriate icon from the request and after this we're gonna tackle the minimum and maximum values so let weather min max you calls document.queryselector whether double underscore min max rather double underscore min max dot in a HTML oops add paragraph and we pass data dot main dot 10 underscore min dot two fix great and we'll add the degree symbol so at Ampersand hash 176 okay great I'm just going to copy this paragraph and paste another paragraph right next to it and instead of main I'll put Max and instead of 10 min output temp Max to get the maximum temperature of course so okay so minimum five degrees maximum eight degrees okay great we've got that sorted let's tackle the real feel now weather double underscore real feel because document dot query selector weather real feel okay and then down here whether double underscore real feel dot in HTML will equal back text Data dot Main Dot feels like so it feels underscore like the two fixed to the nearest whole number and then I'm just going to pass in ampersand hash 176 so you get the degree symbol which is great I've got that and let's do the last two humidity and wind so it is paste it two times below weather humidity and whether wind is actually the last three we need to do pressure as well so weather I'm just got wind paste it again whether underscore pressure document the weather underscore pressure the query selector whether a double processary okay all right let's go down here and weather the weather double underscore humidity dot in HTML will equal back ticks data dot Main I think yeah related.main.humidity to data dot main dot humidity.weather double underscore humidity okay and then afterwards I'm just gonna put a uh a centered symbol a weather humidity okay cool and then underneath that I'm just going to copy this paste that below whether wind data dot Main Dot data.wind yeah data.wind dot speed that should give us the wind speed and it's not a percentage but rather it's meters per second okay because that is the metric unit and pressure sort of copy that paste it below whether double underscore pressure the inner HTML equals data dot main dot pressure and the value is in HPA okay so that's what we're working with so far all right so we have London United kid then we've got the date we've got all the data let me just change the current country and see how it will work so London say Tokyo okay you've got Tokyo Japan Tuesday at 9 18. I've got all these values here great let me change it back to London all right so what we need to do next is make it so that we can search for a city and it will update the uh value here so to do that I'm going to actually create a function or not a function but I'll get the document first so I'll add some comments to say search and I'll say document dot query selector and whether double underscore search dot add event listener so we're gonna listen for a submit so when we submit the form if I go to index.html when we submit this form we want to get the value in the search bar and then update the variable with that value so submit which will take an event and I'm going to say let's search equals document.queryselector weather double underscore search form which will get that search form and by default when you submit forms the page reloads so we're going to remove that default action will prevent that default action so prevent D4 action e dot prevent default and then we're going to change the current city in the state so current city City I will make it equal to search dot value so what we search in then I'll say get weather forecast and we're gonna run get weather so that we can display the data that we just changed so it will rerun the getweber function with the state value changed and let me test this out right here so good as let me look at the console it looks like we have an issue cannot read properties reading country at 57. convert country code data.sys the country oh uh I don't know why this happened search the um searched of value is what should have typed I don't know how that even happened but anyways uh Tokyo there we go we get the value Miami let's try that okay let's go the time temperature stuff like that all right cool let's try uh um what should we try we'll try Mexico City all right um let's try somewhere else try our country Sahara okay so that yeah that pretty much works and the next thing we're going to do is let's sort out these units so that we can change the temperatures and the values from degrees Celsius to degrees Fahrenheit so um underneath here I'll add some comments units and I'll say document.queryselector which will take where the underscore unit underscore Celsius and I'll add an event listener to it right and I'll listen for a click be an empty function and I'll say if Cur unit if units or if units is not equal to metric then we want to change it to Celsius or change to we say change to Imperial so unit or equal Imperial or units will equal Imperial and then we'll get the weather forecast get weather okay and what I'm going to do is copy this and do the save for the opposite way so Fahrenheit add event listener this is for a click if card unit equals Imperial we're going to change to the metric system so units will equal metric and then we'll get the weather forecast with the values changed okay and looks like we have an issue oh the issue I'll take it HTML I put double underscore when I really shouldn't should just be the one underscore I think you should be all right now so let's search Tokyo okay and I click on Fahrenheit should change the value to Fahrenheit let me check in the console again yeah oh I see why I went wrong the logic is wrong so it's not we're not changing to Imperial we're saying units if not equal to metric then we want to change it to metric that's my fault sorry you know it's not equal to metric you want to change it to metric and here if units is not equal to Imperial they want to change to Imperial let me change the comments here so change to Imperial foreign Tokyo change to there we go it changes the value and again all right and as you can see it also changes the win value so when you're using a metric system it's meters per second but when you're using um Imperial we want it to be miles per hour so down here I'm gonna say uh where where we have the meters per second I'm gonna create dollar sign and then inside of here I'll say units equals Imperial if that's the case then we want miles per hour else we want meters per second and I remove this here so meters per second and this issue here again oh let me add let me end the okay let me yeah let me add the back text which I just done that should be good now if I change to Fahrenheit 9.22 miles uh meters miles per hour sorry and then 4.12 meters per second okay great so we have that done let me try this again Tokyo all right when I submit the form I want the form to clear so let's go and sort that out so after the search value of the get weather clear form search the value foreign there we go change the fahrenheit there we go okay uh I think that should be it if I didn't miss anything yeah that should be it So yeah thank you guys for watching if you enjoyed this video don't forget to like subscribe and I'll see you guys in the next one

Channel: Ope Afolabi

Views: 12,339

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: hIHsDIJUL3A

Length: 64min 46sec (3886 seconds)

Published: Fri Mar 17 2023