Title: Create an Advanced JavaScript Project – Day 2
Welcome back Weather App In Javascript, fellow developers! In our journey to enhance our JavaScript skills, we are now on Day 2 of our advanced JavaScript project. If you missed Day 1, don’t worry; you can find it here. Today, we will continue building upon our previous work and create a dynamic web application using HTML, CSS, and, of course, JavaScript.
Weather App In Javascript
Table of Contents
Project Overview: Weather Forecast Application
In this project, we’ll be building a weather forecast application that allows users to check the current weather conditions of any city. We’ll be utilizing the power of the OpenWeatherMap API to fetch real-time weather data. The application will display the weather conditions along with a simple weather icon representing the weather type.
Prerequisites
Before we get started, make sure you have the following:
- A basic understanding of HTML, CSS, and JavaScript.
- A code editor (e.g., Visual Studio Code, Sublime Text, etc.).
- A modern web browser.
Project Setup
- Create a new folder named “WeatherApp” on your computer.
- Inside the “WeatherApp” folder, create three files: “index.html,” “styles.css,” and “script.js.”
HTML Structure (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Forecast App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Weather Forecast App</h1>
<input type="text" id="cityInput" placeholder="Enter a city">
<button id="searchBtn">Search</button>
<div id="weatherInfo">
<!-- Weather information will be displayed here -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS Styling (styles.css)
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
h1 {
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}JavaScript Logic (script.js)
// Get DOM elements
const cityInput = document.getElementById('cityInput');
const searchBtn = document.getElementById('searchBtn');
const weatherInfo = document.getElementById('weatherInfo');
// OpenWeatherMap API key
const apiKey = 'your_openweathermap_api_key_here';
// Event listener for the search button
searchBtn.addEventListener('click', () => {
const city = cityInput.value.trim();
if (city === '') {
alert('Please enter a city name.');
return;
}
getWeatherData(city);
});
// Function to fetch weather data from OpenWeatherMap API
async function getWeatherData(city) {
try {
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`);
const data = await response.json();
// Display weather information
displayWeatherInfo(data);
} catch (error) {
console.error('Error fetching data:', error);
alert('An error occurred while fetching weather data. Please try again later.');
}
}
// Function to display weather information
function displayWeatherInfo(data) {
const { name, weather, main } = data;
const weatherDescription = weather[0].description;
const temperature = (main.temp - 273.15).toFixed(1); // Convert Kelvin to Celsius
weatherInfo.innerHTML = `
<h2>${name}</h2>
<p>${weatherDescription}</p>
<p>Temperature: ${temperature}°C</p>
`;
}
Putting it all Together
- Save all the above code into their respective files: “index.html,” “styles.css,” and “script.js.”
- Replace
'your_openweathermap_api_key_here'in thescript.jsfile with your actual OpenWeatherMap API key. You can sign up for a free API key on the OpenWeatherMap website. - Open the
index.htmlfile in your web browser, and you should see the Weather Forecast Application.
Conclusion
Congratulations! You’ve successfully created a Weather App In Javascript Application using HTML, CSS, and JavaScript. You’ve learned how to fetch data from an external API and dynamically display it on a web page.
After completing Day 2, keep exploring and enhancing your JavaScript skills. Stay tuned for the next blog post, where we’ll be adding more exciting features to our Weather App In Javascript!
Happy coding! Weather App In Javascript
