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. Built with Javascript Webpack CSS HTML

  • By Mubarak A Ibrahim
  • Last update: Dec 20, 2021
  • 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. Screenshot (18)

Built with

HTML CSS Javascript Webpack Git and Github Gitflow VS code

Getting Started

To run the code, clone the repo using the command git clone https://github.com/imubarak234/Leaderboard when the clone is complete you can cd to the file and open it up in your text editor. For more information on pulls and push on git checkout this link: https://guides.github.com/introduction/git-handbook/ Run command npm init -y and npm start to run the applications

Author

Mubarak GitHub: link

Contributing

Contributions, issues, and features requests are welcome!

Feel free to check the issues page

Live Demo

Show Your Support

Lets us know if the project was helpful to you

Acknowledgments

Thanks to Microverse and the support team.

License

Copyright 2021, Mubarak Ibrahim https://github.com/microverseinc/readme-template/blob/master/MIT.md

Github

https://github.com/imubarak234/Leaderboard

Comments(4)

  • 1

    project styling

    • At this point you should have a fully working app that uses only basic styles to make the layout work, according to this wireframe
    • Now you should improve the look and feel of the application, adding the styles of your choice.
    • Please keep the general layout of the wireframe, this is the only mandatory requirement.
    • You can use plain CSS or any CSS framework, it's up to you.
  • 2

    project styling

    • At this point, you should have a fully working app that uses only basic styles to make the layout work, according to this wireframe:
    • Now you should improve the look and feel of the application, adding the styles of your choice.
    • Please keep the general layout of the wireframe, this is the only mandatory requirement.
    • You can use plain CSS or any CSS framework, it's up to you.
  • 3

    api function

    • Read the Leaderboard API documentation to learn how to use this API.
    • Create a new game with the name of your choice by using the API.
    • Implement the "Refresh" button (receiving data from the API and parsing the JSON).
    • Implement the form "Submit" button (sending data to the API).
    • Use async and await JavaScript features to consume the API.
    • No styling is required.
  • 4

    Project setup

    • Use Gitflow.
    • Create an npm project with Webpack.
    • Write plain HTML markup with minimum styling (just to make the layout), because you will implement styles in the following steps. Use this wireframe as a guide:
    • Don't make API calls (you'll do it in the following lesson.
    • Use ES6 modules, with import and export.

Popular Tag

Related