Skip to content

aparna2071/Weather-application

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Weather-application

Steps

  • create an app
  • go to openweather.org, create an account and login and get api keys by clicking on profile
  • copy api key and keep it
  • we will get a mail for api key and example of api call copy it and keep it or can also be done by current weather data->api docs
  • Like this: https://api.openweathermap.org/data/2.5/weather?q=Delhi,india&APPID=f8087a9c74fd80bf10a23435f742fdbb
  • In temp.js, make a search input and button
  • To make sunny as default icon, go to weather icons and copy the html from there
  • Make the frontend structure as wanted by using div and styles
  • Use useState hook to set value of input search(default is set to Delhi)
  • use useEffect hook to run getweatherInfo() only once on refresh
  • To get data of api, make an async await - these are used to make our code async and to implement promises
  • Promise is either we get the data or we get the error(try, catch)
  • we have to pass same location in url which user searched for(paste the api call)
  • Then we can inspect and chk console, we get data for that particular city
  • our api has many info in the form of array of objects, so destructure them
  • eg: main is an array of objects like temp, so destructure it like: const{temp}=data.main;
  • To convert into celsius: units=metric
  • destructure all info and pass that info in setTempInfo useState hook
  • Move all the widget code(below search portion)to a new file, Weather.js and import Weather in Temp.js
  • We are destructuring and getting all data in Temp.js but displaying in Weather.js
  • For that, we need to pass props from Temp.js to Weather.js
  • now we get all data
  • only prblm is with time of sunset, it shows seconds, convert it to milliseconds then milliseconds can be converted to hours by getHours()and mins by getMinutes()
  • now to change the icon for weather mood, we need one more useState hook,weatherState
  • make a useEffect hook that will render whenever we get weathermood
  • if it is cloudy, weatherState will be set cloudy and similarly for all other weather moods

Want to try?

Go to https://weather-app-aparna20.netlify.app/