Build a Simple Weather App

project structure
project structure
  • 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.
  • 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.
  • Before coding the index.js file, get an api key from
  • 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
    * Login
    * Go to your Profile
    * Go to API keys tab
    * Copy the Key and store in the api key variable in index.js
  • Store the api call url in the url variable.
index.js file
index.js file

Aspiring Software Developer ☕ | Technical content writer ✍ | Open Source Contributor 🔥 |

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store