JavaScript leaderboard project using API. Getting data form and sending data to API
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.
- 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.
- 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
andawait
JavaScript features to consume the API. - No styling is required.
- 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.
- Major languages: HTML, CSS, JS
- Frameworks: none
- Technologies used: Git, webpack, API, Postman
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.
- Internet connection and browser
- A text editor(preferably Visual Studio Code)
- Browser
- No setup required
- 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
- N/A
- All the files necessary for deployment are in the /dist folder
👤 Happen Mathenula
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
This project is MIT licensed.