Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gitusergb/weather-web-app
A weather web application using the Open Weather API, user-friendly, visually appealing, and functional, providing users with current weather information based on their input.
https://github.com/gitusergb/weather-web-app
css html jaavscript weather-api
Last synced: about 2 months ago
JSON representation
A weather web application using the Open Weather API, user-friendly, visually appealing, and functional, providing users with current weather information based on their input.
- Host: GitHub
- URL: https://github.com/gitusergb/weather-web-app
- Owner: gitusergb
- Created: 2024-06-11T09:23:44.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-06-11T15:44:31.000Z (8 months ago)
- Last Synced: 2024-12-11T13:16:43.472Z (about 2 months ago)
- Topics: css, html, jaavscript, weather-api
- Language: CSS
- Homepage: https://chimerical-duckanoo-95373d.netlify.app/
- Size: 3.91 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Weather Application
## Overview
This project is a weather application built using HTML, CSS, and JavaScript. It provides users with current weather information based on their input, featuring an intuitive and visually appealing user interface. The application includes the ability to toggle between dark mode and light mode.
## Features
- **User-Friendly Interface:** Designed to be aesthetically pleasing and intuitive.
- **Weather Information:** Displays current location, temperature, date, and time.
- **Search Functionality:** Allows users to enter a city name or zip code to fetch weather data.
- **Dark Mode/Light Mode Toggle:** Users can switch between dark and light themes.
- **Responsive Design:** Works well on desktop, tablet, and mobile devices.
## Project Requirements
### User Interface
- Aesthetically pleasing and intuitive design.
- Displays current location, temperature, date, and time.
- Input field for entering a valid location (city name or zip code).
- Button or search functionality to fetch and display weather information for the entered location.
### API Integration
- Uses the Open Weather API to fetch weather data.
- Handles API responses and errors gracefully.
- Provides user feedback in case of invalid input or connection issues.
### Minimum Requirements
- Built using HTML, CSS, and JavaScript.
- Fetches and displays current weather information based on user input.
- Implements a search option for users to fetch weather data for other cities.
- Responsive design.
### Bonus Features
- Dark Mode: Toggle functionality between dark mode and light mode.
- Additional Weather Information: Includes humidity, wind speed, or weather description.
- Code Quality: Clean, readable, and maintainable code with comments and documentation.
## Technologies Used
- **Frontend Framework:** HTML, CSS, JavaScript
- **API Integration:** Open Weather API
- **Version Control:** Git
## Getting Started
### Prerequisites
- An API key from Open Weather API.
### Installation
1. Clone the repository:
```bash
git clone
```
2. Navigate to the project directory:
```bash
cd weather-app
```
### Running the Application
1. Create a config.js file in the root directory and add your Open Weather API key:
```// config.js
const API_KEY = 'your_api_key_here';
```
2. Open the index.html file in your preferred web browser to view the application.
### Approach and Design
- **HTML for Structure:** HTML was used to create the structure of the application.
- **CSS for Styling:** CSS was used to style the application, ensuring a responsive and visually appealing design.
- **JavaScript for Functionality:** JavaScript was used to handle API integration, DOM manipulation, and state management.
- **Open Weather API:** The application integrates with the [Open Weather API](https://openweathermap.org/api) to fetch real-time weather data.
- **Dark/Light Mode:** Implemented using JavaScript to manage the theme state and CSS to apply the styles.
## Known Issues and Limitations
- **API Rate Limiting:** Excessive API requests may lead to rate limiting.
- **Geolocation:** May not work accurately in some regions.
- **Cross-Browser Compatibility:** Tested primarily on modern browsers; older browsers may have issues.
## Screenshots / Screen Recordings / Live Demo
- **Screenshots and Screen Recordings:**
---
- **Live Demo:** Deployed on [Netlify](https://chimerical-duckanoo-95373d.netlify.app/)
- **Code Repository Link:** [GitHub Repository](https://github.com/gitusergb/kraftshala-.git)
---
## Contact
Feel free to reach out for any questions.
Thank you !