Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kidd254/leaderboard

The project is meant to retrieve data from API and display it on the web. The Project also allows for additional data where a user can add their own data through the input fields to be displayed on the web.
https://github.com/kidd254/leaderboard

api bootstrap5 css3 html5 javascript webpack

Last synced: 8 days ago
JSON representation

The project is meant to retrieve data from API and display it on the web. The Project also allows for additional data where a user can add their own data through the input fields to be displayed on the web.

Awesome Lists containing this project

README 

        




  
Leaderboard





# 📗 Table of Contents



- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

- [💻 Getting Started](#getting-started)

  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Usage](#usage)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [📝 License](#license)



# 📖 Leaderboard 



**To Do List** is a project that consists of building a single page application with HTML, CSS and JS that allows users to add and remove books from a list.



## 🛠 Built With 



### Tech Stack 



  Client

  



### Key Features 



- **Support for all Browsers**

- **Use of semantic HTML in the code structure**

- **Manage collections with Class javascript**

- **webpack**

- **Gitflow**

- **API**

- **Single page application approach**



(back to top)



## 🚀 Live Demo 



- [a link to the online version](https://kidd254.github.io/Leaderboard/)



- [a link to a presentation about this project]()



(back to top)



## 💻 Getting Started 



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



### Setup



Clone this repository to your desired folder:



```sh

  cd my-folder-name

  git clone https://github.com/Kidd254/Leaderboard

```



### Prerequisites

In order to install, modify and run this project, it is necessary to have the following applications installed:

- **Git:** to manage the project versions of source code. [You can Download Git here](https://git-scm.com/)

- **Nodejs and NPM:** to install and manage the project dependencies. [Nodejs and NPM installation guide](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

- **A code editor** like Visual Studio Code (Recommended) or any other of your preference. It is necessary to open the project and add or modify the source code. [You can Download Visual Studio Code here](https://code.visualstudio.com/)



It is also important to have at least basic knowledge of HTML, CSS and Javascript languages, so you will be able to understand and work with the html and css code of the project. 

- [Learn the basics of HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)

- [Semantic HTML: What It Is and How to Use It Correctly](https://www.semrush.com/blog/semantic-html5-guide/)

- [Learn the basics of CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)

- [Basic concepts of flexbox](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)

- [Learn flexbox playing with FROGGY](https://flexboxfroggy.com/)

- [A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

- [Web forms — Working with user data](https://developer.mozilla.org/en-US/docs/Learn/Forms)

- [The HTML5 input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)

- [Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)

- [JavaScript basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

- [JavaScript Tutorial](https://www.w3schools.com/js/)

- [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)

- [JavaScript Forms](https://www.w3schools.com/js/js_validation.asp)

- [JavaScript Form Validation](https://www.javatpoint.com/javascript-form-validation)

- [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)

- [Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)



### Install



Install this project by running the next command into your project folder:



```sh

  npm install

```



### Usage



Open the HTML, CSS or Javascript files and modify the internal code and then run the following command:



```sh

  npx run .

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

  npx eslint .

```

This will show you a log with details about errors (if any) and changes that would be necessary to solve those errors and improve the code.



**Note**: Please only modify the HTML, CSS and Javascript files. Do not modify the configuration files of the project.



## 👥 Authors 



👤 **Lawrence Muema Kioko**



- GitHub: [@Kidd254](https://github.com/Kidd254)

- Twitter: [@lawrence Kioko](https://twitter.com/lawrenc98789206)

- LinkedIn: [Lawrence Kioko](https://www.linkedin.com/in/lawrence-kioko-972035240/)



(back to top)



## 🔭 Future Features 



- [x] **Created an npm project with webpack**

- [x] **Wrote plain HTML markup with minimum styling**

- [x] **Used ES6 modules, with import and export**

- [x] **Created a new game with the name of my choice by using the API**

- [x] **Made sure that I saved the ID of my game that will be returned by API**

- [x] **Implemented the "Refresh" button that will get all scores for a game created by me from the API (receiving data from the API and parsing the JSON)**

- [x] **Implemented the form "Submit" button that will save a score for a game created (sending data to the API)**

- [x] **Used arrow functions instead of the function keyword.**

- [x] **Used async and await JavaScript features to consume the API.**

- [x] **improved the look and feel of the application, adding the styles of my choice**

- [x] **Kept the general layout of the wireframe, as the only mandatory requirement**



(back to top)



## 🤝 Contributing 



Contributions, issues, suggestions and feature requests are welcome!

Feel free to check the [issues page](../../issues/).



To do Contributions, please fork this repository, create a new branch and then create a Pull Request from your branch. You can find detailed description of this process in: [A Step by Step Guide to Making Your First GitHub Contribution by Brandon Morelli](https://codeburst.io/a-step-by-step-guide-to-making-your-first-github-contribution-5302260a2940)



(back to top)



## ⭐️ Show your support 



If you liked this project, give me a "Star" (clicking the star button at the beginning of this page), share this repo with your developer community or make your contributions.



(back to top)



## 🙏 Acknowledgments 



I would like to thank my Microverse teammates for their support. They have supported me a lot in carrying out this project, giving me suggestions, good advice and solving my code doubts.



## 📝 License 



This project is [MIT](./LICENSE) licensed.



(back to top)