https://github.com/lily4178993/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.
https://github.com/lily4178993/leaderboard
css3 html5 javascript leaderboard learning-project webpack
Last synced: 6 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/lily4178993/leaderboard
- Owner: lily4178993
- License: mit
- Created: 2023-06-27T14:31:01.000Z (over 2 years ago)
- Default Branch: dev
- Last Pushed: 2024-06-21T11:18:32.000Z (over 1 year ago)
- Last Synced: 2025-04-22T13:19:21.036Z (6 months ago)
- Topics: css3, html5, javascript, leaderboard, learning-project, webpack
- Language: JavaScript
- Homepage: https://lily4178993.github.io/Leaderboard/dist/
- Size: 453 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **Leaderboard**
The leaderboard website displays scores submitted by different players. It also allows you to submit your score.
---
## Table of Contents 📗
- [Built With 🛠](#built-with)
- [Key Features 🏷️](#key-features)
- [Screenshot 📷](#screenshot)
- [Live Demo🚀](#live-demo)
- [Prerequisites 🧱](#prerequisites)
- [Setup ⚙️](#setup)
- [Install 🏗️](#install)
- [Usage 📂](#usage)
- [Author 👤](#author)
- [Contributing 🤝](#contributing)
- [Show your support 🌟](#support)
- [Acknowledgements 🙏](#acknowledgements)
- [FAQ ❓](#fap)
- [License 📝](#license)
---
-
HTML5 markup to build raw structure of this web page -
CSS3 custom properties, FlexBox, Grid to make the website visually attractive - Javascript
-
Linters for coding convention and coding formating - Webpack
---
- **All data are preserved thanks to the external Leaderboard API service.**
---
### **Screenshot 📷**
Below is an overview of the app.
---
This project is hosted on GitHub pages, so if you want to check it online, please click 😊 [here](https://lily4178993.github.io/Leaderboard/dist/).
---
In order to run this project you need:
- A Github account
- Node JS
- Webpack
- A web browser to view output e.g [Microsoft Edge](https://www.microsoft.com/en-us/edge).
- An IDE e.g [Visual studio code](https://code.visualstudio.com/).
- [A terminal](https://code.visualstudio.com/docs/terminal/basics).
---
Clone this repository:
```sh
git clone https://github.com/lily4178993/Leaderboard.git
```
Navigate to the folder
```
cd Leaderboard
```
Checkout the branch
```
git checkout main
```
---
Install all dependencies:
```sh
npm install
```
Run the following code to fixed possible JavaScript linter errors:
```
npx eslint . --fix
```
---
## **Usage 📂**
Open page in browser
```sh
$ open dist/index.html
```
---
## **Author 👤**
You can reach me using these following links:
- Twitter: [@nelly_telli](https://twitter.com/nelly_telli)
- LinkedIn: [Nelly T.](https://www.linkedin.com/in/nelly-t-330414266/)
---
If you have suggestions 📝, ideas 🤔, or bug reports 🐛, please feel free to open an [issue](https://github.com/lily4178993/Leaderboard/issues) on GitHub.
Remember, every contribution, no matter how big or small, makes a difference.
---
Thank you for taking the time to explore my GitHub project! Your support means a lot to me. If you find my project valuable and would like to contribute, here are a few ways you can support me:
- **Star the project ⭐️**: Show your appreciation by starring this GitHub repository. It helps increase visibility and lets others know that the project is well-received.
- **Fork the project 🍴 🎣**: If you're interested in making improvements or adding new features, feel free to fork the project. You can work on your own version and even submit pull requests to suggest changes.
- **Share with others 🗺️**: Spread the word about this project. Share it on social media, mention it in relevant forums or communities, or recommend it to colleagues and friends who might find it useful.
---
I would like to express my sincere gratitude to [Microverse](https://github.com/microverseinc), the dedicated reviewers, and my coding partners. Your unwavering support, and feedbacks have played an immense role in making this journey a resounding success. Thank you for being an integral part of my achievements.
I would also like to thank Icons8 for all the images and icons I used in this project.
---
- **What is Webpack**
- Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included.
- **Why should we use Webpack**
- Webpack goes through your package and creates what it calls a dependency graph which consists of various modules which your webapp would require to function as expected. Then, depending on this graph, it creates a new package which consists of the very bare minimum number of files required, often just a single bundle.js file which can be plugged in to the html file easily and used for the application. It makes our code shorter, cleaner and compiles different javascript module.
---
This project is [MIT](./LICENSE) licensed.