This app is created in just 3 files : html , css, and javascript. Checkout this app on https://jelonmusk.github.io/weather_app/
1. Project Structure
- Create a folder with your project name, say “Weather_App”.
- Create 3 files inside the Weather_App folder i.e. .html, .css, .js. Here, its index.html ,index.css, index.js .
p.s. osloRespData.json is a dummy folder for the purpose of explanation which will be talked about later in this article.
2. index.html
- Here , this file uses the Bootstrap Starter template https://getbootstrap.com/docs/4.3/getting-started/introduction/
- A title saying “WEATHER APP”.
- Link the JavaScript and css files using <script> and <link> tags respectively.
- An html body contains a form, using which user can search by entering location in the text field.
- A <main> tag which displays the weather after searching the location.
3. index. css
* Here, the html page is styled using CSS code.
4. index.js
- The core working and logic of the programming is in this file.
The content in this file is very important. - Before coding the index.js file, get an api key from https://openweathermap.org/
- Open Weather Map provides an api using which developers can have access to weather forecast data .The API requests aren’t accepted without a API key.
* To get an api key , Create an Account at https://home.openweathermap.org/users/sign_up
* Login
* Go to your Profile
* Go to API keys tab https://home.openweathermap.org/api_keys
* Copy the Key and store in the api key variable in index.js - Store the api call url in the url variable.
THE LOGIC:
When a user enters a city name in the search box (defined in index.html) and clicks submit, the form’s addEventListener is invoked, which stores the city name in the city variable and calls the getWeatherByLocation() function.
getWeatherByLocation() is an async function. An asyn function is a function which is defined with the async keyword. It uses a Promise to function asynchronously to return a result. async is usually used with the await keyword which is used to wait for a promise. await only works inside async function.await pauses your code on that line until the promise is fulfilled , then returns the resulting value .
If you don’t know what a Promise is, then for now, it’s just an object which may produce a resolved value or a reason for unresolved value.
Coming back to getWeatherByLocation() function , fetch(URL, options) function is used to fetch the weather api data from the url containing the city name and api key. This status of fetch() function’s response is stored in resp . The response’s body is accessed by using a resp.json() method, which parses the data in JSON format, and stored in respData variable.
Say, we searched for OSLO’s weather, the respData, which is in JSON format, looks like it is in the following figure:
(p.s. this is why there’s an osloRespData file)
Oslo weather data in json format
This is how data is stored in respData. addWeatherToPage() is called by sending respData.
addWeatherToPage() function displays the temperature, humidity and icons to <main> tag in html page.
The temperature (data.main.temp in respData) in weather data is in terms of Kelvin which is converted to Celsius by calling KtoC() function and stores in temp variable. Humidity value is fetched using data.main.humidity and stored in humid variable. Then addWeatherToPage() function creates a div element called “weather” to add icons ,temperature and humidity inside variable. Then then displays the icons in data.weather[0].icon using <img> tag.
The following is the index.js code:
That’s the end. Your Weather App is ready.
Give a clap👏 if you like this article!😊
Happy <>ing!