The leaderboard web app displays the top scoring player on the fictional game of life.

Related tags

Learning resource api webpack html5 leaderboard tailwindcss
Overview

LeaderBoard

Leaderboard is website that displays the scores submitted by all players. It also allows the current user to submit his/her score. All data is preserved thanks to the external Leaderboard API service.

Built With

Milestones

  • Milestone 1: Project Structure
  • Milestone 2: Send and receive data from API.
  • Milestone 3: Final touches.

sneak peek

Getting Started

Prerequisites: A Web Browser (preferably FireFox or Chrome)

Option 1

Use the live Website

Leaderboard Website

Option 2

Set up your own copy locally

  • Clone the GitHub Repository
  • Go to the Project cd Leaderboard
  • Run npm install to install the dependencies Run npm run start to run the live server.

About me

👤 Soufiane Boursen

Contributors

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

📝 License

This project is MIT licensed.

Comments
  • Project setup

    Project setup

    Description

    In this milestone, I built the setup for the LeaderBoard API project. It is necessary to note that I used the following stack for this project:

    • Webpack5with an HTML template and CSS extractor.
    • TailWindCSS for styling, therefore the @rules linter errors were ignored.
    • Modular ES6 JavaScript.
    • JEST to run a few unit tests.

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Gitflow.
    • [x] The documentation is professional.

    Milestone requirements

    • [x] Follow the provided template
    • [x] Use webpack
    • [x] Use Gitflow
    • [x] Use ES6 modules
    • [x] Don't make API calls (I used a mock API)

    Additional notes

    ScreenShot image

    Thank you for taking the time to review this pull request.

    opened by Sboursen 2
  • Peer-Review ww4-module2

    Peer-Review ww4-module2

    Good job @Sboursen for going the extra mile with your project. we took a look a look at your work and we have to appreciate;

    • your colorful styling
    • making the project responsive for both desktop and mobile displays
    • Ensuring all the APIs work as required

    However we found a few issues in your project that could use a little fixing

    • [x] Please consider adding a notification/ alert when a user adds a new score
    • [x] Please consider adding a margin-bottom to your body
    • [x] optionally you can add a display showing the number of scores available for viewing

    Otherwise, keep it up!!

    enhancement 
    opened by daudi13 1
  • Use LeaderBoard API

    Use LeaderBoard API

    Description

    In this milestone, I implemented an interface in order to communicate with API and created the refresh and the submit functionalities.

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Gitflow.
    • [x] The documentation is professional.

    Milestone requirements

    • [x] Create a new game with the name of your choice by using the API.

    • [x] Implement the "Refresh" button (receiving data from the API and parsing the JSON).

    • [x] Implement the form "Submit" button (sending data to the API).

    • [x] Use async and await JavaScript features to consume the API.

    Additional notes

    Screenshote image NB: I limit the number of displayed scores on the leaderboard to 10. Thank you for taking the time to review this pull request.

    opened by Sboursen 1
  • Hotfix UI distroyer

    Hotfix UI distroyer

    Description

    • [x] closes #9

    In addition, I added some validation animation for better UX:

    • [x] Added feedback text for adding a new score.
    • [x] Added a 'New scores available' notification.
    opened by Sboursen 0
  • Custom style

    Custom style

    Description

    In this milestone:

    • [x] I added a custom style to the page.
    • [x] I made sure all the functionalities are still working.
    • [x] I kept using the same structure.

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Github flow.
    • [x] The documentation is professional.

    Please find here the live link to the Github pages.

    Thank you for taking the time to review this pull request.

    opened by Sboursen 0
  • Basic structure

    Basic structure

    Description

    • [x] Add basic HTML structure.
    • [x] Add minimalist style based on the provided template
    • [x] Deal with stylelinte issues related to the use of the @rule
    opened by Sboursen 0
Owner
Soufiane Boursen
Full-stack software developer. MongoDB, Rails, React, Tailwind. Machine learning enthusiast. R&D process engineer. Open to new opportunities.
Soufiane Boursen
GitHub https://sboursen.github.io/Leaderboard/
Conways-game-of-life - A Conway's Game Of Life project using Python

conways-game-of-life A Conway's Game Of Life project using Python JavaScript Devlog January 1st 2022: also need to remember Python's syntax a bit will

Felipe Melgaço Magesty Silveira 0 Sep 23, 2022
🟢 Music player app with a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more.

Music-player-app see the project here. 1. Key Features 2. Technologies I've used Key Features: ?? Fully responsive clean UI. ?? Entirely mobile respo

suraj ✨ 3 Nov 16, 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
Welcome to Space Traveler's HUB, this web app allows the user to take a fictional tour across the space.

Welcome to Space Traveler's HUB, this web app allows the user to take a fictional tour across the space. The user can choose a rocket from our catalog interface, and reserve it. Also, the user can see recent special missions and join them. Finally, the user will be able to keep track of all your rockets and mission they are subscribed to. Build with React, Redux, React-router, and Railwindcss.

Mihreteab Misganaw 3 Jan 27, 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 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

ABDUL ALI 13 Dec 26, 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. 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
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
A leaderboard website that displays scores submitted by different players. It was developed with Javascript, HTML, CSS and the Leaderboard API service was consumed.

LeaderBoard App Description The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data

Bright Kweku Ahiadeke 6 Jul 25, 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. 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 ?? 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
Webpage for a leaderboard list app that uses the Leaderboard api to store the highscores for a game

Leaderboard This Webpage is for a leaderboard list app that uses the Leaderboard api to store the highscores for a game. This is one of my first exper

Zeeshan Haider 7 Mar 12, 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

ahmednazirmusah 3 Oct 13, 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
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
Essential Audio Player JS is a simple, clean and minimal JavaScript / HTML5 / CSS web audio player.

Essential Audio Player JS is a simple, clean and minimal JavaScript / HTML5 / CSS web audio player. No unnecessary controls, just a button and a track

null 32 Dec 14, 2022