The leaderboard website displays scores submitted by different players

  • By Ricky Mormor
  • Last update: Apr 20, 2022
  • Comments: 8

Leaderboard

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

screenshot

Built With

  • Webpack
  • JavaScript (ES6)
  • CSS3
  • HTML5

Live Demo

Click here to view

Getting Started

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

Prerequisites

some knowledge on npm webpack and ES6

Setup

  • Clone repository using this command in terminal git clone https://github.com/cwaku/Leaderboard.git
  • Change directory to the cloned repository cd Leaderboard
  • Install dependencies using npm install
  • run npm start

Install

  • Node modules
  • HtmlWebpackPlugin npm install --save-dev html-webpack-plugin
  • Load CSS npm install --save-dev style-loader css-loader
  • Setup local dev server npm install --save-dev webpack-dev-server

Author 👤

🤝 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!

📝 License

This project is MIT licensed.

Github

https://github.com/cwaku/Leaderboard

Comments(8)

  • 1

    Leaderboard- Code review

    Hi there!

    You have done a great job so far. You have:

    • [x] Implemented the functionalities well
    • [x] The project is well styled.

    Please check on the display viewport height of the page.

    Thank you!

  • 2

    Setup project

    In accordance with the project requirement:

    • Project used npm and webpack
    • Project is with Plain HTML and minimum CSS
    • No API calls were made
    • Project uses ES6 modules, with import and export.
  • 3

    [ImgBot] Optimize images

  • 4

    Restyle Split CSS file

    Automated style fixes for #10, created by Restyled.

    The following restylers made fixes:

    To incorporate these changes, merge this Pull Request into the original. We recommend using the Squash or Rebase strategies.

    NOTE: As work continues on the original Pull Request, this process will re-run and update (force-push) this Pull Request with updated style fixes as necessary. If the style is fixed manually at any point (i.e. this process finds no fixes to make), this Pull Request will be closed automatically.

    Sorry if this was unexpected. To disable it, see our documentation.

  • 5

    Leaderboard: final touches

    According to the project requirements:

    • The application was styled to improve the look and feel
    • No framework was used

    PS: This is a resubmission because I repeated the week due to unrelated reasons

    cheers

  • 6

    Leaderboard: hit the API

    With the project requirements:

    • A new game was created using API
    • Implemented the "Refresh" button (receiving data from the API and parsing the JSON)
    • Implemented the form "Submit" button (sending data to the API)
    • Use async and await JavaScript features to consume the API

    PS: This is a resubmission because I repeated the week because of unrelated reason

  • 7

    Leaderboard: setup project

    In accordance with the project requirement:

    • Project used npm and webpack
    • Project is with Plain HTML and minimum CSS
    • No API calls were made
    • Project uses ES6 modules, with import and export.

    PS: This is a resubmission because I repeated the week because of unrelated reason

  • 8

    hit the API

    With the project requirements:

    • A new game was created using API
    • Implemented the "Refresh" button (receiving data from the API and parsing the JSON)
    • Implemented the form "Submit" button (sending data to the API)
    • Use async and await JavaScript features to consume the API

Popular Tag

Related