Weather App

Be updated with current weather

---

Live demo

---

What Weather App do

This app will provide current weather of selected city

How to use the App

1. Add city and press enter
2. Choose your city
3. results will be displayed

Features

• Beautiful and simple GUI
• Responsive design that works with desktop and mobile
• Graphical respresentation of day and night
• Beautiful grphical icons to show weather
• Temperature selection

How do i develope this app

Step 1: Get weather API

To get weather api there are several websites available. I used https://developer.accuweather.com/apis and signup and follow the following steps:-

• Go to MY APPS and add a new App
• Get API key (this key be used to get weather info)

Step 2: Get the Weather details

I use forcast.js to get weather details

• Get city details

    const getCity = async (city) => {
    const baseUrl = "https://dataservice.accuweather.com/locations/v1/cities/search";

    const queryParameters = `?apikey=${apikey}&q=${city}`;

    const response = await fetch(baseUrl + queryParameters);

    const data = await response.json();

    return data[0];

};

• Get city weather details

    const getWeather = async (locationKey) => {
    const baseUrl = "https://dataservice.accuweather.com/currentconditions/v1/";

    const queryParameters = `${locationKey}?apikey=${apikey}`;

    const response = await fetch(baseUrl + queryParameters);

    const data = await response.json();

    return data[0];
};

Step 3: Update UI

app.js code is updating UI for weather by DOM manupulation

Technologies

• JavaScript
• Bootstrap
• HTML5
• CSS3

About Code

• Simple HTML/CSS/JS
• Well organized
• Well comminted
• Self descriptive
• Easy to understand

Please ⭐️ this repository if this project helped you!