https://github.com/suvadip-sana/weather_app

Project about a API based weather forecasting app using HTML, CSS and JavaScript. Search by city name, display it's weather status like Temperature, Status, Humidity, Visibility and Wind Speed.
https://github.com/suvadip-sana/weather_app

api-based-app api-project css front-end-development frontend frontend-project html html-css-javascript javascript weather-api weather-app weather-forcast-application-using-api weather-forecast weather-forecast-application

Last synced: 7 months ago
JSON representation

Project about a API based weather forecasting app using HTML, CSS and JavaScript. Search by city name, display it's weather status like Temperature, Status, Humidity, Visibility and Wind Speed.

• Host: GitHub
• URL: https://github.com/suvadip-sana/weather_app
• Owner: Suvadip-sana
• Created: 2024-02-21T14:20:16.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-12T19:09:36.000Z (over 1 year ago)
• Last Synced: 2025-03-30T10:33:50.022Z (8 months ago)
• Topics: api-based-app, api-project, css, front-end-development, frontend, frontend-project, html, html-css-javascript, javascript, weather-api, weather-app, weather-forcast-application-using-api, weather-forecast, weather-forecast-application
• Language: CSS
• Homepage: https://suvadip-sana.github.io/weather_app/
• Size: 4.11 MB
• Stars: 5
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Weather Forcasting Web App

Welcome to our Weather Forecasting App repository! This project provides a simple and intuitive way to check the weather forecast for different cities, with responsiveness. With this app, users can quickly access essential weather information including temperature, wind speed, visibility, and humidity, along with a suitable image(`.gif`) representing the weather conditions.

## Features

- **Search by:** Users can search for weather forecasts by entering the name of the city they want to check (or country or state or dest etc).

- **Dynamic Weather Status:** The app displays the current weather status along with a suitable `GIF` to represent it.

- **Detailed Information:** Temperature, wind speed, visibility, and humidity are provided to give users a comprehensive understanding of the weather conditions.

- **Animated Weather Status:** Weather status is displayed using animated `GIFs` for a more engaging UI experience.

- **Responsiveness:** This is also responsive in small device like Mobile.

## Files

- **`index.html`:** The main HTML file responsible for the structure and layout of the web page.

- **`style.css`:** Cascading Style Sheets (CSS) file used for styling the HTML elements and making the app visually appealing.

- **`script.js`:** JavaScript file containing the logic and functionality of the weather forecasting app.

- **`Other Files`:** Additional GIFs used to represent different weather conditions, Favicon also.

## Mobile View

![Screenrecording](https://github.com/Suvadip-sana/weather_app/assets/78638404/e999ffd8-f064-4842-b119-8e2bfcb5171d) 

## Desktop View

![Screenshot](https://github.com/Suvadip-sana/weather_app/assets/78638404/d1043254-ee19-4b64-ad10-367d0a2b6cc7)

## Usage

1. Clone/Download/Copy the repository to your local machine.

2. Open the `index.html` file in your web browser.

3. Enter the name of the city you want to check the weather for in the search bar.

4. Click the search button to view the weather forecast.