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

Related tags

Learning resource LeaderBoard
Overview

LeaderBoard App

Description

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.

leaderboard-screenrecording2.mp4

Live Demo: https://kwekubright.github.io/LeaderBoard/public/

Development Quickstart

$ git clone https://github.com/kwekubright/LeaderBoard.git
$ cd webpack-skeleton
$ touch .env
$ npm install
$ npm build
$ npm start

.env file

Below is the content for .env file. Please create a .env file in the root folder and paste the code below to be able to run the code locally:

GAME_ID="zlYEZxLx5r6TCz5Zwler"
GAME_NAME="Microverse League of Legends"
API_BASE_URL="https://us-central1-js-capstone-backend.cloudfunctions.net/api/"

Requirements

You will need [Node.js] with [NPM]

Be sure that all commands run under the correct Node version, e.g., if using [nvm], install the correct version with

Install the development dependencies with

$ npm install

Author

👤 Bright Kweku Ahiadeke

🤝 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!
You might also like...

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

LeaderBoard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. Built With Html,JS,CSS We

Nov 1, 2022

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

Leaderboard: setup project description: A Leaderboard app that allows players to add their score, and see other player scores. in this project: Set up

Jun 20, 2022

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 an external API. Technologies used are JavaScript(ES6), HTML5, CSS3, Webpack. Also, the Gitflow workflow was used.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Apr 20, 2022

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 website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external API.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Mar 5, 2022

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.

Leaderboard LeaderBoard Built With HTML JavaScript CSS webpack Getting Started clone this repository. $ cd Leaderboard. $ npm run build . $ npm start

Oct 13, 2022

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.

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

Jul 15, 2022

A leaderboard website that displays scores submitted by different players.

A leaderboard website that displays scores submitted by different players.

A leaderboard website 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.

May 2, 2022

The leaderboard website displays scores submitted by different players

The leaderboard website displays scores submitted by different players

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.

Mar 7, 2022

The leaderboard website displays scores submitted by different players

The leaderboard website displays scores submitted by different players

The leaderboard website displays scores submitted by different players. It also allows players to submit their own score. All data is preserved online, thanks to the Leaderboard API service.

Mar 31, 2022
Comments
  • Implement high fidelity design

    Implement high fidelity design

    Description:

    In this feature I achieved the following:

    • I added the party module for the celebration effect ✅
    • I also added icons for the top 3 teams on the leaderboard ✅
    • I improved the overall design ✅

    https://user-images.githubusercontent.com/5249414/173994945-f47ff1db-90fb-4e17-954f-fa748a6845f2.mp4

    .env file

    Below is the content for .env file. Please create a .env file in the root folder and paste the code below to be able to run the code locally:

    GAME_ID="sh1hJRqT3bc2pGLNFoN6"
GAME_NAME="Microverse League of Legends"
API_BASE_URL="https://us-central1-js-capstone-backend.cloudfunctions.net/api/"

    Live Demo: https://kwekubright.github.io/LeaderBoard/public/

    opened by kwekubright 1
  • Integrate with Leaderboard API

    Integrate with Leaderboard API

    Description:

    In this feature I achieved the following:

    • Created a new game. ✅
    • Implemented the "Refresh" button (receiving data from the API and parsing the JSON). ✅
    • Implement the form "Submit" button (sending data to the API). ✅
    • Used async and await JavaScript features to consume the API. ✅

    https://user-images.githubusercontent.com/5249414/173909511-dc5a93c2-22f8-46ba-8a99-173f1cbf4c2f.mp4

    Live Demo: https://kwekubright.github.io/LeaderBoard/public/

    .env file

    Below is the content for .env file. Please create a .env file in the root folder and paste the code below to be able to run the code locally:

    GAME_ID="zlYEZxLx5r6TCz5Zwler"
GAME_NAME="Microverse League of Legends"
API_BASE_URL="https://us-central1-js-capstone-backend.cloudfunctions.net/api/"
    opened by kwekubright 1
  • Implement Medium Fidelity Design

    Implement Medium Fidelity Design

    Description:

    In this feature, I implemented the medium fidelity design for the app.

    • I created an npm project with webpack. ✅
    • Used plain HTML markup with minimum styling. ✅
    • Used ES6 modules ✅
    image

    Live Demo: https://kwekubright.github.io/LeaderBoard/public/

    opened by kwekubright 0
Owner
Bright Kweku Ahiadeke
"Software developer, Rails enthusiast, beginner-level guitarist. Stack: JavaScript, Ruby, Rails, React, Redux, PHP, Laravel. Looking for my next job!"
Bright Kweku Ahiadeke
GitHub
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 Html, CSS and JavaScript

Leaderboard App ?? Table of Contents ?? About the Project ?? Built With Tech Stack Key Features ?? Live Demo ?? Getting Started Setup Prerequisites In

Tetteh Kodjo-Sarso 4 Mar 21, 2023
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.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Jihane Haddad 5 Feb 10, 2022
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.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Regiss Mukubiza 2 Apr 8, 2022
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.

Leaderboard- DESCRIPTION The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is

Andres Garzon 2 Jun 16, 2022
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.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Tiago Lelinski Marin 6 Aug 4, 2022
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.

Leaderboard ?? Table of Contents ?? About the Project ?? Built With Tech Stack Key Features ?? Live Demo ?? Getting Started Setup Prerequisites Instal

Ritika Rawat 4 Mar 20, 2023
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 The Leaderboard App displays scores submitted by different players, allows you to submit your score and all data is preserved in the Leade

Jonathan Kayizzi 6 Nov 9, 2022
The leaderboard website displays scores submitted by different players. It also allows you to send and receive data from API. Build with JavaScript, CSS and HTML.

Leadboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved using

Fatima Ezzahra elmenoun 4 Jan 31, 2022
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

Leaderboard This website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the

Sanja Mandic 9 Sep 30, 2022
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

Leaderboard App The leaderboard website displays scores submitted by different players. It also allows you to submit your score I created this project

Kwasi Antwi Baayeh 5 Dec 21, 2022