Weather Finder is an interactive web application that provides current weather conditions, an hourly weather forecast, and clothing advice based on the forecasted temperature and weather conditions. The application features a responsive design, ensuring an optimal user experience across mobile, tablet, and desktop devices.
- User Experience (UX)
- Design
- Features
- Technologies Used
- Frameworks, Libraries & Programs Used
- Testing
- Deployment and Local Development
- Credits
- Acknowledgements
The Weather Finder application aims to deliver accurate weather information and practical advice to users in a simple and user-friendly manner.
-
First-time visitors
- Understand the app's purpose and functionality immediately.
- Quickly access current weather data for their location.
- Explore the hourly forecast in a visually appealing layout.
- Receive clothing advice tailored to weather conditions.
-
Returning visitors
- Check updated weather information for their location.
- View changes in the hourly forecast.
- Use the clothing advice feature regularly.
-
Frequent users
- Rely on the app for daily weather updates.
- Share the application with friends or colleagues seeking similar functionality.
-
Color Scheme: The app uses a combination of deep purple (#4B0082), dark grey (#333), light gray (#555), black (#000) and white (#fff), providing a clean, modern look.
-
Typography: Simple, readable fonts(Arial) are used to ensure clarity.
-
Wireframes: Wireframes for this project were created using Balsamiq.
-
Header and Logo
-
Displays the application title and logo prominently at the top of the page.
-
-
Weather Card
-
Displays the current weather, including temperature, conditions, and an icon representing the weather type.
-
Provides an hourly weather forecast with a scrollable layout.
-
-
Hourly Forecast Toggle
-
Allows users to toggle between "Today's Highlights" and "Hourly Forecast."
-
Highlights key times (e.g., morning, noon, evening) for easier comprehension.
-
-
Clothing Advice Form
-
A form where users can input a specific hour to receive clothing advice based on the temperature and weather conditions.
-
Modal for Location Access
-
A popup modal appears when the application loads, asking the user for location access.
-
The modal includes a brief explanation of why location data is needed and offers options to either grant or deny access:
- Yes: Fetches the user's location and retrieves weather data for that location.
- No: Falls back to a default location (London).
-
Enhances the user experience by making location access clear and transparent.
- Footer
-
Provides links to social media accounts and serves as a closing element for the page.
-
- Weekly Forecast
- Expand the application to include a 7-day weather forecast.
- Location Search
- Add functionality to search for weather information for other locations.
- Customizable Themes
- Enable users to switch between light and dark modes or select custom color schemes.
- HTML5: For structuring the content.
- CSS3: For styling and responsive design.
- JavaScript (ES6): For fetching weather data and dynamic interaction.
- OpenWeatherMap API: For real-time weather data.
- Font Awesome: For weather and social media icons.
- Git & GitHub: For version control and deployment.
- VS Code: For coding and debugging.
- Am I Responsive: To validate the responsiveness of the website.
- Balsamiq: Used to create wireframes for layout planning.
- HTML: Validated using the W3C Markup Validator.
- CSS: Validated using the W3C CSS Validator.
index.html
style.css
script.js
-
Functionality Testing
- Tested the geolocation feature to fetch weather data for the user’s current location.
- Verified the functionality of the toggle button between "Today's Highlights" and "Hourly Forecast."
- Checked the clothing advice form for input validation and output accuracy.
-
Responsiveness Testing
- Ensured proper alignment and scaling of elements on mobile, tablet, and desktop devices.
- Verified that scrollable hourly forecast works as expected on larger screens.
-
Navigation Testing
- Confirmed that all buttons and links function correctly.
Desktop report
Mobile report
GitHub Pages used to deploy live version of the website.
- Log in to GitHub and locate GitHub Repository weather-website
- At the top of the Repository locate "Settings" button on the menu.
- Scroll down the Settings page until you locate "GitHub Pages".
- Under "Source", click the dropdown menu "None" and select "Main" and click "Save".
- The page will automatically refresh.
- Scroll back to locate the now-published site link in the "GitHub Pages" section.
By forking the repository, we make a copy of the original repository on our GitHub account to view and change without affecting the original repository by using these steps:
- Log in to GitHub and locate GitHub Repository weather-webiste
- At the top of the Repository(under the main navigation) locate "Fork" button.
- Now you should have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate GitHub Repository weather-website
- Under the repository name click "Clone or download"
- Click on the code button, select clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git cloneand then paste The URL copied in the step 3. - Press Enter and your local clone will be created.
- Weather API integration and geolocation features adapted from the OpenWeatherMap API documentation.
- Scrollbar customization ideas from MDN Web Docs.
- Icons from Font Awesome.
- JavaScript tutorials from JavaScript.info.
- OpenWeatherMap API integration guidance from YouTube tutorials.
- A big thank you to my mentor, Mitko Bachvarov, for his continuous guidance and feedback during this project.
- Special thanks to the Stack Overflow community for their solutions to development challenges.