├── .gitignore
├── babel.config.js
├── jest.config.js
├── .eslintrc.jsonNew
├── src
    ├── createLists.js
    ├── api.js
    ├── index.js
    ├── index.html
    └── index.scss
├── db.json
├── .eslintrc.json
├── .stylelintrc.json
├── webpack.config.js
├── .vscode
    └── launch.json
├── LICENSE
├── package.json
├── .github
    └── workflows
    │   └── linters.yml
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | db*
3 | .gitignore


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable */
2 | module.exports = {
3 |     presets: ['@babel/preset-env'],
4 |   };


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable */
2 | module.exports = {
3 |      transform: {
4 |       '^.+\\.jsx?$': 'babel-jest',
5 |     },
6 |   };
7 |   
8 | 


--------------------------------------------------------------------------------
/.eslintrc.jsonNew:
--------------------------------------------------------------------------------
 1 | {
 2 |     "env": {
 3 |         "browser": true,
 4 |         "commonjs": true,
 5 |         "es2021": true
 6 |     },
 7 |     "extends": "eslint:recommended",
 8 |     "overrides": [
 9 |     ],
10 |     "parserOptions": {
11 |         "ecmaVersion": "latest"
12 |     },
13 |     "rules": {
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/createLists.js:
--------------------------------------------------------------------------------
 1 | const createList = (data) => {
 2 |   let item = '';
 3 | 
 4 |   const list = document.querySelector('.list');
 5 |   const sorted = data.sort((a, b) => b.score - a.score);
 6 | 
 7 |   sorted.forEach((element) => {
 8 |     const { user, score } = element;
 9 |     const slice1 = user.slice(0, 10);
10 |     const slice2 = score.slice(0, 2);
11 |     item += `
12 |     
13 |     <div class="item">${slice1}: ${slice2}</div>
14 |     `;
15 |   });
16 |   list.innerHTML = item;
17 | };
18 | 
19 | export default createList;
20 | 


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "posts": [
 3 |     {
 4 |       "user": "One",
 5 |       "score": "21",
 6 |       "id": 1
 7 |     },
 8 |     {
 9 |       "user": "Two",
10 |       "score": "88",
11 |       "id": 2
12 |     },
13 |     {
14 |       "user": "Three",
15 |       "score": "44",
16 |       "id": 3
17 |     },
18 |     {
19 |       "user": "Four",
20 |       "score": "67",
21 |       "id": 4
22 |     },
23 |     {
24 |       "user": "Caleb",
25 |       "score": "99",
26 |       "id": 5
27 |     },
28 |     {
29 |       "user": "Tracy Myer",
30 |       "score": "69",
31 |       "id": 6
32 |     }
33 |   ]
34 | }


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "env": {
 3 |       "browser": true,
 4 |       "es6": true,
 5 |       "jest": true
 6 |     },
 7 |     "parser": "babel-eslint",
 8 |     "parserOptions": {
 9 |       "ecmaVersion": 2018,
10 |       "sourceType": "module"
11 |     },
12 |     "extends": ["airbnb-base"],
13 |     "rules": {
14 |       "no-shadow": "off",
15 |       "no-param-reassign": "off",
16 |       "eol-last": "off",
17 |       "import/extensions": [ 1, {
18 |         "js": "always", "json": "always"
19 |       }]
20 |     },
21 |     "ignorePatterns": [
22 |       "dist/",
23 |       "build/"
24 |     ]
25 |   }
26 |   


--------------------------------------------------------------------------------
/src/api.js:
--------------------------------------------------------------------------------
 1 | export const postData = async (user, score) => {
 2 |   await fetch(
 3 |     'https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/bmzFv18I2hQKeUzUSOmy/scores',
 4 |     {
 5 |       method: 'POST',
 6 |       headers: { 'Content-Type': 'application/json' },
 7 |       body: JSON.stringify({ user, score }),
 8 |     },
 9 |   );
10 | };
11 | 
12 | export const getData = async () => {
13 |   const send = await fetch(
14 |     'https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/bmzFv18I2hQKeUzUSOmy/scores',
15 |   );
16 |   const response = await send.json();
17 |   return response;
18 | };
19 | 


--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": ["stylelint-config-standard"],
 3 |     "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
 4 |     "rules": {
 5 |       "at-rule-no-unknown": [
 6 |         true,
 7 |         {
 8 |           "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
 9 |         }
10 |       ],
11 |       "scss/at-rule-no-unknown":  [
12 |         true,
13 |         {
14 |           "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
15 |         }
16 |       ],
17 |       "csstree/validator": true
18 |     },
19 |     "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
20 |   }
21 |   


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { postData, getData } from './api.js';
 2 | import createList from './createLists.js';
 3 | import './index.scss';
 4 | 
 5 | const user = document.getElementById('user');
 6 | const score = document.getElementById('score');
 7 | const submit = document.getElementById('submit');
 8 | const refresh = document.querySelector('.refresh');
 9 | 
