Hey what's up everyone welcome to new Envato touch plus course my name is Adi Portilla and in today's video you'll Learn how to create a simple yet Functional weather app using vanilla JavaScript and the open Weather API this Is the final product and to get going All you have to do is type a city name And hit enter there's an Ajax request Being performed and if that's successful Then we display weather information for That particular City simple now if You've never done this kind of thing Before don't worry it's not that Complicated and I'll explain everything In as much detail as possible here's how We'll build this app first we'll write Some HTML to define the structure of our Page then we'll style it by writing CSS Code and finally we'll make everything a Functional by using vanilla JavaScript And the open Weather API so pretty Straightforward this is not a very Advanced app but you'll certainly Understand the code a lot faster if you Already know a bit of CSS and JavaScript Now before we get started I would like To thank the sponsor of today's video Which is envato elements here you can Find tons of useful resources like fonts Icons UI kits WordPress themes music Stock photos and much more for creatives Like me this is an awesome resource Because all the assets have simple
Commercial licensing and you're not Bound to any contract therefore you can Cancel whenever you want so if you're Interested check out the link in the Video description alright let's get the Show on the road and the first thing We'll do is create the structure of the Weather app Before we get started I would just like To mention that this course is based on A tutorial written by Mr George Mart Sukos and you'll find links uh to the Original tutorial in the video Description Um and there you'll also find links to Any other resource that I used if you Want to follow along with the code that I'm writing I included a starter kit So you can you know get the exact code That I'll be starting with for this Course oh and don't forget to subscribe To envato touch Plus for more free Courses and tutorials just like this one All right let's write some markup now We'll be creating our weather app based On this design that I made this intern Is based on the original app that George Built and I just made a few changes here And there but essentially this is what It looks like on mobile we have these Cards that show the different cities and The weather conditions and then on Larger screens those cards are now Displayed in kind of this vertical
Fashion with the icon on top the Temperature down below a description of The weather conditions and then the name Of the city and the uh the country code Okay so this is I actually what we need To uh to create now if you want to Create this yourself and you don't want To use this design which by the way you Will find in the video description You'll find a link to download this uh This exact design file but if you want To use a different one and You don't know where to start then you Can head over to envato elements you can Search for for example weather and You'll find a bunch of related assets Like for example icons and illustrations Right so if you go to Graphics here You'll find a bunch of weather related Icons Which you can download or if you're Looking for maybe a UI kit you can go to Graphic templates And You'll find a lot of uh of UI kits for Weather apps and you can use one of These the choice really is uh is up to You uh me personally I uh I'm just gonna Use this weather icon set from from Envato elements it's called the weather Icons and fonts and you'll also find uh Find the link to that in the video Description all right now based on This uh this design let's go ahead and
Create uh the markup or the HTML code Okay so I'm going to close these And I'm gonna jump back here in the in The browser and I already created a Folder here and let me just Put these side by side uh the folder That you can also start with if you Download the starter kit contains an Index.html that currently just has some Starting code Uh you have on app.js which is blank an App CSS which contains uh just a few Styles uh mostly just general styling And some typography uh Styles and then We have a couple of images we have an SVG For uh for the button we have a search Icon for the search field and then we Have a bunch of weather icons That are taken from the Icon set that I Just showed you so this is what we have To start with let's go in the index.html And here I'm just loading a reset file To kick things off I'm using modern Normalize I'm loading the Fig Tree Google font and I'm also loading the Main CSS And in here I have a div class Notification that's responsible for Displaying this uh element here on the Top right that just says Hey the demo Needs an open Weather API key and you Can get yours if you go to uh to this Link right here I'm going to be using
The same key that George used in in his Tutorial but I recommend if you want to Follow along getting your own key so With that said let's get started so Let's uh take a quick look at what we Have to work with here So we we basically have a title and then The form Which also has this message box that Displays you know various error statuses And so on and then we have the list of Cities and a simple footer So let's start with a header element and Actually I'm going to start with a Container and in here I'm going to have A header An H1 that says add location and then We'll have our form let's give this an Idea of search form we can leave the Action blank it's it doesn't really Matter and then we'll create a label for Search term and the label will say Search the city or area and then let's Create the contents of the form so we Just have an input and a button Basically And then this uh this message box So let's say div class we'll give it a Class of form a row and then we'll Create an input type text Let's give this a placeholder like so And let's give this a name search term Let's also give this an ID of Search Terms so it's now linked with with the
Label and also let's set autofocus on it Because I want this to have Focus every Time I refresh the page just like this Great Let's actually bring this back to zero And then under the input I'm just gonna Have a button type submit and the button Is just going to have an image inside The the SVG that I that I just showed You so that's going to be image slash Plus Circle And we'll set the alt to plus Circle so Far that looks something like this and Then under the form row we'll just uh Create a paragraph with the class of Form MSG the form message okay that's About it for the header next Still inside the container because we're Going to use the container to uh to set A Max width for uh for our content and Also to uh to Center everything nicely In the page just like you can see uh Here in the um In the version for uh for the bigger Screens So for the cities we'll create a section And you will Class cities And let's put that on hold for now and Let's go ahead and create the footer And in here I'm just going to use a Paragraph and a small tag and I'm going To put The text contents that that you saw
Here With links to my website and George's Website all right now let's see about The list of cities let's take a look at This structure so in here we have an Icon We have the temperature a description City And country code So the the markup would look something Like this we create a list item of Course each acidic card will be Represented by a list item and for the Icon we'll use a figure element And inside just an image source IMG Weather let's just use one of the svgs As uh as a demo Let's call this demo uh by the way this Code this list item code will be Generated later from JavaScript for now We just want to hard code it Uh into the index page so that we can Style it properly okay so that's the Image and then for the rest of the Content we'll use a div and I'm going to Use an H2 for uh for the temperature Let's say 21. And then we'll use superscript to Display the uh the degrees the Celsius Degrees okay so that looks something Like this so far next let's create a Paragraph with the class of City Conditions and we're going to type in Sunny and then let's create an H3 that
Has two spans inside so span one is Gonna have the class of city name so Let's say Athens And the second span will have the class Of City Country let's say gr for Greece and That's about it now what we can do is Just copy this list item And let's just duplicate it a couple of Times so we can style it properly and That's it really that's the only HTML That we have to write it's a pretty Simple app as I was saying so we don't Really need to go any further than this Okay so the markup the HTML for our Weather app is now complete but it Doesn't look very good because we have Very little custom styling applied to it So let's go ahead and fix that and let's Make this look just a little bit better By writing our own CSS So let's get straight into it let's First uh write the necessary code for The small screens right so I'm just Gonna resize this so we have a bit more Uh space to work with here so let's open The app CSS and let me show you what we Have so far so I defined some custom Properties uh basically for the colors So we have a global border radius which We're using and a global transition and Then for the general Styles I'm just Setting some font sizes font family for The body uh and just some resets for the
Figure Uh setting Max width and height Auto to Uh to the image element and then uh Setting the proper padding of 4M and 2 RAM for the container right so This uh make sure we have a little bit Of padding on the on the sides of the Element here and then I went ahead and Created or added all the correct font Sizes for the headings the paragraphs And the small elements based on our Design and also some some styling for The links for the anchor tags sending a Color text decoration none to remove the Underline and then adding a transition Now let's start from the top here and Work on the forms so for the forms let's Start with this form let's make it as Wide as the parent element Like so and let's add a margin Bottom of two rims Let's also set a Max width of 30 Rams And this will help us when we get to uh To the bigger screens we make sure that We don't have a super long form now Let's see about that label uh let's set A margin bottom of 0.5 grams that's About 8 pixels Like that and also We'll make sure the display is set to Block so it it clears a new row so it's Displayed on different rows compared to Uh to the actual uh input now speaking Of the input let's go ahead and style
That one next So what I'm going to do here is just say Border a radius and I'm going to set the I'm going to set that to the global Uh variable that we're using and also Let's get rid of the border so I'm going To set border to zero let me actually Zoom in here a little bit more so you Can see what we're doing now let's Target the uh input type text which is Uh this one right And in here let's set A fixed height it's going to be 2.75 Grams Based on the uh the design that we're Using and let's add a background color And a background image because if you Remember from from our design Let me actually make this a bit bigger Again if you remember from our design Let me actually hide the UI here We have an icon applied here to the left And we have a darker color for uh for The background right so to apply that We're going to say background we're Going to use the shorthand notation here So for the background color I'm actually Gonna I'm actually going to use P shade 30 and then the URL is going to be IMG Search.svg and we're gonna place this Point 75 ramps from the left we're gonna Place it Center Or to the center vertically and we're Going to set it to no repeat and let's
See Y is in this working input type tech Oh I forgot one of those There we go that's a lot better so we Added the background color we added the Proper padding we added the image Let's change the color I'm going to use P tint 90 and what else padding left we Need a little bit of padding left to Push that text to the right side 2.25 Rams is going to be here like so and Let's click this we have a small outline That that creeps up in there so what's That outline To None all right and let's Also style that that placeholder so We'll say input placeholder and let's Change the color to 10 to 40. Like that now based on our design the Input and the button are sitting in the Same row So let's target that form row div that We created here and let's use flexbox so I'm going to say form row I'm simply Going to say display Flex And let's set a gap of 0.5 Rams I'm just going to set a small gap Between the two elements let's also Allow this um this input to occupy the Entire available space and because Because we're using a flexbox I'm just Gonna say flux grow one and that's going To take up the entire available space Great uh let's quickly add some uh some
Focus and hover styles for this input Like that so on focus and hover I'm Simply changing the background color And let's add a nice transition here and We're going to use the global transition To make things Easier for us nice now let's take care Of the form button right so I'm going to Say form button uh let's give it the Same width and height as our form Element so 2.7 Rems 2.75 Rams actually Like that uh let's set a background Color That's the secondary custom property That I defined let's get rid of the Border all right uh let's add a border Radius and again we're going to use the Global radius and let's also position This icon right in the middle of that Element for that we can simply use Flexbox and I'm going to say align items To the center and also justify content To the center so now that button is Right or that image that SVG is right in The middle of uh of the button let's Also uh change the cursor to pointer So we get a nice cursor and let's also Add some hover and active States for the Button and those look something like This so on Hover we basically change the Background color and on active We change it again let's also Set up A transition
Transition like so okay cool Next let's see about the form message Right so the one that we're displaying Here and as you can see this is Displayed up below the input and it's Basically a box with rounded corners and A little bit of padding top bottom left Right So we'll say Form message let's start by defining the Background color we're going to use P shade 20. let's set up the padding and Let's also you know type in some text Hello This is a message this will be generated From JavaScript but uh we need to add it Now so we can style it for the padding Let's do 0.5 Rams and one REM so 0.5 top Bottom one REM left right like so well Let's change the Border radius uh this Time I just want the radius on the bottom Left and right Corners so to do that We're going to say 0 0 And then Global border radius and again Global Border radius so now If you can see it only has rounded Corners On the bottom part Uh what else uh let's push it to the Right a little bit so we'll say margin Left Let's do 0.75 Rems
Like that and let's set a width of 75 percent okay so that looks pretty Good uh this will be hidden by default And it's only going to be shown when we Need to display an actual message so What we can do to um to create this Hidden or visible state Is to use transforms and opacity so I Can say transform Uh translate 3D we can go with 3D 0 Minus a hundred percent and a zero and This is just gonna Push It Up by its Exact height amount and then we can set The opacity To zero but I'm gonna set this last and Notice uh this is kind of sitting on top Of of the input I want it to sit under It so I'm going to set the Z index to -1 And also we need to set position Relative for that bit to work okay so Now the um the form message is hidden uh Under The input let's go ahead and turn on Opacity zero as well and let's uh add a Transition Global transition So then Form message will create a separate Class called visible which will trigger From JavaScript here we'll just say Transform translate 3D zero zero zero This brings it back to the original Position and we'll set the opacity to One and you'll see exactly how this Works when we get to the JavaScript part
Okay so that's about it for the form Elements Everything looks good right now let's Move on to um to the header because we We need to uh to make some quick Adjustments here so in the header I will Just write some quick CSS to style this Uh notification part to match this and That code looks something like this so I'm just changing the background color The padding setting width to 100 and Then the margin of the paragraph is set To zero cool let's move on to the main Part of the app which is the cities Right and the cities look something like This on smaller screens so they're Displayed horizontally but then on Larger screens they're displayed Vertically just like you can see here But obviously the markup is the same so We need to use CSS to change the way These look depending on what size screen We're we're seeing them let's say Series So series is the UL it's the unordered list so the parent Element we're going to be using CSS grid So we're going to set display Grid and of course by default this Is just displayed in one column let's Start by setting padding zero list Style We can set To None to get rid of the Bullet points uh let's also add a bottom Margin or a bottom spacing between each List item so for that we're going to be
Using Gap 2 Rams and let's also add a margin Bottom we'll use margin 0 0 4 Rams just To create some space between the series And the actual footer now for the actual List item uh we're going to be using Flexbox so display Flex first we'll Start with the Horizontal version right so we have icon And then the rest of the content let's Start by setting a gap 1.5 grams to Create a space between the icon and the Content let's change the background Color To the just pure white like so and Let's align the items to the center Let's add a padding 1.5 grams should do A trick let's change the color of the Text that's going to be Shade 80. Like that And let's change the Border radius like So And we also have a nice box Shadow That's responsible for creating this Kind of copy Of uh of the element And that box shadow looks something like This so box Shadow we have eight pixels Uh x 8 pixels y zero pixels blur and Then it's just uh White so we're going To be using rgba 255 255 255.08 and that creates a nice solid Shadow behind uh the element great let's
Move on to the acidic conditions which Is this text here so City conditions and Here we'll just have to change the color We're going to be using tint 40 so a Lighter color basically and then let's Just add unbar margin bottom one Rim Just to push that content a little bit Further down so those are the city Conditions Let's go ahead and Target City Country And here uh we'll just change the color To white and we'll change the background Color to our tertiary variable like so Let's add the obligatory border or Radius that we need a bit of padding Inside these uh these elements so Padding point one two five Rams So that's a very uh very small Shadow And 0.25 Rams Top and bottom and finally let's create Some distance between the city name And the country code so we're going to Say margin left 0.5 Rams will do the Trick nicely and that's it These are the cities All styled up But of course These will only be displayed like so on Smaller screens right if we go to A bigger screen these need to be Displayed vertically so let's uh quickly Create some media queries for that and We'll start changing these at about 560 pixels
Right so 560 pixels plus uh we'll say Media screen and Min width 560 pixels Uh we'll do the cities first of all We'll Target the parent element and We'll change The number of columns so we can say grid Template columns uh for example one of Our 1fr and this will display the Elements in two columns Okay so two columns here but if we make It smaller Let me actually Open up the um The inspector here it's going to make it A bit easier for us to work right so on Smaller screens where the width is lower Than 560 pixels we are displaying them In one column but then when we get to 560 and above They get the two columns But what about even larger screens right If I make this like full screen Uh you'll see that these uh these cards Are way too big for the content inside So we need to to figure out a different Way to uh to display these well Thankfully in CSS grid we can do Something Like this We can say Repeat autofit and then we do a min max Of let's say 12 Rams And 1fr so what this does it's basically Calculating
Automatically how many columns we can Fit in each or for this layout Okay it's a very very cool functionality Of Of CSS grid and here we're basically Saying okay I want each element to be a Minimum of 12 ramps if you can do that Then create a new column otherwise let's Default back to 1fr which is one Fraction of of the available space Basically meaning 100 of the available Space okay so this is the the layout That that we're going for now also when We get to to this kind of layout we need To change the way the city is displayed Right we need to display it vertically Like so Uh thankfully because we used a flexbox We can simply change The flex Direction so we can say cities Li by default the flex direction is set To row but we can set it to column which Will display the items in a vertical Fashion And then all you have to do is say text Align Center to make sure everything is Aligned properly right in the center of The card and finally let's target the City conditions and I'm just going to Add a margin bottom 1.5 Rams just to push uh these uh the City and the country code a bit further Down
Now there is an another media query that We have to write and this is actually Pretty simple notice that on larger Screens Yeah we have A bit of a bigger Gap from the size of The page so let's go ahead and make that Happen Simply going to duplicate this one and This is going to be applied Starting with 768 pixels so when we get To 768 We do the following notification we say Padding 0.5 Rams and 4 Rems Let me make this a little bit a little Bit bigger so you can see the difference And then finally we'll Target the Container and we'll change the padding To four Rams All around okay so on smaller screens It looks like this on bigger screens it Looks like this And that's it that's the entire CSS that We need to write for this weather app All right so the weather app looks as it Should right we wrote the CSS it now Looks good but it doesn't work it Doesn't do anything so we need to add in That functionality we need to be able to Type a city name and get the relevant Weather information for that City using The open Weather API let's go ahead and Do that next
As I was saying earlier in this course We're going to be using the open Weather API to power up our weather app now open Weather works just like any other Weather information provider you type in The city name and this can give you Details like the temperature and the Conditions the wind speeds the pressure Humidity and so on and so forth now to Get started with open Weather you can go To this link here to create an account And to get your open Weather API key You're gonna need this to make this work Personally I'm going to be using the API Key that George used in his written Tutorial but I recommend you get your Own So with that out of the way Let's go ahead and start writing some JavaScript code so I'm going to open up The app.js file and I'm going to start By referencing some uh Dom elements so We're going to need a couple we're going To need the form elements for that and Just doing a simple query selector for The search form like so and then we're Gonna need the uh the input so constant Input that's going to be equal to Document query selector And that's going to be the search term And here I'm just Referencing The uh the IDS That I used
In the HTML right search form search Term And so on and so forth we also need the Message so constant MSG is going to be Document query selector that's form Dash MSG and finally we need a list that's Going to be the list of the Cities right So we're going to say again uh query Selector and here it's just going to be Cities Perfect now uh let's uh Define the API Key so we're going to say constant API Key that's going to be equal to to this One this is the one George used And then let's start by adding an event Listener for the form submit so what Happens when we type in a value in the Input and hit enter or we click the Submit button so we're going to say form Advent listener submit and here we're Just going to say e this is the event Basically And first thing we'll do is prevent The default Behavior right so now if I Hit enter or I hit submit nothing Happens Okay If this wasn't on Whenever I click submit the form Information would be sent to the Index.html and the page would be a Reloaded we don't want that so we're Preventing the default submission of the Form uh we'll also hide any message that
Might be displayed here and will also Remove the visible class so say MSG Uh sorry without the comments so MSG Dot text content will be equal to Nothing and then MSG class list remove Uh visible This is just uh a reset cool next let's Get the search uh value so we'll create A variable called input Val that's going To be equal to input dot value right and The input We Define it right here it points to our Main input and next what we need to do Is check if there's already a city that Matches the search Criteria so for that we'll create a new Constant called list Items array that's going to be equal to Array Dot from list Dot Query selector all series Li so let me Just make this a little bit bigger Okay so what exactly does this mean well List Points to the main UL right the parent Element of the Cities Query selector all cities Li basically Gets me all the nodes that are inside Cities Li and these are put inside of an Array by using the array object so now If we do A console log for list items array and We open up the console and let me just Put this on the bottom Okay so if we do the console and
We type something in and we submit the Form you can see that we have an array That has These three objects inside Now why we're doing this uh we're doing It because we want to compare What we just wrote with what we already Have and this basically prevents Prevents us from adding the same town Now we're going to say if list items Array Dot length is higher than zero so If we already have some series added Then we can start comparing right so for That we'll create a constant called Filtered Array and that's going to be equal to List items array dot filter and here We're going to create a new function That does the following create a new Variable we'll call it content another One called city name and that's going to Be equal to the element So the actual City card yeah dot query Selector and we're going to pass in city Name dot text content and we'll also use Two lowercase So what we're basically doing here is We're inside the city name variable We're getting The content Of the element with the class of city Name and we're converting it to Lowercase Let's do the same for the City Country
So Let's actually copy this and paste it so City country is going to be equal to uh City Country dot text content dot to Lowercase So we're doing the same we're getting The country code now Here's the thing when we search for a City we can say the city name like so But we can also add a comma and then the Country code because there are Cities that have the same name but Different countries so when we're doing The name check we want to check for both Formats For the city only but also for this Format where we also have the country Code so then first we're gonna check for The second format so we'll say check For the city comma Country Format and we'll say this if Input Val Sorry includes A comma So if the name we type here has a comma Then we'll do the following Just in case the country code is invalid For example Athens Like so so this is an invalid format we Just want to keep the first part okay And for that we say the following if Input val dot split comma And this will basically
Give us an array with The first position containing Athens and The second position containing us so the Second part okay we say one so we're uh Targeting the second element in the Array In case you don't know elements in an Array start at the position zero so in My case input Vel dot split so basically This one gives me an array with two Positions position zero is Athens Position one is us okay so if this Dot length is higher than two If we have more than two characters in Here then this is invalid right And in that case the input valve is Going to be Input val dot split comma zero Basically we are updating the input Val Variable to only contain the first part Of what we just wrote okay and here we Just get the content from the existing City so in the content variable We'll just say city name which we're Getting from here from ma here sorry now Else if we have a valid format like this The country code is valid so we keep Both the city and the country so the Content is actually going to be and We're going to use back text here this Is actually called a template literal And because we're using template Literals we can use string interpolation So we can basically do this we can say
City name and then comma City Country so This probably is a little bit confusing To you so let me try to explain this a Different way If we weren't using template literals we Would have to write the content like This synonym plus a string comma Plus City Country So to prevent This because it's not very elegant we Can use This we're using back text To start And whenever we need to insert JavaScript we just do dollar sign curly Braces and inside here we can put the JavaScript it can be a lot of things not Just variable names I can do if Statements I can do whatever but using Template literals like this is a much Better way than than using uh the other Method that I just showed you alright so Let's see what we got so far so we're Checking for the City Country format and We're setting or updating the content Variable depending on whether or not This is using one format or the other And what we just wrote here checks for The second format where we have the Country code Now If we don't have a comma in the name Then we're simply using the single Format like Athens in which case we're
Going to set the content to City name now what we need to do here After we did this if else We can simply return whether or not the Existing content matches The form input value so we can return True or false so I'm going to return Content equals Input Val to Lowercase And that's it for uh this first part Okay so let's actually do a log of the Filtered array because what we've been Doing in this part of the code is simply Uh create an array of filtered Items from our original list that's what Filter does basically so let's open up The console let's uh let's search for Athens Yeah and Athens actually gives me All three arrays because all three Uh or sorry all three elements each and Every one of these has the city name of Athens but if I do Athens Us Then we have a blank array because none Of these match the city of Athens from The us all three Are Athens from Greece but if I were to Go back to my HTML And change for example the middle one to Us Okay and I Do the same thing then look I have a
Search result that points to this middle Element and of course if I'm typing Something else That doesn't match any existing elements That that I might have cool now back to The JavaScript we have the filtered Array okay and we started this entire Journey to check if there's already a City that matches the search criteria so What happens if we do find a city that Matches the search criteria well we Simply display a message saying that hey You already know the weather for that Particular City so to do that we can say If filtered Array Dot length is higher than zero so If we do have a match then we set Message dot text content will be equal To something like this so again we're Using backticks And we're saying you already know the Weather for and then we're inserting Filtered array zero and this basically Points to that element in the Dom And then we're doing query selector city Name text content Or basically pointing to this element Right here or whatever it is that we're Matching okay otherwise be more specific By providing the country code as well Okay so we're changing the uh the Contents of the message and then we need To display the message right so we're Going to say message
Class list add visible so let's try this Out let's do Athens Athens Okay and we get a message saying hey you Already know the weather for Athens if I Do Athens Us It's going to tell me the same thing we Already know the weather for Athens us So let's actually do another Edition Here after I do a form submission And we display this message let's reset The form so form reset and We'll say input focus and we will Return so we'll exit the function So Now you can see that when we search for Something that is already there Yeah we show the correct message if we Show for something that's not there Let's say this add this just makes the The message go away and do nothing else Because we haven't found a match For this location but now it's time to Actually add some cities after we search For them uh what we did so far was just A quick check to see if there's already A city that matches the search criteria Now if there isn't and at this point we Know there isn't because we use the Return here We'll do the following we'll do some Ajax magic if you don't know Ajax stands For asynchronous JavaScript and XML and It basically allows web pages to be
Updated Asynchronously by exchanging data with The web server so all of this happens Without having to refresh the page now To do Ajax requests in JavaScript there Are several ways but one of the easiest Is just to use the fetch API okay so we Start by defining a constant Called URL and that's going to point To the weather the open weather map API and that looks something like this Https Api.openweathermap.org data 2.5 weather And then we're sending in some data Using these parameters so under Q we're Sending the input value so whatever we Typed here And we're also setting the app ID as the API key that we defined here and we're Setting the units to metric okay and This is this URL is taken from the Official documentation for open weather So then let's do the actual Ajax request For that we say fetch we pass in the URL And then we have a couple of responses From this and I'm just going to write Them like this so they're a bit more Clear uh then we say response we're Basically converting the response we're Getting from the server To a Json format and then we're Receiving the actual data so this works In two steps basically we make a request To the server the server gives us a
Response and then it actually gives us The actual data that that we can work With so with the data We can do the following let's actually Do a console log for data so you can see Exactly what's going on and I'm going to Open up the uh the console here and I'm Going to search for Uh Athens Okay and we already know uh the name so Let's actually go back to index and Remove these because we need to generate Them from JavaScript either way like so And now if I type Athens Now we're getting something back from The server right we got an object and This object has a bunch of information In in it okay we have the coordinates For the city we have the name we have The country gr that stands for Greece And then inside uh Main Yeah we have the temperature information Humidity pressure uh Max 10 min And so on and so forth so obviously it Works now what happens when we search For a city that doesn't exist like our Friend here so we do this And we get a 404 not found we we get a 404 code And the message is City not found so Let's actually uh work with this first Okay and I'm just gonna leave the Console log there so uh We can see it as we're progressing
And I'm going to say if data Dot How card code probably equals to 404 then we can throw a new error and I'm just gonna send the uh the code and The message and from my testing this is Actually necessary if we actually want To catch these errors from the Ajax Request and display the proper message Right so I can say dot catch and by the Way this still refers to The fetch that we wrote here so catch Equals and we're just going to pass in An anonymous function here and I'm going To say message dot text content is going To be equal to please search for a valid City and then message class list add Visible okay so now if I do another Search for this Yeah it's gonna display hey please Search for a valid City awesome so now We covered the situation where we can Get an invalid or when we send an Invalid data to the server but what Happens when we send the correct data And we receive the information the Weather information about that Particular City Well we need to start creating a city Card for it so let's go ahead and do That right now first of all this is a Big Object right the one that we received Here it has a bunch of information in it And for the purpose of this demo we only
Need a couple of information so we're Going to do something called Destructuring a data object so we're Going to define a constant and we're Going to say this main name sis and Weather and that's going to be equal to Data what this is doing it's basically Uh parsing the data object that we Received and it's just deconstructing it Into a separate constants so now we have A constant Main Or a main object a name object a CIS Object and a weather object that have The exact contents of the main sys name And whether objects from my initial Response okay so now if I do a console Log for right now weather Say if I can type weather and I remove This old console log And I search for Athens Yeah this basically gives me an array With just The information about the weather As you can see here so that's what Destructuring Uh the data object is doing So now that we have all of this Information in separate Constants let's start by defining the Icon location so we're going to create An icon or a constant called Icon and that's going to be equal to IMG Dash Weather Dash and you'll see that I have
A bunch of different names here for the For the svgs and these names Are actually Mandatory because these are codes that Are generated by the open Weather API if We look here in the response we can see That the icon for the city when it comes To weather is 0 1 D and this is the code For Clear Sky If I search for another city let's say Bucharest that's gonna give me uh Actually the same thing because it's Apparently clear but let's search for Um Anchorage let's say so Anchorage Which is In Alaska I believe Okay this one has a different weather Condition it's Misty and the code for The icon is different it's 50 N Okay so The icons that that you'll see in each City card will be displayed based on This code provided by open weather so in Here We need to actually Target this value so How do we do that well Let's do the following we say Weather This is an array by the way so we can Say weather zero and then we can grab The icon and we can say dot SVG like so So that's the icon defined next let's Create the list item For the new series or say constant Li Equals document create elements we're
Going to create a list item next let's Define the markup so const markup will Be equal to again back text To make it easier for us to write the Markup and we'll write the exact markup That we had in the HTML and that looks Something like this and I'm just going to do a bit of cleanup Here so let me walk you through this So we start again with the figure just Like we did in the markup stage we Define an image The Source we pass in The icon that we just defined the alt uh We're passing in the weather description That we got from our data And then for the H2 we're doing a math Round main temp because by default the Temperature comes with two digits so we Just want an integer basically and then We get the paragraph City conditions We're just displaying the description to Uppercase and then the city name inside The first span and the City Country Inside the second span so that's the Markup basically it's exactly the same Markup we used in the first lesson we Just replaced those hard-coded names With these embedded expressions So now that the markup is created we're Gonna do this list item which is the Element that we just created inner HTML Equals to Markup and now let's add this to the Page so we're going to say list append
Child list item and that's it now if we Click on Anchorage And we hit add the scripts Or the the script that we wrote creates A new element with the correct icon with The temperature With the description and also With the correct city name and country Code We can add Athens And that's going to be Athens from Greece Or we can grab the Athens from us and That's going to create a new element and It's all happening seamlessly because we Used CSS grid these items are just added One after the other and of course if I Type something that uh Doesn't make sense It's just gonna tell me please search For a valid City and I can add as many Cities as I want And of course it would be nice to clear This information from the input right After I add a new city so what we can do Is go down here and say message text Content equals to none And let's reset the form and let's focus The input so input dot Focus Save that so now we can search for a City that's going to be cleared You can search for another And another And another and so on and so forth and
That's how you can create a weather app With vanilla JavaScript And the open Weather API that's about it For this course I hope you found it Useful and if you have any questions Please leave a comment down below as Always don't forget to check out the Envato test plus YouTube channel for More content like this but also to learn About web design web development and Much more it's all free so make sure to Also hit that subscribe button and give This video a thumbs up if you liked it I'm ADI thank you for watching and I'll See you next time take care Foreign [Music]
