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.

Related tags

Learning resource api responsive fetch-api
Overview

LeaderBoard

📗 Table of Contents

📖 LeaderBoard

LeaderBoard is a simple and powerful application built with webpack and the Fetch javascript API.

🛠 Built With

webpack

Tech Stack

Structure
Style
Linters

Key Features

  • Add score
  • View list of scores
  • Refresh scores

(back to top)

🚀 Live Demo

Have a look at the live demo of the project.

(back to top)

💻 Getting Started

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

Prerequisites

In order to run this project you need:

  • npm installed
  • node installed

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone [email protected]/ZewdieMc/LeaderBoard.git

Install

Install this project with:

  cd LeaderBoard
  npm install

Usage

To run the project:

  • npm start

Run tests

To run tests, run the following command:

To check for html errors run:

  npx hint .

To check for css errors run:

  npx stylelint "**/*.{css,scss}"

To check for js errors run:

  npx eslint .

Deployment

Deployed using Github Pages.

(back to top)

👥 Authors

👤 Zewdie Habtie

(back to top)

🔭 Future Features

  • Improve the look and feel of the application.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project send your feedback to encourage me to do more.

(back to top)

🙏 Acknowledgments

I would like to thank Microverse for offering me this opportunity to learn, and practice my skills.

(back to top)

❓ FAQ

-Why use linters?

  • The use of linters helps to diagnose and fix technical issues, also linters can help teams achieve a more readable and consistent style, through the enforcement of its rules.

(back to top)

📝 License

This project is MIT licensed. (Check the LICENSE file)

(back to top)

You might also like...

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

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

Aug 4, 2022

Angular JWT refresh token with Interceptor, handle token expiration in Angular 14 - Refresh token before expiration example

Angular JWT refresh token with Interceptor, handle token expiration in Angular 14 - Refresh token before expiration example

Angular 14 JWT Refresh Token example with Http Interceptor Implementing Angular 14 Refresh Token before Expiration with Http Interceptor and JWT. You

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

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

Apr 6, 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

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.

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
  • Leaderboard: setup project

    Leaderboard: setup project

    Hey Reviewer :wave:,

    In this PR, I implemented the following project requirements.

    General requirements

    HTML/CSS requirements

    JavaScript requirements

    Project requirements

    • Use Gitflow
    • Create an npm project with webpack.
    • Write plain HTML markup with minimum styling
    • Don't make API calls
    • Use ES6 modules, with import and export
    opened by ZewdieMc 2
  • Leaderboard: hit the API

    Leaderboard: hit the API

    Hey Reviewer :wave:,

    In this PR, I implemented the following project requirements.

    General requirements

    HTML/CSS requirements

    JavaScript requirements

    Project requirements

    • 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.
    • Make sure that you saved the ID of your game that will be returned by API.
    • Implement the "Refresh" button that will get all scores for a game created by you from the API (receiving data from the API and parsing the JSON).
    • Implement the form "Submit" button that will save a score for a game created by you (sending data to the API).
    • Use arrow functions instead of the function keyword.
    • Use async and await JavaScript features to consume the API.
    • No styling is required.
    opened by ZewdieMc 1
  • Leaderboard: final touches

    Leaderboard: final touches

    Hey Reviewer :wave:,

    In this PR, I implemented the following project requirements.

    General requirements

    HTML/CSS requirements

    JavaScript requirements

    Project requirements

    • 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.
    opened by ZewdieMc 0
  • Peer to peer code review

    Peer to peer code review

    Good job so far!!!

    • [ ] A good thing to give a range for your input element for sending the scores. But it is better to assign a logical value for the game score starting point.
    opened by yodit93 0
Owner
Zewdie Habtie
Full-Stack Software Developer with a love for React and Redux. I play soccer computer games and pool in my spare time. Open to new opportunities
Zewdie Habtie
GitHub https://zewdiemc.github.io/leaderboard/
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
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

Mihreteab Misganaw 3 Dec 19, 2021
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
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. 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
JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard API using JavaScript async and await and add some styling.

Leaderboard Project JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard

bizimungu pascal 4 May 20, 2022
It's a simple Leaderboard with the functionality to add and view leaderboard with API calls

It's a simple Leaderboard with the functionality to add and view leaderboard with API calls. This project follows GitFlow instead of GitHub flow and it's built with JavaScript, CSS and HTML.

Robertson Arthur 4 Jul 6, 2022
A Leaderboard app that pulls from a LeaderboardGameAPI and allows users to view recent scores and add more scores to the score board. Built with HTML5, CSS, JavaScript, and Webpack.

Leaderboard A Leaderboard app that pulls from a LeaderboardGameAPI and allows users to view recent scores and add more scores to the score board. Buil

Steven Ntakirutimana 5 Dec 21, 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
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