Master building a powerful weather app using HTML, CSS, and JavaScript

Hi There in this video you will learn how to  create an advanced weather app using HTML,   CSS and JavaScript your all in one solution  for accurate and detailed weather forecast. let's have a quick demo right here here on the  screen we can see the advanced weather app that   displays icon with accurate forecast details for  the given city today highlights on the right hand   side shows the humidity, wind speed, when the  sun was rising and when the sun will set and   then you can find the percentage of clouds,  UV index value and pressure of the city and   then below this week session or the weather  condition upcoming 7 days including today it displays the week value with month and date  and then weather icon and its description all   the icons here it was displayed was dynamically  picked from the weather API itself along with   this we have displayed minimum and maximum  temperature for each day right now we have   displayed the minimum and maximum values in the  degree of Celsius right so here to so we have an   option to convert from Celsius to Fahrenheit  here we can change from Celsius to Fahrenheit if I search here we'll get the value to Fahrenheit  here like this it will automatically change the   value for the each day in the week session  and we can check for other cities too so I   will change the city value to London I will  check with the Fahrenheit if I it search now   it will automatically change the icon here and  we'll get the 53.6 degree Fahrenheit and we'll   get the description for this and we'll get the  current date and time with the city value and   then country so again I will change to another  city of New York with degree of Celsius if I   search now we'll get the 6° it will shows  moderate rain so it was at 4:57 a.m. there and then again the city value of New York and  the country of us and then we can able to see   the next 7 Days values here dynamically  that's all for the demo before beginning   this video I would like to introduce myself  as Sharathchandar K if you find this tutorial   useful please subscribe to our Channel and  watch this video to motivate me let's build   our own here on my desktop I have already  a project folder name called weather app let me open this into a visual studio code  so for that I will drag this directory into   a visual studio code, Visual Studio  code will automatically loads all the   files inserted inside the directory  I have already created a index.html,   style.css and script.js in the index.html I have  already added the HTML boiler plate with the help   of exclamation mark and then I have changed  the title to weather app by Sharathchandar K  and I have linked other two files here  with style.css and script.js along with   that I have added one more link file to add  the font awesome icons of 6.5.1 CDN here so inside the body we are going to add the  container here so I will add the dot with   container if I hit enter it will automatically  created a div tag with the class attribute with   a value of container inside that we are going  to add the weather input so again I will use   the same method to add the div with the class  value of weather input if I hit enter it will   automatically created a div here inside that  I'm going to add the input group so same as   dot input group if I hit enter it will create a  one more div and then inside that I'm going to   add the input element with the help of this  we are going to enter the city's value here so we have an embed abbreviation to create  the input with input with that type of text   I will add the ID for this with the help  of #ID value of user location and if I   hit enter it will automatically create  a input tag and then type text and with   the id of user location and then I will add  the placeholder to it the placeholder value   of search for places... now let us see our  HTML file in action so for that in Visual   Studio code we have installed live server  once we installed we'll get the option go   live in the status board here below if we click  this it will automatically run our project into   your default browser so here now we can able to  see the title of weather app by Sharathchandar K and then input box with the placeholder of search  for places along with this we'll add the select   box here to select the Celsius or Fahrenheit  so I will add the select box with the help of   class we mention as converter and then ID of  same converter again and then I will add the   option of two times one is for degree of Celsius  and then second one as degree of Fahrenheit if I   say if I go to the browser now we can able to  see the Celsius and Fahrenheit value here and   then along with this we'll add the search icon  here with the help of font awesome so I will   use the i tag to add the font awesome icons here  with the help of font awesome fa and fa search and if I close if I save if I go to  the browser now we can able to see   the search icon here automatically that is  how the live server will work what are the   changes we have done through the visual  studio code it will automatically taken   care and it will reflected here apart from  this input group we are going to add the Div   for weather icons here so I will use the same  embed abbreviation with the dot weather icon if i hit enter it will automatically created  a div with a class of weather icon and then   next to this I will add one more element  here H2 with a class value of temperature   if I hit enter it will create a H2 with  a class of temperature and then we'll add   one more div with value of feels like if I  hit enter it will create a div here and then   we'll add one more div of description and  then we'll add the horizontal line here and   then we'll add one more div of date and  then we'll add the one more div of City here if we go to the browser nothing is there  only we can able to see the HR line here so now   we need to add the styles to this so here in  the style.css I have already added the import   URL of font family Poppins along with that I  have added the asterisk * means and wildcard   this will help us to reset the margin to 0  padding to 0 and then font family Poppins from the import URL and then box sizing should  be border box along with that I'm going to add   the styles to the body with the help of element  selector name called body and I will set the   height of 100vh and then I will add the styles  to The Container so previously we have added the   styles to the element selector of body now we  need to add the styles to The Container so we   have a option to add the styles to the class with  the help of dot means class selector and then the   value of container we'll set the display to flex  and then we'll set the align items to be center if I save now we can able to see the  display flex it will be center of the   screen now we'll add the styles to the  weather input with the help of dot again   and I will set the width of 25% and then  we'll set the position to fixed and then   we'll set the insert to 0 now we'll add the  back color to blue color and then we'll add   the padding inner spacing of 1rem for right  and left and then top and bottom to 2.5rem if I save now we can able to see the styles  here we need to add the styles to the input   group right so again I will go here and I will  copy this class value of input group the class   selector of dot here I will set the position  to relative and then we'll set the display to   Flex again then we'll set the Align items to  be Center We'll add the margin to 2rem and 0 if I save now we can able to see the text box  select and icons into the center of the line   right because of this display flex I will  add the styles to the input here with the   help of input group with sub class of input  and then I will set the background color to   white and then we'll add the text transform  to capitalize and then we'll set the padding   inner spacing of 1rem and then I will set the  font size to 15px we'll set the Border radius   to 6pxand then width of 100% we'll remove  the outline to none and then border to none if I save now we can able to see the input box  here the same as we need to add the styles to   the converter as well as the icon too so for  this we we have already added the class value   of converter here so same input group dot  converter we'll set the position to Absolute   because we need to place this converter on top of  the input right so I will set the right of 45px   and then again I will remove the Border To None  outline To None then font size should be 18px   now we can able to see the select box on top of  the input and now we need to style the icon here   so for that already we have a fa search class  here dot input group dot fa search I will add   the position to Absolute again and then we'll  set the right to 15px because we have set this   comma box as 45px and this should be 15px and  then we'll set the color to like black color   and then we'll set the cursor to pointer  and then we'll set the font size to 22px if I save now we can able to see the icon on  top of the input so for now I will set this   width of weather input instead of 25 I will  set these things to 4o for now we can able   to see the input box and then select box as  well as the icon to and then here we need to   set the cursor to pointer for the converter if  I save now we can able to see the cursor pointer   for this now we need to add the right side of  weather output so for that again I will jump to   the index.html here next to this weather input  I will add one more element of weather output   if I hit enter it will create a div tag with the  class attribute with the value of weather output   and then inside that I'm going to add the h2  element here with the class value of heading   if I hit enter it will create one heading and  I will copy this and I will paste it below here   for the first heading I will mention as today  highlights and then second one as this week and then next to this heading I'm going to add  the highlights div here so for that with the   same abbreviation of dot with highlights so  inside that we are going to add the sessions   to be highlighted so for the first one we need  to show the humidity so I will create a div of   humidity with the class value of humidity again  if I hit enter it will create a div inside that   I I will mention the value of humidity and  then I will add the icon with the class value   of font awesome the help of fa solid and Fa  water I will close the icon here we need to   set the value to this right so I will add the H1  tag here to set the value and I will add the ID   to it to the value of H value and I will copy the  same thing for five times because we are going to   show the highlights here for the six column so  now the second one as wind speed I will change   the value here again with wind speed H1 ID value  of w value and then icon should be fa solid wind   and then third one we have a two parameters  so one is for Sunrise and one is for Sunset so I will create a span tag here inside the span  tag I'm going to add that with the icon with the   class of fa solid fa sun and I will mention the  value here with the help of P tag with span tag   again I will set the ID to you I will add the  SR for Sunrise value and then I will add the   text here for Sunrise so I will copy this and I  will paste it below instead of Sr there should   be sunset and then icon should be Fa regular and  then here instead of sunrise it will be sunset   here instead of humidity this should be sun and  then next one as clouds and I will add the value   of clouds and then here for C value and then  icon of fa solid cloud and then this one as UV   index again the text of UV index with the icon  of bacon and then here UV value and then last   one as pressure and then value of pressure and  then here that P value and then icon of valcon if I save nothing will happen because we have  set this whether input as fixed so now if I go   here now we can able to see this so I will set  the display To None here now we can able to see   the values here so we need to style this so again  I will jump to the style.css I will add the styles   to this weather output div with the class value  of weather output with the class selector of Dot   and then width of 60% because we have added for  the input for 40% again I will set the position   to fixed and then insert to zero and then margin  left to 40% because we are going to move this to   the 40% of the margin left and then we'll set the  padding to 2rem and I will set the background to   white again and then we'll set the Overflow to  Auto if I save now we can able to see the to the   highlights here directly so I will remove this  display none for this one now we can able to see   the input box as well as the output here now here  I need to add the break here I save we'll get the   space to this now we need to style this highlights  again I will jump to the style.css here with the   Div value of highlights I will copy this class  selector and I will add the styles to this so   here I will set the display to grid because  we are going to show this values as rows and   columns right so I will set this display as grid  and then I will add the grid template column to   be repeat for three times with the width of  350px and then grid auto flow should be row   and then row Gap should be 1rem and then column  Gap should be 10px if I save nothing is happened   right so I need to save the HTML because we have  changed the class value here if I save now we can   able to see the column of three in a row if I  change these things to two if I save it again   now we can able to see the column of two per row  so we need a three per Row for now if I save now   we need to get this and we need to style this so  for that dot highlights we are going to add the   styles to the each div right so with the help  of element selector div now we'll add the the   styles to the highlights do for each of the  column with the highlights du I will set the   height of 200px I will set the display to grid  again because we need to set this value here   inside this into a row value so for that I will  add align items to be Center and then justify   content to be Center and then we'll set the text  align to Center and then background color to blue   color I will add the Border radius to 20px  I will add the padding inner spacing of 1rem if I save now we can able to see the column  value here for three per row with humidity   and other values to be center of the column  right so I will add the styles to this icon   with the help of highlights I will set the  element selector of I I will add the font   size to 45px if I save now we can able to  see the icon size here we can able to see   the sunrise and sunset should be next to this  right so for that again I will add the styles   to this with the help of span tag of sun  span tag I will add the Align items to be   Center and then we'll set the display to  flex and then I will add the gap of 10px if I save now we can able to see the values  next to the icon so once the value is place   it will automatically move to here and then  value should be placed below to this we need   to add the one more element here to the this  week so below to the this week element we are   going to add one more Div for forecast if i  hit enter it will create a div with forecast   if I save we can see nothing here so the  pressure we can't able to see the icon here   so the icon value should be volcano if I save  now we can able to see this now we need to add   the dynamic values to this columns right  for that I need to jump to the script.js in the script.js we are going to declare the  Declaration with the help of const I will add   the Declaration for the input box of user location  user location equal to document document is an   owner of your web page document dot get element by  ID the easiest way to find an HTML element is by   ID and I will use the ID value here I will add the  console. log of user location if I save if I go to   the console.log now we can able to get the element  of user location here with the help of ID so we   need to declare all other values same like this so  in the same const I will add one more Comma here   and then the next thing as converter with the help  of converter again the document dot get element by   ID the value of converter the next thing is an  weather icon equal to document dot get element   by ID so here we don't have the ID so how we need  to use this so for that here we have a option of   query selector with the help of query selector we  need to use that whether icon with the help of dot   so this should be select based on this particular  value if this is a class or ID or element So   based on this this will pick that particular  element here that is how the Dom tree will work so here I have created all other declarations  with the document dot get element by ID and   then query selector so here there are too much  declaration if you want you can pause and you   can create it your own now once we enter the  location here once we it search here it should   be find the location right so for that we'll  create the function for this a function is a   block of code designed to perform a particular  task so inside that function with the keyword of   function the value of find user location and then  I need to call this user function method into the   index.html while clicking this we need to do that  right so here I will add the on click with that   particular find user location function if I save  if I go here if I add an alert of one if I save if   I go and click here now we can able to get the  alert popup here so inside this we need to get   that location so before that we need to add the  end points of the weather right for that I will   add two Global variables first one as weather  API end point and then second one as weather   data end point so here inside this I'm going to  use the weather API open data so for that here   open Weather API here we can able to see the  current weather and forecast for open weather   map so inside this we have the documentation I  will go to the API session here so inside the   API session we can get the API documents these  are the API calls and these are the parameters   to be passed once we pass the parameters and  this are the response will be written from this   current API so we can use the free apis for 1000  per day so I have already registered and I have   already have that API key so here you can able  to see 1,000 API calls per day for free so for   this we need to subscribe this so for now I need  to use the data end point to get that particular   values right so here current weather data I will  copy this URL and I will paste it here and then I   will mention my app ID I have already registered  and I have this my app ID here I will paste this   app key this is a secured key we need to get  this while subscribe and then I will add the   and with query parameter so so with the help of  this we need to get the details so for now what   I will do I will use this weather API end point  to get the details if this is working or not so   I will use the fetch here to weather api end point  the fetch method help to process the fetching of   resource from the network to fulfill the response  so here I have added the API end point we need to   PA that value right so here we have added only  for Q so we need to pass the query of City value   so for now I will add the plus and I will set  for London here then inside this we'll get the   response so I will add the response.Json and  then again then we'll get the data here I will   add the console. log of data if I save if I go  here the console is empty because we have not   yet clicked this so if I go here if I click this  now the data is not defined so here it was Data if I save if I click on search we can able to  see the code of 200 response and we can able to   get the coordinate of the London latitude and  longitude and then we'll get the temperature   here with the value of description with weather  overcast clouds with the help of this we need to   get the weather data to so here now we have  only The Limited records so we need to call   the another api to get all the details records  so for that the same URL of here I will change   the url of 2.5 after that I will add one call to  that this is a one more API this will get that   entire details of that particular location and  then I will add and here and we add the exclude   minutely and units equal to metric We'll add  the and to the end so along with that we need   to pass that latitude and longitude to this  end point I will remove this then dot response if I save if I go and click now we can able  to get the Json format so only I have used   this then dot response to be Json so inside  this once we receive this data so here we can   get that data dot coord dot lon and I will  add the comma again data dot coord dot lat if I save if I go and click it again now we can  able to get the latitude and longitude of that   particular location so instead of this we need  to get the values from the input right so I will   remove this London from here and we have added  the Declaration here already user location dot   value if I save if I go and click here now we'll  get the error here we not able to provide that   because it throw us bad request once we get this  we need to show the alert message to the user so   here I will add the if condition if data dot cod  as that code of not equal to null and and data   dot Cod not equal to 200 because if it is 200 we  need to get the records and will show the a alert   of data do message if I save if I go on it here  now we'll get the error message nothing to geo   code if I say okay now this again it is hitting  so from here we'll set these things to return if   I hit now we'll get the nothing to geo code and  now from here it is returning now this console.   log is not firing so now instead of empty I will  pass the London if I search now we'll get the geo   locations for here so we need to pass this into  the second API so for that again we'll add the   Fetch of whether data end point plus because  we need to pass the longitude and I will add   the string concatenation of data . Coord Lan and  lat of equal to against concatenation with lat I   will set this only for data here and then I will  add the same thing for the response of Json here   and then I will add the data to it the help of  console. log data and I will close this API here   if I save if I go here in the browser if I hit  for London if I try searching here the first API   is return here if I go to the network now we  can able to see the response from here so if   I go to the header or payload these are the app  ID and these are the query of London so if I go   to the header this was the request URL we have  passed and these are the response we have return   back from the that particular API how simple  is this right once we received we'll get the   longitude and latitude and we'll pass this into  the second API so in the second API I will go to   the payload here we have the app ID and we have  exclude this minutely and we have set this unit   as Matrix these three values we have already added  to the API end point url here instead of that we   have added two more values that is longitude and  latitude and we have passed directly to this is   fetch and now here we have get the response this  are the latitude and longitude and here we have   this current so this is the values return return  from the current particular location this is for   date and when this is sunrise happen and when  this is sunset these are all UST code we need   to convert this to current date and time so now we  need to do that so with the help of this we need   to add the datas to the weather input so first I  will add the city value here after the console.   log City dot inner HTML because we have already  declared the city above and then we need to get   the city value so again I will go to the console.  log here here we can get this London as data. name if I save if I go here if I add London if  I search this is undefined because this is   a small n if I save London if I search back  see now we can get the value of London here   and then we need to add the country code to  this so where that country code is inside the   system here we have the country code so here  again I will do the Sting concatenation with   The Comma of data dot Sys dot country if I save  if I go and do the London if I hit search now   we'll get the London and then country code of GB  and we need to append the weather icons right so   in the project folder we don't have any image  folder so how we can show the image to this so   for that the weather API is providing the images  also open API images if you find this we'll get   the weather condition images here so with the  help of this open API again we'll get the icons   with the icon value so here in the current we'll  get the weather with the icon value of 04d if I   go to the weather condition here if I will  find that 04d so now we can able to see the   broken cloud of 04D.png this is for d for day  and n for night so we need to use this URL to   append the images here directly from the open  API so here again I will jump to the script.js   in the script.js we have already added the  weather icon declaration weather icon dot   We'll add the styles to the background here dot  background and for the background we need to add   the URLs right so with the help of URL I will  paste the API URL to this if I copy if I paste if I save if I go here I will search for London  if I hit search now we have not get that icon   so I will inspect here the weather icon it  was placed see now it was get this icon here   so we need to style this so I will jump to the  style.css here dot weather icon you need to set   the background position to 50% important and  then background repeat to no repeat and this   also should be important and then background  size should be contain and then we'll set the   display to block and then I will set the height  to 25% I will set the margin to 2rem and auto if I save now it will be automatically set the  styles to this image and it was displayed on   here so if it is London if I search will get  this if I search for Bengaluru if I search   City not found because we have misspelled  here if I search again now the icon is same   because we have directly set this image for  one time we need to change this right with   the help of weather API so I will go here  instead of this 10d I need to add the sting   concatenation so here where the icon is placed  icon is placed inside the weather okay inside   the weather of data dot weather and inside  that it was in the zero of array dot icon if I save if I go here if I search for London if  I search now we'll get this icon of forecasting   and then if I change to Bengaluru if I search  now we'll get the Cloudy icon we can able to   see the difference for both so it will be  dynamic based on the search here so we need   to append other details here directly with the  help of this particular search so right now we   have this limit records here so with the help  of this data weather we have more records see   inside the current we can able to see the clouds  and then due Point, Fields, humidity, pressure,   sunrise and sunset and then temperature, UV index  and visibility so with the help of this we need to   add the values to this particular session I will  go here now I will add the temperature so inside   that second fetch I will add the temperature  dot in HTML equal to data dot current dot temp if I save if I go here if I search for London  now we'll get the 12.53 so we'll add the datas   for others two so the next thing is feels like  I will add the fields like dot inner HTML equal   to data dot current dot we'll have the values  here with Fields like so before that I will add   the concatenation of string with Fields like  the next one as description description dot   inner HTML equal to we'll add the description  before the icons so I will add the I icon of   class font awesome font awesome brand of fa of  cloud versify and I will close that I element   here and I will add the space in between  this and then I will add the values again   data dot current dot weather already we know the  weather is in Array of zero and then description if I save if I go and search for London if I hit  the search icon here now we'll get the icon we'll   get the temperature we'll get the fields like  12.05 and this is what the description and City   and then country code so here we have added this  value and we need to add the date We'll add the   date for Last because we need to convert this  date string to the readable format so before   that we'll add the values to the Hval dot inner  HTML equal to we can get the current value of   humidity 285 so we'll add the math dot round for  this one so we have sometimes with DOT values so   this should be round and it will be displayed  here for data dot current dot humidity I will   copy this and I will paste it for here and then  we'll concatenate the value with the % so I will   add the span of % with close of span tag and then  next one as wind value again with wind value dot   inner HTML equal to with same math. round again  with data dot current dot wind speed and we'll   concatenate for same thing and here instead of %  we'll mention this as millisecond and then next   shown as Sunrise value dot inner HTML equal to  we'll set null for now because this things again   we need to calculate with the date and time so  and then the next thing we can add the cloud %   so I will copy this here and I will paste it for  here and I will change the value of C value and   then UV value and then pressure value for this  one CV we can directly set this value to the   clouds of data. current. clouds and we'll add  the % here again I will remove the math. round   here and then for the UV value we have this  parameter of uvi and this is not required for   uvi and then pressure here I can copy this and  I will paste it for pressure and it will say HPA if I save if I go here if I add for London if I  search now we can able to see the humidity and   then wind speed and then clouds percentage  and then UV and then pressure of this city   so now we need to add the date value to this  sunset and sunrise and here we need to show   that right so for that we need to add the new  method to calculate the time so I will jump to   the visual studio code here here I will add  the function again with the help of function   keyword we create the function format Unix time  and I will pass the DT value and then we'll set   the offset and we'll set the options inside  that I will add one more const Declaration of   date equal to new date we'll set the DT Value  Plus offset value multiply by 1,000 this is a   millisecond and then we need to return return  this value of date dot to local time string   and this is the array value to be empty and  then time zone should be UTC and then we'll   set that options here and then we'll create  one more function here of get long format   date time and again I will pass the DT value  of offset and then options here will return   that above function of format Unix time we'll  set that DT value comma offset comma options if I save with the help of this format we can  get that particular time frame I will copy this   value and I will go to that particular place of  time where we have placed so for first I will   set the sunrise here we'll get that function  and I will pass that data dot current value   dot sunset and then we have a offset already  data dot time zone offset this is a time zone   based on the country and then we'll set the  options what is this options we need to pass   that particular option to get the date for the  sunset we need to get only the time right so for   that we'll create one more options here with the  value of const option one equal to the object of   Hour as numeric and then minutes as numeric  and then we'll set the hour of 12 for true if I save if I go here now if I find for London  again if i hit search now we'll get the 7:36   p.m. as Sunrise the same thing I will copy this  I will paste it for sunset here here this should   be sunrise for this I will change this to 25 then  weather output of some 75% then this should be 25%   if I save if I go here now we can able to see the  design it it's perfectly placed so again I will   find that London if I it for search now you can  able to see 6:30 as sunrise and sunset for 7:36   I will check for Bengaluru if I search now 6:14  for Sunrise and 6:31 for sunset here and here we   need to set the date right so again I will jump  here I will copy this I will paste it for above   and instead of Sr I will set this things to  date and here instead of sunrise it could be   DT right for that current if I go this one and  here this is DT and then here you can able to   see the time zone and then time offset here for  this one for the current it should be different   time zone this is for European and then this  is the different time set so that this is fine   and we need to create the options for this with  the help of const we'll set only option inside   that option we need to show the week day as  long and then month as long and then day as   numeric and then hour as numeric and then minute  as numeric and then again our 12 should be true if I save this option is pass to this date if I  go here if I search for London and if I it search   now we'll get that value now we can able to see  the temperature and then Wednesday and it was 12:   5 p.m. on the London if I check for Bengaluru  if I it s now the time is 4:37 p.m. and then   we can get the humidity and then wind speed  sunrise and sunset and we can able to see   this now we need to style this so for that  again I will jump to the style.css here we   add the styles to the padding and then  weather input I will copy this weather   input and I will set this value for this feels  like and then same thing for description same   thing for date and then city too I will  add the comma here for this things we   need to add the padding of top and bottom  to be 10px and then right and left to 0 if I save now we can able to see this now we  need to to add the styles to this temperature   right for that again I will add the styles  to this temperature with the help of class   selector dot temperature font size to be 5rem  and then text align Center and then display to   flex and then font weight to 300 if I save if I  go here now we can able to see the values here   now we need to add the dynamic values to this  this week so how we can do this so here in the   object we have completed this current right the  same thing we need to do for daily so here we   have the particular datas for the daily with  the cloud and then humidity with the help of   this data we need to do that so for that again  I will jump to the script.js in the script.js   we add one more collection here to the fetch of  console. log of data dot daily if I save if I go   to the browser and I will check for Bengaluru  if I hit for search now we'll get the daily   of eight times with the current date so we need  to add this into this particular place with the   forecast we need to do the foreach data. daily  and then instead of element I will mention this   as weather and then we need to use this weather  and we need to append that so I will create one   more let of div we'll create the document dot  create element of div with the help of this   div we are going to append the values so I will  append this values into the forecast so for this   forecast we have already added the Declarations  right so this is the forecast and then instead   the forecast I will append this child of Div so  now we need to build this div so for that div dot   inner HTML plus equal to we need to append the  images right so for that we have already added   the image URL here instead of image URL we can get  this and place it into the div directly with the   help of image source so previously we have added  to the background image so now we have added as   an image source so I will paste it here and I will  close this image here here instead of data we have   added the weather because here this is weather  weather dot weather array of zero with icon if I save if I go on it for London again if I  search now we can able to see the icons to be   placed here so instead of that I will check for  Bengaluru if I search it was appending here so   before appending we need to clear that so with the  help of this forecast I can clear this forecast   for all the time at the function click. inner HTML  equal to will set for null if I save if I go here   if I search for London now it should be rainy for  next 7 days I will check for New York for the New   York for next 3 days it was rainy and cloudy and  it could be sun we need to add the more info to   this so I will go here inside the for loop I will  add one more div with up and inner HTML off plus   equal to we'll set the P tag to add the forest  detail of class with the help of class I will set   the class value of forecast description with sting  concatenation of weather dot weather same array of   zero dot description I will close the P tag and  then before that we need to add the date to this   right again with const equal to options equal  to object of week day as long and then month as   long only we need to show week month and day year  with numeric and then we'll set the div dot inner   HTML equal to get long format date of weather. DT  time zone should be zero and then comma options if I save if I go to the browser if I search  for London if I hit search now we'll get the   Wednesday 3rd April at 12:00 p.m. so this 12 pm  should not get right because this get weather   format as return value of to local time string  so we need to ignore this so how we can do this   so we have create one more let declaration to  this I will get this value here and I will move   to here I will split with this split off at  so we can get the split value of two so this   is for zero and this is for one so instead of  this I will set this daily off zero off array   if I save if I go here if I add for London if  I search now we'll get Wednesday and April 3rd   this is for today and this is for next 7 Day  so we need to style this so again I will jump   to the style.css for this one we have already  added the Styles so here so the same like we   need to add the styles to the forecast also so  I will add the dot of forecast and I will use   the display to grid again and then here for grid  template column repeat for four times and then   with of 260px and then grid Auto flow should  be row and then row Gap should be 1rem and   then column Gap to be 10px and then the same  style to be applicable to the forecast also   so what we can do we can add the sub class  of concatenation with dot forecast with div if I save if I go to the browser now we  can able to see the designs here now we   have added the values to the Celsius if I  change to the Fahrenheit if I click search   it is not changing right so for that I will  jump to the script.js I will add one more new   function with the function keyword function name  as temp converter and we'll get the parameter of   Temp and we'll set the let temp value equal to  math. around here of the temp and then we'll set   one more let Declaration of message these are  the message we are going to return with with   the degree of Celsius or Fahrenheit so we'll  check if already we have added the converter   dot value double equal to we need to get the  value of this converter from here I will copy   paste for this degree of C if this is selected  I need to pass this value with temp value I will   connate the value of span here the Unicode of  degree I will copy this same and I will paste   it for else condition to this is for B0C and  this is B0F and then if it is Fahrenheit we   need to add the calculation right so for that let  Celsius to Fahrenheit equal to Temp value multi by   9 and then dived by 5 + 32 and we can confirm  this calculation for Celsius to Fahrenheit so   32°f minus 32 and then the value what was the  calculation is done for now and we need to get   this value and instead of temp we need to pass  this and we need to return this message return   message if I copy this temp converter and I need  to place this here for the value of temperature   and I will add this function and I will pass this  inside temp converter I will mention this as temp if I save if I go to the browser I will search  for New York if I search now we'll get the 6°   C now we can get that degree of C if I change  to F if I find now we can get this Fahrenheit   calculation now this is working fine so here  we need to append that right so for that again   I will go here so then next to this again I need  to add the Div dot inner HTML plus equal to we'll   add the span tag here inside the span tag I will  add one more span tag and I will add the string   concatenation of temp converter and I will pass  the value to this with weather dot temp so here   we need to pass that values right so again I will  go here inside that daily I can check where the   temp is there yeah here we can see the temp Day,  Evening and Morning and Night so we need to show   only for Max and Min so I will use this for dot  Min first and I will copy this same and I will   paste it for again and I will use the max here  if I save if I go to the browser I will check   for London again if I search see now we can able  to see the 9° 14° C so now I need to change this   things to Fahrenheit if I search now we can able  to see the values of Fahrenheit also how simple is   this right we need to style this so I need a space  in between this so I will add a space off &nbsp if I save if I go and search for Bengaluru if  I search now we'll get the space and now we can   able to see the icon is different so I will jump  to the style.css to add the styles to reduce this   scroll width here so for that we have a web kit  scroll bar this should set the scroll bar width   here I will set the width of 5px if I save now we  can't able to see the scroll bar here we need to   add the styles to that so again with the web  kit scroll bar thumb will set the background   color to light gray color if I save now we can  able to see the scroll bar with the width of   five see now we can able to see this right I need  to style this temperature sub span so I will add   the value to the temperature of span font size  to be to 2rem and then margin top should be 20px if I save now we can able to see the 34° Celsius  now we can able to see all the values but in   this week the description is missed so we  need to check that in the script.js here   we added the description and if I go on inspect  here see the description is added so we need to   add the styles to that with the help of this  class so here I will close this if I save if   I go and check for London again so now we can  able to see the description here so we need to   style this so that forecast style I will add  the style to this with the dot selector of   forecast style I will set the color to light  gray color and then I will set the font size   to 0.8rem and then I will set the text Line  to Center I will set the padding bottom to   5px and I will set the font style to italic  if I save if I go here I close this I will   check for New York and if I hit for search  now we'll get the 6° C and then humidity,   wind speed and all the values it was placed so for  this week we can get this week day as well as the   month and value of the Day icon and what was the  description if I scroll and we can convert these   things to Fahrenheit if I search now we can able  to see this here the image was small right so we   need to add this I will go for the style.css  here in the weather icon so here we need to   add this important if I save if I go here now  we can able to see the image icon as bigger and   now we need to add the styles to this this image  also with the help of description I will add the   description I of styles with the font size 25px  if I save if I go here now we can able to see this   so here we need to add the styles to The Heading  also I will add the heading of margin 1rem and 0 if I save if I go here if I refresh this is how  the empty thing will show so first I will check   for London again if I search now we'll get the  icon and then degree of Celsius with the value   and I will search for bangaluru if I search City  not defined because of that spell mistake if I   search now now we'll get the values see now it was  34° Celsius and then feels like 32° and this is   what the description for that and you can able to  see all the details explanation here this is what   the today minimum and maximum value of degree  Celsius and this is for next 7 days so with the   help of this detailed explanation we can check our  weathers to our current cities so and then we can   change these things to Fahrenheit and it would be  93.2 and within one click it was converted to the   Fahrenheit also so here you people have one task  so we have added the values for current and daily   so here we have the hourly hours with this API so  you can take up this task and create this hourly   basis on top of this today highlight and you can  display all the values how the clouds and what   are the wind speed for this particular hours  you can display it on hourly basis so this is   what the task for you you can complete this and  you can let me know in the comments or you can   tag me in the LinkedIn post also finally we have  completed this advanced weather app using HTML,   CSS and JavaScript I hope this video will  be helpful for you please like and share   this video and also subscribe to my channel  Sharathchandar K to watch more like this one   if you are interested in JavaScript projects  like this I have created and added a playlist   Link in the description please do check it  out now I want to hear from you if you have   any questions or what JavaScript topics do  you want us to cover in future videos drop   your suggestions in the comments below thank you  so much for watching until next time keep coding   and keep learning see you in the next video  Happy coding bye for now have very nice day

Channel: Sharathchandar K

Views: 1,733

Keywords: weather, javascript weather app, javascript weather api, javascript weather app tutorial, weather app using javascript, weather app using html and css, build a weather app using javascript, weather app javascript using api, build weather app javascript, weather api, weather app, weather api javascript, javascript tutorial, weather website, call api using fetch, weather app javascript, javascript api, weather app with forecast using javascript, weather today, severe weather, css

Id: tIBQBmZvv8U

Length: 56min 58sec (3418 seconds)

Published: Sat Apr 06 2024