AndreaM2429 / 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.

Leaderboard

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
    • 🚀 Live demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 "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.

🛠 Built With

Tech Stack

HTML

• This project use HTML.

CSS

• The CSS is used to provide the design in the whole page.

Linters

• The Linters are tools that help us to check and solve the errors in the code
This project count with three linters:
• HTML
• CSS
• JavaScript

Webpack

• HTML Webpack Plugin
• Webpack Style/CSS Loader
• Local dev Server

Key Features

In this section there are some features that you can notice in the project.

• Single page
• LeaderboardAPI usage
• Button refresh: get the information from the API
• Add a new user and score using POST

(back to top)

🚀 Live demo

Live demo.

(back to top)

💻 Getting Started

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

Prerequisites

In order to run this project you need:

• To have a Git in your device : this is in order to clone and modify this project.
• To have a code editor : such as VS code, Atom or another that you would like to use.
• To have a web local server such as XAMPP : this is in with the purpose of you will be able to watch the changes you make in the project.
• Have basic knowledge about HTML, CSS and JS in order to understand the code and be able to modify the elements you want.
• Count with Node.js in your device due to it is a tool needed to run the linters

Setup

Clone this repository to your desired folder:

• Clone this repo on your local device you need to open Git Bash and paste the link with the command

  cd my-folder-name
  $ git clone https://github.com/AndreaM2429/Leaderboard.git

Install

In order can run the linters tools you need use the following command in your local work environment:

  npm install

Note: About the webpack server you need to run the following command.

You can check the documentation here

npm start

Usage

Now you are able to modify the files in the src/, but be careful just modify the HTML, CSS and JS the rest of them are for the funcionality of webpack so NOT MODIFY THEM.

Run tests

To see the linter errors run the following codes for:

• HTML

 npx hint .

• CSS

 npx stylelint "**/*.{css,scss}"
  
 To fix the errors add --fix

• JS

 npx eslint .
  
 To fix the errors add --fix filename.js 
 --fix . is for solving the problems in all the files

Deployment

To deploy this project by someone who isn't the owner is prohibit.

(back to top)

👥 Author

👤 Andrea Manuel

• GitHub: @AndreaM2429
• Twitter: @twitter
• LinkedIn: LinkedIn

(back to top)

🔭 Future Features

• Make deploy

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page and add your thoughts

(back to top)

⭐️ Show your support

If you like this project you could clone the repo and work with it or do the changes in a new branch. Also you could let a message with your thoughts

(back to top)

🙏 Acknowledgments

I would like to thank Microverse for provided the necessary resources for this project.

(back to top)

📝 License

This project is MIT licensed.

(back to top)