Leaderboard

The leaderboard website displays scores submitted by different players. It also allows you to submit your score.

---

Table of Contents 📗

• Built With 🛠
• Key Features 🏷️
• Screenshot 📷
• Live Demo🚀
• Prerequisites 🧱
• Setup ⚙️
• Install 🏗️
• Usage 📂
• Author 👤
• Contributing 🤝
• Show your support 🌟
• Acknowledgements 🙏
• FAQ ❓
• License 📝
  
  
  
  

---

Built With 🛠

• 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

---

Key Features 🏷️

• All data are preserved thanks to the external Leaderboard API service.

(back to top)

---

Screenshot 📷

Below is an overview of the app.

(back to top)

---

Live Demo 🚀

This project is hosted on GitHub pages, so if you want to check it online, please click 😊 here.

(back to top)

---

Prerequisites 🧱

In order to run this project you need:

• A Github account
• Node JS
• Webpack
• A web browser to view output e.g Microsoft Edge.
• An IDE e.g Visual studio code.
• A terminal.

---

Setup ⚙️

Clone this repository:

  git clone https://github.com/lily4178993/Leaderboard.git

Navigate to the folder

cd Leaderboard

Checkout the branch

git checkout main

---

** 🏗️**

Install all dependencies:

    npm install

Run the following code to fixed possible JavaScript linter errors:

npx eslint . --fix

---

Usage 📂

Open page in browser

$ open dist/index.html

(back to top)

---

Author 👤

You can reach me using these following links:

• Twitter: @nelly_telli
• LinkedIn: Nelly T.

(back to top)

---

Contributing 🤝

If you have suggestions 📝, ideas 🤔, or bug reports 🐛, please feel free to open an issue on GitHub. Remember, every contribution, no matter how big or small, makes a difference.

(back to top)

---

Show your support 🌟

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.

(back to top)

---

Acknowledgments 🙏

I would like to express my sincere gratitude to Microverse, 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.

(back to top)

---

FAQ ❓

• 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.

(back to top)

---

License 📝

This project is MIT licensed.

(back to top)