LeaderBoard
The leaderboard website displays scores submitted by different players. It also allows you to submit your score.
Mini Presentation
Additional description about the project and its features.
Built With
-
Major languages (HTML, CSS, JavaScript)
-
Frameworks
- Bootstrap css framework
-
Technologies used
- Webpack(Code Bundlng) - Git(version control) - ESLint(JavaScript linting) - WebHint(linting tool) - Stylelint(style linting) - Jest(project testing)
Live Demo
Getting Started
To get a local copy up and running follow these simple example steps.
Prerequisites
- A text editor(preferably Visual Studio Code)
Install
Usage
Clone this repository
$ https://github.com/clintonjosephs/LeaderBoard.git
$ cd LEADERBOARD
Run project
$ npm install
$ npm test
$ npm build
$ npm run start # this will make webpack watching for your changes in code
Open page in browser
$ open dist/index.html
Interaction with the Leaderboard API
- Each new game is created with the POST method using
{ "name": "My cool new game" }
This request returns a result that holds the unique ID for that game:
{
"result": "Game with ID: Zl4d7IVkemOTTVg2fUdz added."
}
This gameID is saved in the localStorage automatically
The two allowed actions are posting and getting of the scores
-
The POST request creates a new Leaderboard score for the given game sending user and score as parameters like this:
Endpoint
https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/:id/scores/
body parameters
{ "user": "John Doe", "score": 42 }
and it returns
{ "result": "Leaderboard score created correctly." }
-
The GET request returns data in JSON format like this:
Endpoint
https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/:id/scores/
It returns
{ "result": [ { "user": "John Doe", "score": 42 }, { "user": "Peter Parker", "score": 35 }, { "user": "Wonder Woman", "score": 50 } ] }
Authors
- Location: Nigeria
- GitHub: @clintonjosephs
- Twitter: @clintonmbonu_
- LinkedIn: LinkedIn
๐ค
Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Show your support
Give a
๐
License
This project is MIT licensed.
Add form validation
Hi @clintonjosephs,
I visited your page and generally speaking, your work looks good in every aspect :clap: However, I believe it will be :cool: to additionally implement client-side form validation to your project. I will keep your data consistent, and also serve as an additional barrier against malicious users. Please use this Link, it's a reminder on how to implement the aforementioned feature.
Happy coding :rocket:
Improve loading indicator to follow the overall design
The project is implemented very neatly. All components follow the same design except the loading indicator.
Would be nice if you can design this also in such way it follow the overall design of the project.
Mention MIT license rather All Rights Reserved
I just noticed you added a copyright notice below the page and mentioned "All Rights Reserved". Since the project is under MIT license and is a Free/Libre and Open Source software, I suggest to mention this. Of course your are the copyright holder but your are giving certain freedom to the user as per MIT license.
It is also more cool :wink:
Morning Session
Great work with your project! Your code looks clean, it's very readable and it's working perfectly!
Here are some suggestions that could make your code even better!:
Congratulations on your project! Keep it going. โค๏ธ
LeaderBoard project
Had fun developing the leader board project using git-flow.
Leaderboard final styling
Hello ๐ ,
Today, I was able to achieve the final styling of the leaderboard project, updated my readme file with a gif presentation of the project, and did a few code refactoring.
Thank you for reviewing my code.
LeaderBoard - Hit api
Hello ๐ ,
Today I achieved task two on the leader board project, which was to consume and read data from the API provided. Kindly see below a succinct work-through of what I achieved:
Thank you in advance for reviewing my project.
LeaderBoard - Part 1
##LeaderBoard
Hello ๐ , I hope this PR for the leaderboard website meets you well, this website displays scores submitted by different players and also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.
Please find below a few things that were achieved in the skeleton branch
Thank you for making out time to review this PR ๐
Leader Board - Project Setup
##LeaderBoard
Hello ๐ , I hope this PR for the leaderboard website meets you well, this website displays scores submitted by different players and also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.
Please find below a few things that were achieved in the skeleton branch
Thank you for making out time to review this PR ๐
Peer to Peer: Module 2 Block 5 Day 4
Hey Clinton ๐
I have seen your project ๐ You have done a great job ๐
Following best practices of HTML/CSS โ๏ธ Following best practices of JavaScript โ๏ธ Following KISS, DRY, YAGNI completely. โ๏ธ
Review Changes โป๏ธ
[OPTIONAL] - You can make a leaderboard for multiple games. Means it should take multiple games shown on Leaderboard.