Weather Whiz

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.

Table of Contents

• Features
• Website
• Technologies Used
• Project Structure
• Description of Files and Folders
• Credits
• License
• Acknowledgements
• Contributions
• Feedback and Support

Features

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.

Website

You can access the Weather Whiz page online at: https://shahir-47.github.io/Weather-Whiz/

Technologies Used

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.

Project Structure

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

Description of Files and Folders

• .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 the index.html file, which serves as the skeleton HTML structure for the webpage. The index.html file links to the main.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.

Credits

• 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/

License

This project is licensed under the MIT License. Feel free to use, modify, and distribute the code according to the terms of the license.

Acknowledgements

• Weather API
• Mapbox
• Normalize.css
• Prettier
• ESLint
• Babel
• Webpack
• Visual Studio Code
• Git
• GitHub

Contributions

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.

Feedback and Support

If you have any questions, encounter any issues, or need support with Todo List, please feel free to contact me at [ahmeds@dickinson.edu]. 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!