code-institute-submissions / interactivefrontenddevelopment-1 Goto Github PK

Your Project's Name

The name of the site is "Weather Forecast". The site pulls weather information from openweather using the openweather api. It displays various weather information and has images to clearly show the weather information.

This site has four main aims 1: index.html displays weather information based on the users location. 2: search.html displays weather information based on a users search. 3: forecast.html displays a 5 day forecast of a location based on a users search 4: contact.html displays a contact form

UX

The design of the site is simple with the main aim being the interaction between the user and the openweather api. Each page has an animated headline informing the user of the purpose of each page. Each page has a navigation bar at the top, an animated headline underneath the navbar, a table with the weather information and a footer.

The original balsamiq wireframes are in the folder "UX". The main aim of the user is to find weather information based on their location. On the main page, they must accept the popup to allow location access. Once this is approved, the page will display weather based on that persons location. If a user would like to search for the current weather in any location, they can click on the "Search" page. Here the user can search for the weather in any location in the world. If a user would like a five day forecast, they can click on "Forecast", type in a location and they will receive a five day forecast of that location.

Technologies Used

Javascript html CSS JQuery

Testing Tested html here https://validator.w3.org/ Tested css here https://jigsaw.w3.org/css-validator/ Tested for javascript errors here https://seositecheckup.com/ and here https://www.seoptimer.com/ as well as google console tools. I also checked code here https://jshint.com/

Contact form: 1: Go to the "Contact Us" page 2: Try to submit the empty form and verify that an error message about the required fields appears. Test passed. 3: Try to submit the form with an invalid email address and verify that a relevant error message appears. Test Passed. 4: Try to submit the form with all inputs valid and verify that a success message appears. Test Passed.

Deployment Website is deployed to Github Deploying to GitHub Pages is automatic. Once it’s set up, deploying happens whenever you push your local changes to your remote, GitHub-hosted repository.

You can view the project by navigating in your browser to the URL https://eezipc.github.io/interactivefrontenddevelopment/

How it was deployed In GitHub, I navigated to my eezipc.github.io repository and clicked Settings.

Within Settings, I navigated to the Source section within the Github Pages section. From the dropdown menu, I selected master branch and then clicked Save.

Deploying new changes is easy. Every time I make a change to site site, I use git commit and git push to send the changes to GitHub. After this, the GitHub site should update within a few seconds.

Credits Email form is from www.emailjs.com Text animation is from https://www.jqueryscript.net/rotator/CSS3-Animated-Headline-Rotator-Plugin-jQuery-animatedHeadline.html Images are from www.pexels.com Fonts are from www.fontawesome.com