The leaderboard website displays scores submitted by different players

Last update: Mar 7, 2022

Overview

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.

Features

The website display a basic layout which charge dynamically the current score list.
The score list can be updated by clicking the "Refresh".
New scores can be added using a form by clicking the "Submit" button. It adds the new score automatically to the scores list.
A new game is created the first time the page is loaded. The game's information is saved to local storage.
All new scores will be added to this latest game.

Built With

HTML / SCSS / Javascript / Webpack

Live Demo

Leaderboard

Getting Started

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

Prerequisites

None

Install

Install git on your local computer.
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
Twitter: @gabyse0
LinkedIn: Gabriela

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

Linters: Microverse
Readme template: Microverse

📝 License

This project is MIT licensed.

Comments

Morning Session Code Review
Hello @gabyse1 👋🏻

Your project is really well constructed in the way you handle errors and display personalized messages when the output doesn't match the expected. You did a great job.

Suggestions

The only suggestion I want to comment on is here:

https://github.com/gabyse1/leaderboard/blob/26be843f7f38d401cd8ce6234f52077302be23e3/src/index.js#L51-L52

[x] I think you can use .then(response => response.json()) when you're fetching the data instead of await again to parse the response. Since it is a promise, you can handle the data this way for better readability.

Closing 😸

Please let me know If you have any questions about my suggestions. We're all here to learn so let's take advantage of different perspectives! Cheers and happy coding! 👨🏻‍💻
opened by JohnFTitor 2
Deploy settings
Changes to the project 😃 🆕

Update homepage url and add predeploy and deploy scripts in package.json file.

Add ico image format in webpack.config.js file.

Add open graph meta tags in index.html file.

Update screenshot, favicon, and thumbnail images.

Import favicon and thumbnail images in index.js file.

Remove the auxiliar index.html file used to redirect the webpage to the dist folder.

Update dist folder files.

Update the readme file.
opened by gabyse1 0
Add UI
Changes to the project

Add a modal window to create a new game or select an existing one.

Add markup for the modal window in the index.html file.

Add modal.js file to add functionality to the modal window.

Update index.js file to call modal window functions.

Update dataBoard.js to display information according to the selected or created game.

Update style sheets to add styles for modal window
opened by gabyse1 0
Final touches
Changes to the project

Separate the async functions into a new dataBoard.js file to manage them as methods of class DataBoard.

Update index.js file to import the module dataBoard.js and to call to its async functions.

Add some styles.
opened by gabyse1 0
Manage API data
Changes to the project

Create a new game by using the API.

Add the Refresh button to retrieve the scores list from the API.

Add the form Add new button to save a new score.

Use async functions to consume the API.
opened by gabyse1 0
Setup project
Changes to the project

Initialize the project.

Create webpack.config.js file.

Create the basic markup in the index.html file.

Create and add styles to the typography.scss and style.scss.

Create index.js file importing the style.scss file.
opened by gabyse1 0