10 | const upload = async (e) => {
11 |   e.preventDefault();
12 |   await postData(user.value, score.value);
13 |   user.value = '';
14 |   score.value = '';
15 | 
16 |   const display = await getData();
17 |   createList(display.result);
18 | };
19 | 
20 | submit.addEventListener('click', upload);
21 | 
22 | const reload = async () => {
23 |   const get = await getData();
24 |   createList(get.result);
25 | };
26 | 
27 | refresh.addEventListener('click', () => reload);
28 | 
29 | window.onload = reload;
30 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | /*eslint-disable*/
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const path = require('path');
 4 | 
 5 | module.exports = {
 6 |   entry: {
 7 |     index: path.resolve(__dirname, 'src', 'index.js'),
 8 |   },
 9 |   output: {
10 |     path: path.resolve(__dirname, 'build'),
11 |   },
12 |   mode: 'development',
13 | 
14 |   plugins: [
15 |     new HtmlWebpackPlugin({
16 |       template: path.resolve(__dirname, 'src', 'index.html'),
17 |     }),
18 |   ],
19 |   module: {
20 |     rules: [
21 |       {
22 |         test: /\.scss$/,
23 |         use: ['style-loader', 'css-loader', 'sass-loader'],
24 |       },
25 | 
26 |       {
27 |         test: /\.js$/,
28 |         exclude: /node_modules/,
29 |         use: ['babel-loader'],
30 |       },
31 |       {
32 |         test: /\.(png|svg|jpg|jpeg|gif)$/i,
33 |         type: 'asset/resource',
34 |       },
35 |     ],
36 |   },
37 | };
38 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Leaderboard</title>
 9 | </head>
10 | 
11 | <body>
12 |     <h1 class="title">Leaderboard</h1>
13 | 
14 |     <div class="container">
15 |        
16 |         <div class="scoreCard">
17 |             <div class="subWrapper">
18 |                 <p class="recentScores">Recent Scores</p>
19 |                 <button class="refresh">Refresh</button>
20 |              </div>
21 |              <div class="list"></div>
22 |         </div>
23 | 
24 |         <form action="" class="inputCard">
25 |             <p class="addScore">Add your score</p>
26 |             <input type="text" name="" id="user" placeholder="Your name" maxlength="10" required>
27 |             <input type="number" name="" id="score" placeholder="Your score" required>
28 |             <button type="submit" id="submit">Submit</button>
29 |         </form>
30 |     </div>
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Use IntelliSense to learn about possible attributes.
 3 |     // Hover to view descriptions of existing attributes.
 4 |     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |     "version": "0.2.0",
 6 |     "configurations": [
 7 |         {
 8 |             "type": "node",
 9 |             "name": "vscode-jest-tests.v2",
10 |             "request": "launch",
11 |             "args": [
12 |                 "--runInBand",
13 |                 "--watchAll=false",
14 |                 "--testNamePattern",
15 |                 "${jest.testNamePattern}",
16 |                 "--runTestsByPath",
17 |                 "${jest.testFile}"
18 |             ],
19 |             "cwd": "${workspaceFolder}",
20 |             "console": "integratedTerminal",
21 |             "internalConsoleOptions": "neverOpen",
22 |             "disableOptimisticBPs": true,
23 |             "program": "${workspaceFolder}/node_modules/.bin/jest",
24 |             "windows": {
25 |                 "program": "${workspaceFolder}/node_modules/jest/bin/jest"
26 |             }
27 |         }
28 |     ]
29 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Caleb Nwaizu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "leaderboard",
 3 |   "version": "1.0.0",
 4 |   "description": "Leaderboard is an application that record names of sports people alongside their scores.",
 5 |   "main": "babel.config.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "webpack serve --open",
 9 |     "build": "webpack --mode production",
