Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard. It was built with JavaScript, HTML, and CSS. Thanks to the central LeaderBoard API service all data is preserved

Clinton Mbonu

Last update: Jun 30, 2022

Overview

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

Live Demo Link

Getting Started

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

Prerequisites

A text editor(preferably Visual Studio Code)

Install

Git
Node

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

👤 Clinton Mbonu

Location: Nigeria
GitHub: @clintonjosephs
Twitter: @clintonmbonu2
LinkedIn: LinkedIn

🤝 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.

Comments

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:

opened by Sboursen 1
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.

opened by ahangarha 1
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:

opened by ahangarha 1
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!:

In your comments, there are some typos that could be easily fixed.

Since you're already adding such amazing extra features, we think it would be great to make the leaderboard automatically refresh once a score it's been added.

Consider hiding the vertical scrollbar from the leaderboard when its size is not really big enough to expand the viewport.

Whenever a user tries to refresh the leaderboard when this is empty, it would be great to display a message different from the default one (since it's not really retrieving any content).

Congratulations on your project! Keep it going. ❤️
opened by orozCoding 1
LeaderBoard project
Had fun developing the leader board project using git-flow.

Practiced JEST

Used Bootstrap CSS framework

Practiced giving code review

Added some cool features of my own.
opened by clintonjosephs 0
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.

opened by clintonjosephs 0
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:

Loading overlay to get uploaded scores on the first run for existing users

New users can create a new game with the name of 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).

Used async and await JavaScript features to consume the API.

Implemented some styling

Used ES6 standards and arrow functions

Ensured no linter errors

Thank you in advance for reviewing my project.
opened by clintonjosephs 0
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

✅ Added Linters

✅ Configured Webpack

✅ Configured JEST

✅ Setup MVC approach for the pages

✅ Created HTML design and distributed to different views (.js) files for dynamic loading

✅ Styled design a bit

✅ Added image using Webpack

✅ Setup and Updated readme file

Thank you for making out time to review this PR 😄
opened by clintonjosephs 0
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

✅ Added Linters

✅ Configured Webpack

✅ Configured JEST

✅ Setup MVC approach for the pages

✅ Created HTML design and distributed to different views (.js) files for dynamic loading

✅ Styled design a bit

✅ Added image using Webpack

✅ Setup and Updated readme file

Thank you for making out time to review this PR 😄
opened by clintonjosephs 0
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 ♻️

You should make your design of leaderboard items like the below image. https://res.cloudinary.com/movespring/image/upload/v1618265767/blog/leaderboard_desktop_2b2f45c10d.jpg

[OPTIONAL] - You can make a leaderboard for multiple games. Means it should take multiple games shown on Leaderboard.
opened by HAMMAS-SALEEM 0

Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard. It was built with JavaScript, HTML, and CSS. Thanks to the central LeaderBoard API service all data is preserved

Related tags

Overview

LeaderBoard

Mini Presentation

Built With

Live Demo

Getting Started

Prerequisites

Install

Usage

Clone this repository

Run project

Open page in browser

Interaction with the Leaderboard API

Endpoint

Endpoint

Authors

🤝 Contributing

Show your support

📝 License

Comments

Hi @clintonjosephs,

Hey Clinton 👋

Review Changes ♻️

Owner

Clinton Mbonu

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.

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. This is a project for learning purposes which I'll practice medium-fidelity wireframes to create a UI.

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.

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.

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.

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.

This 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 Webpack and ES6

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to an external API. Technologies used are JavaScript(ES6), HTML5, CSS3, Webpack. Also, the Gitflow workflow was used.

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 API.

The Leaderboard App displays scores submitted by different players, allows you to submit your score and all data is preserved in the Leaderboard API service.

Leaderboard is a simple app that allows players to add their scores and see other players' scores, using Leaderboard API, JavaScript, HTML, and CSS.

A leaderboard website which displays scores submitted by different players. It also allows you to submit your score. All data is preserved in the external game API.

This is a JavaScript leaderboad list app. In this project I used Webpack and ES6 modules. As well as HTML, and CSS for styling the app. When submitting the scores the data is preserved thanks to the external Leaderboard API service.

A leaderboard created using Leaderboard API service, Webpack, and Gitflow. The user can add a new score and refresh to see his ranking in the leaderboard.

A leaderboard website that displays scores submitted by different players. It was developed with Javascript, HTML, CSS and the Leaderboard API service was consumed.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. Built with HTML, CSS, JavaScript with APIs

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. I created this project using ES6 concepts. I connected to the Leadboard API service

This project is built with JavaScript, Webpack, HTML & CSS, Leaderboard api. When user clicks on Refresh button it hits the api and responds with the data, The user can also post data to the api

This application displays scores submitted by different players from an API service. It also allows a user to submit his/her score while saving the data on the API.