Weather App Using HTML , CSS & JavaScript With Source Code

Weather App Using HTML , CSS & JavaScript

Introduction:

The Weather App project is a web application that leverages HTML, CSS, and JavaScript to fetch weather data from a weather API and display current weather conditions and forecasts for a specific location. It provides users with real-time weather information, allowing them to stay informed about the weather conditions in their desired location.

The Weather App utilizes an API (in this example, the WeatherAPI) to retrieve weather data based on the user’s input location. The application dynamically fetches the current weather information and the forecast for the upcoming days. It then presents this data in a user-friendly format, making it easy for users to understand and interpret.

Key Features:

  1. Location Input: Users can enter the desired location for which they want to fetch weather information. The app validates the input and prompts users to provide a valid location if necessary.

  2. Current Weather Display: The application fetches and displays the current weather conditions for the specified location. It provides essential information such as temperature, weather condition, and location details.

  3. Forecast Weather Display: The Weather App also fetches and presents the forecasted weather data for the upcoming days. It showcases the predicted temperature and weather condition for each day, allowing users to plan ahead.

  4. API Integration: The app integrates with a weather API (e.g., WeatherAPI) to retrieve weather data. It sends requests to the API, receives the responses containing weather information, and parses the data for display.

  5. Responsive Design: The Weather App is designed to be responsive, ensuring that it works well on different devices and screen sizes. Users can access the app and view weather information on their desktops, laptops, tablets, or mobile devices.

 

Benefits:

  • Real-time Weather Information: Users can obtain up-to-date weather data for any desired location, enabling them to make informed decisions based on current and forecasted weather conditions.

  • User-friendly Interface: The application offers a clean and intuitive interface for entering locations and viewing weather information. It presents data in a clear and organized manner, enhancing the user experience.

  • Planning and Preparedness: The Weather App allows users to plan their activities and make informed decisions based on weather forecasts. They can adapt their schedules, clothing, or travel plans accordingly, enhancing safety and convenience.

  • API Integration: By integrating with a weather API, the app can leverage the data and capabilities provided by the API, ensuring accurate and reliable weather information.

The Weather App project offers a practical and useful tool for users who want to stay informed about weather conditions. It demonstrates the power of HTML, CSS, and JavaScript in building web applications that interact with APIs and provide real-time data to enhance user experiences.

Source Code:

Get Discount on Top Educational Courses

Brand NameDiscount InformationCoupon Codes Link
Educative.io20% discount on Educative courses and plans
W3Schools20% discount on W3Schools courses
KodeKloud10% discount on KodeKloud courses and plans
GeeksforGeeks30% discount on GeeksforGeeks courses
Target Test Prep20% discount on Target Test Prep
Coding Ninjas₹5000 discount on Coding Ninjas courses
Skillshare40% discount on Skillshare
DataCamp50% discount on DataCamp
365 Data Science57% discount on 365 Data Science Plans
Get SmarterFlat 20% discount on Get Smarter courses
SmartKeedaFlat 40% discount on SmartKeeda courses
StackSocial20% discount on StackSocial courses

HTML:

				
					<!DOCTYPE html>
<html>
<head>
  <title>Weather App</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="weather-container">
    <h2>Weather App</h2>
    <div id="location-container">
      <input type="text" id="location-input" placeholder="Enter location">
      <button id="submit-btn">Get Weather</button>
    </div>
    <div id="weather-info">
      <div id="current-weather"></div>
      <div id="forecast-weather"></div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
				
			

CSS (style.css):

				
					#weather-container {
  text-align: center;
}

#location-container {
  margin-top: 20px;
}

#location-input {
  padding: 5px;
}

#submit-btn {
  padding: 5px 10px;
  margin-left: 10px;
}

#weather-info {
  margin-top: 20px;
}

#current-weather {
  font-weight: bold;
}

#forecast-weather {
  margin-top: 10px;
}
				
			

JavaScript (script.js):

				
					const apiKey = 'YOUR_API_KEY'; // Replace with your API key

const submitButton = document.getElementById('submit-btn');
const locationInput = document.getElementById('location-input');
const currentWeatherDiv = document.getElementById('current-weather');
const forecastWeatherDiv = document.getElementById('forecast-weather');

submitButton.addEventListener('click', () => {
  const location = locationInput.value;
  if (location.trim() === '') {
    alert('Please enter a location');
    return;
  }

  fetchWeather(location);
});

async function fetchWeather(location) {
  try {
    // Fetch current weather data
    const currentWeatherURL = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${location}&aqi=no`;
    const currentWeatherResponse = await fetch(currentWeatherURL);
    const currentWeatherData = await currentWeatherResponse.json();

    // Fetch forecast weather data
    const forecastWeatherURL = `https://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${location}&days=3`;
    const forecastWeatherResponse = await fetch(forecastWeatherURL);
    const forecastWeatherData = await forecastWeatherResponse.json();

    // Display current weather
    displayCurrentWeather(currentWeatherData);

    // Display forecast weather
    displayForecastWeather(forecastWeatherData);
  } catch (error) {
    console.log('Error:', error);
    alert('An error occurred while fetching weather data');
  }
}

function displayCurrentWeather(data) {
  const location = data.location.name;
  const tempC = data.current.temp_c;
  const condition = data.current.condition.text;

  currentWeatherDiv.innerHTML = `
    <h3>Current Weather</h3>
    <p>Location: ${location}</p>
    <p>Temperature: ${tempC}°C</p>
    <p>Condition: ${condition}</p>
  `;
}

function displayForecastWeather(data) {
  const forecast = data.forecast.forecastday;
  let forecastHTML = '<h3>Forecast Weather</h3>';

  forecast.forEach(day => {
    const date = day.date;
    const maxTempC = day.day.maxtemp_c;
    const minTempC = day
				
			

Output:

Find More Projects

resume screener in python using python introduction The hiring process often begins with reviewing numerous resumes to filter out the most suitable …

expense tracer in python using GUI introduction Tracking daily expenses is a vital part of personal financial management. Whether you’re a student …

my personal diary in python using GUI introduction Keeping a personal diary in python is one of the oldest and most effective …

interview question app in python using GUI introduction In today’s rapidly evolving tech landscape, landing a job often requires more than just …

sudoko solver in python using GUI introduction Sudoku, a classic combinatorial number-placement puzzle, offers an engaging challenge that blends logic, pattern recognition, …

handwritten digit recognizer in python introduction In an era where artificial intelligence and deep learning are transforming industries, real-time visual recognition has …

More HTML CSS JS Projects
Get Huge Discounts