├── .gitignore ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── webpack.config.js ├── module └── api.js ├── MIT.md ├── src ├── index.html ├── index.js └── styles.css ├── dist ├── index.html └── main.js ├── package.json ├── README.md └── .github └── workflows └── linters.yml /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | mode: 'development', 6 | entry: path.resolve(__dirname, 'src/index.js'), 7 | output: { 8 | path: path.resolve(__dirname, 'dist'), 9 | filename: 'main.js', 10 | }, 11 | devServer: { 12 | static: { 13 | directory: path.resolve(__dirname, 'dist'), 14 | }, 15 | port: 3000, 16 | open: true, 17 | hot: true, 18 | compress: true, 19 | historyApiFallback: true, 20 | }, 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.css$/, 25 | use: ['style-loader', 'css-loader'], 26 | }, 27 | ], 28 | }, 29 | plugins: [ 30 | new HtmlWebpackPlugin({ 31 | title: 'LeaderBoard', 32 | filename: 'index.html', 33 | template: 'src/index.html', 34 | }), 35 | ], 36 | }; -------------------------------------------------------------------------------- /module/api.js: -------------------------------------------------------------------------------- 1 | // function for getting result when a new game is added from the same ID 2 | const GetScores = async () => { 3 | const getResult = await fetch('https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/owQWvuBZRBl6oZNoQKqG/scores/').then((res) => res.json()); 4 | return getResult; 5 | }; 6 | 7 | // function for generating a new game from the input through a game ID 8 | const NewApiGame = async () => { 9 | const name = document.getElementById('name'); 10 | const score = document.getElementById('score'); 11 | 12 | await fetch('https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/owQWvuBZRBl6oZNoQKqG/scores/', { 13 | method: 'POST', 14 | headers: { 15 | 'Content-Type': 'application/json; charset=UTF-8', 16 | }, 17 | body: JSON.stringify({ 18 | user: name.value, 19 | score: score.value, 20 | }), 21 | }); 22 | }; 23 | 24 | export { NewApiGame, GetScores }; -------------------------------------------------------------------------------- /MIT.md: -------------------------------------------------------------------------------- 1 | ## Copyright 2021, PROMISE OKECHUKWU 2 | 3 | ###### Please delete this line and the next one 4 | 5 | ###### APP TYPE can be a webpage/website, a web app, a software and so on 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy of this Website and associated documentation files, to deal in the Website without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Website, and to permit persons to whom the Website is furnished to do so, subject to the following conditions: 8 | 9 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Website. 10 | 11 | THE WEBSITE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE WEBSITE OR THE USE OR OTHER DEALINGS IN THE WEBSITE. 12 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | LeaderBoard 9 | 10 | 11 | 12 |

LeaderBoard

13 | 14 |
15 | 16 |
17 |

18 |
19 |

Recent Scores

20 | 21 |
22 | 23 | 24 |
25 |
    26 |
27 |
28 |
29 | 30 | 31 |
32 | 33 |
34 | 35 |
36 | 37 |
38 | 39 |
40 |
41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | LeaderBoard 9 | 10 | 11 | 12 |

LeaderBoard

13 | 14 |
15 | 16 |
17 |

18 |
19 |

Recent Scores

20 | 21 |
22 | 23 | 24 |
25 |
    26 |
