World Weather is a weather website where the user can search for the current weather by city. The background image correspods with a random image of that city is fetched from unsplash.com. Current weather information includes: temprature in celcius, cloud status, humidity and windspeed. This weather data is fetched from openweatherapp.org. The site allows the user to quickly access current weather information of any major city worldwide whilst a corresponding image is provided to the user in realtime. The site is responsive to any size desktop, tablet or smartphone device.
-
Fixed responsiveness in CSS with adding: background-size: cover; background-position: center, center; to the body element in styles.css.
-
Fixed Favicon error by utilizing 
) -
Fixed links opening up into new windows by removing the lines rel='noopener noreferrer" target="_blank" from index.html.
-
Git commits were too few and not detailed in the description. The updated version has well written commits that are more detailed and easier to follow.
-
Comments are added to styles.css
The live project can be found here.
| ID | As a... | I Want To Be Able To... | So That I Can... |
|---|---|---|---|
| 01 | As a traveler | quick access to weather in major cities | can quickly receive up to date weather forecasts for quick and easy travel planning. |
| 02 | young user | access quick weather info | enjoying the random images that appear in realtime for major cities around the world I hope to visit one day. |
| 03 | office manager | using the website on the plasma screen in the lounge of the office | esthetically pleasing image of local city with current weather conditions |
- User can search for current weather in any major city in the world.
- Weather data includes: temprature in celcius, cloud status, humidity and windspeed.
- the city that is searched, will bring up a random image from unsplash. com along with the weather information corresponding with the city choice.
- Current weather data is displayed showing: tempraturein celcius, cloud status, windspeed and humidity.
- Weather Data is current and a quick refresh of the browser updates the weather data for chosen city through the search option.
Testing performace using Lighthouse within Google Chrome Developer Tools was not implimented in the previos version of the website.
The first Lighthouse test was performed using the local host:
The second Lighthouse test was performed using the deloyed website:
The security of the website was tested using the security section of Google Chrome Developer tools:
- The feature to automatically refresh weather data for selected city so the user does not have to manually refresh the browser in order to update the current weather data.
- Bootstrap 5.2 has been used to assist with the styling of the site and particularly the responsiveness.
- Node.js has been used to assist JavaScript with implimentation of the website capabilities to fetch and recieve weather data and corresponding images on the website.
- OpenWeatherMap has been used to create the API Access Key and API in order to fetch current weather data.
- Unsplash has been used to provide the Corresponding City images for the website.
- The W3C Markup Validator has been used to validate the html code.
- The W3C Jigsaw CSS Validator has been used to validate the CSS code.
- JShint has been used to validate the JavaScript code.
The W3C Markup Validator showed no errors when validating the html code.
Update: Upon updating the index.html, the W3C Markup Validator indicated trailing slash errors and a missing attribute in the link element:
The following resource assisted in solving these issues:
A link element with a "rel" attribute that contains the value "preload"must have an "as" attribute.Rocket Validator
The W3S Jigsaw CSS Validator showed no errors when validating the CSS code:
The jsHint validator initially showed over 12 warnings regarding the validity of the JavaScript code. This was a known issue regarding the "ES6 version" in VScode. Updating the settings.JSON file in VS code rectified this.
The JSHint then showed no errors when validating the JavaScript code.
The project was deployed to GitHub Pages. The following steps are used to deploy the site:
- Navigate to GitHub and locate and select the GitHub repository.
- Navigate to the settings tab and select the 'Pages' tab from the menu.
- Under 'Source' click the dropdown labelled 'None' and select the 'master' branch.
- Click save. The page will automatically refresh and the published site link can be found on the 'Pages' tab.
- The link can be found here - link to live site
The following steps can be used to fork the GitHub repository:
- On GitHub navigate to the main page of the repository.
- The 'Fork' button can be found on the top righthand side of the screen.
- Click the button to create a copy of the original repository.
The following steps can be used to clone the GitHub repository:
- On GitHub navigate to the main page of the repository.
- Above the list of files select 'Code'.
- Three options are provided, HTTPS, SSH and GitHub CLI. Select the appropriate option and click the 'Copy' button next to the URL.
- Open Git Bash.
- Change the working directory to the location for the cloned directory.
- Type git clone and paste the copied URL.
- Press 'Enter' to create the clone.
-
R3HAB MEDIA youtube video on fixing the JS hint issue regarding the settings.JSON file.YouTube
-
JSHint ES6 errors fix.How do I resolve these JSHINT ES6 errors
-
A link element with a "rel" attribute that contains the value "preload"must have an "as" attribute.Rocket Validator
-
Adding Google Fonts API.Get Started with the Google Fonts APII
- GStatic Icons and Font Styles.
- Google Fonts DM Serif Display
-
Unsplash Screen Images, API and Access Key for fetching images that correspond with the User input of City search.
-
favicon Favicon generator.
- Ami I Responsive? Testing the Responsive design of the Website.