{"id":22450102,"url":"https://github.com/abdull121/weather-dashboard-app","last_synced_at":"2026-04-11T02:01:53.721Z","repository":{"id":240392950,"uuid":"773443371","full_name":"Abdull121/Weather-Dashboard-App","owner":"Abdull121","description":"Weather Dashboad App Built with JavaScript and TailwindCSS","archived":false,"fork":false,"pushed_at":"2024-08-21T12:47:20.000Z","size":276,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T16:47:25.871Z","etag":null,"topics":["api","api-integration","asynchronous","configuration","css-grid","css3","es6","fetch-api","figma","html5","javascript","moduler-programing","package","responsive-design","tailwind-components","tailwind-css","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://weather-dashboard-appi.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Abdull121.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-17T17:15:50.000Z","updated_at":"2024-10-22T18:01:30.000Z","dependencies_parsed_at":"2024-05-18T15:23:18.676Z","dependency_job_id":"1fdfb9ea-edb7-4500-824b-9693d964b768","html_url":"https://github.com/Abdull121/Weather-Dashboard-App","commit_stats":null,"previous_names":["abdull121/weather-dashboard-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdull121%2FWeather-Dashboard-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdull121%2FWeather-Dashboard-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdull121%2FWeather-Dashboard-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdull121%2FWeather-Dashboard-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Abdull121","download_url":"https://codeload.github.com/Abdull121/Weather-Dashboard-App/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245841761,"owners_count":20681195,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","api-integration","asynchronous","configuration","css-grid","css3","es6","fetch-api","figma","html5","javascript","moduler-programing","package","responsive-design","tailwind-components","tailwind-css","vanilla-javascript"],"created_at":"2024-12-06T05:13:04.974Z","updated_at":"2026-04-11T02:01:53.647Z","avatar_url":"https://github.com/Abdull121.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Weather Dashboard App\r\n\r\nThis is a pixel-perfect Weather Dashboard App built using modern front-end technologies. The app provides a comprehensive view of current weather conditions, forecasts, and other weather-related details for any location. This app is meticulously designed to be pixel-perfect and responsive mobile-friendly leveraging modern front-end technologies, ensuring a seamless and visually appealing user experience.\r\n\r\n## Features\r\n1. **Real-time Weather Updates:**\r\nGet up-to-date weather information for any location, including the current date and time.\r\n2. **Current Weather Details:** \r\nDisplays the current temperature, sunrise and sunset times, humidity, wind speed, atmospheric pressure, and visibility.\r\n3. **Sunrise and Sunset Details**: Provides information on the sunrise and sunset times.\r\n4. **5-Day Forecast:**\r\nView the forecasted weather conditions for the next five days, including the date.\r\n5. **Hourly Forecast:**\r\nAccess the hourly forecast for the current day, including real-time updates, temperature, wind direction, and wind speed.\r\n6.  **Current Location Feature**:\r\n Fetches and displays weather data based on the user's current location.\r\n7. **Dark Mode and Light Mode**:\r\n Supports dark and light mode themes for better user experience and accessibility.\r\n\r\n## Technologies Used\r\n\r\n- **HTML5**: Hypertext Markup language for structuring the web pages.\r\n- **CSS3**: Styling language for enhancing the app's visual appearance.\r\n- **Tailwind CSS**: Utility-first CSS framework for rapid UI development.\r\n- **Tailwind CSS Components**: Pre-built UI components for faster development.\r\n- **Advanced CSS3 Grid**: Used for creating responsive and flexible layouts.\r\n- **Vanilla JavaScript**: Core language for adding interactivity and functionality to the app.\r\n- **ES6 (ECMAScript 6)**: Modern JavaScript syntax and features.\r\n- **JavaScript Modules**: Modular programming approach for better code organization and maintainability.\r\n- **Async/Await and Fetch API**: Asynchronous JavaScript techniques for making API calls and handling responses\r\n\r\n## API Integrations\r\n- **OpenWeather**: For fetching weather data.\r\n- **WorldTimeAPI**: For getting the real-time date and time.\r\n- **Geolocation API**: For determining the user's current location.\r\n\r\n* [OpenWeatherMap API documentation](https://openweathermap.org/api) for more information.\r\n* [World Time API documentation](https://worldtimeapi.org/api) for details.\r\n\r\n## Design\r\nThe design for the Weather Dashboard App was sourced from an open-source Figma template. It has been carefully implemented to ensure a pixel-perfect representation.\r\n**Open Source Figma Design**: The app's user interface is based on an open-source Figma design.\r\n[Figma Design]([weather Dashboad App](https://www.figma.com/design/7aWA4f1MiooSemq7KvTHbK/Weather-Dashboard-(Community)?node-id=1-3) for details.\r\n\r\n\r\n## Installation\r\n\r\nTo set up the Weather Dashboard App locally, follow these steps:\r\n\r\n1. **Clone the Repository**\r\n    ```bash\r\n    git clone https://github.com/Abdull121/weather-dashboard-app.git\r\n    cd weather-dashboard-app\r\n    ```\r\n\r\n2. **Open `index.html`**\r\n   Simply open the `index.html` file in your preferred web browser to view the app.\r\n\r\n## Usage\r\n\r\nOnce you have the app running, you can perform the following actions:\r\n- Search for weather updates by entering a city name.\r\n- View real-time weather updates and detailed forecasts.\r\n- Switch between dark mode and light mode using the toggle button.\r\n- Allow the app to access your location for current weather updates based on your geographical location.\r\n\r\n## Code Structure\r\n\r\nThe project follows a modular programming approach with the following structure:\r\n\r\n\r\n## Code Structure\r\n│\r\n├── -  `index.html` # Main HTML file\r\n├── - `tailwind.config.js` # TailwindCSS configuration file\r\n├──- ` styles/`\r\n│ └── `app.css` # Main stylesheet with TailwindCSS integration\r\n├── `scripts/`\r\n│ ├── -  `app.js` # Main JavaScript file handling core functionality\r\n│ ├── - `api.js` # Handles all API calls and data fetching\r\n│ ├── - `currentlocation.js` # Handles fetching and displaying the user's current location\r\n│ ├── - `fetchTime.js` # Fetches the real-time date and time\r\n│ ├── - `fetchWeather.js` # Fetches the weather data from OpenWeather API\r\n│ ├── - `hourlyForecast.js` # Manages the hourly weather forecast data\r\n│ ├── - `weatherIcons.js` # Handles displaying weather icons\r\n│ \r\n├── - `assets/`\r\n│ └── [images, icons, etc] # Folder containing assets like images and icons#\r\n\r\n\r\n\r\n## Contribution\r\n\r\nContributions to this project are welcome. If you wish to contribute, please follow these steps:\r\n\r\n1. Fork the repository.\r\n2. Create a new branch for your feature or bug fix.\r\n    ```bash\r\n    git checkout -b feature-name\r\n    ```\r\n3. Make your changes and commit them.\r\n    ```bash\r\n    git commit -m \"Add feature-name\"\r\n    ```\r\n4. Push your changes to your forked repository.\r\n    ```bash\r\n    git push origin feature-name\r\n    ```\r\n5. Open a Pull Request detailing the changes you have made.\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License. You are free to use, modify, and distribute this software as long as proper credit is given. However**, please do not use this code for commercial purposes.**\r\n\r\n## Contact\r\n\r\nFor any queries or issues, please open an issue on the repository or contact me directly at [Muhmmmad Abdullah](mailto:abdullahiman8875@gmail.com).\r\n\r\n## ScreenShots\r\n![image](https://github.com/Abdull121/Weather-Dashboard-App/assets/93944428/598dbafe-07f7-438d-829b-bb5af0678800)\r\n\r\n![image](https://github.com/Abdull121/Weather-Dashboard-App/assets/93944428/5be0104b-be3c-43c8-8608-12d09d13f8ca)\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdull121%2Fweather-dashboard-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdull121%2Fweather-dashboard-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdull121%2Fweather-dashboard-app/lists"}