Important: This site is front end only, and as a result API keys are exposed in javascript and repository. This currently has a free, rate limited API and is intended as a demonstration of js functionality for local use only.
Deployed Link: https://hicelery.github.io/WeatherApp/ Repository Link: https://github.com/hicelery/WeatherApp/tree/main
A project plan and outline:
- Project workflow and repo setup
- Creation of user stories
- Wireframe skeleton and high priority features
- Create kanban board of development issues
- development, smoke testing, deployment
- in situe testing, performance and improvements
User story: As a First‑Time Visitor, I want a concise, clear, layout with consistent and familiar styling, so I can find weather information quickly and efficiently,
Features:
- Navbar and Footer with navigation points around the site.
- Header section showing title and search bar
- Main primary panel showing updated information for today in chosen location.
User story: As a Regular User, I would like customisability, and the ability to save my favourite locations, so I can personalise my experience.
- Filters section where user can choose to show or hide different weather elements, for example wind speed, temperature and feels like temperature.
- Quantity selector for user to choose number of days of forecast into the future the app shows with a maximum of 7 days to ensure smooth design is maintained.
- Favourites panel at the bottom of screen to give user the ability to save favourite locations while continuing to search other spots.
User story: As a Site Owner, I want the site to follow accessibility best practices and responsive design, so everyone can access information.
- Ensure sufficient contrast for clear visual display of fonts and buttons.
- Supply text alternatives for images onsite.
- User can submit using keyboard entry as well as mouse clicks.
User story: As a Site Owner, I want the site to follow development best practices, so it is secure and easy to maintain to minimize downtime.
- Code is well commmented, with each function explained.
- Variables are names appropriately and easy to find in relation to their purpose.
- Indendation and formatting is consistent to make document easier to follow.
We focused on the idea of a sunny, beach themed design titled 'BringMeSunshine!' for the project. This resulted in a background page image of a sunny beach and a warm colour scheme of yellows and oranges.
Final Title Font: 
Our wireframes reflect the intented features to fill our user stories:
Javascript interactivity is found in five main elements of the website:
- Searchbar to update location Default when page loads to the users current geolocation or London
- Change Current Weather Display Shows weather summary for default location or when search is applied
- Filters and Forecast Duration User can select which data points are shown and for how many days to a maximum of 7
- Forecast Section Shows weather forecast for next 5 days by default, but can be altered based on user’s selection
- Favourites Section Add saved locations underneath main forecast area
LO1: Learners will be able to design and implement a one-page interactive Front-End web application using HTML, CSS, and JavaScript focusing on user experience design, accessibility, and responsive DOM manipulation.
LO2: Learners will be able to test and validate a one-page web application through development, implementation, and deployment stages.
LO3: Learners will be able to deploy a one-page web application to a Cloud platform ensuring functionality and security.
LO4: Learners will be able to maximize future maintainability through thorough documentation, clear code structure, and organization.
LO5: Learners will be able to implement and document front-end interactivity using core JavaScript, JavaScript libraries, or frameworks with a focus on DOM manipulation for a one-page web application.
LO6: Learners will be able to leverage AI tools to orchestrate the software development process.
Lighthouse Testing and Code Validation Tests Completed
Project displayed in project board with each task assigned to member, given labels of urgency and updated regularly.
This project is deployed through github pages and follows a simplified agile gitflow methodology:
- Each day of the project being considered one 'sprint'.
- Main branch is preserved as the deployed and live branch, whilst all development work will be conducted on feature branches.
- Code deployments to the live project environment will only available through a pull request to main. This enables a CI/CD approach.
- All feautures must be tested on the 'develop' branch before being considered a release candidate to main. This ensures the deployed project maintains a stable codebase, and provides a scaleable workflow should the project scope increase and more developers were required to join the project.
Example of gitflow:
Ai used to create initial boilerplate from wireframe, streamlining bootstrap structuring. Due to fairly complex wireframe, this did have superfluous css classes that needed removed.
Use of AI for generation of repetitive code and resolving functional bugs.
https://unsplash.com/ - For hero image assets
No other external code was used in this project.