Formula 1 Standings Website

Click here to see website!

Description

Formula 1 Standings Website is a huge project for me. Official Formula 1 website provides World Championship standings in an inelegant way. I wanted to make an enviroment, which allows the F1 fan to seek for necessary information and feel like he's at home. Formula 1 Standings Website shares official Formula 1 World Championship standings since the beginning of competition, 1950.

Special thanks to @mondomando for allowing me to use his low-res McLaren art, which eventually become the logo of this project!

You can find here:

• races information - name of Grand Prix, location, date and time of the race and name of circuit,
• drivers' standings - information about drivers, their teams and number of points they acquired during the season,
• construstor's standings - information about constructors, their origin and number of points they aquired.

Installation

To run Formula 1 Standings Website locally, you need both Node.js enviroment and npm package manager installed.

git clone https://github.com/karolstawowski/Formula_1_Standings_Website.git

yarn install

yarn start

App structure

📦Formula_1_Standings_Website
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┃ ┣ 📜Email-Mark-120px.png
 ┃ ┃ ┣ 📜favicon.png
 ┃ ┃ ┣ 📜GitHub-Mark-120px-plus.png
 ┃ ┃ ┣ 📜logo.png
 ┃ ┃ ┣ 📜PL_flag.svg
 ┃ ┃ ┣ 📜tire.png
 ┃ ┃ ┗ 📜UK_flag.svg
 ┃ ┣ 📂js
 ┃ ┃ ┣ 📂variables
 ┃ ┃ ┃ ┣ 📜colors.js
 ┃ ┃ ┃ ┗ 📜documentElements.js
 ┃ ┃ ┣ 📜changeInterfaceLanguage.js
 ┃ ┃ ┣ 📜colorDefaultButtons.js
 ┃ ┃ ┣ 📜convertTZDToLocalTime.js
 ┃ ┃ ┣ 📜countryCodes.js
 ┃ ┃ ┣ 📜dataLoadingScreen.js
 ┃ ┃ ┣ 📜dateConversionFunctions.js
 ┃ ┃ ┣ 📜generateTable.js
 ┃ ┃ ┣ 📜getConstructors.js
 ┃ ┃ ┣ 📜getDrivers.js
 ┃ ┃ ┣ 📜getRaces.js
 ┃ ┃ ┣ 📜localStorage.js
 ┃ ┃ ┣ 📜main.js
 ┃ ┃ ┣ 📜sidebarButtonsColorSet.js
 ┃ ┃ ┣ 📜sidebarButtonsCreator.js
 ┃ ┃ ┣ 📜sidebarSwitch.js
 ┃ ┃ ┗ 📜windowResizing.js
 ┃ ┗ 📂scss
 ┃ ┃ ┣ 📂variables
 ┃ ┃ ┃ ┣ 📜animationDuration.scss
 ┃ ┃ ┃ ┣ 📜_colors.scss
 ┃ ┃ ┃ ┣ 📜_fontSize.scss
 ┃ ┃ ┃ ┗ 📜_mainContentWidth.scss
 ┃ ┃ ┣ 📜cleanStyles.scss
 ┃ ┃ ┣ 📜darkTheme.scss
 ┃ ┃ ┣ 📜dataLoadingScreen.scss
 ┃ ┃ ┣ 📜emailButton.scss
 ┃ ┃ ┣ 📜flags.scss
 ┃ ┃ ┣ 📜footer.scss
 ┃ ┃ ┣ 📜main.scss
 ┃ ┃ ┣ 📜mainContainer.scss
 ┃ ┃ ┣ 📜navbar.scss
 ┃ ┃ ┣ 📜parentContainers.scss
 ┃ ┃ ┣ 📜scrollbar.scss
 ┃ ┃ ┣ 📜sidebar.scss
 ┃ ┃ ┣ 📜table.scss
 ┃ ┃ ┣ 📜themeSwitch.scss
 ┃ ┃ ┗ 📜_include-media.scss
 ┣ 📜.gitignore
 ┣ 📜index.html
 ┣ 📜LICENSE
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┗ 📜vite.config.js

App usage

On the navbar you can: open sidebar (mobile only), switch between light and dark theme, change language of the website.

To get current Formula 1 standings select one of the buttons on the navigation bar (top of the screen) - races, driver standings or constructor standings.

On the sidebar you can select a season to display information about.

Footer contains: link to my github profile and button to copy my email address to your clipboard.

Resources

Ergast Developer API, @include-media, Flagpedia.net

Tools and technologies used

HTML, SCSS, JavaScript, Node.js, npm, ParcelJS, ViteJS.