The leaderboard website displays scores submitted by different leaders. It also allows you to add your score. The data is fetched from api and it also allow us to submit new score to API. Build with Html, CSS, JS, and Webpack

  • By Miftah Amin
  • Last update: Mar 12, 2022
  • Comments: 4

Event Page

The leaderboard website displays scores submitted by different leaders. It also allows you to add your score. The data is fetched from api and it also allow us to submit new score to API. Build with Html, CSS, JS, and Webpack.

screenshot

Built With

  • HTML
  • CSS
  • JavaScript
  • ES 6
  • Webpack

Getting Started

To get a local copy follow these simple steps.

1.- Clone this project

2.- Open the project directory in your terminal

3.- In the terminal, install the project dependencies by running bellow command

npm install

4.- To see the home page run execute below command.

npm start

Live Demo

Live Demo Link

Author

👤 Miftah Amin

🤝 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/miftah1991/Leaderboard

Comments(4)

  • 1

    Leaderboard: hit the API: Milestone 2.

    In this milestone below features has been added:

    • Created a new game by using the API.
    • Implemented the "Refresh" button (receiving data from the API and parsing the JSON).
    • Implemented the form "Submit" button (sending data to the API).
    • Used async and await JavaScript features to consume the API.
    • no linterserror
  • 2

    Milestone 3: Add Desktop and mobile version

    Leaderboard: final touches: Milestone 3. In this milestone, the below changes have been made in the project.

    • Improved the look and feel of the application, adding the styles of my choice.
    • kept the general layout of the wireframe, as this is the only mandatory requirement.
  • 3

    Setup Project

    In this milestone, the below features have been added.

    • Create an npm project with webpack.
    • Write plain HTML markup with styling.
    • .babelrcfile for import and export ES6 features.
    • Modules folder contain all JS files and functions.
    • Added leaders to local storage.
    • No linters error.
  • 4

    Code review morning session 03-03-2022

    When entering a new name/score and clicking Add button the app doesn´t refresh the list automatically, doing it only when clicking Refresh button. You could check it and get into a good solution.

Popular Tag

Related