https://github.com/gabyse1/leaderboard

This minimalistic design website displays scores submitted by different players. The user can also create more than a game and submit his scores in all of them. The site preserves the data thanks to an external API called Leaderboard. Build with JavaScript, HTML, SCSS, and Webpack.
https://github.com/gabyse1/leaderboard

html5 javascript scss webpack

Last synced: 11 months ago
JSON representation

This minimalistic design website displays scores submitted by different players. The user can also create more than a game and submit his scores in all of them. The site preserves the data thanks to an external API called Leaderboard. Build with JavaScript, HTML, SCSS, and Webpack.

• Host: GitHub
• URL: https://github.com/gabyse1/leaderboard
• Owner: gabyse1
• Created: 2022-01-25T18:24:26.000Z (over 4 years ago)
• Default Branch: dev
• Last Pushed: 2022-03-03T15:06:06.000Z (over 4 years ago)
• Last Synced: 2024-12-05T20:34:37.539Z (over 1 year ago)
• Topics: html5, javascript, scss, webpack
• Language: JavaScript
• Homepage:
• Size: 829 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# leaderboard

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

![screenshot create or choose a game](./images/lb-screenshot-newgame.png)

![screenshot empty score list](./images/lb-screenshot-emptyscores.png)

![screenshot full score list](./images/lb-screenshot-fullscores.png)

## Features

- The website displays a basic layout that *dynamically loads* the current score list for the selected game.

- The *game interface* is displayed when the page is loaded and by clicking on the link *change game* below the title of the page.

- A *new game* can be created and an existing game can also be selected using the *game interface*. Game information is saved to local storage.

- *New scores* can be added using the form *add scores* by clicking on its *Submit* button.

- The *added score* can be visualized by updating the *recent scores* list. Update it by clicking on the *refresh* button.

## Built With

- Javascript

- HTML

- SCSS

- Webpack

## Live Demo

[Leaderboard](https://gabyse1.github.io/leaderboard/)

## Getting Started

To get a local copy up and running follow these simple example steps.

### Prerequisites

- Have git installed on your local computer.

### Install

- Clone this repository to your local computer. Choose the location you prefer.

- Run the command *npm install* to install all project's dependencies.

### Deployment

- Run the command line *npm run start*.

- The project will automatically open the *index.html* file in a browser.

## Authors

👤 **Gabriela Sánchez Espirilla**

- GitHub: [@gabyse1](https://github.com/gabyse1)

- Twitter: [@gabyse0](https://twitter.com/gabyse0)

- LinkedIn: [Gabriela](https://www.linkedin.com/in/gabriela-s%C3%A1nchez-espirilla-83011b225/)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

## Show your support

Give a ⭐️ if you like this project!

## Acknowledgments

- Linters: [Microverse](https://github.com/microverseinc/linters-config)

- Readme template: [Microverse](https://github.com/microverseinc/readme-template)

## 📝 License

This project is [MIT](./MIT.md) licensed.