Weather Now - Milestone Project #2 - is a Front-end Web Application that provides Users with live weather data and forecast data. For Milestone Project #2, it helps demonstrate updating DOM elements with JSON from a REST API. It also provides another chance to solidify and practice more CSS and Design Skills.
Live Deployment can be viewed here at Weather Now.
- As a User, I want to be able to input my own custom location into an input field in order to get weather data from my desired location.
- As a User, I want to be able to successfully submit my input in order to retrieve weather data for my input.
- As a User, I want some sort of feedback to let me know my search request has went through.
- As a User, I want to be able to use my device's location in order to get weather data without needing to type in my location.
- As a User, I want to be able to view the results of my successful search in order to get an idea of the current weather.
- As a User, I want to view the next few days of weather data for my searched location so that I can gain an idea of what the weather will be like in the future.
- As a User, I want to be able to click a hyperlink that will redirect me to a google maps view of my location so I can better plan a trip or excursion.
The main objective was to make an intuitive UX, the user should not be confused when visiting the Website. To achieve this, the approach was to use a simple, succinct, one-page web application. The User immediately sees an text-input that tells them to enter a location through a placeholder.
If the User is on Mobile, the UX objective was to limit the amount of User Actions to perform a search. This was achieved by using a 'Current Location' button, so they can get search results within one click.
The results of the search needed to be clear while also not bombarding the User with information. The REST API that collected Weather Data had a lot of data that could be displayed, so there was a process of elimination to decide what information is most important to the user - i.e what causes them to make a search, what do they want?
The chosen font for the application was Poppins. It is a clear and legible font that is very mobile friendly.
If the Browser the User uses doesn't support this font or Google Fonts is down, the back-up font is 'sans-serif' which should be built into all modern Operating Systems.
#082F5C- Primary colour#0A5ED7- Secondary colour#E8E8E8- Tertiary colour#E69F6A- Supplementary colour#FF6D00- Supplementary colour 2
The colours were chosen to convey a clean and friendly design with colours that complemented eachother. The Input Container uses the primary colour while the buttons within that Input Container use the
secondary
#0A5ED7 colour to provide some contrast between the two.
In order to prevent the whole application having a blue-theme in primary &
secondary
#0A5ED7 - the toggle switch uses the supplementary colours - &
in order to provide more contrast and distinguish it from its background.
The background for the body of content uses tertiary as the content of the weather containers are
white - it also provides some contrast to distinguish the two.
The logo was created on logomakr. It provides a free, low resolution access to many image assets. The logo is consistent with the colour theme, it uses primary, tertiary and supplementary colour 2.
Wireframes were created using Figma and can be viewed here.
As per the UX Objective, the goal was to create a simple and intuitive User Interface, initially, the colour schemes were different but as development went on, it was realized it needed more contrasting themes in order to engage the User.
The Wireframes were created at 3 target resolutions:
- Desktop - 1920px x 1080px
- Tablet - 768px x 1024px
- Mobile - 360px x 720px
- HTML5
- CSS3 & Bootstrap 5
- JavaScript
- OpenWeatherMap API
- Open Weather API was used to source all weather data both live and forecast. It requires an API key but the APIs used for this project were within the free-plan threshold.
- Geolocation API
- Built most modern browsers, it grabs the User's device latitude and longitude, these details are then served to the OpenWeather API.
- Country Flags API
- In order to improve UX, flags were also sourced to add to the results. Once the country was grabbed from OpenWeather, it was then served to Country Flags to retrieve a URL for that specific country's flag.
- RNS Weather Icons
- Based on the description of the weather, the web application displays an appropriate weather image e.g Clear, Clouds, Rain etc.
- Chrome Dev Tools
- Used for all debugging and testing. Ensured the page was responsive on all relevant devices.
- Git / Github
- Github was used for remote storing of Version Control. Additionally, the Issues tab on the repository was used to effectively manage to-do items.
- Stack Overflow
- Used to help debug certain issues and also code used to create CSS temperature toggler.
- Google Fonts
- The 'Poppins' font was sourced from Google Fonts, it is imported on line 1 of the stylesheet.
- VSCode
- VSCode was used as the development environemnt. It has a plethora of extensions which aided me in this project such as:
- Prettier - format the code on every save.
- Live Server - launch a local server hosting my index.html.
- Markdown Preview Enhancement - write README.md and TESTING.md whilst having a preview tab that had live updates of my changes.
- ESLint - analyzed my JS code and provided recommendations for issues. Led to overall cleaner code.
- VSCode was used as the development environemnt. It has a plethora of extensions which aided me in this project such as:
When the User visits the web application, there will be a 'how to use' container explaining the instructions on what the application offers. It details the three interactive options the User has before a result is shown.
The User can click the current location button which uses the Geolocation API, the browser will then ask the User permissiont to access their device's location. Once that is accepted, the weather results shown will be for that location - using latitude and longitude of the User's device.
The User can instead, enter their own custom location into the Input. Once they click search, the weather API will return weather data for that location.
When the User submits a search - current or custom location - the app will display a live weather container. This live weather will have key information about the location. This includes Temperature, Humidity, Wind Speed, Sunrise, Sunset and a description of the weather e.g Cloudy.
It was decided that this information was most important to a User seeking live weather information. More information could have been added but could lead to overwhelming the User.
In addition to live weather, the User will receive Forecasted Weather for that location. It will provide the User with the next 6 days of weather information - combined with live weather, totals to 7 day weather data. The Forecasted Weather prediction will have minimal but crucial information - date, temperature and weather description.
Using the coordinates of the location the User searched, there will be a hyperlink at the end of the results. It uses these coordinates to autofill a Google Maps query and bring the User to that location in Google Maps in another tab.
The footer contains information on how to contact me - Github, LinkedIn and Email. These buttons bring the User to another tab to view the app.
A future feature could provide data in another medium - through the usage of graphs. A line-graph can give the User an indication of where the weather temperature is trending i.e in the next couple of days, is it getting colder or warmer?
The User can click on a given forecast day and it will expand with a view that has more information about that day's weather prediction.
Embedding a widget such as windy.com for the User's location could give them another way to view the live weather data.
Testing can be viewed at TESTING.md
The Weather Now application was deployed to GitHub Pages. Github pages reads from the main branch and then finds the index.html to host. Here are the following steps I undertook to deploy my application to Github Pages:
- Visit the repository page.
- Click on the Settings tab.
- Scroll down to Github Pages.
- Select source as
main. - Click Save.
A deployment of the site begins and the url is generated. This is also continuous deployment, when the main branch gets updated, Github pages will perform a new deployment with the new changes.
If you would like to run this locally or clone this repository, you can:
- Visit the repository page.
- Click on the Code tab above the files.
- Choose the Clone source e.g HTTPS.
- Open your Command Line / Terminal.
- Run the following command:
git clone <repo-url>. - (If you do not have git installed, you can visit here to do so.)
This will then download a copy of the remote repository on Github to your local machine. To run the application, simply open index.html. As it is a front-end static website, you do not need to run it on a live server.
- My mentor Precious Ijege helped along the way and ensured I was adhering to the highest standards.
#interactive-front-endslack channel helped me with any queries I had.#peer-code-reviewhelped me identify my search was broken due to a typo when pushing new changes to my repository.- Dan Abramov's JustJavaScript which helped me build accurate mental models of how JavaScript behaved which then helped me figure out bugs.