This simple project aims to connect to an API to fetch score data and display it on a LeaderBoard box, as well as provide the tool to submit a new score.

Last update: Apr 6, 2022

Overview

Leader Board: Hit the API!

This simple project aims to connect to an API to fetch score data and display it on a LeaderBoard box, as well as provide the tool to submit a new score.

)

How much did you score last time you played with friends? What about having a healthy but fun competition? Keep track of your points with the LeaderBoard!.

Built With

HTML/SCSS, JavaScript
WebPack, Jest
Visual Studio Code

Live Demo

Live Demo Link

Getting Started

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

Clone this repository with git clonehttps://github.com/JohnFTitor/leaderBoard.git using your terminal or command line.
Change to the project directory by entering :
cd leaderBoard in the terminal

Prerequisites

You need to make sure to have installed the latest version of Node.js and npm on your computer.

Setup

You can clone this repository or simply download the files as a .zip If you want to set up a personal repository based on this one, you can as well fork it.

Install

After clone it and before working on it, you have to run npm install so that all the dependencies of the project get downloaded in your pc locally. Such dependencies include webpack and linters checks, for which you have to either generate your own config file or get one.

Note: If you're a Microverse's Student, you should use the config files provided by the program. Linters Config HTML/CSS and JS

Usage

You're free to use this project however you like it for educational purposes. Just keep in mind the acknowledgment described below

Run linters checks

Linter Checks are automatically run with Github actions when there's a pull request. If you want to run them locally, remember to have the config file in the root of the local project.

Deployment

The deployment can be found in the Github Pages of this repository or through the link provided above

Authors

👤 Andrés Felipe Arroyave Naranjo

GitHub: @JohnFTitor
Twitter: @johnftitor
LinkedIn: Andres

Acknowledgments

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

Comments

LeaderBoard V1.01
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "dev" branch

✅ Add Mobile Version Media Queries.

Final notes

Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0
Add media queries for mobile version
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "mobile-version" branch

✅ Add media queries for mobile version

Final notes

Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0
LeaderBoard V1.0
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "dev" branch

✅ Include basic functionality using leaderBoard API.

✅ Allow users to submit and retrieve scores from the API.

✅ Use LocalStorage to keep the id

Final notes

Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0
Styles
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "styles" branch

✅ Add Styles to elements inside the page.

✅ Add animations to buttons.

✅ Add sorting to leader board elements.

Final notes

Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0
Leader board API
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "leaderBoard-API" branch

✅ Create a Game in the LeaderBoard API on window load.

✅ Use LocalStorage to keep the id of the game.

✅ Implement Submit button to send data to the API.

✅ Implement the Refresh button to retrieve data from the API.

✅ Create test cases for the functions responsible for getting and sending the data.

✅ Use modular JavaScript to separate the API handler functions from the functionality functions.

✅ Use Mocks to imitate the responses of the API for testing.

Final notes

Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0
Basic layout
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "basic-layout" branch

✅ My code follows the style guidelines of this project.

✅ Create the project using webpack.

✅ Set up HTML markup with little styling following the wireframe.

✅ Use ES6 modules to import styling

Final notes

Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0

This simple project aims to connect to an API to fetch score data and display it on a LeaderBoard box, as well as provide the tool to submit a new score.

Related tags

Overview

Leader Board: Hit the API!

Built With

Live Demo

Getting Started

Prerequisites

Setup

Install

Usage

Run linters checks

Deployment

Authors

Acknowledgments

Show your support

📝 License

Comments

LeaderBoard V1.01

Hi there 👋🏻

Sass

Now into the project...

Changes implemented in "dev" branch

Final notes

Add media queries for mobile version

Hi there 👋🏻

Sass

Now into the project...

Changes implemented in "mobile-version" branch

Final notes

LeaderBoard V1.0

Hi there 👋🏻

Sass

Now into the project...

Changes implemented in "dev" branch

Final notes

Styles

Hi there 👋🏻

Sass

Now into the project...

Changes implemented in "styles" branch

Final notes

Leader board API

Hi there 👋🏻

Sass

Now into the project...

Changes implemented in "leaderBoard-API" branch

Final notes

Basic layout

Hi there 👋🏻

Sass

Now into the project...

Changes implemented in "basic-layout" branch

Final notes

Owner

Andrés Felipe Arroyave Naranjo

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. This is a project for learning purposes which I'll practice medium-fidelity wireframes to create a UI.

Leaderboard web display recent scores for different players and it also allows you to submit a new score.

The Leaderboard App displays scores submitted by different players, allows you to submit your score and all data is preserved in the Leaderboard API service.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Built with Html, CSS and JavaScript

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

A leaderboard created using Leaderboard API service, Webpack, and Gitflow. The user can add a new score and refresh to see his ranking in the leaderboard.

Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard. It was built with JavaScript, HTML, and CSS. Thanks to the central LeaderBoard API service all data is preserved

leaderBoard is a project used to add a score, view score list, and refresh score list. It is built using JS, HTML, BootStrap, and API.

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

This website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Built with Webpack and ES6

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to an external API. Technologies used are JavaScript(ES6), HTML5, CSS3, Webpack. Also, the Gitflow workflow was used.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external API.

A leaderboard website which displays scores submitted by different players. It also allows you to submit your score. All data is preserved in the external game API.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. I created this project using ES6 concepts. I connected to the Leadboard API service

Custom alert box using javaScript and css. This plugin will provide the functionality to customize the default JavaScript alert box.

The leaderboard is website displays scores submitted by different players. It also allows you to submit your score.