📗 Table of Contents

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

🏆 Leaderboard

In this project, I recreated a simple wireframe template for a Leaderboard. This simple web page was built using webpack and served by a webpack dev server.

🛠 Built With

Tech Stack

• HTML
• CSS
• JavaScript (ES6)
• Webpack

Key Features

• Used gitflow.
• Used ES6 modules, with import and export.
• Created an npm project with webpack.

(back to top)

🚀 Live Demo

• 🏆Leaderboard

(back to top)

💻 Getting Started

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

Setup

Clone this repository to your desired folder

Prerequisites

In order to run this project you need: Git should be installed on your local machine to clone it using HTTP or SSH. Otherwise you can download the zip file.

You can clone this project by using the command below

Command : git clone git@github.com:elarhadu/Leaderboard.git

Run project

$ npm install
$ npm start

Open page in browser

$ open src/index.html

To generate the game ID

const newGame = async () => {
  const gameTitle = {
    name: 'Space Runners',
  };

  const response = await fetch(
    'https://us-central1-js-capstone-backend.cloudfunctions.net/api/games',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(gameTitle),
    },
  );

  const result = await response.json();
  console.log(result);
};
newGame();

To fetch the data from the backend and render it to the front end

const fetchData = async () => {
  const gameId = 'copy id generated in the console';
  const response = await fetch(
    `https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/${gameId}/scores`,
  );
  const result = await response.json();
  const data = result.result;
  displayBoard(data);
};

(back to top)

Author

👤 Author

• GitHub: @elarhadu
• Twitter: @elarh_
• LinkedIn: Emmanuella Adu

🔭 Future Features

• I will implement a filter that utilizes the API to organize the results by score.
• I will add an error message if the user wants to add new items.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project please give me a ⭐️

(back to top)

🙏 Acknowledgments

I would like to thank Microverse for the wireframe for this project.

(back to top)

📝 License

This project is MIT licensed.

(back to top)