LeaderBoard web app that 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

  • By Williams Colmenares
  • Last update: Aug 27, 2022
  • Comments: 3

MK LeaderBoard

In this project I build a LeaderBoard web app that 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.

Built With

  • HTML
  • CSS
  • JavaScript
  • Webpack
  • APIs
  • ES6
  • Promises, async, await, fetch.

Live Demo

Leaderboard Link... Check it out!!!

Getting Started

To get a local copy up and running follow the next steps: -Copy the SSH key of the repository and make a 'git clone' in your terminal using the copied key, then you will be able to deploy this project locally.

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

Acknowledgments

  • Microverse Module 2 APIs
  • Project indications here
  • Based on Mortal Kombat game.

📝 License

This project is MIT licensed.

Github

https://github.com/wdavidcch/leaderboard

Comments(3)

  • 1

    Leaderboar Final Touches Styles

    In this PR I just added styles for the leaderboard web app, I used plain CSS with some responsive adaptations. Also, I implemented the functionality to reset the form once you submit your score.

  • 2

    Leaderboard: Hit the API

    In this activity, I worked on the Leaderboard list app, implementing the functions to send and receive data from/to the Leaderboard API.

    The most important thing applied to the project on this PR:

    • Creation of a new game using the API.
    • Implementation of the "Refresh" button to receive data from the API and parsing the JSON.
    • Implementation of the form "Submit" button to send data to the API.
    • Use of arrow functions instead of the function keyword.
    • Use of async, await, and fetch JavaScript features to consume the API, as well as promises.
  • 3

    Leaderboard: setup project

    I created the JavaScript project for the Leaderboard list app, using webpack, Gitflow, and ES6 features. I developed a first working version of the app following a wireframe, but without styling - just focused on functionality.