JavaScript project for the Leaderboard list app, built using webpack and ES6 features.

Related tags

Learning resource javascript css fetch html api promises webpack async es6-modules await es6-classes
Overview

Leaderboard List App

JavaScript project for the Leaderboard list app, built using webpack and ES6 features. The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved using the external Leaderboard API service.

screenshot

Built With

  • Webpack
  • HTML
  • CSS
  • Modular JavaScript (with modern ES6 syntax)

Live Demo

Live Demo Link

Getting Started

Setup

git clone https://github.com/Mwapsam/leaderboard.git

cd leaderboard
npm install
npm start

Deploy

npm run build
npm run deploy

👤 Author

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

📝 License

This project is MIT licensed.

Comments
  • add fetch data and post data functions

    add fetch data and post data functions

    Leaderboard: hit the API

    • Create a new game by using the API.
    • Implement the "Refresh" button (receiving data from the API and parsing the JSON).
    • Implement the form "Submit" button (sending data to the API).
    • Use async and await JavaScript features to consume the API.
    opened by Mwapsam 2
  • Morning session code review

    Morning session code review

    Good job so far, but some minor issues were found

    1. Try to sort the data from highest to lowest, since it is a leaderboard project. Use can use the sort methide to achieve this on the score.
      Keep up the code work, Happy coding 👍
    opened by Ginohmk 0
  • Peer to Peer Review

    Peer to Peer Review

    Hi @Mwapsam, you did a good job so far congratulation but there are some issues to highlights.

    • We suggest you refactor your code and recreate the functions independently .
    • We suggest putting validation on the name input to make sure the user enters a name containing just letters.

    Happy Coding 😁

    opened by TimmyChan99 0
  • Final touches

    Final touches

    Leaderboard: final touches

    • Update the user interface.

    • Create a new game by using the API.

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

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

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

    opened by Mwapsam 0
  • Setup

    Setup

    Leaderboard: setup project

    • Use ES6 modules to write modular JavaScript.
    • Use webpack to bundle JavaScript.
    • use Gitflow.
    • Create an npm project with webpack.
    • Write plain HTML markup with minimum styling.
    opened by Mwapsam 0
Owner
Samuel Mwape
Full-Stack Software Developer | Online Tutor | Stack: JavaScript, Ruby, Rails, React, Redux, Python, Django | Open to new opportunities
Samuel Mwape
GitHub https://mwapsam.github.io/leaderboard/
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
A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules

LEADERBOARD In this activity I am setting up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. I wil

Tobin 11 Mar 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
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
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
This is a JavaScript leaderboad list app. In this project I used Webpack and ES6 modules. As well as HTML, and CSS for styling the app. When submitting the scores the data is preserved thanks to the external Leaderboard API service.

Leaderboard App In this project the leaderboard app allows you to create games and the user can submit their names and scores into the app to keep tra

Erick Hans 5 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
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 Single Page Application featuring a medium fidelity wireframe of a to-do-list app that stores tasks that are added and which can be deleted. The tasks can be checked, unchecked or edited. Built mainly with JavaScript and strict ES6 features. Bundled with webpack.

To-Do-List In this "To-Do-List" project, I created the basic structure of a page single page application with HTML, CSS and javascript, using the webp

amon-cofie 6 Oct 7, 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
The to-do list project is an app that allows users to successfully organize their day by inputting prioritized tasks. The project also allows users to carry out the CRUD operations for (add, edit and delete). Two special features of the app are that it saves tasks in the local storage of the user's browser, so when the user reloads or revisits the app, the user can view a list of tasks formerly inputted, and it allows users to prioritize their tasks by dragging up and down the list section.

TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no

Francis Ugorji 9 Nov 1, 2021
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
This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

To-Do-List App This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules

Samuel Mwape 18 Sep 20, 2022
In this project, I built a basic website that allows users to add/remove books from a list using HTML/CSS to build the app and JavaScript to add functionalities. This project was organized using modules and ES6 syntax implemented.

Awesome books: with ES6 Description the project. Built With HTML CSS JAVASCRIPT Live Demo (if available) Live Demo Link Getting Started This is an exa

Emem Ekpo 7 Sep 9, 2022
This an CRUD app built were users can create, update and delete specific day to day tasks as they wish. The app is built using webpack and served with webpack dev server

Todo-List This an CRUD app built were users can create, update and delete specific day to day tasks as they wish. The app is built using webpack and s

Duane David 10 Sep 28, 2022
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
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
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