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.
