Coders Packet

JavaScript Weather App Using Open Weather Map API

index.html

script.js

style.css

This application is crafted with HTML, a dash of CSS ,Bootstrap, and the magic of JavaScript. Using it we can easily fetch the current weather details of a city/country in seconds .

LANGUAGES USED:-

1. HTML

2. CSS

3. JAVASCRIPT

4. BOOTSTRAP

API :-

1. OPEN WEATHER MAP

HTML,CSS AND BOOTSTRAP CODE
    
    
    
Weather App

----

----

Temp: --°

Min Temp: --°

Max Temp: --°

#city-input, #weather-output {
    max-width: 400px;
    margin: 0 auto;
}
  
.banner {
    color: blue;
    font-family: sans-serif;
}

HTML,CSS (The Structure and basic styling)

The head section contains metadata about the webpage, including the title, external CSS stylesheets (Bootstrap and a custom "style.css"), and an external JavaScript file ("script.js").A prominent heading with the class "banner" serves as a title for the app.

A div with the class "form-group" contains an input field for users to search for a city's weather. It has an event listener for keydown events.A "Search" button is provided for users to initiate the city search.The button is created with the help of bootstrap class "btn-success" which provides a green color to the button .The weather output is displayed in a div with the id "weather-output".

It contains weather information displayed within Bootstrap cards.Inside the cards, there are placeholders for city name, weather type, Current temperature, minimum temperature, and maximum temperature. These placeholders will be updated dynamically with JavaScript when the user searches for a city.

Overall, this HTML code sets up the basic structure and initial layout of our weather app webpage, which is enhanced and made functional with the help of the linked CSS and Bootstrap and linked JavaScript file.

JAVASCRIPT CODE

let API_KEY = "a8e71c9932b20c4ceb0aed183e6a83bb";

const getWeatherData = (city) => {
  const URL = "https://api.openweathermap.org/data/2.5/weather";
  const FULL_URL = `${URL}?q=${city}&appid=${API_KEY}&units=imperial`;
  const weatherPromise  = fetch(FULL_URL);
  return weatherPromise.then((response) => {
    return response.json();
  })
}


const searchCity = () =>
{
    const city = document.getElementById('city-input').value;
    getWeatherData(city)
    .then((res)=>{
        showWeatherData(res)
    }).catch((error)=>{
        console.log(error)
        console.log('Something error happened')
    })
}

showWeatherData = (weatherData) => {
  document.getElementById("city-name").innerText = weatherData.name;
  document.getElementById("weather-type").innerText = weatherData.weather[0].main;
  document.getElementById("temp").innerText = weatherData.main.temp;
  document.getElementById("min-temp").innerText = weatherData.main.temp_min;
  document.getElementById("max-temp").innerText = weatherData.main.temp_max;
}

function enter(event)
{
  const val = document.getElementById('city-input').value;
  if(val === 'Enter')
  {
    getWeatherData(city)
    showWeatherData(weatherData)
  }
}

JavaScript (The internal functioning)

The JavaScript code provides functionality for the weather app by interacting with the OpenWeatherMap API and updating the webpage's content based on user input.

"API_KEY" is a constant storing the API key for accessing the OpenWeatherMap API."getWeatherData" is the function that takes a city name as the parameter, constructs a URL to the API endpoint with the provided city, and then makes a fetch request to retrieve weather data. It returns a promise that resolves to the weather data in JSON format.

"searchCity" is a function triggered when the user clicks the "Search" button. It retrieves the city input value, calls "getWeatherData" with the cityname, and then updates the webpage with the weather data using showWeatherData. It also handles errors by logging them to the console.If the city name is not mispelled then it says "undefined".

"showWeatherData" is a function that takes the retrieved weather data and updates specific elements on the webpage with the information, such as the city name, weather type, temperature, minimum temperature, and maximum temperature.

SCREENSHOTS:-

https://coderspacket.com/uploads/user_files/2023-09/Screenshot_(19)-1694438950-2258.png

https://coderspacket.com/uploads/user_files/2023-09/Screenshot_(23)-1694439035-2258.png