An open API service indexing awesome lists of open source software.

https://github.com/kislevlevy/clean-weather-client

Weather Interactive Map API Integration JavaScript CSS3 HTML5 DOM manipulation
https://github.com/kislevlevy/clean-weather-client

api-integration css3 dom-manipulation html5 interactive-map javascript weather

Last synced: 11 months ago
JSON representation

Weather Interactive Map API Integration JavaScript CSS3 HTML5 DOM manipulation

Awesome Lists containing this project

README

          

# Clean Weather Client

## Project Overview

Clean Weather Client is a sleek and modern weather search engine that provides a 5-day forecast for any location. The design is minimalistic and user-friendly, featuring an interactive map to display the queried location.

## Features

- 5-day weather forecast for any location
- Interactive map showing the queried location
- Clean, modern, and responsive design

## Technologies and Tools

- **HTML:** Structure of the web page
- **CSS:** Styling of the web page
- **JavaScript:** Interactivity and logic
- **Google Maps API:** Map and geolocation handling
- **OpenWeather API:** Weather data retrieval
- **JSON:** Data format for API responses

## Skills Demonstrated

- **API integration:** Seamlessly connecting with external APIs to fetch weather data
- **Map and geolocation handling:** Displaying locations on an interactive map
- **Responsive design:** Ensuring the application works well on various devices and screen sizes

## Installation

To run the project locally, follow these steps:

1. Clone the repository:
```bash
git clone https://github.com/kislevlevy/clean-weather-client
```
2. Navigate to the project directory:
```bash
cd clean-weather-client
```
3. Open `index.html` in your preferred web browser.

> You can also preview the application by visiting the following link: [Clean Weather Client](http://kislev.me/clean-weather-client)

## Usage

- Enter a location in the search bar to get a 5-day weather forecast.
- View the queried location on the interactive map.
- Enjoy the clean and responsive design on any device.