Leader board application made with JavaScript that fetches an API to keep a record of users' scores.

Related tags

Learning resource javascript sass webpack leaderboard api-rest
Overview

Leaderboard

This is a leaderboard that allows the user to created boards and input scores to them usin Rest API. Also, it saves new boards into local storage.

screenshot

Built With

  • Major languages
    • HTML
    • Javascript
    • SASS
  • Technologies used
    • npm
    • webpack

Live Demo (if available)

Live Demo Link

Getting Started

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

Prerequisites

  • npm
  • git

Setup

  • open terminal or bash
  • run
    • git clone https://github.com/Leboroz/leaderboard.git

Install

  • run
    • cd leaderboard
    • npm install
    • npm start to run the server

Usage

The board displays scores from the main id which is hardcoded. To create a new board press the new game button. You can input names as strings and scores as strings

Deployment

  • run
    • npm run build

👤 Leonardo Albornoz

🤝 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!s

📝 License

This project is MIT licensed.

You might also like...

SimpleProject is a web app that allows users to create projects and manage them in a Kanban board.

SimpleProject is a web app that allows users to create projects and manage them in a Kanban board.

What is SimpleProject SimpleProject is a web app that allows users to create projects and manage them in a kanban board. SimpleProject was built with

Nov 23, 2022

this project is an online library application that enables users to keep track of books in their library by adding to and removing books from a list. Built with JavaScript ES6 syntax, HTML, and CSS

Awesome-Book1 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules. The

Jul 17, 2022

A Leaderscore app that send data to an API created from Postman and allow users to save names and scores in a table. Built with JavaScript

A Leaderscore app that send data to an API created from Postman and allow users to save names and scores in a table. Built with JavaScript

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

May 16, 2022

Simply Netflix clone using ReactJS. It fetches the data from TMDB API

Simply Netflix clone using ReactJS. It fetches the data from TMDB API

NETFLIX CLONE This project is a simply front end clone of Netflix. It was created with React. It uses The MovieDB Api to search for movies and display

Dec 9, 2022

A Hulu Clone which created with NextJS. It fetches the data from TMDB (The Movie Database) API.

A Hulu Clone which created with NextJS. It fetches the data from TMDB (The Movie Database) API. Click demo to try it by yourself! Hulu Clone Demo Link

Aug 17, 2022

The Space Traveler's Hub is an application where users can check out availble space rockets and book them or cancel the previously made booking. Also users can find a list of current missions along with their brief description and can join the selected mission or leave the mission the user joined earlier.

Space-Travelers-Hub The Space Traveler's Hub is an application where users can check out available space rockets and book them or cancel the previousl

Sep 22, 2022

A simple leaderboard project made while a student in Microverse using API to get scores for a game, JavaScript, HTML and basic CSS

A simple leaderboard project made while a student in Microverse using API to get scores for a game, JavaScript, HTML and basic CSS

Nov 28, 2022

API for the Baby Food Introduction Application. Keep your baby's food introductions in check with this application and backtrack in case of allergies!

API for the Baby Food Introduction Application. Keep your baby's food introductions in check with this application and backtrack in case of allergies!

Baby food introduction API This API is part of the Baby Food Introduction application, which aims to help technological parents keep track of the food

Nov 25, 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
Comments
  • Feature/final style

    Feature/final style

    Features added: ♻️

    • I added a color pallet with the following color.
      • $primary: #fffbdf;
      • $secondary: #c6ffc1;
      • $blue: #34656d;
      • $dark-blue: #334443;
    • I used flexbox to position the two sections.
    • I added some hover effects to the buttons.
    • Finally I added animation to the list components.
    opened by Leboroz 0
  • Morning session code review: your amazing code! :fire:

    Morning session code review: your amazing code! :fire:

    Congratulations on your project. It's looking amazing, functioning perfectly, and your code is readable and clean. :star: Our team member, @zhadier had one suggestion:

    • You can make your code more secure by hiding the ID by using environment variables. :recycle:
    • You are using a new Game ID every time you refresh the page. The game would probably stay the same, so use the same ID! Again, congratulations on your awesome code. It shows your skill level.

    :rocket:

    opened by melaniesigrid 0
  • Feature/fetch api

    Feature/fetch api

    Fetch API

    Features added: ♻️

    • We created a new game with the name of our choice by using the API.
    • We Implemented the "Refresh" button (receiving data from the API and parsing the JSON).
    • We Implemented the form "Submit" button (sending data to the API).
    • We used async and await JavaScript features to consume the API.
    opened by Leboroz 0
Owner
Leonardo Albornoz
Full-stack developer, Huge geek, video games lover, Team player. Ready for challenges. Java, JavaScript, SASS a competitive person. Available for hire
Leonardo Albornoz
GitHub https://leboroz.github.io/leaderboard
This project contains a leader board for a game which contains players name and list and store them on API build with HTML, CSS, JS and API

Leaderboard This App is a Game Leaderboard app Which is created by JavaScript and the big picture of this application is using API. Build With ??‍?? .

Sahar Saba Amiri 5 Dec 15, 2022
Leader Board is a simple project based on JavaScript programing language. The purpose of this project is to work with APIs and ASYNC & AWAIT methods. I have used vanilla JavaScript with web pack to implement this project

Leader Board - JavaScript Project Table of contents Overview The challenge Screenshot Links Project Setup commands My process Built with What I learne

Mahdi Rezaei 7 Oct 21, 2022
JavaScript project for the Leader-board list app, using webpack and ES6 features, notably modules

Leaderboard JavaScript project for the Leader-board list app, using webpack and ES6 features, Built With HTML CSS Javascript webpack Getting started t

Banlon Jones 3 Feb 17, 2022
Reddit is a website where a community of registered users ( redditors) submits content. Its format resembles a traditional bulletin board system, allowing users to post messages and links to other websites and comment on each other's posts. Entries are ranked by a voting system; other users can vote comments and posts either up ( upvoted) or down.

Setup First, run the development server: npm run dev Open http://localhost:3000 with your browser to see the result. You can start editing the page by

Ibrahim Raimi 4 Jun 23, 2022
This application lists the scores of players of a certain game (determined by the user), in this app the Leaderboard REST API is used, where the participants and their scores are registered.

Leaderboard this application lists the scores of players of a certain game (determined by the user), in this app the Leaderboard REST API is used, whe

Gonzalo Medina 5 Jul 29, 2022
The Happy Devs Leaderboard allows users to submit their scores. The app then ranks them from highest scores to the lowest.

HAPPY DEVS LEADERBOARD The HAPPY DEVS LEADERBOARD app allows users to submit their scores to be ranked on the Leaderboard. Live Demo Live Demo Link Bu

Benjamin Semah 3 Feb 10, 2022
A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Micheal Oguntayo 4 Oct 13, 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

Toussaint Saraza 7 Jun 20, 2022
The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API, showing data about Italian foods and we used Used involvement API to record the different user interactions (likes, comments).

taste-food The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API TheMealDB, showing

Kyrillos Hany 14 Aug 10, 2022
Using Webpack and external API, this website saves and shows players' scores and allows the submission of new scores.

Microverse Students Leaderboard Microverse Students Leaderboard project that displays scores submitted by different students. All data is preserved in

Romina Patiño 5 Aug 19, 2022