Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fmanimashaun/leaderboard

In this activity you will set up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. The first working version of the app will be developed following a wireframe, but without styling - just focus on functionality.while in later version, the Leaderboard API will be consumed using JavaScript async...
https://github.com/fmanimashaun/leaderboard

api es6 html5 javascript sass webpack5

Last synced: 14 days ago
JSON representation

In this activity you will set up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. The first working version of the app will be developed following a wireframe, but without styling - just focus on functionality.while in later version, the Leaderboard API will be consumed using JavaScript async...

Awesome Lists containing this project

README 

        
![](https://img.shields.io/badge/fmanimashaun-green)



# Leaderboard



## 📗 Table of Contents



- [📖 Overview](#about-project)

  - [Project Objectives](#project-objectives)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

- [💻 Getting Started](#getting-started)

  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Run tests](#run-tests)

  - [Deployment](#deployment)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [📝 License](#license)



## 📖 Overview 



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](https://www.notion.so/microverse/Leaderboard-API-service-24c0c3c116974ac49488d4eb0267ade3). In this activity, the JavaScript project for the Leaderboard list app was set up using webpack and ES6 features, notably modules and the page was styled based on the given [wireframe](https://github.com/microverseinc/curriculum-javascript/blob/main/leaderboard/images/leaderboard_wireframe.png) In addtion to the page structure, a new game was created using the given [API](https://www.notion.so/Leaderboard-API-service-24c0c3c116974ac49488d4eb0267ade3), and the refresh and submit buttons functionality were added to the page.



### Project Objectives 



- [ ] Write plain HTML markup with minimum styling (just to make the layout) using the wireframe below as a guide:



Wireframe Provided




  




- [x] Implement the "Refresh" button that will get all scores for a game created from the [API](https://www.notion.so/Leaderboard-API-service-24c0c3c116974ac49488d4eb0267ade3) (receiving data from the API and parsing the JSON).

- [x] Implement the form "Submit" button that will save a score for a game created to the [API](https://www.notion.so/Leaderboard-API-service-24c0c3c116974ac49488d4eb0267ade3) (sending data to the API).

- [x] Use arrow functions instead of the function keyword.

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



## 🛠 Built With 



### Tech Stack 



- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)

- [JavaScript/ES6](https://262.ecma-international.org/6.0/)

- [webpack 5](https://webpack.js.org/)

- [npm](https://www.npmjs.com/)

- [Git](https://git-scm.com/)

- [GitHub](https://github.com)

- [Stylelinter](https://stylelint.io/)

- [ESLint](https://eslint.org/)

- [Webhint](https://webhint.io/)

- [Lighthouse](https://ethcar.github.io/lighthouse/)

- [SASS](https://sass-lang.com/)

- [API](https://www.notion.so/Leaderboard-API-service-24c0c3c116974ac49488d4eb0267ade3)



### Key Features 



- [x] Use ES6 modules, with import and export.



## 🚀 Live Demo 



> [Live Demo Link](https://fmanimashaun.github.io/leaderboard/)





  




## 💻 Getting Started 



- [Optional] Install git bash to your machine to enable you to clone this repo.

- install Visual Studio to be able to host a local live version.

- Install a browser to view the local live version.



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

### Setup 



- Open your GitHub account the repository's [link](https://github.com/fmanimashaun/leaderboard)



### Prerequisites 



- Internet connection

- A github account

### Install 



- copy the repo's link and clone it by writing `git clone https://github.com/fmanimashaun/leaderboard.git` on your git bash terminal.

- `npm install` to install the dependencies.



### Run tests 



- You can check for errors by running linter tests found in the github flows.



### Deployment 



- run `npm run start` to run it locally.



## Authors 



👤 **Engr. Animashaun Fisayo**



- [GitHub](https://github.com/fmanimashaun)

- [Twitter](https://twitter.com/fmanimashaun)

- [LinkedIn](https://www.linkedin.com/in/fmanimashaun/)

- [Website](https://fmanimashaun.com)



## 🔭 Future Features 



- [ ] Add more styling to the page.



## 🤝 Contributing 



Contributions, issues, and feature requests are welcome!



Feel free to check the [issues page](../../issues/).



## ⭐️ Show your suppor 



Give a ⭐️ if you like this project!



## 🙏 Acknowledgements 



- [Microverse](https://www.microverse.org/)



## 📝 License 

This project is [MIT](./LICENSE) licensed.