Introduction of the Project
Are you tired of constantly checking the weather on your phone or computer? Well this JavaScript tutorial will teach you how to build a Weather Application In JavaScript. With a little bit of JavaScript know-how, you can create your own weather application that provides you with up-to-date weather information for any city around the world.
With just a few lines of code, you can access an API that provides you with the latest weather data and display it in a user-friendly way. Whether you’re a beginner or an experienced developer, creating a weather application in JavaScript is a fun and useful project that you can customize to fit your needs. So why not give it a try and build your own personalized weather app today?
We will create a function that fetches the weather data of the city entered in the search box by the user and also apply some CSS to it to make the Graphic user interface interesting.
Objectives
1. Retrieve weather data from a weather API using JavaScript’s fetch method.
2. Parse the weather data in JSON format and extract the relevant information such as temperature, humidity, wind speed, and weather description.
3. Display the weather information user-friendly, such as showing the weather icon, temperature in Celsius or Fahrenheit, and the location name.
4. Allow users to search for weather information for any city around the world.
5. Handle errors and edge cases, such as displaying an error message when the user enters an invalid city name.
6. Implement additional features, such as a five-day forecast, an interactive map, or notifications for severe weather alerts.
7. Optimize the application’s performance, such as minimizing API calls, reducing load times, and improving user experience.
8. Customize the application’s styling and design to make it visually appealing and responsive to different screen sizes and devices.
9. Add accessibility features, such as keyboard navigation, screen reader compatibility, and high-contrast modes, to make the application usable for all users.
10. Share the application with others and receive feedback to improve its functionality and usability.
Requirements
We have listed the pre-requisites for building a weather application in JavaScript:
1. Basic knowledge of HTML, CSS, and JavaScript.
2. Understanding of how APIs work and how to make API calls using JavaScript.
3. Familiarity with JSON data format and how to parse and manipulate it in JavaScript.
4. A weather API key from a weather data provider such as OpenWeatherMap, AccuWeather, or Weatherbit.
5. Visual Studio Code or any other code editor like Sublime Text or Atom.
6. A web browser such as Google Chrome, Firefox, or Safari.
7. Knowledge of how to create a web page and add JavaScript code to it.
8. Understanding of how to use functions, variables, and loops in JavaScript to manipulate data.
9. Familiarity with basic JavaScript libraries or frameworks such as jQuery, React, or Vue.js, depending on the complexity of the application.
10. Basic knowledge of Git and version control to track changes and collaborate with others if needed.
Source Code
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <main> <div class="row" style="text-align: center;"> <form action=""> <input type="search" id="search" placeholder="Search by city name"> </form> </div> <div class="row" id="weather"> <div> <img src="https://openweathermap.org/img/wn/04n@2x.png" alt="" id="image"> </div> <div> <h2 id="temp">32 ℃</h2> <h4 id="desc"> Clear </h4> </div> </div> </main> <script src="weather.js"></script> </body> </html>
CSS Code
* {
padding: 0;
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
}
main {
width: 100%;
height: 100vh;
background-color: #3498db;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.row {
display: flex;
align-items: center;
/* vertically */
justify-content: center;
/* horizontally */
width: 1000px;
margin: 10px;
font-size: 40px;
color: white;
}
#search {
font-size: 25px;
padding: 10px;
border-radius: 25px;
border: none;
outline: none;
box-shadow: 0px 0px 5px grey;
}JAVASCRIPT Code
const search = document.querySelector('#search');
const form = document.querySelector('form');
const api = 'YOUR API KEY';
var iconData;
const getWeather = async (city) => {
const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api}&units=metric`);
const data = await res.json();
if(data.cod!=404)
return showData(data);
else alert(data.message);
}
const showData = (data) => {
iconData = data['weather']['0']['icon'];
document.getElementById('temp').innerHTML = data.main.temp+`℃`;
document.getElementById('image').src = `http://openweathermap.org/img/wn/${iconData}@2x.png`;
document.getElementById('desc').innerHTML = data['weather']['0']['main'];
}
form.addEventListener("submit", function (event) {
getWeather(search.value);
event.preventDefault();
})Explanation of the Code
We have divided the code into different sections. HTML and CSS has been applied to build and style the website structure..
1. We have created an input tag of type search. It has a weather icon, H2 tag for temperature & H4 tag for description.
2. CSS is used to implement the styling of the HTML structure with appropriate margin, padding, and font colour and font size.
The other part of code is retrieving weather data by making an API call to a weather website using JavaScript.
1. We are making an API call to a website that reverts back the data of city weather which is entered by the user.
2. Using that data, we can also manipulate the icons as it is also dependent of the data we get.
3. We have used preventDefault() method, which prevents the refresh of page on searching a city weather.
Output
Main Interface
Points To Remember
We have successfully built a weather application in JavaScript. It is a very fast and accurate application that fetches the searched city temperature & give a small description of it like rainy, windy etc. Here are few points that you should remember
- Choose a reliable weather API provider that provides accurate and up-to-date weather data.
- Check the weather API’s documentation for instructions on how to make API calls and retrieve data.
- Protect your API key and avoid committing it to public repositories to prevent unauthorized access and usage.
- Test your API calls using a tool like Postman to ensure they return the expected data and handle errors correctly.
- Display the weather information in a user-friendly way, such as using weather icons, easy-to-read fonts, and appropriate colors.
- Handle errors and edge cases, such as when the user enters an invalid city name or when the API call fails due to network or server issues.
- Use asynchronous JavaScript and Promises to handle API calls and prevent the application from freezing or slowing down.
- Provide a way for the user to switch between Celsius and Fahrenheit units and ensure the temperature conversion is accurate.
- Consider adding additional features such as a five-day forecast, an interactive map, or notifications for severe weather alerts.
- Optimize the application’s performance by reducing API calls, caching data, and minimizing unnecessary code.
- Ensure the application is responsive and works well on different devices and screen sizes.
- Test the application thoroughly and get feedback from others to improve its functionality and usability.
- Use version control such as Git to keep track of changes and collaborate with others if needed.
- Consider adding accessibility features such as keyboard navigation and screen reader compatibility to make the application usable for all users.
Cisco Ramon is an American software engineer who has experience in several popular and commercially successful programming languages and development tools. He has been writing content since last 5 years. He is a Senior Manager at Rude Labs Pvt. Ltd.
0 Comments