/LeaderBoard

I used JavaScript to build this project main features are getting data from an API and sending data to API . Get data by clicking the refresh button

Primary LanguageJavaScript

HS-Game Leaderboard project

JavaScript leaderboard project using API. Getting data form and sending data to API

screenshot

Description

In this project I setup a JavaScript project for the Leaderboard list app, using webpack and ES6 features. I developed a first working version of the app following a wire frame, with minimal styling. Secondly, Iconsume the Leaderboard API using JavaScript async and await and add some styling.

Instructions:

Phase 1, setup project

  • Use Gitflow
  • Create an npm project with webpack
  • Write plain HTML markup with minimal styling (Creating the HTML structure), functionality first
  • Don't make API calls (This is the second part of the project).
  • Use ES6 modules, with import and export.

Phase 2, hit the API

  • Read the Leader board API documentation to learn how to use this API.
  • Create a new game with the name of your choice by using the API.
  • Implement the "Refresh" button (receiving data from the API and parsing the JSON).
  • Implement the form "Submit" button (sending data to the API).
  • Use async and await JavaScript features to consume the API.
  • No styling is required.

Phase 3, final touches

  • At this point I have a fully working app that uses only basic styles to make the layout work.
  • Now I improve the look and feel of the application, adding the styles of your choice.
  • keeping the general layout of the wire frame, this is the only mandatory requirement.
  • You can use plain CSS or any CSS framework, it's up to you.

Built With

  • Major languages: HTML, CSS, JS
  • Frameworks: none
  • Technologies used: Git, webpack, API, Postman

Live Demo

Getting Started

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

-Open terminal -Clone this project by the command: $ git clone https://github.com/HSMathebula/Awesome-books-plain-JavaScript-with-objects.git

Then go to the main folder using the next command: $ cd LeaderBoard.git

Prerequisites IDE to edit and run the code (We use Visual Studio Code 🔥). Git to versionning your work.

Prerequisites

  • Internet connection and browser
  • A text editor(preferably Visual Studio Code)
  • Browser

Setup

  • No setup required

Install

Usage

  • Clone the repository using git clone https://github.com/HSMathebula/LeaderBoard.git
  • Change directory into the project folder cd Leaderboard
  • Run npm install from the terminal
  • Run npm start from the terminal
  • A new browser will open automatically with application loaded

Run tests

  • N/A

Deployment

  • All the files necessary for deployment are in the /dist folder

Authors

👤 Happen Mathenula

🤝 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!

Acknowledgments

📝 License

This project is MIT licensed.

Live Demo Link