Simple Weather Responsive Website Project

This is a website for an organisation called "Simple Weather". Simple Weather's vision is to make finding out the current weather forecast and the forecast for the following days as easy as possible. Their goal is to provide a simplistic, navigable website by removing any graphs, charts and other confusing information that the average user struggles to comprehend and replacing it with simple and easily understandable information that is friendly to all types of users.

The website has 1 main page. Upon entering the site, the user is greeted with a very simple but warm design and is automatically given the opportunity to enter a location to find out the forecast for the coming days.

The site is made up of 1 page in order to keep it as simple as possible and to maintain the organisation goal of ensuring the site is as simple as possible to be as user friendly as possible.

To Do List

• Add auto-scroll when search button is pressed with valid input -
• Add event listener for enter button that triggers search function -
• Add ::achieve on prev and next class buttons to have effect when pressed -
• Add footer
• Add about us information
• Complete README File -
• Add OG meta titles and descriptions -
• Look into :placeholder text colour not working on Microsoft Edge -
• Add / Redo comments on all files to ensure files are easy to navigate through and to understand
• Separate ifError code into functions and also separate function for removing error to clean up search function -
• Look into issue on Safari browser of times not showing up and showing Undefined Nan:00 -
• Add help section or popup to better explain search system and format
• Convert all units from px to rem in css -
• Add titles to easily distinguish what each card and carousel are for, better UX.
• Add gap at bottom to show bottom black line of carousel
• Add library folder and add external files so not dependent on external sources.

Features Left to Implement

These are features that have not been added at the time of development due to various reasons such as time limitations.

• Add contact us button that was originally designed in wireframes.
• Setup and connect Email service such as EmailJS to contact form so that form responses are sent to organisations email.
• Make the site have a more interactive frontend with JavaScript eg Sections fading in or sliding in as you get to them.
• Add more content to wesbite such as footer, about us information and fill the weather out a bit more.
• Add cookies and/or Google Analytics to gather data about users who visit the site in order to maximise the effect of any digital marketing the organisation is doing.
• Add different smooth scroll function so that it smooth scrolls on all browsers instead of just jumping after search on unsupported browsers.
• Add more content for features section of README.md

Technologies Used

Languages Used

• HTML5
• CSS
• JavaScript

Frameworks, Libraries & Programs Used

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Google Fonts:
   • Google fonts were used to import the 'Raleway' font into the style.css file which is the primary font used in the project.
3. Font Awesome:
   • Font Awesome was used to add icons for aesthetic and UX purposes. Icons specifically used on Search Button & Carousel Arrows.
4. jQuery:
   • jQuery was used for the 5 Day forecast carousel functionality.
5. Slick.JS:
   • Slick JS was also for the 5 Day forecast carousel functionality.
6. OpenWeatherMap API - Current Weather Data
   • OpenWeatherMap API was used to access the current weather data for the specified/searched location.
7. OpenWeatherMap API - 5 day / 3 hour forecast Data
   • OpenWeatherMap API was used to access the 5 day forecast data with 3 hour intervals for the specified/searched location.
8. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
9. Gitpod:
   • Gitpod was the primary IDE used throughout the entirety of the project.
10. GitHub:
    • GitHub is used to store the project code after being pushed from Git.
    • The website is also deployed using GitHub Pages.
11. Photoshop:
    • Photoshop was used to create the logo, hero image text, weather forecast icons, readme assets and editing photos for the website.
12. Balsamiq:
    • Balsamiq was used to create the wireframes during the design process.
13. Screen to GIF
    • Screen to GIF was used to record the screen to create GIF's to demonstrate a specific task in video for the README.md file.
14. HTML Formatter
    • HTML Formatter was used to beautify code to keep the code neat and easy to read. It was utilised as Beautify Cmd (Shift + Alt + F) in GitPod distorted the code in GitHub.