The leaderboard website displays scores submitted by different players.

  • By Kyrillos Hany
  • Last update: Mar 11, 2022
  • Comments: 4

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. Build with Html, CSS, JS, API, and Webpack.

ScreenVideo_27-01-2022_09-49-31.mp4

Built With

  • HTML - HTML5
  • CSS - CSS3
  • JavaScript

Additional Used

  • Webpack
  • API
  • ES6

Live Demo

Leaderboard link

Getting Started

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

git clone [email protected]:Bondok6/Leaderboard.git

Then cd Leaderboard

Then npm install to install packages

Finally npm run start

Authors

👤 Kyrillos Hany

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

Comments(4)

  • 1

    Peer to peer code review

    Hi @Bondok6 💯

    • Good job Kyrillos.
    • Your code is clean.
    • You have used async and await with the fetch method to send and receive data.
    • Your project looks great
  • 2

    Leaderboard: final touches

    Hello there 🙋‍♂️,

    Thanks for taking the time to review my project.

    Live Demo

    Leaderboard Project

    Get Started

    • npm install • cd Leaderboard • npm run start

    Changes

    • Improve the style, according to the wireframe.
    • Add two media queries for tablet and mobile screens. (Responsive Design)
    • Show success message when the user adds a new score.
  • 3

    Leaderboard: hit the API

    Hello there 🙋‍♂️,

    Thanks for taking the time to review my project.

    Live Demo

    Leaderboard Project

    Get Started

    • npm install • cd Leaderboard • npm run start

    Changes

    • Created three files data.js , render.js, and form.js.
    • Created a new game with the name of your choice 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).
    • Use async and await JavaScript features to consume the API.
  • 4

    Leaderboard: setup project

    Hello there 🙋‍♂️,

    Thanks for taking the time to review my project.

    Get Started

    • npm install • cd Leaderboard • npm run start

    Changes

    • Create an npm project with webpack.
    • Write plain HTML markup with styling.
    • Add .babelrc file to be able to use import and export ES6 features.
    • Create modules folder that contains all files and functions.
    • User can add his name and score, and the data is saved in localStorage.
    • Update README.md and MIT.md files.

Popular Tag

Related