"Leaderboard" 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. Build with JavaScript, HTML, SCSS, and Webpack.

  • By Gabriela Sánchez Espirilla
  • Last update: Mar 7, 2022
  • Comments: 6

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

screenshot empty score list

screenshot full score list

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

  • HTML / SCSS / Javascript / Webpack

Live Demo

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

🤝 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

📝 License

This project is MIT licensed.

Github

https://github.com/gabyse1/leaderboard

Comments(6)

  • 1

    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! 👨🏻‍💻

  • 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.
  • 3

    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
  • 4

    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.
  • 5

    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.
  • 6

    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.

Popular Tag

Related