├── .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

Recent Scores

Add your score

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 | 20 |
21 |
22 |
23 | 24 |
25 |

Add your score

26 | 27 | 28 | 29 |
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 | --------------------------------------------------------------------------------