Eyes In The Sky is a weather application that provides live and forecast weather data based on the users location or a location of their choice. Eyes In The Sky is useful for individuals who wish to plan their day/week in occordance to the weather. The ability to check the weather using your current location or custom search offers flexibility. This is particularly useful to users planning to take a trip abroad or anyone travelling outside of their local area, be it for work or lesiure.
Table of contents:
• As a user, I want to be able to acess weather data on my mobile so I can check the weather whislt on the go.
• As a user, I want to be able to input my own location into an input field in order to get weather data for any 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 was processed.
• 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 so that I can know the weather.
• As a user, I want to view the future weather for my searched location so that I know what the weather will be like for the rest of the week.
The main goal was to make an intuitive UX, so that the user is not confused when visiting the Website. To achieve this, I created a simple, succinct, one-page web application. Once the page has loaded the user sees a searchbar with place holder text, that tells them to enter a location.
The users desired results needed to be obtained with ease. This was achieved by using a 'Current Location' button, so they can get search results within one click, limiting the number of user actions to generate weather data.
The user needs to be able to easily access weather data from any device. To ensure this was possible I have enabled a scroll function so overflow is visble and kept the UX design simple so that it can be easily adjusted across all viewport sizes without the user loosing access to any functions or information.
The results of the search also needed to be clear , partciuarly for those using smaller viewports. The REST API that collected Weather Data had lots of data that could be displayed, so I eliminated any unncessary data so that the user only provided with useful data. To help me determine which information was the most useful, I compared the the kind of data available on popular weather apps. Then tailored this to the needs of my target audience.
• Colour scheme
° I have gone for a complimentary colour palette, which I desgined using canva. Initially, the theme of the site is blue(#419AFF) and orange (#FFA641) as these are colours of the sky and sun, thus commonly associated with the weather, tying in with the purpose of the app. These colours had low contrast when tested on WebAim so I changed them to a dark blue(#02085A) and a darker orange (#FF8847). To make things easy for the user I used a monchrome design for the text. All weather data is displayed in black text (#ffffff) on a white card (#000000).
• Typography
° In keeping with the simple style of the website, I have chosen to use a Thai and Latin family font 'Mali' as it has a carefree feel and is easy to read. I want the users to be carefree whislt using the site as the purpose of the site is to alow the users to retrive their desired data in a stress free way.
• Imagery
° The weather icons seen on the site are from the Rest API.
° The icons used for humidity and feels like Box Icon
• Wireframes
° Wireframes were created using Figma. To meet my UX objective of creating a simple and intuitive User Interface (UI), I initially used a different colour schemes but further into the development I realised greater contrast was required in order to engage the User. I also took a more modern, minimalisitic approach with the UX, in order to improve user engagement without straying from the simplistic theme. Here is the link to my wireframes for desktop and mobile. Below are screenshots of the desktop and mobile Wireframes. 👇
Desktop: 🖥️
Mobile: 📱
##### Instructions container
~~ When the user visits the web application, there are a few simple instructions that allow the user to understand how to use the site.~~
The user can click the location button, the browser will then ask the user permission 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. This button uses the Geolocation API.
Alternatively, the user can enter a location of their choice into the searchbar. Then click the Search button, the weather API will return weather data for that location, provided the input is valid. Otherwise an error message will occur and the user will be prompted to try again.
When the user clicks either button, the app will display the current weather, location and any key information about the location.
More information could have been added, but this could have potentially overwhelmed the user so instead I decided that this information was most important to a user seeking live weather information.
The user will also be provide with weather forcast for the next 6 days. Giving them a 7day weather app. To maintain the simplicity of the UX only the day, weather, weather icon and temperature is displayed for forecasted weather.
The footer contains buttons with links to Github, LinkedIn and Email where the can contact me. The links also open in a new tab for the users convenience.
• Expanding Forecast View The User can click on a given day and it will expand, allowing the user to view more forecast information relating to that day.
• Weather cards The data for each location is returned in a seperate card allowing the user to compare multiple locations at once.
Canva - I used canva to create my colour palette. I also used Canva to remove the background colour of my logo and the Spiral image on the about us page.
AmIResponisve - I used amiresposive to generate the resposive image at the start of my Readme.
WebpageTest- I used webpage testing to test my webpage across a range of devices.
Tailor Brands - I used Tailor brands to create my logo.
Git - I used Git to track the changes to my code. Git was also used for version control.
Github - Github was used to host my project files. I then used Gitpages to deploy the website.
Vs Code- VS Code powers gitpod and was used to build the website.
Slack - I used slack to get feedback on my project.
Google Fonts - The fonts used are google fonts.
Figma - I used figma to design my mockups.
Box Icon - I use Box Icon to add icons to my app.
Gitpod - Gitpod is powered by VS Code, storing my code in the cloud. I can then commit that code to my Github repository as Gitpod and Github are connected.
Lighthouse testing - I used lighthouse testing to test the performance of my webpage.
• W3C HTML Validator - Passed
Below are screenshots of my results 👇, click the hyperlink above to view my results. 👆
• W3C CSS Jigsaw Validator - Passed
Below are screenshots of my results 👇, click the hyperlink above to view my results. 👆
• JsHint- Passed
° Quite a few warnings in regrads to ES6 syntax used such as arrow functions =>
• ES6 Syntax Check- Passed
° I decided to use an ES6 syntax check just to make sure, that there were no errors found.
To ensure peformance was tested exstensively, I used two tools
•Lighthouse testing The overall performance of my webpage is good but there is room for improvement in best practices. As seen in the screenshot below.
In order to improve this I added the following:
° rel="noopener" - the browser's instructed to navigate to the href without granting the new site access to the document that opened it, improving security.
° rel="noreferrer" - prevents the target site from accessing the origin site's information, this is good for security and prevents tracking for Google Analytics.
My performance score did not improve after this but my web application is now alot safer.
•WeppageTest
I used webpage testing to conduct performance testing across a range of devices, my results were the same across all devices tested. Below is a screenshot of the results from a Google Pixel XL
The above HTML and CSS Validators test for valid code that is compatible with all browsers.
The following functions were tested on the following browsers using a pass / fail system:
| Function | Browser | Result |
|---|---|---|
| Geolocation API |     |
PASS |
| Search bar | |
PASS |
| Forecast weather | |
PASS |
| Import Icons | |
PASS |
| Current weather | |
PASS |
| Footer Links | |
PASS |
• OS compatibility was tested on iOS 14.8, Android 11, ipadOS 15, Windows 10 and MacOS BigSur.
• The devices used include but are not exclusive to Macbook Pro, iphone XR, HTC 11, iphone 11Pro and iPad air. To ensure the website was thoroughly tested I used Chrome Dev Tools to test on a range of viewports from 320px up to 2560px.
• I shared the web app with family and friends of varying ages and computing skills to test the ease of navigation on a variety of devices. There were no issues with navigation.
• I also used testers to check that all buttons were working and there were no broken links. No broken links were found but there were a few issues with the animations loading, these issues have been corrected. After corrections were made I asked for them to be tested again and everything was working as expected.
• As a user, I want to be able to acess weather data on my mobile so I can check the weather whislt on the go. ✔️
° Core weather data is acessible on mobile
• As a user, I want to be able to input my own location into an input field in order to get weather data for any desired location. ✔️
° User is able to input their own location and data is returned provided the input is valid.
• As a user, I want to be able to successfully submit my input in order to retrieve weather data for my input. ✔️
° The search button allows user input to be submitted and data is retrived.
• As a user, I want some sort of feedback to let me know my search request was processed. ✔️
° I have created messages so the user knows there results are being fetched. All error messages are also displayed so the user knows why the data was not returned.
• 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. ✔️
° The local button uses the geolocation API to retrive users co-ordinates and return weather data for their location
• As a user, I want to be able to view the results of my successful search so that I can know the weather. ✔️
° The results are easily viewed by the user, with scroll enabled for overflow on smaller devices.
• As a user, I want to view the future weather for my searched location so that I know what the weather will be like for the rest of the week. ✔️
° Weather forecast is displayed for next 6 days , irrespective of the button pressed.
I used GitHub Pages to publish this webiste. In order for the site to be deployed correctly, ensure your landing page is named index.html.
I used the following steps to deploy this site:
-
Log in to Github and locate the Github Repository
-
Click the "settings" button.
-
Scroll down until you see "GitHub Pages".
-
In the source dropdown select "master branch".
-
Once the page refreshes the link to your publish page will be displayed under GitHub pages.
° The link colour will change to green, it can take a few moments for the site to be published.
-
Go to the Eyes In The Sky repository
-
Click the
CloneorDownloadbutton under the repository name.
° A button will appear called Clone with HTTPS.
-
Copy this clone URL for the Vibe Tribe repository
-
Open Git Bash in your local IDE
-
Change the current working directory to the location where you want the clone directory to be made
-
Type
git clone, then paste the URL you copied earlier (from step 4) This should look likegit clone https://github.co./YOUR-USERNAME/YOUR-REPOSITORY. -
Press enter. Your local clone will be created. If you have any issues or want to read more click here.
• There are no known bugs and all errors have been corrected. The solutions to these fixes have been highlighted with "Fix:" commits during the project development.
A few issues that I faced during the project:
•Subsequent lines of code were running before previous lines of code had finished.
°In order to fix this I use Asynchronous funtions.
•The days of the week were returned as numbers °In order to fix this I used converted the day number into a day before the data was returned.
• All code was written by Brieanna McDonald (the author).
• I used tutorials on w3schools to help understand how APIs work.
• Code Institute sample README
• Code Institute Template README
• Emoji Cheat Sheet to add emojis in my README.
• Markdown badges to add badges in my README.
• To my mentor, thank you for all your guidance and insights, I am extremly greatful.
• To everyone who tested the web app, thank you for your feedback.