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.

Related tags

Learning resource javascript api webpack html5 microverse leaderboard-api
Overview

Leaderboard

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.

Requirements

Build a Leaderboard list app using:

  • HTML5
  • CSS3
  • JavaScript (ES6)
  • Leaderboard API service
  • Webpack
  • Linters (Lighthouse, Webhint, Stylelint, Eslint)
  • Gitflow

Checkout how its running LIVE:

LIVE VERSION

Built With

  • HTML5
  • CSS3
  • JavaScript (ES6)
  • Leaderboard API service
  • Webpack
  • Linters (Lighthouse, Webhint, Stylelint, Eslint)
  • Gitflow

Getting Started

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

Prerequisites

  • A web browser (like Google Chrome, Opera...).
  • A code editor (like Atom, VScode...).

Setup

To setup the project locally: clone the repository using:

https://github.com/ABDULALI3468/Leader-board-project-using-API-s.git

Install dependencies

run : npm install

Build the app

run: npm run build

Run the app

run: npm start

Authors

👤 ABDUL ALI

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Hat tip to code reviewers and to everyone who reviewed the project and made suggestions.

📝 License

This project is MIT licensed.

You might also like...

This is the Microverse Leaderboard project that uses gitflow and features html, CSS, Javascript, ES 6 modules and Webpack

Leaderboard project This is the Microverse Leaderboard project using Gitflow, html + css + modular javascript, ES6 syntax, and Webpack. Built With Htm

Sep 9, 2022

This project is about Leaderboard list app, that allows users to add score to the list and refresh the list.

This project is about Leaderboard list app, that allows users to add score to the list and refresh the list.

Leaderboard This project is about Leaderboard list app, that allows users to add score to the list and refresh the list. Built With JavaScript HTML CS

Dec 19, 2021

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

Dec 21, 2022

This is a project based on a game Leaderboard. You can interact with an API inserting your user name and score. Built with HTML, CSS, JavaScript and WEBPACK

This is a project based on a game Leaderboard. You can interact with an API inserting your user name and score. Built with HTML, CSS, JavaScript and WEBPACK

Leaderboard: Leaderboard project - Microverse Acces link Check the live version here Built With HTML CSS JavaScript VScode Webpack GitFlow Quick view

Oct 8, 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

Sep 30, 2022

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

Nov 9, 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. 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

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.

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

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

Apr 8, 2022
Comments
  • Fetching and POSTING Data to and from API

    Fetching and POSTING Data to and from API

    In this branch I did the following things :

    1. Setup the project with Webpack, linters, and Gitflow.
    2. Fetching and POSTING Data to and from API using ASYNC and AWAIT.
    3. Added the styles to make it very attractive.
    opened by ABDULALI3468 2
  • Leaderboard skeleton

    Leaderboard skeleton

    In this branch I did the following things :

    1. Setup the project with Webpack, linters, and Gitflow.
    2. Created the HTML elements for the project.
    3. Applied minimum styling to the layout.
    4. Added scores dynamically.
    opened by ABDULALI3468 1
  • Project ready for Production!

    Project ready for Production!

    Project Requirements 📄

    1. Anyone can add the scores with their respective names.
    2. People can see all scores, there is no authorization required.
    3. The app is responsive for all viewports.

    Wireframe

    wireframe

    Technology used 🧑‍💻

    • Language: JavaScript, HTML & CSS
    • Module Bundler: Webpack
    • Technology: Github, Git, Linters, and API
    opened by ABDULALI3468 0
  • Peer to peer review

    Peer to peer review

    Nice job @ABDULALI3468, your project looks good ✅

    • The function name test is not descriptive. I descriptive name helps make your code easy to read and understand by other developers https://github.com/ABDULALI3468/Leader-board-project-using-API-s/blob/e7825297318df598454f3f083b5fc852ec4339fd/src/modules/test.js#L1-L15
    opened by kwekubright 0
Owner
ABDUL ALI
A full-stack web developer @Microverse, ready for new adventures. React | Angular | Ruby on Rails | Databases | Servers. Available for hire 😏 Love automation.
ABDUL ALI
GitHub
leaderBoard is a project used to add a score, view score list, and refresh score list. It is built using JS, HTML, BootStrap, and API.

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

Zewdie Habtie 4 Mar 20, 2023
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

LeaderBoard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. Mini Presentation Additio

Clinton Mbonu 20 Jun 30, 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.

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

Ricky Mormor 4 Apr 20, 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

Felix Ouma 8 Jul 15, 2022
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

leaderboad Description the project. this project is about the leaderboad i did during Microverse to build a website for adding Data to the API and fet

Emmanuel Moombe 4 May 30, 2022
PAC-MAN Leaderboard includes the Leaderboard API. You can add your name and score, and see other player's scores.

PAC-MAN Leaderboard includes the Leaderboard API. You can add your name and score, and see other player's scores.

Pedro Guerreiro 7 Oct 26, 2022
A Minimalist to do list website where user can add, remove and edit multiple tasks and All the changes user makes in his to do list is saved in browser local storage so that it can be accessed later.

Testing for Add Remove function in To Do List App Jest framework is used for testing. Created (addremove.test.js) for a file containing the add item a

Krishna Prasad Acharya 8 Aug 15, 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. 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. Build with Html, CSS, JS, API, and Webpack.

Kyrillos Hany 9 Mar 11, 2022
Module '2' Week two '2' project. The following technologies are used: HTML, CSS , Webpack, and JavaScript. Features of this app are rendered dynamically. It allows user to pinned or add task the will be doing on it. Local storage session is implemented. Task stay on app when user refresh or reload page. Task can be checked when completed.

To Do list: Description the project. Built With Major languages Frameworks Technologies used Screenshot of project Built With HTML, JAVASCRIPT, CSS, a

Evans Kupour 8 Nov 4, 2022
This simple project aims to connect to an API to fetch score data and display it on a LeaderBoard box, as well as provide the tool to submit a new score.

Leader Board: Hit the API! This simple project aims to connect to an API to fetch score data and display it on a LeaderBoard box, as well as provide t

Andrés Felipe Arroyave Naranjo 12 Apr 6, 2022