An HTML, CSS and JavaScript project related to a leaderboard, where you can submit a specific score data using an API request

  • By Nicolas Gonzalez
  • Last update: Mar 3, 2022
  • Comments: 4

LeaderBoard-Project

In this project we use Webpack dependecy and a external API for displaying the leaderboard data inside the dom.

Built with

  • HTML-CSS-JS
  • WebPack
  • Node Modules
  • GIT/GITHUH/GITFLOW
  • API

Project Functionality video

AwesomeScreenshot-26_01_2022.20.18.15.mp4

Project final View

Leaderboard

How to set up

If you want to see the project in detail, check the following instructions:

  1. clone the repo locally.
  2. open the repo command line path and type in (npm install).
  3. run (npm run build) to ensure no webpack errors.
  4. finally type (npm run start).

Live page

Authors

👤 Nicolas Gonzalez

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check leave recommendation in issues page

Github

https://github.com/Nicolaswg/LeaderBoard-Project

Comments(4)

  • 1

    LeaderBoard Styling

    Main Point

    🦅

    • Add a new style to LeaderBoar Project.
    • Preserved original layout.
    • Plain CSS or CSS framework.

    Set up Project 💻

    • remember to run (npm install).
    • run (npm run build) and finally type (npm run start).
  • 2

    Adding Leaderboard API functionality

    Main point

    🦅

    In this new PR, we implement API async functions for Posting and Getting Data which is displayed dynamically inside the dom.

    Change Made ✏️

    • New es6 module function
    • Post and Get API method
  • 3

    Initial LeaderBoard Porject Structure

    Main Point

    🦅

    In this new PR we are using webpack and ES6 modules, for creating the starting point of a future API request Leaderboard app

    Change made ✏️

    • Add HTML, CSS squeleton
    • Add Dynamic leaderboard list display
    • Use GitFlow for structuring the project workflow
  • 4

    Morning session review

    Hello, Nicolas, you made excellent work, there is just 1 or 2 thing you could change to improve the code

    • [ ] You should delete all the console.log in your code. Is a good way to test, but in the final product is not necessary, so it would be good to make your project even better
    • [ ] The last function that looks like this: const DisplayScore = async () => { await fetch(https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/${id}/scores/).then((res) => res.json().then((data) => { Doesn't really need to be async, since you are making a new fetch without requesting data from a promise or an API, it may consume extra time to process it, so it would be nice if it was just a normal arrow function, just to improve your code

Popular Tag

Related