MariamOsman11/Leaderboard

This Leaderboard website displays scores submitted by different players. it consume the Leaderboard API using JavaScript async and await and add some styling.

Leaderboard

Table of Contents 📗

• About the Project 📖
• Built With 🛠
• Tech Stack 🗜️
• Key Features 🏷️
• Getting Started 💻
• Setup ⚙️
• Prerequisites 🧱
• Install 🏗️
• Usage 📂
• Run tests 🧪
• Deployment
• Authors 👤
• Future Features 🔭
• Contributing 🤝
• Show your support 🌟
• Acknowledgements 🙏
• License 📝

---

---

leaderboard 📖

this project sets-up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. developing a first working version of the app following a wireframe, will consume the Leaderboard API using JavaScript async and await and some styling.

Built With 🛠

Tech Stack 🗜️

Client

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

Server

• Webpack server

---

Key Features 🏷️

• Adding a new item
• Displaying item on the page

(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:

• 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 ⚙️

• Create a new folder to store the files in.

Install 🏗️

• Open your command prompt or terminal and run.
• Clone the repository

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

• Install all dependencies:

      npm install

• Build the project:

      npm run build

  • Run the project:

      npm start

---

Usage 📂

• use your daily task

---

Run tests 🧪

How should it be tested? To run tests, run the following command:

• HTML linter errors run:

npx hint .

• CSS linter errors run:

npx stylelint "**/*.{css,scss}" --fix

• JavaScript linter errors run:

npx eslint . --fix

---

Deployment

You can deploy this project using: GitHub Pages, Vercel or Netlify.

This project was deployed using GitHub Pages. For more information about how to use GitHub pages read here 🤩. If you want to watch a video about how to use GitHub pages instead of reading click here.

Authors 👥

👤 Author1 Mariam

• GitHub: @MariamOsman11
• Twitter: @Mariannaloveee
• LinkedIn: Marianna Osman

(back to top)

---

Future Features 🔭

• Make the app responsive
• Reordering a selected item (as drag-and-drop)

(back to top)

Contributing 🤝

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page

(back to top)

⭐️ Show your support

Give a ⭐️ if you like this project!

(back to top)

🙏 Acknowledgments

Microverse materials

(back to top)

📝 License

This project is MIT licensed.

(back to top)