- CLOUD COVER
Table of contents generated with markdown-toc
Cloud Cover provides an easy to use and comprehensive forecast of the weather. By entering a location (City, Country), users can access the current forecast and a four day forecast. The current forecast includes details such as temperature, humidity, wind speed and direction, chance of rain, and more. The four day forecast shows the main weather conditions expected during each day. Cloud Cover utilizes the power of JavaScript and OpenWeatherMap API data to deliver up-to-date and accurate forecasts. The API has a limit of 60 requests per minute, which could be a limiting factor if the site had a large number of users.
I chose a bright, cloudy aesthetic for the website to improve readability, maintain simplicity, and add an overall pleasant aesthetic. I used simple icons to ensure fast loading times and provide clear meaning to the user. Additionally, I added spacing and backgrounds to all elements to further enhance readability and provide visual cues throughout the website. Furthermore, I chose a font that was easy to read and provided a good contrast with the background, which was instrumental in improving the user experience. Spacing and sizing was styled with a mobile-first approach, using media queries to improve appearance and readability when using larger screens.
This section explains each part of the project and the value it brings to acheiving the project goal.
The search bar displays placeholder text on page load, indicating the preferred search format. Users can submit their input by clicking the search button or pressing the enter key. After submitting a search, the search bar is cleared, ready for the next input.
The use my location button allows the user to have the site take geolocation data from their chosen browser and display weather data for their exact location. This requires the user give the site permission to access this data
If a function encounters an error during normal site operation, the user will be notified of the issue. This could be due to an API request, an invalid location, or something else.
The largest block of information on display shows temperature, weather condition, wind speed and sunrise/sunset times. It also contains an icon for the weather condition and the location name.
Below the current weather information block, there are 4 forecast blocks showing data for the subsequent days, these blocks are more concise only showing date, weather condition, average temperature and wind speed.
More data could be displayed to the user, such as precipitation and moon phase, as well as other environmental information, like air quality and UV index, to give users a better understanding of the conditions in their area. Options like unit selection (e.g. Celsius or Fahrenheit) could be added to improve the user experience and make the data more accessible for users with different preferences.
Additionally, a backup data source using another weather API could be implemented to ensure the site remains functional if the current source is unavailable. This would require additional code to adapt the new dataset, as it may not provide the same data types, and ensure that the data is presented in an understandable, user-friendly way. Furthermore, an alert system could be set up to notify users of any changes in the weather conditions, such as severe weather alerts, so that users can stay informed and take appropriate action.
-
HTML
- No errors were returned when passing through the official W3C validator
-
CSS
- No errors were found when passing through the official W3C validator
-
JavaScript
- No errors were found when passing through JSHint
-
Accessibility
- I used dev tools lighthouse to confirm performance, readability and best practices for the site
- I used dev tools lighthouse to confirm performance, readability and best practices for the site
The site was tested on the following devices;
- HP Elitebook 840
- AOC Q27V4EA - 27 Inch QHD Monitor
- Apple iPhone 13 Pro max
- Google Chrome Developer Tools - simulator for all different device options as well as using the adjustable sizing options
The website functioned as expected in all of these devices.
The latest deployment of the site was loaded onto Microsoft Edge (a Chromium browser) with no visible issues
The latest deployment of the site was loaded onto Firefox developer edition with no visible issues
The latest deployment of the site was loaded onto Opera with no visible issues
The primary feature to test is the search bar and button which should allow any City, Country term to be searched and give accurate weather data. To do so I picked 10 random cities and checked the results of the search against another well established weather site.
The results vary slightly as the MET office website give high/low temperatures for each day, however the averages are the same or within 1-2 degrees. Discrepancies can be attributed to each data source coming from different meteorological offices.
I have successfully used browser geolocation to search for weather data where permission is given. A message is also sent to the user to ensure permission is given when this function is requested
Because openweathermap uses data from local weather stations, the location displayed when searching some areas will not match the exact name that was searched. It will however be a location very close, or a particular district or area within the location which was searched.
This section describes the process of obtaining a copy of this websites files in a new repository, running an environment to work on the site, and deploying to a live platform
-At the top of the repository page, select fork and choose a name for the new repository to create a copy
-Alternatively select code above the file viewer and either use the link to pull a copy of the code or download the code as a zip file
- Navigate to Gitpod
- Login using a Github account
- Download and install the Gitpod browser extension
- Return to the repository
- Select the green Gitpod button above the file viewer
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- Select the pages link in the sidebar
- Under "Build and deployment", under "Branch", use the None or Branch drop-down menu and select a publishing source.
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here
All weather data and forecast icons are provided by OpenWeatherMap
Sunrise icon created by 7AM - Flaticon