Leaderboard list app, using webpack and ES6 features

Overview

Leaderbord-project

Leaderboard list app, using webpack and ES6 features

Built With

  • HTML
  • CSS
  • Javascript
  • Linters
  • Webpack

Live Demo

N/A

Getting Started

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

  1. Open your terminal
  2. Navigate to the directory where you want your project cloned
  3. Clone the project using git clone or just copy the command below:
   git clone https://github.com/didierganthier/leaderboard-project.git
  1. Open the project with your IDE. I use Visual Studio Code

  2. Run npm install to get the dependencies

    not sure how to use npm? Read this.

  3. Run webpack:

  • Production:
       npm run build
    
  • Development:
     npm run start
    
    not sure how to use npm? Read this.

Prerequisites

  • Having an IDE .
  • Having Git installed and configured.

Setup

  • Clone the repository
  • Open the folder with your IDE
  • Get the dependencies with npm install
    • not sure how to use npm? Read this.
  • 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. You can uncomment the line 11 in the src/index.js file to create a new game.
  • Make sure that you saved the ID of your game that will be returned by API. You will need it to submit your scores.
  • Comment the line 11 in the src/index.js file so that you don't create a new game every time you refresh the page.
  • Replace the ID of the game in the modules/getScores.js file on line 2 and in the modules/addScores.js file on line 8.

Preview

screenshot

Authors

👤 Author1

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

Acknowledgments

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc

📝 License

This project is MIT licensed.

Comments
  • Final touches

    Final touches

    Final touches

    Checklist

    • [x] I have read this repository's contribution guidelines.
    • [x] My pull request has a descriptive title (not a vague title like Update index.MD)
    • [x] My pull request targets the main branch of this project.
    • [x] I added relevant documentation for all the files I changed

    This PR adds some styling to the HTML

    What changes have been made?

    The author of these changes is the owner of the repo @didierganthier

    opened by didierganthier 0
  • Connect api

    Connect api

    Connect api

    Checklist

    • [x] I have read this repository's contribution guidelines.
    • [x] My pull request has a descriptive title (not a vague title like Update index.js)
    • [x] My pull request targets the main branch of this project.
    • [x] I added relevant documentation for all the files I changed

    This commit makes a GET request to the Leaderboard API and populates the HTML using the fetched data, also uses POST to add new data

    What changes have been made?

    • [x] Create an addSore.js function to POST the scores to the Leaderboard API
    • [x] Create a getScores function to GET the scores from the Leaderboard API add them as li elements to an existing scoresList div
    • [x] Create a showMessage method alerting the user on successful/unsuccessful actions
    • [x] Export each function as ES6 modules to be used in the index.js file.

    The author of these changes is the owner of the repo @didierganthier

    opened by didierganthier 0
  • Design HTML template

    Design HTML template

    Design HTML template

    Checklist

    • [x] I have read this repository's contribution guidelines.
    • [x] My pull request has a descriptive title (not a vague title like Update index.MD)
    • [x] My pull request targets the dev branch of this project.
    • [x] I added relevant documentation for all the files I changed

    This commit designs the template of index.html that is then compiled by Webpack and also updates README.md

    What changes have been made?

    • [x] Add the basic structure in ssrc/index.html
    • [x] Add basic style in src/style.css to fit the template
    • [x] Update bad info in README.md file

    The author of these changes is the owner of the repo @didierganthier

    opened by didierganthier 0
  • Add style/css loaders

    Add style/css loaders

    Add style/CSS loaders

    In this pull request, the following was done:

    • [x] Add style loaders
    • [x] Add CSS loaders
    • [x] Add module section to webpack.config.js
    opened by didierganthier 0
  • Webpack config

    Webpack config

    opened by didierganthier 0
  • Config linters

    Config linters

    Config linters

    Checklist

    • [x] I have read this repository's contribution guidelines.
    • [x] My pull request has a descriptive title (not a vague title like Update index.MD)
    • [x] My pull request targets the main branch of this project.
    • [x] I added relevant documentation for all the files I changed

    This commit adds the linters file to handle local linters checks and GitHub Actions automation

    What changes have been made?

    • [x] Add the .github/workflows/linters.yml directory to manage GitHub Actions on Pull Request creation
    • [x] Add the .eslintrc.json file to check for ESLint errors locally
    • [x] Add the .stylelintrc.json file to check for Stylelint errors locally
    • [x] Add the .gitignore file to decide what file is getting pushed on GitHub

    The author of these changes is the owner of the repo @didierganthier

    opened by didierganthier 0
Owner
Didier Peran Ganthier
Full-Stack Software Developer with a love for React, Flutter, Rust, and TypeScript. I love riddles, challenges, and philosophy. Open to new opportunities.
Didier Peran Ganthier
JavaScript project for the Leaderboard list app, built using webpack and ES6 features.

Leaderboard List App JavaScript project for the Leaderboard list app, built using webpack and ES6 features. The leaderboard website displays scores su

Samuel Mwape 8 Aug 16, 2022
The Leaderboard list app using webpack and ES6 features

Leaderboard Game In this activity I set up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. I consu

Ibrohim Rasulov 13 Sep 16, 2022
A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules.

Leaderboard ONJoseph Leaderboard project JavaScript leaderboard project using API. Description In this activity I will set up a JavaScript project for

Joseph O 3 May 12, 2022
A JavaScript project for the Leaderboard list app, using webpack and ES6 features, this is a requirement for Micronauts in Module 2 block 4. This project is MIT Licensed

LeaderBoard A JavaScript project for the Leaderboard list app, using webpack and ES6 features, this is a requirement for Micronauts in Module 2 block

Makoji David 9 Sep 9, 2022
Leaderboard list app, using webpack and ES6 features

Leaderbord-project Leaderboard list app, using webpack and ES6 features Built With HTML CSS Javascript Linters Webpack Live Demo N/A Getting Started T

Didier Peran Ganthier 4 Dec 20, 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
Erick Hans 5 Oct 26, 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
Awesome Books project with ES6 is an application that was built using Vanilla JavaScript with ES6 features like using arrow functions. This application allows you to keep records of your favorite books.

Javascript Project Awesome Books with ES6 Using Javascript to create a simple Awesome Books project. Populating the books list and then removing one b

Ghazanfar Ali 8 Sep 28, 2022
A simple to-do list web application built with ES6 and bundled with webpack. Checkout the awesome features it offers.

A To-do List Web Application A simple to-do list with amazing features and a great ux. built using ES6 and npm webpack. Check it out to explore its am

Chia Carlyle 9 Apr 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
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
In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications listed later in this lesson. This simple web page is built using webpack and served by a webpack dev server.

Awesome books:JavaScript Using Modules In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications

 Hassan Momanyi 10 Nov 25, 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

Sanja Mandic 9 Sep 30, 2022
To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Todo-list project This is a Microverse project that entails a to-do-list. Built With HTML CSS Javascript Webpack VS code Live Demo (if available) Live

Youta Lactio Christabelle 10 Aug 3, 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 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

Suleiman Olaide 10 Sep 9, 2022