https://github.com/asyylz/weather-check-app

The app is a weather information viewer that retrieves data from the OpenWeatherMap API.
https://github.com/asyylz/weather-check-app

css html5 vanilla-js

Last synced: 3 months ago
JSON representation

The app is a weather information viewer that retrieves data from the OpenWeatherMap API.

• Host: GitHub
• URL: https://github.com/asyylz/weather-check-app
• Owner: asyylz
• License: mit
• Created: 2024-02-19T12:51:30.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-13T18:58:19.000Z (11 months ago)
• Last Synced: 2024-07-13T20:06:43.115Z (11 months ago)
• Topics: css, html5, vanilla-js
• Language: JavaScript
• Homepage: https://asyylz.github.io/Weather-Check-App/
• Size: 9.35 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

    
App Description:

    
The app is a weather information viewer that retrieves data from the OpenWeatherMap API. It allows users to

        search for weather information by city name, displays the current weather conditions including temperature,

        cloudiness, wind speed, humidity, and pressure. Additionally, it provides options for users to view weather

        information for predefined cities such as Birmingham, Manchester, New York, and Prague. The app also has a

        feature to automatically detect the user's location using geolocation.

    
Concepts Used:

    


        


DOM Manipulation:DOM Manipulation: The app manipulates the Document Object Model (DOM) to

            access and update various elements of the HTML page dynamically. It selects HTML elements using

            document.querySelector() and updates their content or styles based on the fetched data.

        


Asynchronous JavaScript (Async/Await): Asynchronous programming is utilized to make HTTP

            requests to the OpenWeatherMap API and handle responses asynchronously. The fetchWeatherData function uses

            async/await to fetch weather data from the API and update the UI once the data is received.

        


API Integration: The app integrates with the OpenWeatherMap API to retrieve weather data

            for the specified city. It constructs API requests with the appropriate query parameters (e.g., city name,

            API key, units) and processes the JSON response to extract relevant weather information.

        


Event Handling: Event listeners are used to handle user interactions such as clicking the

            search icon, pressing Enter in the input field, or clicking the geolocation icon. These listeners trigger

            the appropriate actions (e.g., fetching weather data, displaying city options) in response to user input.

        

        


GeolocationThe app utilizes the browser's geolocation API to retrieve the user's current

            location (latitude and longitude). It then makes an API request to fetch weather data for the detected

            location and updates the UI accordingly.

        


Error Handling: The app includes error handling mechanisms to catch and handle any errors

            that may occur during API requests or data processing. It logs error messages to the console and ensures a

            graceful user experience even in case of errors.

        


Styling:The app applies styling to HTML elements dynamically based on weather conditions.

            It changes the background image of the container element depending on whether it is day or night, providing

            a visual representation of the current weather.

    

    


    
Outcome

    You can reach out here

    
Project Structure

    

        

            ├── assests/  

            ├── index.html

            ├── script.js

            ├── LICENSE

            ├── style.css

            ├── LICENSE

            └── README.md

        

    

    


    
Getting Started

    To get started with these projects, clone the repository to your local machine:

    


    

    

      git clone https://github.com/asyylz/Weather-Check-App.git

    

    

      
Contributing

    
If you have ideas for additional projects or improvements to existing projects, contributions are welcome! Feel

        free to open an issue to discuss your ideas or submit a pull request with your changes.

    


    
License

    
This repository is licensed under the MIT License. See the MIT licence file for details.