https://github.com/prangonghose/leaderboard
It is a website to showcase the use of API. Any user can store his/her score for a game using this single page app. Build with JavaScript, HTML, CSS.
https://github.com/prangonghose/leaderboard
asynchronous-programming fetch-api html-css-javascript
Last synced: 2 months ago
JSON representation
It is a website to showcase the use of API. Any user can store his/her score for a game using this single page app. Build with JavaScript, HTML, CSS.
- Host: GitHub
- URL: https://github.com/prangonghose/leaderboard
- Owner: PrangonGhose
- License: mit
- Created: 2022-12-20T15:25:20.000Z (over 3 years ago)
- Default Branch: dev
- Last Pushed: 2023-04-17T17:17:54.000Z (about 3 years ago)
- Last Synced: 2025-12-26T20:11:50.744Z (6 months ago)
- Topics: asynchronous-programming, fetch-api, html-css-javascript
- Language: JavaScript
- Homepage:
- Size: 500 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Leaderboard Project
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#triangular_flag_on_post-deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [❓ FAQ](#faq)
- [📝 License](#license)
# 📖 Project Name
#### Leaderboard Project
- HTML, CSS, and JavaScript
> Describe between 1-3 key features of the application.
- Use of API to store scores of the players and to show the scores in the DOM.
- Project with webpack.
- Used HTML Webpack Plugin to generate HTML files.
- Array of leaders is used to populate the HTML.
- Function to iterate over tasks to populate HTML according to task index order.
- Dynamically generate leader list.
- Styling used a wireframe template.
- Code is created in src folder and dist folder is generated automatically.
Have a look the live demo of the website [here](https://prangonghose.github.io/Leaderboard/dist/).
## 💻 Getting Started
To clone the repository in local environment try following steps.
### Prerequisites
- [x] A web browser like Google Chrome.
- [x] A code editor like Visual Studio Code with Git and Node.js.
You can check if Git is installed by running the following command in the terminal.
```
$ git --version
```
Likewise for Node.js and npm for package installation.
```
$ node --version && npm --version
```
### Setup
Clone the repository using [this link](https://github.com/PrangonGhose/Leaderboard.git)
### Install
In the terminal, go to your file directory and run this command.
```
$ git clone https://github.com/PrangonGhose/Leaderboard.git
```
### Get into development
In the terminal, run these commands to get into development.
```
$ cd Leaderboard
$ npm init -y
$ npm install (install dependencies)
$ npm run build (create the optimized for production)
$ npm start (run the app locally)
```
### Usage
This website is applicable for both mobile and desktop version.
### Run tests
### Deployment
👤 **Prangon Ghose**
- GitHub: [@PrangonGhose](https://github.com/PrangonGhose)
- [ ] **Styling of the webpage**
- [ ] **Animation to add functionality**
- [ ] **Adding responsiveness**
Contributions, issues, and feature requests are welcome! Add suggestions by opening new issues.
Feel free to check the [issues page](https://github.com/PrangonGhose/Leaderboard/issues).
Give a ⭐️ if you like this project!
I would like to thank:
- [Microverse](https://www.microverse.org/)
- Code Reviewers
- Coding Partners
This project is [MIT](./LICENSE) licensed.