The goal of this project is to create a simple but attractive HTML/CSS interface with the results of data gathered from the Open Weather API. The code consists of 7 HTML files. The styling is done through Bootswath's Litera theme plus some customization from my part.
The general layout consists of:
- A navigation bar to move around the website.
- A left-side container used to display information.
- A right-side container used to display the graphs for easy accessibility.
The navigation bar consists of:
- Website title that refers to the landing page.
- Two menu options, Comparison and Data.
- A dropdown menu with each graph title.
The idea behind the layout is to have maximum efficiency when it comes to visualizing the data, that's why the scrolling bars are inside the containers and all graphs are clickable.
Index.html is the landing page for the website. It consists of the general layout, previously mentioned, with a summary of the project with a visualization of all the graphs.
Comparison.html has a grid with all the graphs for easy comparison.
Data.html displays all the data used for the analysis. Due to both containers, data and graphs, being scrollable, the visualization becomes smoother and attractive to the view.
The rest of the files consist of the display of individual graphs with an analysis. To the right, the rest of the graphs are displayed for easy access.