├── .eslintrc.json
├── .eslintrc.jsonNew
├── .github
└── workflows
│ └── linters.yml
├── .gitignore
├── .stylelintrc.json
├── .vscode
└── launch.json
├── LICENSE
├── README.md
├── babel.config.js
├── build
├── index.html
├── index.js
└── index.js.LICENSE.txt
├── db.json
├── jest.config.js
├── package-lock.json
├── package.json
├── src
├── api.js
├── createLists.js
├── index.html
├── index.js
└── index.scss
└── webpack.config.js
/.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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | db*
3 | .gitignore
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Leaderboard API
9 |
10 |
11 |
12 |
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 |
35 |
36 | # 📖 Leaderboard
37 | **"Leaderboard" is a project aimed at facilitating the testing and learning of API implementation in various projects.**
38 |
39 | ## 🛠 Built With
40 |
41 | - HTML
42 | - CSS
43 | - JAVASCRIPT
44 | ### Tech Stack
45 | - Webpack
46 |
47 |
48 | Webpack
49 |
52 |
53 |
54 | ### Key Features
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 | (back to top )
62 |
63 |
64 | ## 🚀 Live Demo
65 |
66 |
67 | - [Live Demo Link](https://calebchris000.github.io/Leaderboard/build/)
68 |
69 | (back to top )
70 |
71 |
72 | ## 💻 Getting Started
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 | (back to top )
117 |
118 |
119 |
120 | ## 👥 Authors
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 | (back to top )
131 |
132 |
133 | ## 🔭 Future Features
134 |
135 |
136 | - [ ] **[The project would be interactive]**
137 |
138 | (back to top )
139 |
140 |
141 |
142 | ## 🤝 Contributing
143 |
144 | Contributions, issues, and feature requests are welcome!
145 |
146 | Feel free to check the [issues page](../../issues/).
147 |
148 | (back to top )
149 |
150 |
151 |
152 | ## ⭐️ Show your support
153 |
154 |
155 | If you like this project...
156 |
157 | (back to top )
158 |
159 |
160 |
161 | ## 🙏 Acknowledgments
162 |
163 |
164 | I would like to thank the people involved in making this project possible.
165 |
166 | (back to top )
167 |
168 |
169 |
170 | (back to top )
171 |
172 |
173 |
174 | ## 📝 License
175 |
176 | This project is [MIT](./LICENSE) licensed.
177 |
178 | (back to top )
179 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable */
2 | module.exports = {
3 | presets: ['@babel/preset-env'],
4 | };
--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Leaderboard Leaderboard
4 |
--------------------------------------------------------------------------------
/build/index.js:
--------------------------------------------------------------------------------
1 |
2 | /*! For license information please see index.js.LICENSE.txt */
3 | (()=>{"use strict";var t={800:(t,e,r)=>{r.d(e,{Z:()=>c});var n=r(81),o=r.n(n),i=r(645),a=r.n(i)()(o());a.push([t.id,'*{font-family:"poppins",sans-serif}body{background-color:#04192b}.title{margin:30px auto;padding:0;color:aqua;margin-left:16%}.container{margin:0 auto;display:flex;padding:10px 0;justify-content:space-evenly}.scoreCard{border:3px solid aqua;border-radius:4px;width:25vw;padding:20px 10px;overflow-y:scroll;height:60vh}.scoreCard::-webkit-scrollbar{display:none}.subWrapper{display:flex;border:3px solid aqua;justify-content:space-around}.recentScores,.refresh{color:aqua;font-weight:600}.recentScores{font-weight:600}.refresh{align-self:center;background-color:#04192b;border:3px solid aqua;color:aqua;padding:5px 10px;transition:all .2s ease;border-radius:4px}.refresh:active{transform:scale(0.96)}.item{margin:10px 0;border:3px solid aqua;border-radius:4px;color:aqua;padding:10px;word-wrap:break-word;font-weight:600;user-select:none;transition:all .3s ease}.item:hover{background-color:aqua;color:#04192b;transform:scale(1.02)}.inputCard{border:3px solid #ff8c00;border-radius:4px;width:25vw;display:flex;flex-direction:column;padding:20px 10px}.addScore{color:#ff8c00;font-weight:600;text-align:center;font-size:1.4rem}#user,#score{height:36px;margin:10px 0;border-radius:4px;background-color:rgba(0,0,0,0);border:3px solid #ff8c00;font-weight:600;color:#ff8c00}#user::placeholder,#score::placeholder{color:#ff8c00}#score::-webkit-inner-spin-button{-webkit-appearance:none}#user:focus,#score:focus{outline:none}#submit{height:36px;align-self:flex-end;color:#ff8c00;border:3px solid #ff8c00;background-color:rgba(0,0,0,0);font-weight:600;border-radius:4px;padding:0 10px;transition:all .2s ease}#submit:active{transform:scale(0.96)}@media screen and (max-width: 320px){.title{font-size:1.2rem;margin:0 auto}.container{flex-direction:column;align-items:center}.scoreCard,.inputCard{width:80vw;margin-bottom:10px}}',""]);const c=a},645:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var r="",n=void 0!==e[5];return e[4]&&(r+="@supports (".concat(e[4],") {")),e[2]&&(r+="@media ".concat(e[2]," {")),n&&(r+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),r+=t(e),n&&(r+="}"),e[2]&&(r+="}"),e[4]&&(r+="}"),r})).join("")},e.i=function(t,r,n,o,i){"string"==typeof t&&(t=[[null,t,void 0]]);var a={};if(n)for(var c=0;c0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=i),r&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=r):l[2]=r),o&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=o):l[4]="".concat(o)),e.push(l))}},e}},81:t=>{t.exports=function(t){return t[1]}},379:t=>{var e=[];function r(t){for(var r=-1,n=0;n{var e={};t.exports=function(t,r){var n=function(t){if(void 0===e[t]){var r=document.querySelector(t);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}e[t]=r}return e[t]}(t);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},216:t=>{t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},565:(t,e,r)=>{t.exports=function(t){var e=r.nc;e&&t.setAttribute("nonce",e)}},795:t=>{t.exports=function(t){var e=t.insertStyleElement(t);return{update:function(r){!function(t,e,r){var n="";r.supports&&(n+="@supports (".concat(r.supports,") {")),r.media&&(n+="@media ".concat(r.media," {"));var o=void 0!==r.layer;o&&(n+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),n+=r.css,o&&(n+="}"),r.media&&(n+="}"),r.supports&&(n+="}");var i=r.sourceMap;i&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleTagTransform(n,t,e.options)}(e,t,r)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},589:t=>{t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={id:n,exports:{}};return t[n](i,i.exports,r),i.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.nc=void 0,(()=>{function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(){e=function(){return r};var r={},n=Object.prototype,o=n.hasOwnProperty,i=Object.defineProperty||function(t,e,r){t[e]=r.value},a="function"==typeof Symbol?Symbol:{},c=a.iterator||"@@iterator",u=a.asyncIterator||"@@asyncIterator",s=a.toStringTag||"@@toStringTag";function l(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{l({},"")}catch(t){l=function(t,e,r){return t[e]=r}}function f(t,e,r,n){var o=e&&e.prototype instanceof d?e:d,a=Object.create(o.prototype),c=new k(n||[]);return i(a,"_invoke",{value:E(t,r,c)}),a}function p(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}r.wrap=f;var h={};function d(){}function v(){}function y(){}var m={};l(m,c,(function(){return this}));var g=Object.getPrototypeOf,w=g&&g(g(_([])));w&&w!==n&&o.call(w,c)&&(m=w);var b=y.prototype=d.prototype=Object.create(m);function x(t){["next","throw","return"].forEach((function(e){l(t,e,(function(t){return this._invoke(e,t)}))}))}function L(e,r){function n(i,a,c,u){var s=p(e[i],e,a);if("throw"!==s.type){var l=s.arg,f=l.value;return f&&"object"==t(f)&&o.call(f,"__await")?r.resolve(f.__await).then((function(t){n("next",t,c,u)}),(function(t){n("throw",t,c,u)})):r.resolve(f).then((function(t){l.value=t,c(l)}),(function(t){return n("throw",t,c,u)}))}u(s.arg)}var a;i(this,"_invoke",{value:function(t,e){function o(){return new r((function(r,o){n(t,e,r,o)}))}return a=a?a.then(o,o):o()}})}function E(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return{value:void 0,done:!0}}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=S(a,r);if(c){if(c===h)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var u=p(t,e,r);if("normal"===u.type){if(n=r.done?"completed":"suspendedYield",u.arg===h)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n="completed",r.method="throw",r.arg=u.arg)}}}function S(t,e){var r=e.method,n=t.iterator[r];if(void 0===n)return e.delegate=null,"throw"===r&&t.iterator.return&&(e.method="return",e.arg=void 0,S(t,e),"throw"===e.method)||"return"!==r&&(e.method="throw",e.arg=new TypeError("The iterator does not provide a '"+r+"' method")),h;var o=p(n,t.iterator,e.arg);if("throw"===o.type)return e.method="throw",e.arg=o.arg,e.delegate=null,h;var i=o.arg;return i?i.done?(e[t.resultName]=i.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,h):i:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,h)}function j(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function O(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function k(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(j,this),this.reset(!0)}function _(t){if(t){var e=t[c];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,n=function e(){for(;++r=0;--n){var i=this.tryEntries[n],a=i.completion;if("root"===i.tryLoc)return r("end");if(i.tryLoc<=this.prev){var c=o.call(i,"catchLoc"),u=o.call(i,"finallyLoc");if(c&&u){if(this.prev=0;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&o.call(n,"finallyLoc")&&this.prev=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),O(r),h}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;O(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:_(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),h}},r}function n(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function o(t){return function(){var e=this,r=arguments;return new Promise((function(o,i){var a=t.apply(e,r);function c(t){n(a,o,i,c,u,"next",t)}function u(t){n(a,o,i,c,u,"throw",t)}c(void 0)}))}}var i=function(){var t=o(e().mark((function t(r,n){return e().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,fetch("https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/v7mmYfE3wwDGVK2OfzPD/scores",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({user:r,score:n})});case 2:case"end":return t.stop()}}),t)})));return function(e,r){return t.apply(this,arguments)}}(),a=function(){var t=o(e().mark((function t(){var r,n;return e().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,fetch("https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/v7mmYfE3wwDGVK2OfzPD/scores");case 2:return r=t.sent,t.next=5,r.json();case 5:return n=t.sent,t.abrupt("return",n);case 7:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}();const c=function(t){var e="",r=document.querySelector(".list");t.sort((function(t,e){return e.score-t.score})).forEach((function(t){var r=t.user,n=t.score,o=r.slice(0,10),i=n.slice(0,2);e+='\n \n '.concat(o,": ").concat(i,"
\n ")})),r.innerHTML=e};var u=r(379),s=r.n(u),l=r(795),f=r.n(l),p=r(569),h=r.n(p),d=r(565),v=r.n(d),y=r(216),m=r.n(y),g=r(589),w=r.n(g),b=r(800),x={};function L(t){return L="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},L(t)}function E(){E=function(){return t};var t={},e=Object.prototype,r=e.hasOwnProperty,n=Object.defineProperty||function(t,e,r){t[e]=r.value},o="function"==typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",c=o.toStringTag||"@@toStringTag";function u(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{u({},"")}catch(t){u=function(t,e,r){return t[e]=r}}function s(t,e,r,o){var i=e&&e.prototype instanceof p?e:p,a=Object.create(i.prototype),c=new k(o||[]);return n(a,"_invoke",{value:x(t,r,c)}),a}function l(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=s;var f={};function p(){}function h(){}function d(){}var v={};u(v,i,(function(){return this}));var y=Object.getPrototypeOf,m=y&&y(y(_([])));m&&m!==e&&r.call(m,i)&&(v=m);var g=d.prototype=p.prototype=Object.create(v);function w(t){["next","throw","return"].forEach((function(e){u(t,e,(function(t){return this._invoke(e,t)}))}))}function b(t,e){function o(n,i,a,c){var u=l(t[n],t,i);if("throw"!==u.type){var s=u.arg,f=s.value;return f&&"object"==L(f)&&r.call(f,"__await")?e.resolve(f.__await).then((function(t){o("next",t,a,c)}),(function(t){o("throw",t,a,c)})):e.resolve(f).then((function(t){s.value=t,a(s)}),(function(t){return o("throw",t,a,c)}))}c(u.arg)}var i;n(this,"_invoke",{value:function(t,r){function n(){return new e((function(e,n){o(t,r,e,n)}))}return i=i?i.then(n,n):n()}})}function x(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return{value:void 0,done:!0}}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=S(a,r);if(c){if(c===f)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var u=l(t,e,r);if("normal"===u.type){if(n=r.done?"completed":"suspendedYield",u.arg===f)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n="completed",r.method="throw",r.arg=u.arg)}}}function S(t,e){var r=e.method,n=t.iterator[r];if(void 0===n)return e.delegate=null,"throw"===r&&t.iterator.return&&(e.method="return",e.arg=void 0,S(t,e),"throw"===e.method)||"return"!==r&&(e.method="throw",e.arg=new TypeError("The iterator does not provide a '"+r+"' method")),f;var o=l(n,t.iterator,e.arg);if("throw"===o.type)return e.method="throw",e.arg=o.arg,e.delegate=null,f;var i=o.arg;return i?i.done?(e[t.resultName]=i.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,f):i:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,f)}function j(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function O(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function k(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(j,this),this.reset(!0)}function _(t){if(t){var e=t[i];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,o=function e(){for(;++n=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var c=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(c&&u){if(this.prev=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),O(r),f}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;O(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:_(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),f}},t}function S(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function j(t){return function(){var e=this,r=arguments;return new Promise((function(n,o){var i=t.apply(e,r);function a(t){S(i,n,o,a,c,"next",t)}function c(t){S(i,n,o,a,c,"throw",t)}a(void 0)}))}}x.styleTagTransform=w(),x.setAttributes=v(),x.insert=h().bind(null,"head"),x.domAPI=f(),x.insertStyleElement=m(),s()(b.Z,x),b.Z&&b.Z.locals&&b.Z.locals;var O=document.getElementById("user"),k=document.getElementById("score"),_=document.getElementById("submit"),P=document.querySelector(".refresh"),T=function(){var t=j(E().mark((function t(e){var r;return E().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e.preventDefault(),t.next=3,i(O.value,k.value);case 3:return O.value="",k.value="",t.next=7,a();case 7:r=t.sent,c(r.result);case 9:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}();_.addEventListener("click",T);var N=function(){var t=j(E().mark((function t(){var e;return E().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,a();case 2:e=t.sent,c(e.result);case 4:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}();P.addEventListener("click",(function(){return N})),window.onload=N})()})();
4 |
5 |
--------------------------------------------------------------------------------
/build/index.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
2 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable */
2 | module.exports = {
3 | transform: {
4 | '^.+\\.jsx?$': 'babel-jest',
5 | },
6 | };
7 |
8 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 | ${slice1}: ${slice2}
14 | `;
15 | });
16 | list.innerHTML = item;
17 | };
18 |
19 | export default createList;
20 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Leaderboard
9 |
10 |
11 |
12 | Leaderboard
13 |
14 |
15 |
16 |
17 |
18 |
Recent Scores
19 |
Refresh
20 |
21 |
22 |
23 |
24 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------