Introduction:
Welcome to our second blog post! In this tutorial, we'll walk you through building a simple weather application using HTML, CSS, and JavaScript. This application will allow users to enter a city name and retrieve the current weather information for that location. We'll be utilizing the OpenWeatherMap API to fetch real-time weather data. So, let's get started and create a weather app that keeps you informed about the conditions!
Prerequisites:
Before we begin, make sure you have a basic understanding of HTML, CSS, and JavaScript. Additionally, sign up for an API key from OpenWeatherMap (insert link to OpenWeatherMap API) to access their weather data.
Setting Up the HTML Structure:
Let's start by setting up the basic HTML structure for our weather application. Open your preferred text editor and create a new HTML file. Copy and paste the following code:
<!DOCTYPE html> <html> <head> <title>Weather Application</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="container"> <h1>Weather Application</h1> <input type="text" id="cityInput" placeholder="Enter city name"> <button id="submitButton">Get Weather</button> <div id="weatherInfo"></div> </div> <script src="script.js"></script> </body> </html>
Explanation:
- ➼ The HTML file includes the necessary structure for our weather application.
- ➼ We have a container div to hold the elements.
- ➼ We have an input field for users to enter the city name.
- ➼ We have a button to trigger the weather information retrieval.
- ➼ We have a div to display the retrieved weather information.
Styling with CSS:
Now, let's style our weather application using CSS. Create a new file called "styles.css" and add the following CSS code:
.container { text-align: center; margin-top: 50px; } h1 { font-size: 32px; } input[type="text"] { padding: 10px; width: 250px; margin-right: 10px; } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } #weatherInfo { margin-top: 20px; }
Explanation:
- ➼ The CSS file contains styles to enhance the appearance of our weather application.
- ➼ The container class centers the elements and adds top margin.
- ➼ The h1 tag style defines the font size.
- ➼ The input and button styles control their appearance.
- ➼ The weatherInfo ID defines the margin-top for the weather information display area.
Fetching Weather Data using JavaScript:
Next, let's write JavaScript code to fetch weather data from the OpenWeatherMap API. Create a new file called "script.js" and add the following code:
const apiKey = 'YOUR_API_KEY'; // Replace with your API key const submitButton = document.getElementById('submitButton'); const cityInput = document.getElementById('cityInput'); const weatherInfo = document.getElementById('weatherInfo'); submitButton.addEventListener('click', getWeather); function getWeather() { const city = cityInput.value; const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`; fetch(apiUrl) .then(response => response.json()) .then(data => { const temperature = data.main.temp; const description = data.weather[0].description; weatherInfo.innerHTML = `<p>Temperature: ${temperature} K</p> <p>Description: ${description}</p>`; }) .catch(error => { weatherInfo.innerHTML = `<p>Error retrieving weather data. Please try again.</p>`; console.error(error); }); }
Explanation:
- ➼ We define the
apiKeyvariable and assign your OpenWeatherMap API key to it. - ➼ We retrieve the necessary HTML elements using their respective IDs.
- ➼ We add an event listener to the submit button and call the
getWeatherfunction when clicked. - ➼ In the
getWeatherfunction, we retrieve the city input value and construct the API URL. - ➼ We use the Fetch API to make a GET request to the OpenWeatherMap API.
- ➼ Upon successful response, we extract the temperature and description from the JSON data.
- ➼ We update the
weatherInfodiv with the retrieved weather information. - ➼ In case of an error, we display an error message in the
weatherInfodiv and log the error to the console.
