Weather App Project tells you the weather of a city. You just need to type the name of the city and click on fetch and it will the weather of the city. For the weather, it utilizes OpenWeatherMap API.

Code for Weather APP

This project is a simple weather application built with HTML, CSS, and JavaScript.

Live Preview | Source Code

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <h1>Weather App</h1>
      <input type="text" id="locationInput" placeholder="Enter a city" />
      <button id="searchButton">Search</button>
      <div class="weather-info">
        <h2 id="location"></h2>
        <p id="temperature"></p>
        <p id="description"></p>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.container {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  background-color: rgba(
    255,
    255,
    255,
    0.5
  ); /* Set the background color to be transparent */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Adjust the alpha value here for the box shadow transparency */
  margin-top: 105px;
}

h1 {
  font-size: 24px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

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

const apiKey = "YOUR_API_KEY";
const apiUrl = "https://api.openweathermap.org/data/2.5/weather";

const locationInput = document.getElementById("locationInput");
const searchButton = document.getElementById("searchButton");
const locationElement = document.getElementById("location");
const temperatureElement = document.getElementById("temperature");
const descriptionElement = document.getElementById("description");

searchButton.addEventListener("click", () => {
  if (apiKey === "YOUR_API_KEY") {
    alert("Please set your OpenWeatherMap API key in the script.js file.");
    return;
  }
  const location = locationInput.value;
  if (location) {
    fetchWeather(location);
  }
});

function fetchWeather(location) {
  const url = `${apiUrl}?q=${location}&appid=${apiKey}&units=metric`;

  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      locationElement.textContent = data.name;
      temperatureElement.textContent = `${Math.round(data.main.temp)}°C`;
      descriptionElement.textContent = data.weather[0].description;
    })
    .catch((error) => {
      console.error("Error fetching weather data:", error);
    });
}

More about Index.html

Here’s a breakdown of the HTML file:

  • The <head> section includes metadata about the webpage, a link to a CSS stylesheet (styles.css), and a title for the webpage (“Weather App”).
  • The <body> section contains the main content of the webpage. It includes a container <div> that holds the elements of the weather app.
  • Inside the container, there’s a heading (<h1>) that displays the title of the app (“Weather App”).
  • There’s an input field (<input>) where users can enter a city name. The id of this input field is locationInput, which is likely used in the JavaScript file to get the user’s input.
  • There’s a button (<button>) with the id searchButton. When this button is clicked, it probably triggers a function in the JavaScript file that fetches and displays the weather data for the city entered in the input field.
  • There’s another <div> with the class weather-info that contains elements to display the fetched weather data. It includes an <h2> element to display the location, and two <p> elements to display the temperature and weather description.
  • At the end of the <body> section, there’s a script tag that links to a JavaScript file (script.js). This file likely contains the functionality of the app, such as fetching the weather data from an API and updating the DOM with this data.

More about Style.css file

This CSS file is styling the HTML elements for the weather application. Here’s a breakdown of the styles:

  • body: The font is set to Arial, with a sans-serif fallback. The background color is a light gray (#f0f0f0).
  • .container: This class is likely applied to the main div that contains the weather app. The width is limited to 400px and it’s centered on the page. The text inside is also centered. Padding is added for spacing inside the container, and the background color is a semi-transparent white. The container also has a border radius for rounded corners and a box shadow for a 3D effect. The container is pushed down from the top of the page by 105px.
  • h1: The font size of the main heading is set to 24px.
  • input[type="text"]: This styles the text input field. It’s set to take up the full width of its parent container. Padding is added for space inside the input field, and margin for space outside. The input field has a light gray border and slightly rounded corners.
  • button: The button has a blue background and white text. It has no border, padding for space inside, slightly rounded corners, and a pointer cursor on hover.
  • .weather-info: This class is likely applied to the div that displays the fetched weather data. It’s pushed down from the elements above it by 20px.

More about Script.js file

This JavaScript file is responsible for the functionality of the weather app. Here’s a breakdown:

  • apiKey and apiUrl: These constants hold the API key for OpenWeatherMap and the base URL for the weather API.
  • locationInput, searchButton, locationElement, temperatureElement, descriptionElement: These constants are references to HTML elements. They’re obtained using document.getElementById(), which returns an element with the specified ID.
  • searchButton.addEventListener(): This sets up an event listener on the search button. When the button is clicked, the anonymous function is executed. If the API key hasn’t been set, an alert is shown. If the user has entered a location in the input field, the fetchWeather() function is called with the entered location.
  • fetchWeather(): This function fetches the weather data for the specified location. It constructs the URL for the API request, and then uses the fetch() function to make the request. The response is converted to JSON, then the data is used to update the text content of the locationElement, temperatureElement, and descriptionElement. If there’s an error with the fetch request, it’s logged to the console.

This script enables the weather app to fetch and display weather data for a user-specified location.

Categorized in:

CSSHTMLJavascriptJSProgramming

Tagged in:

, , , , , , , , , ,