Skip to content

This is the repo for Weather.io, a web based weather app made using HTML, CSS and JavaScript.

Notifications You must be signed in to change notification settings

clubgamma/Weather-Web-App-2024

Repository files navigation

Weather Web App (Weather.io)

Project Overview

This Weather Web App is a simple and intuitive web application that allows users to check the current weather conditions for any city around the world. Built using HTML, CSS, and JavaScript, it fetches real-time weather data from a public API and displays key weather metrics such as temperature, humidity, wind speed, and weather description. The app is fully responsive, ensuring a seamless user experience across different devices.

Features

  • Real-time Weather Data: Fetches live weather data for any city using an external weather API.
  • Search Functionality: Allows users to search for weather conditions in any city.
  • Responsive Design: Optimized for desktop and mobile views.
  • Interactive UI: Displays clear weather icons and relevant metrics such as temperature, humidity, wind speed, and weather description.

Technologies Used

  • HTML: For structuring the app.
  • CSS: For styling and making the app responsive.
  • JavaScript: For handling logic, API calls, and dynamic content rendering.

How It Works

  1. The user enters a city name in the search bar.
  2. The app fetches weather data from a public API.
  3. Weather details such as temperature, humidity, wind speed, and a brief description are displayed dynamically on the page.

API Integration

The app utilizes OpenWeatherMap API to fetch current weather data. You can create a free account on the OpenWeatherMap website and generate an API key to use in the project.

Future Enhancements

  • Add a forecast feature to display weather predictions for the next few days.
  • Include a "Current Location" option to automatically fetch weather data based on the user's geolocation.
  • Add customizable themes based on current weather conditions (e.g., sunny, rainy, cloudy).

How to Run the Project

  1. Clone the repository to your local machine.
  2. Open the index.html file in your browser.
  3. Enter the city name to check the weather conditions.

Contribution Guidelines 📚

Welcome to Club Gamma project! We appreciate your interest and contributions. Please read the following guidelines carefully to ensure a smooth collaboration.

General Rules:

  • Creativity Allowed: Feel free to submit pull requests that break the rules—we might just merge them anyway!
  • No Build Steps: Avoid adding build steps like npm install to maintain simplicity as a static site.
  • Preserve Existing Content: Do not remove existing content.
  • Code Style: Your code can be neat, messy, simple, or complex. As long as it works, it's welcome.
  • Add Your Name: Remember to add your name to the contributorsList file.
  • Keep it Small: Aim for small pull requests to minimize merge conflicts and streamline reviews.

Getting Started 🤗🚀

  1. Fork the Repository:

    • Use the fork button at the top right of the repository page.
  2. Clone Your Fork:

    • Clone the forked repository to your local machine.
    git clone https://github.com/clubgamma/hacktoberfest2024.git
  3. Navigate to the Project Directory:

    cd hacktoberfest2024
  4. Create a New Branch:

    git checkout -b my-new-branch
  5. Make Your Changes:

    git add .
  6. Commit Your Changes:

    git commit -m "Relevant message"
  7. Push to Your Branch:

    git push origin my-new-branch
  8. Create a Pull Request:

    • Go to your forked repository on GitHub and create a pull request to the main repository.

Avoiding Conflicts {Syncing Your Fork}

To keep your fork up-to-date with the main repository and avoid conflicts:

  1. Add Upstream Remote:

    git remote add upstream https://github.com/clubgamma/hacktoberfest2024.git
  2. Verify the New Remote:

    git remote -v
  3. Sync Your Fork with Upstream:

    git fetch upstream
    git merge upstream/main

    This will pull in changes from the parent repository and help you resolve any conflicts.

  4. Keep Updated:

    • Regularly pull changes from the upstream repository to keep your fork updated.

Add your name

Add your name to the CONTRIBUTING.md file using the below convention:

#### Name: [YOUR NAME](GitHub link)
- Place: City, State, Country
- Bio: Who are you?
- GitHub: [GitHub account name](GitHub link)

We look forward to your contributions and thank you for being a part of our community!

About

This is the repo for Weather.io, a web based weather app made using HTML, CSS and JavaScript.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published