Weather Whiz is a web application that allows users to get weather information for different locations. It provides current weather data, hourly forecasts, and 2-day forecasts for the selected location. The application also includes a toggle switch to change between imperial and metric units for temperature and other weather parameters.
- Features
- Website
- Technologies Used
- Project Structure
- Description of Files and Folders
- Credits
- License
- Acknowledgements
- Contributions
- Feedback and Support
Weather Whiz offers the following features:
-
Current Weather: Displaying the current weather for the selected location, including temperature, weather condition, and weather icon.
-
Search Functionality: Users can search for weather information by entering the name of the city or location in the search bar.
-
Hourly Forecast: Weather Whiz provides an hourly forecast for the selected location. Users can scroll through the hourly weather data.
-
2-Day Forecast: The application also offers a 2-day forecast with weather details for the next two days.
-
Toggle Units: Users can switch between imperial and metric units for temperature and other weather parameters.
-
Geolocation: Weather Whiz can automatically detect the user's location using geolocation if permitted, or it can get the weather data based on the user's IP address.
You can access the Weather Whiz page online at: https://shahir-47.github.io/Weather-Whiz/
Weather Whiz uses the following technologies:
-
HTML5: The application uses HTML5 to create the structure of the web page.
-
CSS3: The application uses CSS3 to style the web page.
-
JavaScript: The application uses JavaScript to add interactivity to the web page.
-
Webpack: The application uses Webpack to bundle the JavaScript modules.
-
Babel: The application uses Babel to transpile the JavaScript code.
-
ESLint: The application uses ESLint to detect suspicious code in JavaScript files.
-
Prettier: The application uses Prettier to format the JavaScript code.
-
Weather API: The application uses the Weather API to get weather data for different locations.
-
Mapbox API: The application uses the Mapbox API to display autocomplete suggestions.
Weather-Whiz/
│
├── .vscode/
│ │
│ └── settings.json
│
├── dist/
│ │
│ ├── img/
│ │ │
│ │ └── moon/
│ │ │ │
│ │ │ └── [moon icons]
│ │ │
│ │ └── weather/
│ │ │ │
│ │ │ └── 64x64/
│ │ │ │
│ │ │ └── day/
│ │ │ │ │
│ │ │ │ └── [day icons]
│ │ │ │
│ │ │ └── night/
│ │ │ │
│ │ │ └── [night icons]
│ │ │
│ │ └── [other icons]
│ │
│ └── index.html
│ │
│ └── main.js
│
├── node_modules/
│ │
│ └── [dependencies]
│
├── src/
│ │
│ ├── css/
│ │ │
│ │ └── all.css
│ │ │
│ │ └── normalize.css
│ │
│ ├── img/
│ │ │
│ │ └── moon/
│ │ │ │
│ │ │ └── [moon icons]
│ │ │
│ │ └── weather/
│ │ │ │
│ │ │ └── 64x64/
│ │ │ │
│ │ │ └── day/
│ │ │ │ │
│ │ │ │ └── [day icons]
│ │ │ │
│ │ │ └── night/
│ │ │ │
│ │ │ └── [night icons]
│ │ │
│ │ └── [icons]
│ │
│ └── script.js
│
├── .babelrc
├── .browserlistrc
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── LICENSE
├── package-lock.json
├── package.json
└── webpack.config.js
-
.vscode/: This folder contains the
settings.json
file, which configures Visual Studio Code to use Prettier as the default code formatter and format the code using Prettier when saving. -
dist/: This folder contains the compiled output of the project. It includes the
img/
folder, which contains icons, gifs, and images used in the application, and theindex.html
file, which serves as the skeleton HTML structure for the webpage. Theindex.html
file links to themain.js
script file. -
node_modules/: This folder is automatically generated by Node.js and contains all the installed dependencies for the project.
-
src/: This folder contains the source code for the project. It includes:
-
css/: The
css/
folder contains CSS files for styling the entire webpage. -
img/: The
img/
folder holds images, icons, and gifs used in the webpage. -
script.js: The
script.js
file contains the javascript code for the entire webpage.
-
-
.babelrc: This file is used to load the Babel preset for compiling modern JavaScript code to older versions for better browser support.
-
.browserlistrc: This file specifies the target browsers and their versions that the application should support. It excludes Internet Explorer 11 and all versions of Opera Mini.
-
.eslintignore: This file tells ESLint to ignore the
node_modules
folder when performing linting. -
.eslintrc.json: This file configures ESLint with the Airbnb style guide and the Prettier plugin for consistent code formatting.
-
.gitignore: This file instructs Git to ignore the
node_modules
folder when committing changes. -
.prettierignore: This file tells Prettier to ignore the
node_modules
folder when formatting code. -
.prettierrc.json: This file configures Prettier to use tabs for indentation.
-
LICENSE: The
LICENSE
file contains the MIT License, which governs the use and distribution of this project. -
package-lock.json: This file is automatically generated by npm and ensures that the installed dependencies are locked to specific versions.
-
package.json: The
package.json
file includes metadata about the project and lists the dependencies required for the application to run. It also includes scripts for various tasks, such as building the project. -
webpack.config.js: This file contains the configuration for Webpack, a module bundler used to bundle the JavaScript code and other assets for the application.
-
Mapbox API: The Mapbox API is used to display autocomplete suggestions for the search bar. The API is available at https://www.mapbox.com/
-
Weather API: The Weather API is used to get weather data for different locations. The API is available at https://www.weatherapi.com/
This project is licensed under the MIT License. Feel free to use, modify, and distribute the code according to the terms of the license.
Contributions to Todo List are welcome! If you have any suggestions, improvements, or bug fixes, please submit them as pull requests. You can also report any issues or request new features through the project's issue tracker.
If you have any questions, encounter any issues, or need support with Todo List, please feel free to contact me at [[email protected]]. I appreciate your feedback and I am here to help you.
Enjoy using Weather Whiz to get up to date and accurate weather information for different locations!