10 |     "dev": "webpack --mode development",
11 |     "json": "json-server --watch db.json"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/calebchris000/Leaderboard.git"
16 |   },
17 |   "keywords": [],
18 |   "author": "",
19 |   "license": "ISC",
20 |   "bugs": {
21 |     "url": "https://github.com/calebchris000/Leaderboard/issues"
22 |   },
23 |   "homepage": "https://github.com/calebchris000/Leaderboard#readme",
24 |   "devDependencies": {
25 |     "@babel/core": "^7.21.0",
26 |     "@babel/preset-env": "^7.20.2",
27 |     "@types/jest": "^29.4.0",
28 |     "babel-eslint": "^10.1.0",
29 |     "babel-jest": "^29.5.0",
30 |     "babel-loader": "^9.1.2",
31 |     "css-loader": "^6.7.3",
32 |     "eslint": "^7.32.0",
33 |     "eslint-config-airbnb-base": "^14.2.1",
34 |     "eslint-plugin-import": "^2.27.5",
35 |     "html-webpack-plugin": "^5.5.0",
36 |     "jest": "^29.5.0",
37 |     "sass": "^1.58.3",
38 |     "sass-loader": "^13.2.0",
39 |     "style-loader": "^3.3.1",
40 |     "webpack": "^5.75.0",
41 |     "webpack-cli": "^5.0.1",
42 |     "webpack-dev-server": "^4.11.1"
43 |   },
44 |   "dependencies": {
45 |     "json-server": "^0.17.2"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/.github/workflows/linters.yml:
--------------------------------------------------------------------------------
 1 | name: Linters
 2 | 
 3 | on: pull_request
 4 | 
 5 | env:
 6 |   FORCE_COLOR: 1
 7 | 
 8 | jobs:
 9 |   lighthouse:
10 |     name: Lighthouse
11 |     runs-on: ubuntu-22.04
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - uses: actions/setup-node@v1
15 |         with:
16 |           node-version: "12.x"
17 |       - name: Setup Lighthouse
18 |         run: npm install -g @lhci/cli@0.7.x
19 |       - name: Lighthouse Report
20 |         run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
21 |   webhint:
22 |     name: Webhint
23 |     runs-on: ubuntu-22.04
24 |     steps:
25 |       - uses: actions/checkout@v2
26 |       - uses: actions/setup-node@v1
27 |         with:
28 |           node-version: "12.x"
29 |       - name: Setup Webhint
30 |         run: |
31 |           npm install --save-dev hint@7.x
32 |           [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
33 |       - name: Webhint Report
34 |         run: npx hint .
35 |   stylelint:
36 |     name: Stylelint
37 |     runs-on: ubuntu-22.04
38 |     steps:
39 |       - uses: actions/checkout@v2
40 |       - uses: actions/setup-node@v1
41 |         with:
42 |           node-version: "12.x"
43 |       - name: Setup Stylelint
44 |         run: |
45 |           npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
46 |           [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
47 |       - name: Stylelint Report
48 |         run: npx stylelint "**/*.{css,scss}"
49 |   eslint:
50 |     name: ESLint
51 |     runs-on: ubuntu-22.04
52 |     steps:
53 |       - uses: actions/checkout@v2
54 |       - uses: actions/setup-node@v1
55 |         with:
56 |           node-version: "12.x"
57 |       - name: Setup ESLint
58 |         run: |
59 |           npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
60 |           [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
61 |       - name: ESLint Report
62 |         run: npx eslint .
63 |   nodechecker:
64 |     name: node_modules checker
65 |     runs-on: ubuntu-22.04
66 |     steps:
67 |       - uses: actions/checkout@v2
68 |       - name: Check node_modules existence
69 |         run: |
70 |           if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi
71 | 


--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
  1 | $orange: #ff8c00;
  2 | $blue: #0ff;
  3 | $dark-blue: rgb(4, 25, 43);
  4 | $odd: rgb(1, 191, 191);
  5 | 
  6 | * {
  7 |   font-family: "poppins", sans-serif;
  8 | }
  9 | 
 10 | body {
 11 |   background-color: $dark-blue;
 12 | }
 13 | 
 14 | .title {
 15 |   margin: 30px auto;
 16 |   padding: 0;
 17 |   color: $blue;
 18 |   margin-left: 16%;
 19 | }
 20 | 
 21 | .container {
 22 |   margin: 0 auto;
 23 |   display: flex;
 24 |   padding: 10px 0;
 25 |   justify-content: space-evenly;
 26 | }
 27 | 
 28 | .scoreCard {
 29 |   border-radius: 4px;
 30 |   width: 25vw;
 31 |   padding: 20px 10px;
 32 |   overflow-y: scroll;
 33 |   height: 60vh;
 34 | }
 35 | 
 36 | .scoreCard::-webkit-scrollbar {
 37 |   display: none;
 38 | }
 39 | 
 40 | .subWrapper {
 41 |   display: flex;
 42 |   justify-content: space-around;
 43 |   position: sticky;
 44 |   top: -30px;
 45 |   margin: 0 auto;
 46 |   background-color: $dark-blue;
 47 |   z-index: 2;
 48 | }
 49 | 
 50 | .recentScores,
 51 | .refresh {
 52 |   color: $blue;
 53 |   font-weight: 600;
 54 | }
 55 | 
 56 | .recentScores {
 57 |   font-weight: 600;
 58 | }
 59 | 
 60 | .refresh {
 61 |   align-self: center;
 62 |   background-color: $dark-blue;
 63 |   border: 3px solid $blue;
 64 |   color: $blue;
 65 |   padding: 5px 10px;
 66 |   transition: all 0.2s ease;
 67 |   border-radius: 4px;
 68 | }
 69 | 
 70 | .refresh:active {
 71 |   transform: scale(0.96);
 72 | }
 73 | 
 74 | .list {
 75 |   border: 3px solid $blue;
 76 |   padding: 10px;
 77 | }
 78 | 
 79 | .item {
 80 |   margin: 10px 0;
 81 |   border: 3px solid $blue;
 82 |   border-radius: 4px;
 83 |   color: $blue;
 84 |   padding: 10px;
 85 |   word-wrap: break-word;
 86 |   font-weight: 600;
 87 |   user-select: none;
 88 |   transition: all 0.3s ease;
 89 | }
 90 | 
 91 | .item:hover {
 92 |   background-color: $blue;
 93 |   color: $dark-blue;
 94 |   transform: scale(1.02);
 95 | }
 96 | 
 97 | .item:nth-child(odd) {
 98 |   border: 3px solid white;
 99 | }
100 | 
101 | .item:nth-child(odd):hover {
102 |   background-color: white;
103 | }
104 | 
105 | .inputCard {
106 |   border-radius: 4px;
107 |   width: 25vw;
108 |   display: flex;
109 |   flex-direction: column;
110 |   padding: 20px 10px;
111 | }
112 | 
113 | .addScore {
114 |   color: $orange;
115 |   font-weight: 600;
116 |   text-align: center;
117 |   font-size: 1.4rem;
118 | }
119 | 
120 | #user,
121 | #score {
122 |   height: 36px;
123 |   margin: 10px 0;
124 |   border-radius: 4px;
125 |   background-color: rgba(0, 0, 0, 0);
126 |   border: 3px solid $orange;
127 |   font-weight: 600;
128 |   color: $orange;
129 | }
130 | 
131 | #user::placeholder,
132 | #score::placeholder {
133 |   color: $orange;
134 | }
135 | 
136 | #score::-webkit-inner-spin-button {
137 |   -webkit-appearance: none;
138 | }
139 | 
140 | #user:focus,
141 | #score:focus {
142 |   outline: none;
143 | }
144 | 
145 | #submit {
146 |   height: 36px;
147 |   align-self: flex-end;
148 |   color: $orange;
149 |   border: 3px solid $orange;
150 |   background-color: rgba(0, 0, 0, 0);
151 |   font-weight: 600;
152 |   border-radius: 4px;
153 |   padding: 0 10px;
154 |   transition: all 0.2s ease;
155 | }
156 | 
157 | #submit:active {
158 |   transform: scale(0.96);
159 | }
160 | 
161 | @media screen and (max-width: 320px) {
162 |   .title {
163 |     font-size: 1.2rem;
164 |     margin: 0 auto;
165 |   }
166 | 
167 |   .container {
168 |     flex-direction: column;
169 |     align-items: center;
170 |   }
171 | 
172 |   .scoreCard,
173 |   .inputCard {
174 |     width: 80vw;
175 |     margin-bottom: 10px;
176 |   }
177 | }
178 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <a name="readme-top"></a>
  2 | 
  3 | 
  4 | <div align="center">
  5 |   <!-- You are encouraged to replace this logo with your own! Otherwise you can also remove it. -->
  6 |   <br/>
  7 | 
  8 |   <h3><b>Leaderboard API</b></h3>
  9 | 
 10 | </div>
 11 | 
 12 | <!-- TABLE OF CONTENTS -->
 13 | 
 14 | # 📗 Table of Contents
 15 | 
 16 | - [📗 Table of Contents](#-table-of-contents)
 17 | - [📖 Leaderboard ](#-leaderboard-)
 18 |   - [🛠 Built With ](#-built-with-)
 19 |     - [Tech Stack ](#tech-stack-)
 20 |     - [Key Features ](#key-features-)
 21 |   - [🚀 Live Demo ](#-live-demo-)
 22 |   - [💻 Getting Started ](#-getting-started-)
 23 |     - [Prerequisites](#prerequisites)
 24 |     - [Setup](#setup)
 25 |     - [Install](#install)
 26 |     - [Usage](#usage)
 27 |   - [👥 Authors ](#-authors-)
 28 |   - [🔭 Future Features ](#-future-features-)
 29 |   - [🤝 Contributing ](#-contributing-)
 30 |   - [⭐️ Show your support ](#️-show-your-support-)
 31 |   - [🙏 Acknowledgments ](#-acknowledgments-)
 32 |   - [📝 License ](#-license-)
 33 | 
 34 | <!-- PROJECT DESCRIPTION -->
 35 | 
 36 | # 📖 Leaderboard <a name="todo-list"></a>
 37 | **"Leaderboard" is a project aimed at facilitating the testing and learning of API implementation in various projects.**
 38 | 
 39 | ## 🛠 Built With <a name="built-with"></a>
 40 | 
 41 | - HTML
 42 | - CSS
 43 | - JAVASCRIPT
 44 | ### Tech Stack <a name="tech-stack"></a>
 45 | - Webpack
 46 | 
 47 | <details>
 48 |   <summary>Webpack</summary>
 49 |   <ul>
 50 |     <li><a href="https://webpack.js.org">Webpack</a></li>
 51 |   </ul>
 52 | </details>
 53 | 
 54 | ### Key Features <a name="key-features"></a>
 55 | 
 56 | 
 57 | - **[Implementation of API to store items to the server]**
 58 | - **[Intuitive UI that improves the visitng experience]**
 59 | - **[A reload button to refresh your list]**
 60 | 
 61 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 62 | 
 63 | 
 64 | ## 🚀 Live Demo <a name="live-demo"></a>
 65 | 
 66 | 
 67 | - [Live Demo Link](https://calebchris000.github.io/Leaderboard/build/)
 68 | 
 69 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 70 | 
 71 | 
 72 | ## 💻 Getting Started <a name="getting-started"></a>
 73 | 
 74 | 
 75 | To get a local copy up and running, follow these steps.
 76 | 
 77 | ### Prerequisites
 78 | 
 79 | In order to run this project you need:
 80 | 
 81 | 
 82 | ```sh
 83 |  npm install webpack webpack-cli webpack-dev-server
 84 | ```
 85 | 
 86 | ### Setup
 87 | 
 88 | Clone this repository to your desired folder:
 89 | 
 90 | 
 91 | ```sh
 92 |   git clone https://github.com/calebchris000/Hit-The-API.git
 93 |   cd my-folder
 94 | ```
 95 | ### Install
 96 | 
 97 | Install this project with:
 98 | 
 99 | ```sh
100 |   cd my-project
101 |   npm init -y
102 |   npm install
103 |   
104 | ```
105 | 
106 | ### Usage
107 | 
108 | To run the project, execute the following command:
109 | 
110 | ```sh
111 |   npm run build
112 |   or
113 |   npm start
114 | ```
115 | 
116 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
117 | 
118 | <!-- AUTHORS -->
119 | 
120 | ## 👥 Authors <a name="authors"></a>
121 | 
122 | 
123 | 👤 **Caleb Nwaizu**
124 | 
125 | - GitHub: [@githubhandle](https://github.com/calebchris000)
126 | - Twitter: [@twitterhandle](https://twitter.com/calebchris000)
127 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/caleb-nwaizu-b815aa23b/)
128 | 
129 | 
130 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
131 | 
132 | 
133 | ## 🔭 Future Features <a name="future-features"></a>
134 | 
135 | 
136 | - [ ] **[The project would be interactive]**
137 | 
138 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
139 | 
140 | <!-- CONTRIBUTING -->
141 | 
142 | ## 🤝 Contributing <a name="contributing"></a>
143 | 
144 | Contributions, issues, and feature requests are welcome!
145 | 
146 | Feel free to check the [issues page](../../issues/).
147 | 
148 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
149 | 
150 | <!-- SUPPORT -->
151 | 
152 | ## ⭐️ Show your support <a name="support"></a>
153 | 
154 | 
155 | If you like this project...
156 | 
157 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
158 | 
159 | <!-- ACKNOWLEDGEMENTS -->
160 | 
161 | ## 🙏 Acknowledgments <a name="acknowledgements"></a>
162 | 
163 | 
164 | I would like to thank the people involved in making this project possible.
165 | 
166 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
167 | 
168 | <!-- FAQ (optional) -->
169 | 
170 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
171 | 
172 | <!-- LICENSE -->
173 | 
174 | ## 📝 License <a name="license"></a>
175 | 
176 | This project is [MIT](./LICENSE) licensed.
177 | 
178 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
179 | 


--------------------------------------------------------------------------------