- 📖 Table of Contents
- 📍 Overview
- 📦 Features
- 📂 Repository Structure
- ⚙️ Modules
- 🚀 Getting Started
- 🛣 Project Roadmap
- 🤝 Contributing
- 📄 License
Weather-Wiz is a comprehensive Weather Dashboard web application providing real-time weather information based on a user’s location or a specified city or country. It delivers the current conditions and a five-day forecast, supplemented by animated weather-themed gifs fetched from the Giphy API. Additionally, it remembers previous search queries and also lets users clear their search history. The implementation ensures both desktop and mobile users have an optimized and satisfactory experience.
| Feature | Description | |
|---|---|---|
| ⚙️ | Architecture | The codebase has been organized in separate files for enhanced maintainability. Data persistence is achieved through local storage. |
| 🔗 | Dependencies | Relies on vanilla JavaScript, JQuery for DOM manipulation, Bootstrap for styling, and Day.js for date operations. |
| 🧩 | Modularity | The codebase functionality is split into separate files. CSS and JavaScript is organized in different files to improve code readability and maintainability. |
| 🧪 | Testing | Manual testing has been conducted to ensure the functionality of the Weather Dashboard. No dedicated testing framework is currently in use. |
| ⚡️ | Performance | The application is designed for optimal performance, taking advantage of its simplicity and reliance on local storage for efficient data management. |
| 🔐 | Security | Currently lacks explicit security measures. It's important to note that data vulnerabilities may exist due to the use of local storage without encryption or protection mechanisms. |
| 🔀 | Version Control | Utilizes Git/GitHub for version control. |
| 🔌 | Integrations | Integrations include Bootstrap for responsive design, Day.JS for date management, and JQuery for DOM manipulation. |
| 📶 | Scalability | While the front-end design is scalable, the project's scalability is limited due to the absence of a back-end. |
└── weather-wiz/
├── css/
│ ├── reset.css
│ └── styles.css
├── index.html
└── scripts/
├── config.js
├── domElements.js
├── giphy.js
├── history.js
├── icons.js
├── location.js
├── main.js
└── weather.js
Root
| File | Summary |
|---|---|
| index.html | The codebase index.html includes a search function to find weather details by city or country, a display for the current weather and a 5-day forecast, location services to find the user's current location, and a search history which can be cleared. Visual styling is provided through Bootstrap, custom CSS and Google Fonts, while dynamic functionality is implemented by several JavaScript modules. |
| reset.css | The codebase reset.css is to reset CSS properties, such as margin, padding, and border styles, to improve cross-browser consistency. This helps to correct issues like line height inconsistency, font size adjustments after orientation changes in iOS, and the inconsistent rendering of elements like main, h1, etc., across different browsers, creating a normalized basis for further styling. |
| styles.css | The codebase styles.css defines styling for elements in the index.html file, including colors, fonts, text formats, border styles, and divisions. This includes specific styles for headers, body text, buttons, search bars, separators, and cards in both desktop and mobile views. Customized properties are used for color schemes, while media queries ensure the application is mobile-responsive. |
| config.js | The codebase config.js holds configuration settings, specifically API keys for Giphy and OpenWeatherMap APIs. These keys are used to fetch data from corresponding services-animated images from Giphy and weather information from OpenWeatherMap. |
| domElements.js | The codebase domElements.js extracts essential HTML elements needed for the app functionality via jQuery's selection methods. These elements include the search form, today's forecast container, five-day forecast container, history container, and buttons. It also sets up constants for Bootstrap classes and FontAwesome icons related to temperature, wind speed, and humidity which are used to style these elements. |
| giphy.js | The codebase giphy.js it fetches a random GIF based on weather-related tags: sun, rain, storm, etc. The chosen GIF URL is then used to append an image to a target HTML element. If the request fails, errors are appropriately handled and logged. |
| history.js | The codebase history.js include saving, loading, and clearing the search history of cities. It adds new cities to the history or reorders them if already present. The history, stored in the local storage, is loaded from there. The code also manages the display of a Clear History button based on the existence of items in the history. |
| icons.js | The icons.js script generates weather icons for the weather application based on OpenWeatherMap's icon codes and the period of the day (day or night). It maps weather conditions codes to a suitable day or night weather icon, then creates and returns an image element with the corresponding icon. The icons are from Noah Blon's animated Climacons. |
| location.js | The code from the file location.js of the weather-wiz web application captures functionalities related to geolocation. It uses the browser's geolocation API to acquire the current location of the user, generates a weather API query using these coordinates after which it fetches weather data. It also handles potential location errors gracefully. |
| main.js | The main.js script initializes the weather app. At startup, it sets up event listeners, loads history, displays a Clear History button if any history is present, clears input, and fetches a random gif. It handles form submissions by parsing inputs, building a query URL, fetching weather data, and resetting the input. Weather data is then displayed, with a clear distinction between current weather and the 5-day forecast. Other functionalities include creating weather card elements with required info, displaying error messages, and clearing forecast containers. |
| weather.js | The weather.js script in the weather-wiz application handles weather data retrieval and parsing. It includes functionalities to parse search terms into city, state code, and country code; construct a weather query URL for the OpenWeatherMap API; fetch weather data from the API, handling HTTP errors and displaying data or error messages; and handling other errors related to data fetching. |
- Clone the weather-wiz repository:
git clone https://github.com/pmAdriaan/weather-wiz- Change to the project directory:
cd weather-wiz- Install the dependencies:
N/A► Open index.html with Live Server plugin in VS Code
ℹ️ Comming Soon
Contributions are welcome! Here are several ways you can contribute:
- Submit Pull Requests: Review open PRs, and submit your own PRs.
- Join the Discussions: Share your insights, provide feedback, or ask questions.
- Report Issues: Submit bugs found or log feature requests for PMADRIAAN.
Click to expand
- Fork the Repository: Start by forking the project repository to your GitHub account.
- Clone Locally: Clone the forked repository to your local machine using a Git client.
git clone <your-forked-repo-url>
- Create a New Branch: Always work on a new branch, giving it a descriptive name.
git checkout -b new-feature-x
- Make Your Changes: Develop and test your changes locally.
- Commit Your Changes: Commit with a clear and concise message describing your updates.
git commit -m 'Implemented new feature x.' - Push to GitHub: Push the changes to your forked repository.
git push origin new-feature-x
- Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
Once your PR is reviewed and approved, it will be merged into the main branch.
Copyright © 2023 Mihai Pirvu.
This project is licensed under the ℹ️ MIT-License. See the MIT License file for additional info.