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.

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.

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. https://github.com/summyalena/Leaderboard/blob/fe337d3f4fa1644a17cc57a2106919e750415bad/src/index.html#L26-L27

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.