In this activity I first set up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. After then I continue working on the Leaderboard list app, sending and receiving data from/to the Leaderboard API.

  • By Pierre Celestin Moussa
  • Last update: Sep 26, 2022
  • Comments: 4

Description of the project

In this activity I finalize the project by adding more styling. The puepose is to understand how to use a medium-fidelity wireframes to create a UI.

Built With

  • Major languages: HTML, CSS and Javascript
  • Linters for HTML & CSS and Javascript5(Webhint, Lighthouse, Stylelint, Eslint)
  • npm and webpack

Getting Started

To get a local copy up and running follow these simple example steps in your terminal.

Prerequisites

  • Code editor: Vscode or Sublime
  • Git

Setup

  1. Download the Zip file or clone the repo with:

git clone https://github.com/Piercel2022/leaderboard.git

  1. To access cloned directory run:

cd leaderboard

  1. Open it with the live server

Link demo

live demo

Install, build and run:

To install linters and other project's dependencies run: npm install To build the project run in the terminal: npm run build To run the project, run in the terminal: npm start

Run Test for Linters

For tracking linter errors locally you need to follow these steps:

  1. For tracking linter errors in HTML files run:

npx hint .

  1. For tracking linter errors in CSS or SASS files run:

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

  1. For tracking linter errors in the Javascript files run:

npx eslint .

Author

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues here.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc

📝 License

This project is (./MIT.md) licensed.

Github

https://github.com/Piercel2022/leaderboard

Comments(4)

  • 1

    Leaderboard: Final touches

    In this activity I finalize the project by adding more styling. The purpose is to understand how to use a medium-fidelity wireframes to create a UI. I improved the look and feel of the application, by adding some styles. The overview of the application running in the webpack server look like the following screenshoot below.

    leaderboardDesktop

  • 2

    Leaderboard API

    In this activity, I create a game that consume the Leaderboad API.

    • I Implemented the "Refresh" button (receiving data from the API and parsing the JSON).
    • I Implemented the form "Submit" button that send data to the API.
    • I make the use of arrow functions instead of the function keyword.
    • I make the use of async and await JavaScript features to consume the API. The screenshot below give a simple illustration how the interface look like: leaderboard2
  • 3

    Leaderboard: Project setup

    In this activity I have created an npm project with webpack. I just write plain HTML markup with minimum styling. Running on the terminal "npm start", then the browser show you the picture of the project look like the screenshot below setup

  • 4

    leaderboard project review

    Good job on your project :tada:

    • [ ] your project is functioning as required :+1:
    • [ ] good documentation :+1:
    • [ ] clean code :+1:

    Here are some optional changes you can do to better your project

    :green_circle: better your readme file by giving the users direct commands to copy to make it easy to copy and paste :green_circle: it would be better if you use js modules this would make your project better

    cheers :tada: happy cooding

Popular Tag

Related