An HTML, CSS and JavaScript project related to a leaderboard, where you can submit a specific score data using an API request

Related tags

Learning resource api webpack html-css-javascript
Overview

LeaderBoard-Project

In this project we use Webpack dependecy and a external API for displaying the leaderboard data inside the dom.

Built with

  • HTML-CSS-JS
  • WebPack
  • Node Modules
  • GIT/GITHUH/GITFLOW
  • API

Project Functionality video

AwesomeScreenshot-26_01_2022.20.18.15.mp4

Project final View

Leaderboard

How to set up

If you want to see the project in detail, check the following instructions:

  1. clone the repo locally.
  2. open the repo command line path and type in (npm install).
  3. run (npm run build) to ensure no webpack errors.
  4. finally type (npm run start).

Live page

Authors

👤 Nicolas Gonzalez

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check leave recommendation in issues page

You might also like...

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.

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

Dec 26, 2022

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

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

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.

Oct 26, 2022
Comments
  • LeaderBoard Styling

    LeaderBoard Styling

    Main Point

    🦅

    • Add a new style to LeaderBoar Project.
    • Preserved original layout.
    • Plain CSS or CSS framework.

    Set up Project 💻

    • remember to run (npm install).
    • run (npm run build) and finally type (npm run start).
    opened by Nicolaswg 0
  • Adding Leaderboard API functionality

    Adding Leaderboard API functionality

    Main point

    🦅

    In this new PR, we implement API async functions for Posting and Getting Data which is displayed dynamically inside the dom.

    Change Made ✏️

    • New es6 module function
    • Post and Get API method
    opened by Nicolaswg 0
  • Initial LeaderBoard Porject Structure

    Initial LeaderBoard Porject Structure

    Main Point

    🦅

    In this new PR we are using webpack and ES6 modules, for creating the starting point of a future API request Leaderboard app

    Change made ✏️

    • Add HTML, CSS squeleton
    • Add Dynamic leaderboard list display
    • Use GitFlow for structuring the project workflow
    opened by Nicolaswg 0
  • Morning session review

    Morning session review

    Hello, Nicolas, you made excellent work, there is just 1 or 2 thing you could change to improve the code

    • [ ] You should delete all the console.log in your code. Is a good way to test, but in the final product is not necessary, so it would be good to make your project even better
    • [ ] The last function that looks like this: const DisplayScore = async () => { await fetch(https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/${id}/scores/).then((res) => res.json().then((data) => { Doesn't really need to be async, since you are making a new fetch without requesting data from a promise or an API, it may consume extra time to process it, so it would be nice if it was just a normal arrow function, just to improve your code
    opened by lisandroseia 0
Owner
Nicolas Gonzalez
Full Stack Developer with an enthusiast style, falling in love with JavaScript, Ruby, Rails, React. Looking for my dream job
Nicolas Gonzalez
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
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
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
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
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 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 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.

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