This is a mini-app that get scores a user inputs into the app from an Api endpoint created.

  • By Alena Okolike
  • Last update: Sep 10, 2022
  • Comments: 4


This is a leader board that displays scores for each name from an API and was created using javascript, webpacks and ES6 format.

Built With

  • Major languages: HTML, CSS, JS

Getting Started

To get a local copy and running follow these simple example steps. Prerequisites Setup Install Usage Run tests Deployment


  • npm install
  • npm build
  • npm start

Run tests

  • npm test

To see Live version click here

Api consumed click to see


👤 Assumpta Okolike

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!


  • Hat tip to all the Microverse

📝 License

This project is MIT licensed.



  • 1

    finished the second task

    Hello Microverse,

    I have finished the task and called a leaderboard Api with the following requirements:

    • Create a new game with the name of your choice by using the API.
    • Make sure that you saved the ID of your game that will be returned by API.
    • Implement the "Refresh" button that will get all scores for a game created by you from the API (receiving data from the API and parsing the JSON).
    • Implement the form "Submit" button that will save a score for a game created by you (sending data to the API).
    • Use arrow functions instead of the function keyword.
    • Use async and await JavaScript features to consume the API.
    • No styling is required.
  • 2

    finished the first task

    Hello Microverse,

    I finished the first task and ensured I followed through with the outlined requirements:

    • Create an npm project with webpack. (If you need a refresher, check the previous project or webpack exercise).
    • Write plain HTML markup with minimum styling
    • Use ES6 modules, with import and export.
  • 3

    Peer to peer code review

    Issues raised in the morning meeting (30/08/2022)

    Kudos @summyalena 👋 👋 upon completing this milestone, you did great implementing the entire project.

    Main highlights

    • Your code was very neat and organized
    • Nice UI
    • good working practices

    However we raised a few issues here as it will make your entire code even more better than it is.
    Please consider;

    • Authenticating the user input as this will prevent unnecessary calls to the API, which is very costly as it might slow down your application
    • Loading of the data on the API as soon as the page loads and for the user to only refresh when they add a new item
    • On index.html file line number 26 and 27 it is better to add html 5 validation to prevent empty value submission.
  • 4

    Peer to Peer Code Review.

    Hello @summyalena 😄

    You have done well in this project however, there are some suggestions you could consider in future projects.

    • Consider refactoring the logic where you made a get request, since fetch by default makes a GET request.
    • I suggest you follow HTML best practices by using one header tag and one h1 to improve accessibility.
    • Consider using a utility class instead of repeating display: flex; to keep your code base dry.
    • It would also be a good idea to separate concerns since you are using modules, so consider moving the function that makes requests into a separate module.

    Cheers 😀 and happy coding.