Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benmukebo/leaderboard
The Leaderboard website displays scores submitted by different players. It also allows you to submit your score. Bult with JavaScript, SCSS, API.
https://github.com/benmukebo/leaderboard
api-rest es6-javascript html5 scss-framework
Last synced: 2 days ago
JSON representation
The Leaderboard website displays scores submitted by different players. It also allows you to submit your score. Bult with JavaScript, SCSS, API.
- Host: GitHub
- URL: https://github.com/benmukebo/leaderboard
- Owner: BenMukebo
- Created: 2021-10-05T16:48:20.000Z (almost 3 years ago)
- Default Branch: development
- Last Pushed: 2022-05-17T18:36:42.000Z (over 2 years ago)
- Last Synced: 2024-10-01T03:22:39.825Z (2 days ago)
- Topics: api-rest, es6-javascript, html5, scss-framework
- Language: SCSS
- Homepage: https://leaderboard-game.netlify.app/
- Size: 5.37 MB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Leaderboard
* 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.
Below you can see how this website should look and behave:
|| LEADERBOARD ||
|-|-----------------------------------|-|
||||
## Why this Leaderboard page is special?
### Learning objectives
- Use callbacks and promises.
- Learn how to use proper ES6 syntax.
- Use ES6 modules to write modular JavaScript.
- Use webpack to bundle JavaScript .
- Send and receive data from an API.
- Use API documentation.
- Understand and use JSON.
- Make JavaScript code asynchronous.🐛🐛.
## Live Demo
[Demo](https://thirsty-montalcini-8d768c.netlify.app)
## Setup
### Clone this repository
```bash
$ git clone https://github.com/BenMukebo/Leaderboard.git
$ cd Leaderboard
```
### set up webpack
```bash
$ npm install --save-dev html-webpack-plugin
$ npm install --save-dev webpack-dev-server
$ npm npm install --save-dev style-loader css-loader # To able to use npm run start for live reloading.
```
### Compile scss
```bash
$ sass --watch src/scss/style.scss src/css/style.css # this will make to automatically compile scss code in css.
```
### Run project
```bash
$ npm install
$ npm run build
$ npm run start # this will make webpack watching for your changes in code.
```
### Open page in browser
```bash
$ open dist/index.html
```
## Test
For tracking linter errors locally you need to follow these steps:
- For tracking the linter errors in HTML file run:
> npx hint .
- For tracking the linter errors in CSS file run:
> npx stylelint "**/*.{css,scss}"
- And For tracking the linter errors in JavaScript file run:
> npx eslint .
## Built With
- HTML
- JavaScript
- SCSS
- Webpack
## 👤 Author
The author of the entire code is Ben Mukebo-
- [GitHub](https://github.com/BenMukebo)
- [Twitter](https://twitter.com/BenMukebo)
- [LinkedIn](https://www.linkedin.com/in/kasongo-mukebo-ben-591720205/)
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/BenMukebo/Leaderboard/issues).
## Show your support
Give a ⭐️ if you like this project!❤️❤️❤️
## Acknowledgements
Thank you [Microverse](https://img.shields.io/badge/Microverse-blueviolet) for preparing this project! 👏👏👏
## 📝 License
This project is MIT licensed.