27 |
28 |
29 | 30 | 31 |
32 | 33 |
34 | 35 |
36 | 37 |
38 | 39 |
40 |
41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "leaderboard", 3 | "version": "1.0.0", 4 | "description": "![](https://img.shields.io/badge/Microverse-blueviolet)", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack", 8 | "start": "webpack serve --open", 9 | "dev": "webpack serve", 10 | "deploy": "gh-pages -d dist/" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/PromzzyKoncepts/LeaderBoard.git" 15 | }, 16 | "keywords": [], 17 | "author": "", 18 | "license": "ISC", 19 | "bugs": { 20 | "url": "https://github.com/PromzzyKoncepts/LeaderBoard/issues" 21 | }, 22 | "homepage": "https://github.com/PromzzyKoncepts/LeaderBoard#readme", 23 | "devDependencies": { 24 | "babel-eslint": "^10.1.0", 25 | "css-loader": "^6.7.1", 26 | "eslint": "^7.32.0", 27 | "eslint-config-airbnb-base": "^14.2.1", 28 | "eslint-plugin-import": "^2.26.0", 29 | "gh-pages": "^4.0.0", 30 | "hint": "^7.1.1", 31 | "html-webpack-plugin": "^5.5.0", 32 | "sass": "^1.54.5", 33 | "sass-loader": "^13.0.2", 34 | "style-loader": "^3.3.1", 35 | "stylelint": "^13.13.1", 36 | "stylelint-config-standard": "^21.0.0", 37 | "stylelint-csstree-validator": "^1.9.0", 38 | "stylelint-scss": "^3.21.0", 39 | "webpack": "^5.74.0", 40 | "webpack-cli": "^4.10.0", 41 | "webpack-dev-server": "^4.10.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/Microverse-blueviolet) 2 | 3 | # LeaderBoard 4 | 5 | > The leaderboard website displays scores submitted by different players. It also allows you to submit your score. 6 | 7 | ## Built With 8 | 9 | - Html,JS,CSS 10 | - Webpack and other dependencies 11 | - Git, Github, linters 12 | 13 | ## Setup 14 | 15 | To get a local copy up and running you'll need to have [NodeJS](https://nodejs.org/en/download/) installed on your local machine. 16 | 17 | ### Install 18 | 19 | After installing NodeJS please follow the next steps... 20 | 21 | ### Usage 22 | 23 | ```bash 24 | 25 | npm i 26 | 27 | ``` 28 | 29 | -- for installing dev dependecies. 30 | 31 | ```bash 32 | 33 | npm run build 34 | 35 | ``` 36 | 37 | -- to run the project. 38 | 39 | ### Testing 40 | 41 | ```bash 42 | 43 | npm run dev 44 | 45 | ```` 46 | 47 | ## Live Demo 48 | 49 | [Live Demo Link](https://promzzykoncepts.github.io/LeaderBoard/) 50 | 51 | ## Author 52 | 53 | 👤 **PROMISE OKECHUKWU** 54 | 55 | - GitHub: [@promzzykoncepts](https://github.com/PromzzyKoncepts) 56 | - Twitter: [@promzzy](https://twitter.com/prOmzzy) 57 | - LinkedIn: [promiseokechukwu](https://linkedin.com/in/promiseokechukwu) 58 | 59 | ## 🤝 Contributing 60 | 61 | Contributions, issues, and feature requests are welcome! 62 | 63 | Feel free to check the [issues page](../../issues/). 64 | 65 | ## Show your support 66 | 67 | Give a ⭐️ if you like this project! 68 | 69 | ## Acknowledgments 70 | 71 | - Microverse 72 | - etc 73 | 74 | ## 📝 License 75 | 76 | This project is [MIT](./MIT.md) licensed. 77 | ``` 78 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './styles.css'; 2 | import { NewApiGame, GetScores } from '../module/api.js'; 3 | 4 | const name = document.getElementById('name'); 5 | const score = document.getElementById('score'); 6 | 7 | // Here, I created the Dom Manipulation 8 | const getAllScores = async () => { 9 | const allScores = await GetScores(); 10 | 11 | // Sort the Scores in alphabetical order 12 | allScores.result.sort((a, b) => b.score - a.score); 13 | 14 | allScores.result.forEach((item) => { 15 | const scoreList = document.getElementById('score-list'); 16 | const scoreListItem = document.createElement('li'); 17 | scoreListItem.className = 'list-item'; 18 | scoreListItem.innerHTML = `${item.user}: ${item.score}`; 19 | scoreList.appendChild(scoreListItem); 20 | }); 21 | const scoreLength = allScores.result.length; 22 | const totalScores = document.querySelector('small'); 23 | totalScores.className = 'score-length'; 24 | totalScores.innerText = ` Total Number of Users: ${scoreLength}`; 25 | }; 26 | 27 | // function for the submit event handler 28 | const message = document.querySelector('.message'); 29 | const Scores = (e) => { 30 | NewApiGame(); 31 | e.preventDefault(); 32 | 33 | // display error message onclick submitBtn 34 | if (name.value === '' || score.value === '') { 35 | message.innerText = 'ERROR!! Please add valid user and score'; 36 | message.style.display = 'block'; 37 | message.style.color = 'bisque'; 38 | message.className = 'error'; 39 | setTimeout(() => { 40 | message.style.display = 'none'; 41 | }, 6000); 42 | } else { 43 | message.innerText = 'SUCCESSFULLY ADDED!!, click "refresh" to show'; 44 | message.style.color = 'bisque'; 45 | message.style.display = 'block'; 46 | message.className = 'success'; 47 | setTimeout(() => { 48 | message.style.display = 'none'; 49 | }, 6000); 50 | } 51 | // set the input to empty string to clear it 52 | name.value = ''; 53 | score.value = ''; 54 | }; 55 | getAllScores(); 56 | 57 | // event handler for submit button 58 | const submitBtn = document.getElementById('submit'); 59 | submitBtn.addEventListener('click', Scores); 60 | 61 | // event handlers for the refresh button 62 | const refreshBtn = document.getElementById('refresh'); 63 | refreshBtn.addEventListener('click', () => { 64 | window.location.reload(); 65 | }); -------------------------------------------------------------------------------- /.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-18.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-18.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-18.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-18.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-18.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/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Inter:wght@400;500;600;700;800&family=Poppins&family=Roboto:wght@700&display=swap'); 2 | 3 | body { 4 | font-family: 'Poppins', sans-serif; 5 | margin: 0; 6 | padding: 0; 7 | background-color: beige; 8 | } 9 | 10 | h1 { 11 | padding: 0 50px; 12 | } 13 | 14 | .score-heading { 15 | display: flex; 16 | flex-direction: row; 17 | justify-content: center; 18 | align-items: center; 19 | gap: 10px; 20 | } 21 | 22 | #refresh { 23 | padding: 10px; 24 | border: none; 25 | border-radius: 10px; 26 | color: brown; 27 | background-color: wheat; 28 | box-shadow: 0 0 3px #5e5e5e; 29 | font-weight: 600; 30 | } 31 | 32 | #refresh:hover { 33 | background-color: rgb(0, 133, 22); 34 | color: beige; 35 | transition: all 0.5s ease-in; 36 | } 37 | 38 | .grid-container { 39 | display: flex; 40 | justify-content: space-evenly; 41 | align-items: center; 42 | } 43 | 44 | .list-item { 45 | list-style: none; 46 | padding: 10px; 47 | } 48 | 49 | ul { 50 | border: none; 51 | background-color: wheat; 52 | padding: 0; 53 | box-shadow: 0 0 6px #5e5e5e; 54 | border-radius: 10px; 55 | } 56 | 57 | li:nth-child(even) { 58 | background-color: rgba(165, 42, 42, 0.89); 59 | color: wheat; 60 | } 61 | 62 | .score-display { 63 | width: 30%; 64 | } 65 | 66 | .error { 67 | background-color: red; 68 | padding: 10px; 69 | border-radius: 10px; 70 | animation-duration: 3s; 71 | animation-name: slidein; 72 | } 73 | 74 | .success { 75 | background-color: rgb(0, 133, 22); 76 | padding: 10px; 77 | border-radius: 10px; 78 | animation-duration: 3s; 79 | animation-name: slidein; 80 | } 81 | 82 | @keyframes slidein { 83 | from { 84 | margin-left: 100%; 85 | width: 300%; 86 | } 87 | 88 | to { 89 | margin-left: 0%; 90 | width: 100%; 91 | } 92 | } 93 | 94 | .message { 95 | background-color: rgb(0, 133, 22); 96 | } 97 | 98 | .score-length { 99 | background-color: rgb(0, 133, 22); 100 | border-radius: 10px; 101 | padding: 10px 13px; 102 | color: #f4f4f4; 103 | font-weight: 700; 104 | display: flex; 105 | justify-content: center; 106 | } 107 | 108 | #submit { 109 | float: right; 110 | padding: 15px; 111 | border: none; 112 | border-radius: 10px; 113 | color: beige; 114 | background-color: rgba(165, 42, 42, 0.89); 115 | box-shadow: 0 0 3px #5e5e5e; 116 | margin-top: 20px; 117 | } 118 | 119 | #submit:hover { 120 | background-color: rgb(0, 133, 22); 121 | } 122 | 123 | label { 124 | font-weight: 700; 125 | } 126 | 127 | #form { 128 | width: 20%; 129 | box-shadow: 0 0 3px #5e5e5e; 130 | padding: 40px; 131 | background-color: wheat; 132 | border-radius: 7px; 133 | } 134 | 135 | input { 136 | padding: 12px 10px; 137 | outline: 0; 138 | border-width: 0 0 0; 139 | border-color: #282828; 140 | background-color: wheat; 141 | } 142 | 143 | input:focus { 144 | border-width: 0 0 1px; 145 | border-color: brown; 146 | width: 100%; 147 | } 148 | 149 | input::placeholder { 150 | color: black; 151 | } 152 | 153 | input:hover::placeholder { 154 | transform: translateX(10px); 155 | transition: all 0.5s ease-in-out; 156 | } 157 | -------------------------------------------------------------------------------- /dist/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). 3 | * This devtool is neither made for production nor for readable output files. 4 | * It uses "eval()" calls to create a separate source file in the browser devtools. 5 | * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) 6 | * or disable the default devtool with "devtool: false". 7 | * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). 8 | */ 9 | /******/ (() => { // webpackBootstrap 10 | /******/ "use strict"; 11 | /******/ var __webpack_modules__ = ({ 12 | 13 | /***/ "./module/api.js": 14 | /*!***********************!*\ 15 | !*** ./module/api.js ***! 16 | \***********************/ 17 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 18 | 19 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"GetScores\": () => (/* binding */ GetScores),\n/* harmony export */ \"NewApiGame\": () => (/* binding */ NewApiGame)\n/* harmony export */ });\n// function for getting result when a new game is added from the same ID\nconst GetScores = async () => {\n const getResult = await fetch('https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/owQWvuBZRBl6oZNoQKqG/scores/').then((res) => res.json());\n return getResult;\n};\n\n// function for generating a new game from the input through a game ID\nconst NewApiGame = async () => {\n const name = document.getElementById('name');\n const score = document.getElementById('score');\n\n await fetch('https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/owQWvuBZRBl6oZNoQKqG/scores/', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json; charset=UTF-8',\n },\n body: JSON.stringify({\n user: name.value,\n score: score.value,\n }),\n });\n};\n\n\n\n//# sourceURL=webpack://leaderboard/./module/api.js?"); 20 | 21 | /***/ }), 22 | 23 | /***/ "./node_modules/css-loader/dist/cjs.js!./src/styles.css": 24 | /*!**************************************************************!*\ 25 | !*** ./node_modules/css-loader/dist/cjs.js!./src/styles.css ***! 26 | \**************************************************************/ 27 | /***/ ((module, __webpack_exports__, __webpack_require__) => { 28 | 29 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Crete+Round&family=Inter:wght@400;500;600;700;800&family=Poppins&family=Roboto:wght@700&display=swap);\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"body {\\r\\n font-family: 'Poppins', sans-serif;\\r\\n margin: 0;\\r\\n padding: 0;\\r\\n background-color: beige;\\r\\n}\\r\\n\\r\\nh1 {\\r\\n padding: 0 50px;\\r\\n}\\r\\n\\r\\n.score-heading {\\r\\n display: flex;\\r\\n flex-direction: row;\\r\\n justify-content: center;\\r\\n align-items: center;\\r\\n gap: 10px;\\r\\n}\\r\\n\\r\\n#refresh {\\r\\n padding: 10px;\\r\\n border: none;\\r\\n border-radius: 10px;\\r\\n color: brown;\\r\\n background-color: wheat;\\r\\n box-shadow: 0 0 3px #5e5e5e;\\r\\n font-weight: 600;\\r\\n}\\r\\n\\r\\n#refresh:hover {\\r\\n background-color: rgb(0, 133, 22);\\r\\n color: beige;\\r\\n transition: all 0.5s ease-in;\\r\\n}\\r\\n\\r\\n.grid-container {\\r\\n display: flex;\\r\\n justify-content: space-evenly;\\r\\n align-items: center;\\r\\n}\\r\\n\\r\\n.list-item {\\r\\n list-style: none;\\r\\n padding: 10px;\\r\\n}\\r\\n\\r\\nul {\\r\\n border: none;\\r\\n background-color: wheat;\\r\\n padding: 0;\\r\\n box-shadow: 0 0 6px #5e5e5e;\\r\\n border-radius: 10px;\\r\\n}\\r\\n\\r\\nli:nth-child(even) {\\r\\n background-color: rgba(165, 42, 42, 0.89);\\r\\n color: wheat;\\r\\n}\\r\\n\\r\\n.score-display {\\r\\n width: 30%;\\r\\n}\\r\\n\\r\\n.error {\\r\\n background-color: red;\\r\\n padding: 10px;\\r\\n border-radius: 10px;\\r\\n animation-duration: 3s;\\r\\n animation-name: slidein;\\r\\n}\\r\\n\\r\\n.success {\\r\\n background-color: rgb(0, 133, 22);\\r\\n padding: 10px;\\r\\n border-radius: 10px;\\r\\n animation-duration: 3s;\\r\\n animation-name: slidein;\\r\\n}\\r\\n\\r\\n@keyframes slidein {\\r\\n from {\\r\\n margin-left: 100%;\\r\\n width: 300%;\\r\\n }\\r\\n\\r\\n to {\\r\\n margin-left: 0%;\\r\\n width: 100%;\\r\\n }\\r\\n}\\r\\n\\r\\n.message {\\r\\n background-color: rgb(0, 133, 22);\\r\\n}\\r\\n\\r\\n.score-length {\\r\\n background-color: rgb(0, 133, 22);\\r\\n border-radius: 10px;\\r\\n padding: 10px 13px;\\r\\n color: #f4f4f4;\\r\\n font-weight: 700;\\r\\n display: flex;\\r\\n justify-content: center;\\r\\n}\\r\\n\\r\\n#submit {\\r\\n float: right;\\r\\n padding: 15px;\\r\\n border: none;\\r\\n border-radius: 10px;\\r\\n color: beige;\\r\\n background-color: rgba(165, 42, 42, 0.89);\\r\\n box-shadow: 0 0 3px #5e5e5e;\\r\\n margin-top: 20px;\\r\\n}\\r\\n\\r\\n#submit:hover {\\r\\n background-color: rgb(0, 133, 22);\\r\\n}\\r\\n\\r\\nlabel {\\r\\n font-weight: 700;\\r\\n}\\r\\n\\r\\n#form {\\r\\n width: 20%;\\r\\n box-shadow: 0 0 3px #5e5e5e;\\r\\n padding: 40px;\\r\\n background-color: wheat;\\r\\n border-radius: 7px;\\r\\n}\\r\\n\\r\\ninput {\\r\\n padding: 12px 10px;\\r\\n outline: 0;\\r\\n border-width: 0 0 0;\\r\\n border-color: #282828;\\r\\n background-color: wheat;\\r\\n}\\r\\n\\r\\ninput:focus {\\r\\n border-width: 0 0 1px;\\r\\n border-color: brown;\\r\\n width: 100%;\\r\\n}\\r\\n\\r\\ninput::placeholder {\\r\\n color: black;\\r\\n}\\r\\n\\r\\ninput:hover::placeholder {\\r\\n transform: translateX(10px);\\r\\n transition: all 0.5s ease-in-out;\\r\\n}\\r\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://leaderboard/./src/styles.css?./node_modules/css-loader/dist/cjs.js"); 30 | 31 | /***/ }), 32 | 33 | /***/ "./node_modules/css-loader/dist/runtime/api.js": 34 | /*!*****************************************************!*\ 35 | !*** ./node_modules/css-loader/dist/runtime/api.js ***! 36 | \*****************************************************/ 37 | /***/ ((module) => { 38 | 39 | eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n var list = []; // return the list of modules as css string\n\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n\n content += cssWithMappingToString(item);\n\n if (needLayer) {\n content += \"}\";\n }\n\n if (item[2]) {\n content += \"}\";\n }\n\n if (item[4]) {\n content += \"}\";\n }\n\n return content;\n }).join(\"\");\n }; // import a list of modules into the list\n\n\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n\n var alreadyImportedModules = {};\n\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\n\n if (typeof layer !== \"undefined\") {\n if (typeof item[5] === \"undefined\") {\n item[5] = layer;\n } else {\n item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n item[5] = layer;\n }\n }\n\n if (media) {\n if (!item[2]) {\n item[2] = media;\n } else {\n item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n item[2] = media;\n }\n }\n\n if (supports) {\n if (!item[4]) {\n item[4] = \"\".concat(supports);\n } else {\n item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n item[4] = supports;\n }\n }\n\n list.push(item);\n }\n };\n\n return list;\n};\n\n//# sourceURL=webpack://leaderboard/./node_modules/css-loader/dist/runtime/api.js?"); 40 | 41 | /***/ }), 42 | 43 | /***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js": 44 | /*!**************************************************************!*\ 45 | !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***! 46 | \**************************************************************/ 47 | /***/ ((module) => { 48 | 49 | eval("\n\nmodule.exports = function (i) {\n return i[1];\n};\n\n//# sourceURL=webpack://leaderboard/./node_modules/css-loader/dist/runtime/noSourceMaps.js?"); 50 | 51 | /***/ }), 52 | 53 | /***/ "./src/styles.css": 54 | /*!************************!*\ 55 | !*** ./src/styles.css ***! 56 | \************************/ 57 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 58 | 59 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_styles_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./styles.css */ \"./node_modules/css-loader/dist/cjs.js!./src/styles.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_styles_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_styles_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_styles_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_styles_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://leaderboard/./src/styles.css?"); 60 | 61 | /***/ }), 62 | 63 | /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js": 64 | /*!****************************************************************************!*\ 65 | !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! 66 | \****************************************************************************/ 67 | /***/ ((module) => { 68 | 69 | eval("\n\nvar stylesInDOM = [];\n\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n\n for (var i = 0; i < stylesInDOM.length; i++) {\n if (stylesInDOM[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n\n return result;\n}\n\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var indexByIdentifier = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3],\n supports: item[4],\n layer: item[5]\n };\n\n if (indexByIdentifier !== -1) {\n stylesInDOM[indexByIdentifier].references++;\n stylesInDOM[indexByIdentifier].updater(obj);\n } else {\n var updater = addElementStyle(obj, options);\n options.byIndex = i;\n stylesInDOM.splice(i, 0, {\n identifier: identifier,\n updater: updater,\n references: 1\n });\n }\n\n identifiers.push(identifier);\n }\n\n return identifiers;\n}\n\nfunction addElementStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n\n var updater = function updater(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n return;\n }\n\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n\n return updater;\n}\n\nmodule.exports = function (list, options) {\n options = options || {};\n list = list || [];\n var lastIdentifiers = modulesToDom(list, options);\n return function update(newList) {\n newList = newList || [];\n\n for (var i = 0; i < lastIdentifiers.length; i++) {\n var identifier = lastIdentifiers[i];\n var index = getIndexByIdentifier(identifier);\n stylesInDOM[index].references--;\n }\n\n var newLastIdentifiers = modulesToDom(newList, options);\n\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n\n var _index = getIndexByIdentifier(_identifier);\n\n if (stylesInDOM[_index].references === 0) {\n stylesInDOM[_index].updater();\n\n stylesInDOM.splice(_index, 1);\n }\n }\n\n lastIdentifiers = newLastIdentifiers;\n };\n};\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?"); 70 | 71 | /***/ }), 72 | 73 | /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js": 74 | /*!********************************************************************!*\ 75 | !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***! 76 | \********************************************************************/ 77 | /***/ ((module) => { 78 | 79 | eval("\n\nvar memo = {};\n/* istanbul ignore next */\n\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n\n memo[target] = styleTarget;\n }\n\n return memo[target];\n}\n/* istanbul ignore next */\n\n\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n\n target.appendChild(style);\n}\n\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/insertBySelector.js?"); 80 | 81 | /***/ }), 82 | 83 | /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js": 84 | /*!**********************************************************************!*\ 85 | !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***! 86 | \**********************************************************************/ 87 | /***/ ((module) => { 88 | 89 | eval("\n\n/* istanbul ignore next */\nfunction insertStyleElement(options) {\n var element = document.createElement(\"style\");\n options.setAttributes(element, options.attributes);\n options.insert(element, options.options);\n return element;\n}\n\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/insertStyleElement.js?"); 90 | 91 | /***/ }), 92 | 93 | /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js": 94 | /*!**********************************************************************************!*\ 95 | !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***! 96 | \**********************************************************************************/ 97 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 98 | 99 | eval("\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(styleElement) {\n var nonce = true ? __webpack_require__.nc : 0;\n\n if (nonce) {\n styleElement.setAttribute(\"nonce\", nonce);\n }\n}\n\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?"); 100 | 101 | /***/ }), 102 | 103 | /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js": 104 | /*!***************************************************************!*\ 105 | !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***! 106 | \***************************************************************/ 107 | /***/ ((module) => { 108 | 109 | eval("\n\n/* istanbul ignore next */\nfunction apply(styleElement, options, obj) {\n var css = \"\";\n\n if (obj.supports) {\n css += \"@supports (\".concat(obj.supports, \") {\");\n }\n\n if (obj.media) {\n css += \"@media \".concat(obj.media, \" {\");\n }\n\n var needLayer = typeof obj.layer !== \"undefined\";\n\n if (needLayer) {\n css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n }\n\n css += obj.css;\n\n if (needLayer) {\n css += \"}\";\n }\n\n if (obj.media) {\n css += \"}\";\n }\n\n if (obj.supports) {\n css += \"}\";\n }\n\n var sourceMap = obj.sourceMap;\n\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n } // For old IE\n\n /* istanbul ignore if */\n\n\n options.styleTagTransform(css, styleElement, options.options);\n}\n\nfunction removeStyleElement(styleElement) {\n // istanbul ignore if\n if (styleElement.parentNode === null) {\n return false;\n }\n\n styleElement.parentNode.removeChild(styleElement);\n}\n/* istanbul ignore next */\n\n\nfunction domAPI(options) {\n var styleElement = options.insertStyleElement(options);\n return {\n update: function update(obj) {\n apply(styleElement, options, obj);\n },\n remove: function remove() {\n removeStyleElement(styleElement);\n }\n };\n}\n\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/styleDomAPI.js?"); 110 | 111 | /***/ }), 112 | 113 | /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js": 114 | /*!*********************************************************************!*\ 115 | !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***! 116 | \*********************************************************************/ 117 | /***/ ((module) => { 118 | 119 | eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElement) {\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css;\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild);\n }\n\n styleElement.appendChild(document.createTextNode(css));\n }\n}\n\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/styleTagTransform.js?"); 120 | 121 | /***/ }), 122 | 123 | /***/ "./src/index.js": 124 | /*!**********************!*\ 125 | !*** ./src/index.js ***! 126 | \**********************/ 127 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 128 | 129 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./styles.css */ \"./src/styles.css\");\n/* harmony import */ var _module_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../module/api.js */ \"./module/api.js\");\n\n\n\nconst name = document.getElementById('name');\nconst score = document.getElementById('score');\n\n// Here, I created the Dom Manipulation\nconst getAllScores = async () => {\n const allScores = await (0,_module_api_js__WEBPACK_IMPORTED_MODULE_1__.GetScores)();\n\n // Sort the Scores in alphabetical order\n allScores.result.sort((a, b) => b.score - a.score);\n\n allScores.result.forEach((item) => {\n const scoreList = document.getElementById('score-list');\n const scoreListItem = document.createElement('li');\n scoreListItem.className = 'list-item';\n scoreListItem.innerHTML = `${item.user}: ${item.score}`;\n scoreList.appendChild(scoreListItem);\n });\n const scoreLength = allScores.result.length;\n const totalScores = document.querySelector('small');\n totalScores.className = 'score-length';\n totalScores.innerText = ` Total Number of Users: ${scoreLength}`;\n};\n\n// function for the submit event handler\nconst message = document.querySelector('.message');\nconst Scores = (e) => {\n (0,_module_api_js__WEBPACK_IMPORTED_MODULE_1__.NewApiGame)();\n e.preventDefault();\n\n // display error message onclick submitBtn\n if (name.value === '' || score.value === '') {\n message.innerText = 'ERROR!! Please add valid user and score';\n message.style.display = 'block';\n message.style.color = 'bisque';\n message.className = 'error';\n setTimeout(() => {\n message.style.display = 'none';\n }, 6000);\n } else {\n message.innerText = 'SUCCESSFULLY ADDED!!, click \"refresh\" to show';\n message.style.color = 'bisque';\n message.style.display = 'block';\n message.className = 'success';\n setTimeout(() => {\n message.style.display = 'none';\n }, 6000);\n }\n // set the input to empty string to clear it\n name.value = '';\n score.value = '';\n};\ngetAllScores();\n\n// event handler for submit button\nconst submitBtn = document.getElementById('submit');\nsubmitBtn.addEventListener('click', Scores);\n\n// event handlers for the refresh button\nconst refreshBtn = document.getElementById('refresh');\nrefreshBtn.addEventListener('click', () => {\n window.location.reload();\n});\n\n//# sourceURL=webpack://leaderboard/./src/index.js?"); 130 | 131 | /***/ }) 132 | 133 | /******/ }); 134 | /************************************************************************/ 135 | /******/ // The module cache 136 | /******/ var __webpack_module_cache__ = {}; 137 | /******/ 138 | /******/ // The require function 139 | /******/ function __webpack_require__(moduleId) { 140 | /******/ // Check if module is in cache 141 | /******/ var cachedModule = __webpack_module_cache__[moduleId]; 142 | /******/ if (cachedModule !== undefined) { 143 | /******/ return cachedModule.exports; 144 | /******/ } 145 | /******/ // Create a new module (and put it into the cache) 146 | /******/ var module = __webpack_module_cache__[moduleId] = { 147 | /******/ id: moduleId, 148 | /******/ // no module.loaded needed 149 | /******/ exports: {} 150 | /******/ }; 151 | /******/ 152 | /******/ // Execute the module function 153 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 154 | /******/ 155 | /******/ // Return the exports of the module 156 | /******/ return module.exports; 157 | /******/ } 158 | /******/ 159 | /************************************************************************/ 160 | /******/ /* webpack/runtime/compat get default export */ 161 | /******/ (() => { 162 | /******/ // getDefaultExport function for compatibility with non-harmony modules 163 | /******/ __webpack_require__.n = (module) => { 164 | /******/ var getter = module && module.__esModule ? 165 | /******/ () => (module['default']) : 166 | /******/ () => (module); 167 | /******/ __webpack_require__.d(getter, { a: getter }); 168 | /******/ return getter; 169 | /******/ }; 170 | /******/ })(); 171 | /******/ 172 | /******/ /* webpack/runtime/define property getters */ 173 | /******/ (() => { 174 | /******/ // define getter functions for harmony exports 175 | /******/ __webpack_require__.d = (exports, definition) => { 176 | /******/ for(var key in definition) { 177 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 178 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 179 | /******/ } 180 | /******/ } 181 | /******/ }; 182 | /******/ })(); 183 | /******/ 184 | /******/ /* webpack/runtime/hasOwnProperty shorthand */ 185 | /******/ (() => { 186 | /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) 187 | /******/ })(); 188 | /******/ 189 | /******/ /* webpack/runtime/make namespace object */ 190 | /******/ (() => { 191 | /******/ // define __esModule on exports 192 | /******/ __webpack_require__.r = (exports) => { 193 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 194 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 195 | /******/ } 196 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 197 | /******/ }; 198 | /******/ })(); 199 | /******/ 200 | /******/ /* webpack/runtime/nonce */ 201 | /******/ (() => { 202 | /******/ __webpack_require__.nc = undefined; 203 | /******/ })(); 204 | /******/ 205 | /************************************************************************/ 206 | /******/ 207 | /******/ // startup 208 | /******/ // Load entry module and return exports 209 | /******/ // This entry module can't be inlined because the eval devtool is used. 210 | /******/ var __webpack_exports__ = __webpack_require__("./src/index.js"); 211 | /******/ 212 | /******/ })() 213 | ; --------------------------------------------------------------------------------