├── .babelrc ├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .hintrc ├── .stylelintrc.json ├── LICENSE ├── README.md ├── dist ├── bundle.js ├── bundle.js.map ├── index.html └── logo5.png ├── jest.config.js ├── package-lock.json ├── package.json ├── src ├── assets │ ├── desktop-shot.PNG │ ├── desktop-shot2.PNG │ └── logo5.png ├── index.js ├── modules │ ├── comments.js │ ├── getMovies.js │ └── popUp.js ├── styles │ ├── main.scss │ └── styles.css ├── template.html └── tests │ ├── commentCounter.js │ ├── commentCounter.test.js │ ├── movieCounter.js │ └── movieCounter.test.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "targets": { 4 | "node": "current" 5 | } 6 | } -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.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: "18.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: "18.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: "18.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 | -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Abdul Ali Noori 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 | ![](https://img.shields.io/badge/Microverse-blueviolet) 4 | 5 |
6 | 7 |
8 | 9 | 22 | 23 | > # Amazing Movies 24 | 25 | | Project Veiw Screenshots| 26 | |---------------------------------------| 27 | |
screenshot
| 28 | |
screenshot
| 29 | 30 | # 📗 Table of Contents 31 | 32 | - [📖 About the Project](#about-project) 33 | - [🛠 Built With](#built-with) 34 | - [Tech Stack](#tech-stack) 35 | - [Key Features](#key-features) 36 | - [🚀 Live Demo](#live-demo) 37 | - [💻 Getting Started](#getting-started) 38 | - [Setup](#setup) 39 | - [Prerequisites](#prerequisites) 40 | - [Install](#install) 41 | - [Usage](#usage) 42 | - [Run tests](#run-tests) 43 | - [Deployment](#triangular_flag_on_post-deployment) 44 | - [👥 Authors](#authors) 45 | - [🔭 Future Features](#future-features) 46 | - [🤝 Contributing](#contributing) 47 | - [⭐️ Show your support](#support) 48 | - [🙏 Acknowledgements](#acknowledgements) 49 | - [❓ FAQ (OPTIONAL)](#faq) 50 | - [📝 License](#license) 51 | 52 | 53 | 54 | # 📖 [Amazing Movies] 55 | 56 | > **[Amazing Movies]** is a web application based on a TVmaze API to displays data about TV series and movies. A user can comment, like, and also view information about the movie 57 | 58 | ## 🛠 Built With 59 | 60 | ### Tech Stack 61 | - Client 62 | 70 | 71 | 72 | ### Key Features 73 | 74 | - **[Fetch and send data to an API]** 75 | - **[Save and retrieve likes, comments]** 76 | - **[Dynamic data]** 77 | - **[Unit testing using jest enviroment]** 78 | 79 | 80 |

(back to top)

81 | 82 | 83 | 84 | ## 🚀 Live Demo 85 | 86 | > - [Live Demo Link](https://ab-noori.github.io/JavaScriptCapstone/dist/) 87 | > - [Introduction to Project](https://drive.google.com/file/d/1y3x6D4IaNynZK6jFlNIcal2iAfAt08bo/view?usp=sharing) 88 | 89 |

(back to top)

90 | 91 | 92 | 93 | ## 💻 Getting Started 94 | 95 | To get a local copy up and running, follow these steps: 96 | 97 | ### Prerequisites 98 | 99 | In order to run this project you need: 100 | - A browser of you choice. 101 | - A text editor of your choice. 102 | - An installed node.js on your local system 103 | 104 | ### Setup 105 | 106 | Clone this repository to your desired folder: 107 | 108 | - Use the following Commands: 109 | 110 | cd your-desired-folder 111 | git clone git@github.com:ab-noori/JavaScriptCapstone.git 112 | 113 | 114 | ### Install 115 | 116 | Install this project with: 117 | 118 | - You can deploy this projec on hosting provider of your choise or you can deploy it on github pages. 119 | 120 | 121 | ### Usage 122 | - Use following commands to run on your local system: 123 | 124 | npm run build 125 | npm run dev 126 | 127 | 128 | ### Run tests 129 | - Run the following script and style test: 130 | 131 | npm test 132 | npx eslint . 133 | npx stylelint "**/*.{css,scss}" 134 | 135 | ### Deployment 136 | 137 | You can deploy this project using: 138 | - Free deployment services like GitHub pages. 139 | - Any deployment services of your choice. 140 | 141 | 142 |

(back to top)

143 | 144 | 145 | ## 👥 Authors 146 | 147 | 👤 **Abdul Ali Noori** 148 | 149 | - GitHub: [@ab-noori](https://github.com/ab-noori) 150 | - Twitter: [@AbdulAliNoori4](https://twitter.com/AbdulAliNoori4) 151 | - LinkedIn: [abdul-ali-noori](https://www.linkedin.com/in/abdul-ali-noori-384b85195/) 152 | 153 | 👤 **Frank Mugagga** 154 | 155 | - GitHub: [@githubhandle](https://www.github.com/FrankMugagga) 156 | - Twitter: [@twitterhandle](https://www.twitter.com/@mugagga_frank) 157 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/frank-mugagga-17658225a) 158 | 159 |

(back to top)

160 | 161 | 162 | ## 🔭 Future Features 163 | 164 | - [ ] **[Add mobile menu]** 165 | 166 | 167 |

(back to top)

168 | 169 | ## 🤝 Contributing 170 | 171 | Contributions, issues, and feature requests are welcome! 172 | 173 | Feel free to check the [issues page](https://github.com/ab-noori/JavaScriptCapstone/issues). 174 | 175 |

(back to top)

176 | 177 | ## ⭐️ Show your support 178 | 179 | 180 | If you like this project, give it a star. 181 | 182 |

(back to top)

183 | 184 | 185 | ## 🙏 Acknowledgments 186 | 187 | We would like to thank Microverse and our coding partners. 188 | 189 |

(back to top)

190 | 191 | 192 | ## ❓ FAQ (OPTIONAL) 193 | 194 | - **How to make it mobile friendly?** 195 | 196 | - Put a viewport tag in the header 197 | 198 | - **How to design the site?** 199 | 200 | - Draw a mockup before start to code 201 | 202 |

(back to top)

203 | 204 | 205 | ## 📝 License 206 | 207 | This project is [MIT](./LICENSE) licensed. 208 | 209 |

(back to top)

210 | -------------------------------------------------------------------------------- /dist/bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (() => { // webpackBootstrap 2 | /******/ var __webpack_modules__ = ({ 3 | 4 | /***/ "./src/modules/comments.js": 5 | /*!*********************************!*\ 6 | !*** ./src/modules/comments.js ***! 7 | \*********************************/ 8 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 9 | 10 | "use strict"; 11 | __webpack_require__.r(__webpack_exports__); 12 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 13 | /* harmony export */ "displayComments": () => (/* binding */ displayComments), 14 | /* harmony export */ "postComment": () => (/* binding */ postComment) 15 | /* harmony export */ }); 16 | /* harmony import */ var _tests_commentCounter_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../tests/commentCounter.js */ "./src/tests/commentCounter.js"); 17 | /* harmony import */ var _tests_commentCounter_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tests_commentCounter_js__WEBPACK_IMPORTED_MODULE_0__); 18 | 19 | const api = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/yGJsLE5rhYlcLOG1HopD/comments'; 20 | const addcommentsToList = comment => { 21 | const list = document.querySelector('#comment-list'); 22 | const li = document.createElement('li'); 23 | const span = document.createElement('span'); 24 | span.innerHTML = `${comment.creation_date} ${comment.username}: ${comment.comment}`; 25 | li.appendChild(span); 26 | list.appendChild(li); 27 | const h3 = document.querySelector('#commentTitle'); 28 | const countComments = (0,_tests_commentCounter_js__WEBPACK_IMPORTED_MODULE_0__.countListItems)(list); 29 | h3.innerHTML = `Comments(${countComments})`; 30 | }; 31 | const displayComments = async targetMovie => { 32 | const comments = await (await fetch(`${api}?item_id=${targetMovie}`)).json(); 33 | comments.forEach(comment => addcommentsToList(comment)); 34 | }; 35 | 36 | // eslint-disable-next-line camelcase 37 | const postComment = async (item_id, username, comment) => { 38 | const newComment = { 39 | item_id, 40 | username, 41 | comment, 42 | creation_date: new Date().toISOString() 43 | }; 44 | addcommentsToList(newComment); 45 | const res = await fetch(api, { 46 | method: 'POST', 47 | headers: { 48 | 'content-type': 'application/json' 49 | }, 50 | body: JSON.stringify({ 51 | item_id, 52 | username, 53 | comment 54 | }) 55 | }); 56 | const data = await res.json(); 57 | return data.result; 58 | }; 59 | 60 | /***/ }), 61 | 62 | /***/ "./src/modules/getMovies.js": 63 | /*!**********************************!*\ 64 | !*** ./src/modules/getMovies.js ***! 65 | \**********************************/ 66 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 67 | 68 | "use strict"; 69 | __webpack_require__.r(__webpack_exports__); 70 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 71 | /* harmony export */ "getLikes": () => (/* binding */ getLikes), 72 | /* harmony export */ "getMovie": () => (/* binding */ getMovie), 73 | /* harmony export */ "postLikes": () => (/* binding */ postLikes) 74 | /* harmony export */ }); 75 | const getMovie = async () => { 76 | const getMovie = await fetch('https://api.tvmaze.com/shows'); 77 | const result = await getMovie.json(); 78 | return result; 79 | }; 80 | const api = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/yGJsLE5rhYlcLOG1HopD/likes'; 81 | const getLikes = async () => { 82 | const likesApi = await fetch(api); 83 | const likesArray = await likesApi.json(); 84 | return likesArray; 85 | }; 86 | const postLikes = async item => { 87 | const settings = { 88 | method: 'POST', 89 | headers: { 90 | 'content-type': 'application/json' 91 | }, 92 | body: JSON.stringify({ 93 | item_id: item 94 | }) 95 | }; 96 | const fetchRes = await fetch(api, settings); 97 | return fetchRes; 98 | }; 99 | 100 | /***/ }), 101 | 102 | /***/ "./src/modules/popUp.js": 103 | /*!******************************!*\ 104 | !*** ./src/modules/popUp.js ***! 105 | \******************************/ 106 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 107 | 108 | "use strict"; 109 | __webpack_require__.r(__webpack_exports__); 110 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 111 | /* harmony export */ "default": () => (/* binding */ showSelectedMovie) 112 | /* harmony export */ }); 113 | /* harmony import */ var _getMovies_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./getMovies.js */ "./src/modules/getMovies.js"); 114 | /* harmony import */ var _comments_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./comments.js */ "./src/modules/comments.js"); 115 | 116 | 117 | function showModal(modal) { 118 | document.body.appendChild(modal); 119 | modal.style.display = 'block'; 120 | } 121 | function hideModal(modal) { 122 | modal.style.display = 'none'; 123 | modal.parentNode.removeChild(modal); 124 | } 125 | function createModal(data, targetMovie) { 126 | const filterResult = data.filter(item => item.id === targetMovie); 127 | const modal = document.createElement('div'); 128 | modal.classList.add('modal'); 129 | const modalContent = document.createElement('div'); 130 | modalContent.classList.add('modal-content'); 131 | const imageSummaryFrame = document.createElement('div'); 132 | imageSummaryFrame.classList.add('image-summary-frame'); 133 | const imageFrame = document.createElement('div'); 134 | imageFrame.classList.add('image-frame'); 135 | const movieImage = document.createElement('img'); 136 | movieImage.src = `${filterResult[0].image.medium}`; 137 | imageFrame.appendChild(movieImage); 138 | const summaryFrame = document.createElement('div'); 139 | summaryFrame.classList.add('summary-frame'); 140 | const titleFrame = document.createElement('h1'); 141 | titleFrame.classList.add('title-frame'); 142 | titleFrame.innerHTML = `${filterResult[0].name}`; 143 | summaryFrame.appendChild(titleFrame); 144 | const ul = document.createElement('ul'); 145 | ul.innerHTML = ` 146 |
  • Genre:
    ${filterResult[0].genres[0]} ${filterResult[0].genres[1]}
    • 147 |
  • Type:
    ${filterResult[0].type}
    • 148 |
  • Language:
    ${filterResult[0].language}
    • 149 |
  • Summary:
    ${filterResult[0].summary}
    • 150 | `; 151 | summaryFrame.appendChild(ul); 152 | const closeBtn = document.createElement('span'); 153 | closeBtn.classList.add('close-btn'); 154 | closeBtn.innerHTML = '×'; 155 | imageSummaryFrame.appendChild(imageFrame); 156 | imageSummaryFrame.appendChild(summaryFrame); 157 | modalContent.appendChild(imageSummaryFrame); 158 | modalContent.appendChild(closeBtn); 159 | const commentFrame = document.createElement('div'); 160 | commentFrame.classList.add('comment-frame'); 161 | commentFrame.innerHTML = ` 162 |

    163 | 166 |

    Add a comment

    167 |
    168 | 169 | 170 | 171 | 172 |
    173 | `; 174 | modalContent.appendChild(commentFrame); 175 | modal.appendChild(modalContent); 176 | showModal(modal); 177 | const form = document.querySelector('#comment-form'); 178 | form.addEventListener('submit', async event => { 179 | event.preventDefault(); 180 | const itemId = document.querySelector('#movieId').value; 181 | const username = document.querySelector('#username').value; 182 | const comment = document.querySelector('#comment').value; 183 | if (username !== '' && comment !== '') { 184 | document.querySelector('#username').value = ''; 185 | document.querySelector('#comment').value = ''; 186 | await (0,_comments_js__WEBPACK_IMPORTED_MODULE_1__.postComment)(itemId, username, comment); 187 | } 188 | }); 189 | closeBtn.addEventListener('click', () => { 190 | hideModal(modal); 191 | }); 192 | } 193 | async function showSelectedMovie(targetMovie) { 194 | const data = await (0,_getMovies_js__WEBPACK_IMPORTED_MODULE_0__.getMovie)(); 195 | createModal(data, targetMovie); 196 | (0,_comments_js__WEBPACK_IMPORTED_MODULE_1__.displayComments)(targetMovie); 197 | } 198 | 199 | /***/ }), 200 | 201 | /***/ "./src/tests/commentCounter.js": 202 | /*!*************************************!*\ 203 | !*** ./src/tests/commentCounter.js ***! 204 | \*************************************/ 205 | /***/ ((module) => { 206 | 207 | function countListItems(list) { 208 | if (list == null) { 209 | return 0; 210 | } 211 | return list.querySelectorAll('li').length; 212 | } 213 | module.exports = { 214 | countListItems 215 | }; 216 | 217 | /***/ }), 218 | 219 | /***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss": 220 | /*!***********************************************************************************************************!*\ 221 | !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss ***! 222 | \***********************************************************************************************************/ 223 | /***/ ((module, __webpack_exports__, __webpack_require__) => { 224 | 225 | "use strict"; 226 | __webpack_require__.r(__webpack_exports__); 227 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 228 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 229 | /* harmony export */ }); 230 | /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/sourceMaps.js */ "./node_modules/css-loader/dist/runtime/sourceMaps.js"); 231 | /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__); 232 | /* 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"); 233 | /* 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__); 234 | // Imports 235 | 236 | 237 | var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default())); 238 | ___CSS_LOADER_EXPORT___.push([module.id, "@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);"]); 239 | // Module 240 | ___CSS_LOADER_EXPORT___.push([module.id, "* {\n box-sizing: border-box;\n}\n\n.like_cont,\n.sec,\nfooter,\nbody {\n display: flex;\n flex-direction: column;\n}\n\nbody {\n background-color: #13191c;\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n align-items: center;\n padding-top: 40px;\n}\n\nheader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 30px;\n gap: 80px;\n color: #f4f4f4;\n font-size: 32px;\n width: 70%;\n height: auto;\n background-image: linear-gradient(black, rgb(39, 30, 30), gray);\n}\n\n.logo {\n border: 2px solid #f4f4f4;\n width: 200px;\n}\n\n.head_cont {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 70%;\n height: 120px;\n}\n\n.head_size {\n width: 60%;\n flex-grow: 10;\n}\n\n.item_number {\n text-decoration: underline;\n}\n\n.grid_container {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n gap: 20px;\n width: 70%;\n height: auto;\n padding: 30px;\n margin-bottom: 80px;\n border: 1px solid white;\n border-radius: 10px;\n}\n\n.grid_img {\n border-radius: 5px;\n width: 100%;\n height: 400px;\n border: 1px solid #f4f4f4;\n}\n\n.grid_img:hover {\n border: 2px solid red;\n}\n\n.sec {\n justify-content: space-between;\n width: 100%;\n height: 600px;\n border-radius: 8px;\n}\n\n.space_like {\n display: flex;\n justify-content: space-between;\n color: #f4f4f4;\n font-size: 20px;\n width: 100%;\n height: 80px;\n margin-bottom: 0;\n}\n\n.like_cont {\n height: auto;\n}\n\nbutton {\n width: 60px;\n height: 50px;\n border-radius: 8px;\n margin-bottom: 5px;\n}\n\n.comment {\n display: flex;\n width: 100%;\n height: 70px;\n font-size: 32px;\n color: #f4f4f4;\n background: black;\n justify-content: center;\n align-items: center;\n border: 2px solid #f4f4f4;\n border-radius: 5px;\n}\n\nfooter {\n border-top: 2px solid #f4f4f4;\n width: 100%;\n height: 80px;\n justify-content: center;\n align-items: center;\n padding-left: 40px;\n font-size: 20px;\n color: #f4f4f4;\n background: black;\n}\n\n.modal {\n display: none;\n position: fixed;\n z-index: 99;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow-y: scroll;\n background-color: rgba(0, 0, 0, 0.9); /* darken the background */\n}\n.modal::-webkit-scrollbar {\n width: 15px;\n height: 3em; /* width of the entire scrollbar */\n}\n.modal::-webkit-scrollbar-track {\n background: #e0de61; /* color of the tracking area */\n}\n.modal::-webkit-scrollbar-thumb {\n background-color: rgba(255, 247, 247, 0); /* color of the scroll thumb */\n border-radius: 20px; /* roundness of the scroll thumb */\n border: 5px solid #743206; /* creates padding around scroll thumb */\n}\n\n.modal-content {\n width: 80%;\n min-height: 80%;\n color: white;\n background-color: #1c1919;\n margin: 2% auto;\n padding: 30px;\n border: 1px solid #888;\n border-radius: 10px;\n position: relative;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n.modal-content .image-summary-frame {\n display: flex;\n gap: 30px;\n}\n.modal-content .image-frame {\n display: inline-block;\n border: 2px solid gainsboro;\n border-radius: 3px;\n}\n.modal-content img {\n border-radius: 3px;\n}\n.modal-content h1 {\n margin-top: 0;\n}\n.modal-content ul {\n width: 90%;\n padding: 20px;\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n background-color: #292b2c;\n gap: 10px;\n}\n.modal-content ul li {\n display: flex;\n}\n.modal-content ul li dt {\n width: 50px;\n}\n.modal-content ul li p {\n margin: 0;\n}\n.modal-content .close-btn {\n color: red;\n cursor: pointer;\n font-size: 2.5rem;\n position: absolute;\n top: 5px;\n right: 20px;\n}\n.modal-content .comment-frame {\n width: 100%;\n min-height: 200px;\n border: 2px solid black;\n border-radius: 5px;\n display: flex;\n padding-bottom: 20px;\n flex-direction: column;\n align-items: center;\n}\n.modal-content .comment-frame ul {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.modal-content form {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n}\n.modal-content form input {\n width: 100%;\n}\n.modal-content .btn {\n background-color: #f4f4f4;\n color: #13191c;\n border: 0;\n height: 20px;\n border-radius: 4px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);\n font-size: 10px;\n cursor: pointer;\n align-self: center;\n}\n.modal-content .btn:active {\n transform: scale(0.98);\n}\n.modal-content .btn:focus {\n outline: 0;\n}", "",{"version":3,"sources":["webpack://./src/styles/main.scss"],"names":[],"mappings":"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","sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');\r\n\r\n$primary-color: #13191c;\r\n$secondary-color: #f4f4f4;\r\n$box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);\r\n\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\n.like_cont,\r\n.sec,\r\nfooter,\r\nbody {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\nbody {\r\n background-color: $primary-color;\r\n font-family: 'Roboto', sans-serif;\r\n margin: 0;\r\n align-items: center;\r\n padding-top: 40px;\r\n}\r\n\r\nheader {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: 30px;\r\n gap: 80px;\r\n color: $secondary-color;\r\n font-size: 32px;\r\n width: 70%;\r\n height: auto;\r\n background-image: linear-gradient(black, rgb(39, 30, 30), gray);\r\n}\r\n\r\n.logo {\r\n border: 2px solid $secondary-color;\r\n width: 200px;\r\n}\r\n\r\n.head_cont {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 70%;\r\n height: 120px;\r\n}\r\n\r\n.head_size {\r\n width: 60%;\r\n flex-grow: 10;\r\n}\r\n\r\n.item_number {\r\n text-decoration: underline;\r\n}\r\n\r\n.grid_container {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr 1fr;\r\n gap: 20px;\r\n width: 70%;\r\n height: auto;\r\n padding: 30px;\r\n margin-bottom: 80px;\r\n border: 1px solid white;\r\n border-radius: 10px;\r\n}\r\n\r\n.grid_img {\r\n border-radius: 5px;\r\n width: 100%;\r\n height: 400px;\r\n border: 1px solid $secondary-color;\r\n}\r\n\r\n.grid_img:hover {\r\n border: 2px solid red;\r\n}\r\n\r\n.sec {\r\n justify-content: space-between;\r\n width: 100%;\r\n height: 600px;\r\n border-radius: 8px;\r\n}\r\n\r\n.space_like {\r\n display: flex;\r\n justify-content: space-between;\r\n color: $secondary-color;\r\n font-size: 20px;\r\n width: 100%;\r\n height: 80px;\r\n margin-bottom: 0;\r\n}\r\n\r\n.like_cont {\r\n height: auto;\r\n}\r\n\r\nbutton {\r\n width: 60px;\r\n height: 50px;\r\n border-radius: 8px;\r\n margin-bottom: 5px;\r\n}\r\n\r\n.comment {\r\n display: flex;\r\n width: 100%;\r\n height: 70px;\r\n font-size: 32px;\r\n color: $secondary-color;\r\n background: black;\r\n justify-content: center;\r\n align-items: center;\r\n border: 2px solid $secondary-color;\r\n border-radius: 5px;\r\n}\r\n\r\nfooter {\r\n border-top: 2px solid $secondary-color;\r\n width: 100%;\r\n height: 80px;\r\n justify-content: center;\r\n align-items: center;\r\n padding-left: 40px;\r\n font-size: 20px;\r\n color: $secondary-color;\r\n background: black;\r\n}\r\n\r\n.modal {\r\n display: none;\r\n position: fixed;\r\n z-index: 99;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow-y: scroll;\r\n background-color: rgba(0, 0, 0, 0.9); /* darken the background */\r\n\r\n &::-webkit-scrollbar {\r\n width: 15px;\r\n height: 3em; /* width of the entire scrollbar */\r\n }\r\n\r\n &::-webkit-scrollbar-track {\r\n background: #e0de61; /* color of the tracking area */\r\n }\r\n\r\n &::-webkit-scrollbar-thumb {\r\n background-color: rgba(255, 247, 247, 0); /* color of the scroll thumb */\r\n border-radius: 20px; /* roundness of the scroll thumb */\r\n border: 5px solid #743206; /* creates padding around scroll thumb */\r\n }\r\n}\r\n\r\n.modal-content {\r\n width: 80%;\r\n min-height: 80%;\r\n color: white;\r\n background-color: #1c1919;\r\n margin: 2% auto;\r\n padding: 30px;\r\n border: 1px solid #888;\r\n border-radius: 10px;\r\n position: relative;\r\n overflow: auto;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n\r\n & .image-summary-frame {\r\n display: flex;\r\n gap: 30px;\r\n }\r\n\r\n & .image-frame {\r\n display: inline-block;\r\n border: 2px solid gainsboro;\r\n border-radius: 3px;\r\n }\r\n\r\n & img {\r\n border-radius: 3px;\r\n }\r\n\r\n & h1 {\r\n margin-top: 0;\r\n }\r\n\r\n & ul {\r\n width: 90%;\r\n padding: 20px;\r\n border-radius: 5px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n background-color: #292b2c;\r\n gap: 10px;\r\n }\r\n\r\n & ul li {\r\n display: flex;\r\n }\r\n\r\n & ul li dt {\r\n width: 50px;\r\n }\r\n\r\n & ul li p {\r\n margin: 0;\r\n }\r\n\r\n & .close-btn {\r\n color: red;\r\n cursor: pointer;\r\n font-size: 2.5rem;\r\n position: absolute;\r\n top: 5px;\r\n right: 20px;\r\n }\r\n\r\n & .comment-frame {\r\n width: 100%;\r\n min-height: 200px;\r\n border: 2px solid black;\r\n border-radius: 5px;\r\n display: flex;\r\n padding-bottom: 20px;\r\n flex-direction: column;\r\n align-items: center;\r\n\r\n & ul {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n & form {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 10px;\r\n\r\n & input {\r\n width: 100%;\r\n }\r\n }\r\n\r\n .btn {\r\n background-color: $secondary-color;\r\n color: $primary-color;\r\n border: 0;\r\n height: 20px;\r\n border-radius: 4px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);\r\n font-size: 10px;\r\n cursor: pointer;\r\n align-self: center;\r\n\r\n &:active {\r\n transform: scale(0.98);\r\n }\r\n\r\n &:focus {\r\n outline: 0;\r\n }\r\n }\r\n}\r\n"],"sourceRoot":""}]); 241 | // Exports 242 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___); 243 | 244 | 245 | /***/ }), 246 | 247 | /***/ "./node_modules/css-loader/dist/runtime/api.js": 248 | /*!*****************************************************!*\ 249 | !*** ./node_modules/css-loader/dist/runtime/api.js ***! 250 | \*****************************************************/ 251 | /***/ ((module) => { 252 | 253 | "use strict"; 254 | 255 | 256 | /* 257 | MIT License http://www.opensource.org/licenses/mit-license.php 258 | Author Tobias Koppers @sokra 259 | */ 260 | module.exports = function (cssWithMappingToString) { 261 | var list = []; 262 | 263 | // return the list of modules as css string 264 | list.toString = function toString() { 265 | return this.map(function (item) { 266 | var content = ""; 267 | var needLayer = typeof item[5] !== "undefined"; 268 | if (item[4]) { 269 | content += "@supports (".concat(item[4], ") {"); 270 | } 271 | if (item[2]) { 272 | content += "@media ".concat(item[2], " {"); 273 | } 274 | if (needLayer) { 275 | content += "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {"); 276 | } 277 | content += cssWithMappingToString(item); 278 | if (needLayer) { 279 | content += "}"; 280 | } 281 | if (item[2]) { 282 | content += "}"; 283 | } 284 | if (item[4]) { 285 | content += "}"; 286 | } 287 | return content; 288 | }).join(""); 289 | }; 290 | 291 | // import a list of modules into the list 292 | list.i = function i(modules, media, dedupe, supports, layer) { 293 | if (typeof modules === "string") { 294 | modules = [[null, modules, undefined]]; 295 | } 296 | var alreadyImportedModules = {}; 297 | if (dedupe) { 298 | for (var k = 0; k < this.length; k++) { 299 | var id = this[k][0]; 300 | if (id != null) { 301 | alreadyImportedModules[id] = true; 302 | } 303 | } 304 | } 305 | for (var _k = 0; _k < modules.length; _k++) { 306 | var item = [].concat(modules[_k]); 307 | if (dedupe && alreadyImportedModules[item[0]]) { 308 | continue; 309 | } 310 | if (typeof layer !== "undefined") { 311 | if (typeof item[5] === "undefined") { 312 | item[5] = layer; 313 | } else { 314 | item[1] = "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {").concat(item[1], "}"); 315 | item[5] = layer; 316 | } 317 | } 318 | if (media) { 319 | if (!item[2]) { 320 | item[2] = media; 321 | } else { 322 | item[1] = "@media ".concat(item[2], " {").concat(item[1], "}"); 323 | item[2] = media; 324 | } 325 | } 326 | if (supports) { 327 | if (!item[4]) { 328 | item[4] = "".concat(supports); 329 | } else { 330 | item[1] = "@supports (".concat(item[4], ") {").concat(item[1], "}"); 331 | item[4] = supports; 332 | } 333 | } 334 | list.push(item); 335 | } 336 | }; 337 | return list; 338 | }; 339 | 340 | /***/ }), 341 | 342 | /***/ "./node_modules/css-loader/dist/runtime/sourceMaps.js": 343 | /*!************************************************************!*\ 344 | !*** ./node_modules/css-loader/dist/runtime/sourceMaps.js ***! 345 | \************************************************************/ 346 | /***/ ((module) => { 347 | 348 | "use strict"; 349 | 350 | 351 | module.exports = function (item) { 352 | var content = item[1]; 353 | var cssMapping = item[3]; 354 | if (!cssMapping) { 355 | return content; 356 | } 357 | if (typeof btoa === "function") { 358 | var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(cssMapping)))); 359 | var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64); 360 | var sourceMapping = "/*# ".concat(data, " */"); 361 | return [content].concat([sourceMapping]).join("\n"); 362 | } 363 | return [content].join("\n"); 364 | }; 365 | 366 | /***/ }), 367 | 368 | /***/ "./src/styles/main.scss": 369 | /*!******************************!*\ 370 | !*** ./src/styles/main.scss ***! 371 | \******************************/ 372 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 373 | 374 | "use strict"; 375 | __webpack_require__.r(__webpack_exports__); 376 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 377 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 378 | /* harmony export */ }); 379 | /* 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"); 380 | /* 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__); 381 | /* 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"); 382 | /* 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__); 383 | /* 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"); 384 | /* 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__); 385 | /* 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"); 386 | /* 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__); 387 | /* 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"); 388 | /* 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__); 389 | /* 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"); 390 | /* 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__); 391 | /* harmony import */ var _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_main_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!./main.scss */ "./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss"); 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | var options = {}; 404 | 405 | options.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default()); 406 | options.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default()); 407 | 408 | options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head"); 409 | 410 | options.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default()); 411 | options.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default()); 412 | 413 | var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_main_scss__WEBPACK_IMPORTED_MODULE_6__["default"], options); 414 | 415 | 416 | 417 | 418 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_main_scss__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_main_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_main_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined); 419 | 420 | 421 | /***/ }), 422 | 423 | /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js": 424 | /*!****************************************************************************!*\ 425 | !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! 426 | \****************************************************************************/ 427 | /***/ ((module) => { 428 | 429 | "use strict"; 430 | 431 | 432 | var stylesInDOM = []; 433 | 434 | function getIndexByIdentifier(identifier) { 435 | var result = -1; 436 | 437 | for (var i = 0; i < stylesInDOM.length; i++) { 438 | if (stylesInDOM[i].identifier === identifier) { 439 | result = i; 440 | break; 441 | } 442 | } 443 | 444 | return result; 445 | } 446 | 447 | function modulesToDom(list, options) { 448 | var idCountMap = {}; 449 | var identifiers = []; 450 | 451 | for (var i = 0; i < list.length; i++) { 452 | var item = list[i]; 453 | var id = options.base ? item[0] + options.base : item[0]; 454 | var count = idCountMap[id] || 0; 455 | var identifier = "".concat(id, " ").concat(count); 456 | idCountMap[id] = count + 1; 457 | var indexByIdentifier = getIndexByIdentifier(identifier); 458 | var obj = { 459 | css: item[1], 460 | media: item[2], 461 | sourceMap: item[3], 462 | supports: item[4], 463 | layer: item[5] 464 | }; 465 | 466 | if (indexByIdentifier !== -1) { 467 | stylesInDOM[indexByIdentifier].references++; 468 | stylesInDOM[indexByIdentifier].updater(obj); 469 | } else { 470 | var updater = addElementStyle(obj, options); 471 | options.byIndex = i; 472 | stylesInDOM.splice(i, 0, { 473 | identifier: identifier, 474 | updater: updater, 475 | references: 1 476 | }); 477 | } 478 | 479 | identifiers.push(identifier); 480 | } 481 | 482 | return identifiers; 483 | } 484 | 485 | function addElementStyle(obj, options) { 486 | var api = options.domAPI(options); 487 | api.update(obj); 488 | 489 | var updater = function updater(newObj) { 490 | if (newObj) { 491 | if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) { 492 | return; 493 | } 494 | 495 | api.update(obj = newObj); 496 | } else { 497 | api.remove(); 498 | } 499 | }; 500 | 501 | return updater; 502 | } 503 | 504 | module.exports = function (list, options) { 505 | options = options || {}; 506 | list = list || []; 507 | var lastIdentifiers = modulesToDom(list, options); 508 | return function update(newList) { 509 | newList = newList || []; 510 | 511 | for (var i = 0; i < lastIdentifiers.length; i++) { 512 | var identifier = lastIdentifiers[i]; 513 | var index = getIndexByIdentifier(identifier); 514 | stylesInDOM[index].references--; 515 | } 516 | 517 | var newLastIdentifiers = modulesToDom(newList, options); 518 | 519 | for (var _i = 0; _i < lastIdentifiers.length; _i++) { 520 | var _identifier = lastIdentifiers[_i]; 521 | 522 | var _index = getIndexByIdentifier(_identifier); 523 | 524 | if (stylesInDOM[_index].references === 0) { 525 | stylesInDOM[_index].updater(); 526 | 527 | stylesInDOM.splice(_index, 1); 528 | } 529 | } 530 | 531 | lastIdentifiers = newLastIdentifiers; 532 | }; 533 | }; 534 | 535 | /***/ }), 536 | 537 | /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js": 538 | /*!********************************************************************!*\ 539 | !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***! 540 | \********************************************************************/ 541 | /***/ ((module) => { 542 | 543 | "use strict"; 544 | 545 | 546 | var memo = {}; 547 | /* istanbul ignore next */ 548 | 549 | function getTarget(target) { 550 | if (typeof memo[target] === "undefined") { 551 | var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself 552 | 553 | if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) { 554 | try { 555 | // This will throw an exception if access to iframe is blocked 556 | // due to cross-origin restrictions 557 | styleTarget = styleTarget.contentDocument.head; 558 | } catch (e) { 559 | // istanbul ignore next 560 | styleTarget = null; 561 | } 562 | } 563 | 564 | memo[target] = styleTarget; 565 | } 566 | 567 | return memo[target]; 568 | } 569 | /* istanbul ignore next */ 570 | 571 | 572 | function insertBySelector(insert, style) { 573 | var target = getTarget(insert); 574 | 575 | if (!target) { 576 | throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."); 577 | } 578 | 579 | target.appendChild(style); 580 | } 581 | 582 | module.exports = insertBySelector; 583 | 584 | /***/ }), 585 | 586 | /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js": 587 | /*!**********************************************************************!*\ 588 | !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***! 589 | \**********************************************************************/ 590 | /***/ ((module) => { 591 | 592 | "use strict"; 593 | 594 | 595 | /* istanbul ignore next */ 596 | function insertStyleElement(options) { 597 | var element = document.createElement("style"); 598 | options.setAttributes(element, options.attributes); 599 | options.insert(element, options.options); 600 | return element; 601 | } 602 | 603 | module.exports = insertStyleElement; 604 | 605 | /***/ }), 606 | 607 | /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js": 608 | /*!**********************************************************************************!*\ 609 | !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***! 610 | \**********************************************************************************/ 611 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 612 | 613 | "use strict"; 614 | 615 | 616 | /* istanbul ignore next */ 617 | function setAttributesWithoutAttributes(styleElement) { 618 | var nonce = true ? __webpack_require__.nc : 0; 619 | 620 | if (nonce) { 621 | styleElement.setAttribute("nonce", nonce); 622 | } 623 | } 624 | 625 | module.exports = setAttributesWithoutAttributes; 626 | 627 | /***/ }), 628 | 629 | /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js": 630 | /*!***************************************************************!*\ 631 | !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***! 632 | \***************************************************************/ 633 | /***/ ((module) => { 634 | 635 | "use strict"; 636 | 637 | 638 | /* istanbul ignore next */ 639 | function apply(styleElement, options, obj) { 640 | var css = ""; 641 | 642 | if (obj.supports) { 643 | css += "@supports (".concat(obj.supports, ") {"); 644 | } 645 | 646 | if (obj.media) { 647 | css += "@media ".concat(obj.media, " {"); 648 | } 649 | 650 | var needLayer = typeof obj.layer !== "undefined"; 651 | 652 | if (needLayer) { 653 | css += "@layer".concat(obj.layer.length > 0 ? " ".concat(obj.layer) : "", " {"); 654 | } 655 | 656 | css += obj.css; 657 | 658 | if (needLayer) { 659 | css += "}"; 660 | } 661 | 662 | if (obj.media) { 663 | css += "}"; 664 | } 665 | 666 | if (obj.supports) { 667 | css += "}"; 668 | } 669 | 670 | var sourceMap = obj.sourceMap; 671 | 672 | if (sourceMap && typeof btoa !== "undefined") { 673 | css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */"); 674 | } // For old IE 675 | 676 | /* istanbul ignore if */ 677 | 678 | 679 | options.styleTagTransform(css, styleElement, options.options); 680 | } 681 | 682 | function removeStyleElement(styleElement) { 683 | // istanbul ignore if 684 | if (styleElement.parentNode === null) { 685 | return false; 686 | } 687 | 688 | styleElement.parentNode.removeChild(styleElement); 689 | } 690 | /* istanbul ignore next */ 691 | 692 | 693 | function domAPI(options) { 694 | var styleElement = options.insertStyleElement(options); 695 | return { 696 | update: function update(obj) { 697 | apply(styleElement, options, obj); 698 | }, 699 | remove: function remove() { 700 | removeStyleElement(styleElement); 701 | } 702 | }; 703 | } 704 | 705 | module.exports = domAPI; 706 | 707 | /***/ }), 708 | 709 | /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js": 710 | /*!*********************************************************************!*\ 711 | !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***! 712 | \*********************************************************************/ 713 | /***/ ((module) => { 714 | 715 | "use strict"; 716 | 717 | 718 | /* istanbul ignore next */ 719 | function styleTagTransform(css, styleElement) { 720 | if (styleElement.styleSheet) { 721 | styleElement.styleSheet.cssText = css; 722 | } else { 723 | while (styleElement.firstChild) { 724 | styleElement.removeChild(styleElement.firstChild); 725 | } 726 | 727 | styleElement.appendChild(document.createTextNode(css)); 728 | } 729 | } 730 | 731 | module.exports = styleTagTransform; 732 | 733 | /***/ }), 734 | 735 | /***/ "./src/assets/logo5.png": 736 | /*!******************************!*\ 737 | !*** ./src/assets/logo5.png ***! 738 | \******************************/ 739 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 740 | 741 | "use strict"; 742 | module.exports = __webpack_require__.p + "logo5.png"; 743 | 744 | /***/ }) 745 | 746 | /******/ }); 747 | /************************************************************************/ 748 | /******/ // The module cache 749 | /******/ var __webpack_module_cache__ = {}; 750 | /******/ 751 | /******/ // The require function 752 | /******/ function __webpack_require__(moduleId) { 753 | /******/ // Check if module is in cache 754 | /******/ var cachedModule = __webpack_module_cache__[moduleId]; 755 | /******/ if (cachedModule !== undefined) { 756 | /******/ return cachedModule.exports; 757 | /******/ } 758 | /******/ // Create a new module (and put it into the cache) 759 | /******/ var module = __webpack_module_cache__[moduleId] = { 760 | /******/ id: moduleId, 761 | /******/ // no module.loaded needed 762 | /******/ exports: {} 763 | /******/ }; 764 | /******/ 765 | /******/ // Execute the module function 766 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 767 | /******/ 768 | /******/ // Return the exports of the module 769 | /******/ return module.exports; 770 | /******/ } 771 | /******/ 772 | /************************************************************************/ 773 | /******/ /* webpack/runtime/compat get default export */ 774 | /******/ (() => { 775 | /******/ // getDefaultExport function for compatibility with non-harmony modules 776 | /******/ __webpack_require__.n = (module) => { 777 | /******/ var getter = module && module.__esModule ? 778 | /******/ () => (module['default']) : 779 | /******/ () => (module); 780 | /******/ __webpack_require__.d(getter, { a: getter }); 781 | /******/ return getter; 782 | /******/ }; 783 | /******/ })(); 784 | /******/ 785 | /******/ /* webpack/runtime/define property getters */ 786 | /******/ (() => { 787 | /******/ // define getter functions for harmony exports 788 | /******/ __webpack_require__.d = (exports, definition) => { 789 | /******/ for(var key in definition) { 790 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 791 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 792 | /******/ } 793 | /******/ } 794 | /******/ }; 795 | /******/ })(); 796 | /******/ 797 | /******/ /* webpack/runtime/global */ 798 | /******/ (() => { 799 | /******/ __webpack_require__.g = (function() { 800 | /******/ if (typeof globalThis === 'object') return globalThis; 801 | /******/ try { 802 | /******/ return this || new Function('return this')(); 803 | /******/ } catch (e) { 804 | /******/ if (typeof window === 'object') return window; 805 | /******/ } 806 | /******/ })(); 807 | /******/ })(); 808 | /******/ 809 | /******/ /* webpack/runtime/hasOwnProperty shorthand */ 810 | /******/ (() => { 811 | /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) 812 | /******/ })(); 813 | /******/ 814 | /******/ /* webpack/runtime/make namespace object */ 815 | /******/ (() => { 816 | /******/ // define __esModule on exports 817 | /******/ __webpack_require__.r = (exports) => { 818 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 819 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 820 | /******/ } 821 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 822 | /******/ }; 823 | /******/ })(); 824 | /******/ 825 | /******/ /* webpack/runtime/publicPath */ 826 | /******/ (() => { 827 | /******/ var scriptUrl; 828 | /******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + ""; 829 | /******/ var document = __webpack_require__.g.document; 830 | /******/ if (!scriptUrl && document) { 831 | /******/ if (document.currentScript) 832 | /******/ scriptUrl = document.currentScript.src; 833 | /******/ if (!scriptUrl) { 834 | /******/ var scripts = document.getElementsByTagName("script"); 835 | /******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src 836 | /******/ } 837 | /******/ } 838 | /******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration 839 | /******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic. 840 | /******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser"); 841 | /******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/"); 842 | /******/ __webpack_require__.p = scriptUrl; 843 | /******/ })(); 844 | /******/ 845 | /******/ /* webpack/runtime/nonce */ 846 | /******/ (() => { 847 | /******/ __webpack_require__.nc = undefined; 848 | /******/ })(); 849 | /******/ 850 | /************************************************************************/ 851 | var __webpack_exports__ = {}; 852 | // This entry need to be wrapped in an IIFE because it need to be in strict mode. 853 | (() => { 854 | "use strict"; 855 | /*!**********************!*\ 856 | !*** ./src/index.js ***! 857 | \**********************/ 858 | __webpack_require__.r(__webpack_exports__); 859 | /* harmony import */ var _styles_main_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./styles/main.scss */ "./src/styles/main.scss"); 860 | /* harmony import */ var _assets_logo5_png__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./assets/logo5.png */ "./src/assets/logo5.png"); 861 | /* harmony import */ var _modules_popUp_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/popUp.js */ "./src/modules/popUp.js"); 862 | /* harmony import */ var _modules_getMovies_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/getMovies.js */ "./src/modules/getMovies.js"); 863 | 864 | 865 | 866 | 867 | const logo = document.getElementById('logo'); 868 | logo.src = _assets_logo5_png__WEBPACK_IMPORTED_MODULE_1__; 869 | const container = document.querySelector('.grid_container'); 870 | 871 | // Total displayed items 872 | const movieCount = () => document.querySelectorAll('.sec').length; 873 | async function display(data) { 874 | container.innerHTML = ''; 875 | data.forEach(item => { 876 | const section = document.createElement('section'); 877 | section.classList.add('sec'); 878 | const movieImg = document.createElement('img'); 879 | movieImg.classList.add('grid_img'); 880 | movieImg.src = item.image.medium; 881 | const spacelikeCont = document.createElement('div'); 882 | spacelikeCont.classList.add('space_like'); 883 | const name = document.createElement('div'); 884 | name.innerText = `${item.id}. ${item.name} `; 885 | const likeCont = document.createElement('div'); 886 | likeCont.classList.add('like_cont'); 887 | const likeBtn = document.createElement('button'); 888 | likeBtn.classList.add('likeBtn'); 889 | likeBtn.dataset.id = `${item.id}`; 890 | likeBtn.innerHTML = ''; 891 | 892 | // like counter function 893 | const likes = document.createElement('div'); 894 | const dispLikes = async () => { 895 | const like = await (0,_modules_getMovies_js__WEBPACK_IMPORTED_MODULE_3__.getLikes)(); 896 | like.forEach(id => { 897 | if (id.item_id === item.id) { 898 | likes.innerText = `${id.likes} likes`; 899 | } 900 | }); 901 | 902 | // Movie count display 903 | const totalItems = document.querySelector('.item_number'); 904 | totalItems.innerHTML = `Movies(${movieCount()})`; 905 | }; 906 | dispLikes(); 907 | const commentBtn = document.createElement('button'); 908 | commentBtn.innerText = 'comments'; 909 | commentBtn.classList.add('comment'); 910 | section.appendChild(movieImg); 911 | section.appendChild(spacelikeCont); 912 | spacelikeCont.appendChild(name); 913 | spacelikeCont.appendChild(likeCont); 914 | likeCont.appendChild(likeBtn); 915 | likeCont.appendChild(likes); 916 | container.appendChild(section); 917 | section.appendChild(commentBtn); 918 | commentBtn.addEventListener('click', () => { 919 | (0,_modules_popUp_js__WEBPACK_IMPORTED_MODULE_2__["default"])(item.id); 920 | }); 921 | likeBtn.addEventListener('click', async () => { 922 | (0,_modules_getMovies_js__WEBPACK_IMPORTED_MODULE_3__.postLikes)(item.id); 923 | dispLikes(); 924 | }); 925 | }); 926 | } 927 | async function show() { 928 | const showMovie = await (0,_modules_getMovies_js__WEBPACK_IMPORTED_MODULE_3__.getMovie)(); 929 | display(showMovie); 930 | } 931 | show(); 932 | })(); 933 | 934 | /******/ })() 935 | ; 936 | //# sourceMappingURL=bundle.js.map -------------------------------------------------------------------------------- /dist/bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"bundle.js","mappings":"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EAAe,2HAAO,IAAI,kIAAc,GAAG,kIAAc,YAAY,EAAC;;;;;;;;;;;;AC1BhE;;AAEb;;AAEA;AACA;;AAEA,kBAAkB,wBAAwB;AAC1C;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA,kBAAkB,iBAAiB;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,MAAM;AACN;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,oBAAoB,4BAA4B;AAChD;AACA;AACA;AACA;;AAEA;;AAEA,qBAAqB,6BAA6B;AAClD;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;;;;ACvGa;;AAEb;AACA;;AAEA;AACA;AACA,sDAAsD;;AAEtD;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;;;;;;;;;;;ACtCa;;AAEb;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;ACVa;;AAEb;AACA;AACA,cAAc,KAAwC,GAAG,sBAAiB,GAAG,CAAI;;AAEjF;AACA;AACA;AACA;;AAEA;;;;;;;;;;;ACXa;;AAEb;AACA;AACA;;AAEA;AACA,kDAAkD;AAClD;;AAEA;AACA,0CAA0C;AAC1C;;AAEA;;AAEA;AACA,iFAAiF;AACjF;;AAEA;;AAEA;AACA,aAAa;AACb;;AAEA;AACA,aAAa;AACb;;AAEA;AACA,aAAa;AACb;;AAEA;;AAEA;AACA,yDAAyD;AACzD,IAAI;;AAEJ;;;AAGA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA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","sources":["webpack://javascriptcapstone/./src/modules/comments.js","webpack://javascriptcapstone/./src/modules/getMovies.js","webpack://javascriptcapstone/./src/modules/popUp.js","webpack://javascriptcapstone/./src/tests/commentCounter.js","webpack://javascriptcapstone/./src/styles/main.scss","webpack://javascriptcapstone/./node_modules/css-loader/dist/runtime/api.js","webpack://javascriptcapstone/./node_modules/css-loader/dist/runtime/sourceMaps.js","webpack://javascriptcapstone/./src/styles/main.scss?69c7","webpack://javascriptcapstone/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js","webpack://javascriptcapstone/./node_modules/style-loader/dist/runtime/insertBySelector.js","webpack://javascriptcapstone/./node_modules/style-loader/dist/runtime/insertStyleElement.js","webpack://javascriptcapstone/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js","webpack://javascriptcapstone/./node_modules/style-loader/dist/runtime/styleDomAPI.js","webpack://javascriptcapstone/./node_modules/style-loader/dist/runtime/styleTagTransform.js","webpack://javascriptcapstone/webpack/bootstrap","webpack://javascriptcapstone/webpack/runtime/compat get default export","webpack://javascriptcapstone/webpack/runtime/define property getters","webpack://javascriptcapstone/webpack/runtime/global","webpack://javascriptcapstone/webpack/runtime/hasOwnProperty shorthand","webpack://javascriptcapstone/webpack/runtime/make namespace object","webpack://javascriptcapstone/webpack/runtime/publicPath","webpack://javascriptcapstone/webpack/runtime/nonce","webpack://javascriptcapstone/./src/index.js"],"sourcesContent":["import { countListItems } from '../tests/commentCounter.js';\n\nconst api = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/yGJsLE5rhYlcLOG1HopD/comments';\n\nconst addcommentsToList = (comment) => {\n const list = document.querySelector('#comment-list');\n const li = document.createElement('li');\n\n const span = document.createElement('span');\n\n span.innerHTML = `${comment.creation_date} ${comment.username}: ${comment.comment}`;\n\n li.appendChild(span);\n list.appendChild(li);\n const h3 = document.querySelector('#commentTitle');\n const countComments = countListItems(list);\n h3.innerHTML = `Comments(${countComments})`;\n};\n\nexport const displayComments = async (targetMovie) => {\n const comments = await (await fetch(`${api}?item_id=${targetMovie}`)).json();\n comments.forEach((comment) => addcommentsToList(comment));\n};\n\n// eslint-disable-next-line camelcase\nexport const postComment = async (item_id, username, comment) => {\n const newComment = {\n item_id, username, comment, creation_date: new Date().toISOString(),\n };\n\n addcommentsToList(newComment);\n\n const res = await fetch(api,\n {\n method: 'POST',\n headers: { 'content-type': 'application/json' },\n body: JSON.stringify({ item_id, username, comment }),\n });\n const data = await res.json();\n\n return data.result;\n};","export const getMovie = async () => {\n const getMovie = await fetch('https://api.tvmaze.com/shows');\n const result = await getMovie.json();\n return result;\n};\n\nconst api = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/yGJsLE5rhYlcLOG1HopD/likes';\n\nexport const getLikes = async () => {\n const likesApi = await fetch(api);\n const likesArray = await likesApi.json();\n return likesArray;\n};\n\nexport const postLikes = async (item) => {\n const settings = {\n method: 'POST',\n headers: { 'content-type': 'application/json' },\n body: JSON.stringify({ item_id: item }),\n };\n\n const fetchRes = await fetch(api, settings);\n return fetchRes;\n};\n","import { getMovie } from './getMovies.js';\nimport { displayComments, postComment } from './comments.js';\n\nfunction showModal(modal) {\n document.body.appendChild(modal);\n modal.style.display = 'block';\n}\n\nfunction hideModal(modal) {\n modal.style.display = 'none';\n modal.parentNode.removeChild(modal);\n}\n\nfunction createModal(data, targetMovie) {\n const filterResult = data.filter((item) => item.id === targetMovie);\n\n const modal = document.createElement('div');\n modal.classList.add('modal');\n\n const modalContent = document.createElement('div');\n modalContent.classList.add('modal-content');\n\n const imageSummaryFrame = document.createElement('div');\n imageSummaryFrame.classList.add('image-summary-frame');\n\n const imageFrame = document.createElement('div');\n imageFrame.classList.add('image-frame');\n\n const movieImage = document.createElement('img');\n movieImage.src = `${filterResult[0].image.medium}`;\n imageFrame.appendChild(movieImage);\n\n const summaryFrame = document.createElement('div');\n summaryFrame.classList.add('summary-frame');\n\n const titleFrame = document.createElement('h1');\n titleFrame.classList.add('title-frame');\n titleFrame.innerHTML = `${filterResult[0].name}`;\n summaryFrame.appendChild(titleFrame);\n\n const ul = document.createElement('ul');\n ul.innerHTML = `\n
  • Genre:
    ${filterResult[0].genres[0]} ${filterResult[0].genres[1]}
    • \n
  • Type:
    ${filterResult[0].type}
    • \n
  • Language:
    ${filterResult[0].language}
    • \n
  • Summary:
    ${filterResult[0].summary}
    • \n `;\n summaryFrame.appendChild(ul);\n\n const closeBtn = document.createElement('span');\n closeBtn.classList.add('close-btn');\n closeBtn.innerHTML = '×';\n\n imageSummaryFrame.appendChild(imageFrame);\n imageSummaryFrame.appendChild(summaryFrame);\n\n modalContent.appendChild(imageSummaryFrame);\n modalContent.appendChild(closeBtn);\n\n const commentFrame = document.createElement('div');\n commentFrame.classList.add('comment-frame');\n commentFrame.innerHTML = `\n

    \n \n

    Add a comment

    \n
    \n \n \n \n \n
    \n `;\n\n modalContent.appendChild(commentFrame);\n\n modal.appendChild(modalContent);\n\n showModal(modal);\n\n const form = document.querySelector('#comment-form');\n form.addEventListener('submit', async (event) => {\n event.preventDefault();\n const itemId = document.querySelector('#movieId').value;\n const username = document.querySelector('#username').value;\n const comment = document.querySelector('#comment').value;\n\n if (username !== '' && comment !== '') {\n document.querySelector('#username').value = '';\n document.querySelector('#comment').value = '';\n\n await postComment(itemId, username, comment);\n }\n });\n\n closeBtn.addEventListener('click', () => {\n hideModal(modal);\n });\n}\n\nexport default async function showSelectedMovie(targetMovie) {\n const data = await getMovie();\n createModal(data, targetMovie);\n displayComments(targetMovie);\n}\n","function countListItems(list) {\n if (list == null) {\n return 0;\n }\n return list.querySelectorAll('li').length;\n}\n\nmodule.exports = { countListItems };\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"* {\\n box-sizing: border-box;\\n}\\n\\n.like_cont,\\n.sec,\\nfooter,\\nbody {\\n display: flex;\\n flex-direction: column;\\n}\\n\\nbody {\\n background-color: #13191c;\\n font-family: \\\"Roboto\\\", sans-serif;\\n margin: 0;\\n align-items: center;\\n padding-top: 40px;\\n}\\n\\nheader {\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n margin-bottom: 30px;\\n gap: 80px;\\n color: #f4f4f4;\\n font-size: 32px;\\n width: 70%;\\n height: auto;\\n background-image: linear-gradient(black, rgb(39, 30, 30), gray);\\n}\\n\\n.logo {\\n border: 2px solid #f4f4f4;\\n width: 200px;\\n}\\n\\n.head_cont {\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n width: 70%;\\n height: 120px;\\n}\\n\\n.head_size {\\n width: 60%;\\n flex-grow: 10;\\n}\\n\\n.item_number {\\n text-decoration: underline;\\n}\\n\\n.grid_container {\\n display: grid;\\n grid-template-columns: 1fr 1fr 1fr 1fr;\\n gap: 20px;\\n width: 70%;\\n height: auto;\\n padding: 30px;\\n margin-bottom: 80px;\\n border: 1px solid white;\\n border-radius: 10px;\\n}\\n\\n.grid_img {\\n border-radius: 5px;\\n width: 100%;\\n height: 400px;\\n border: 1px solid #f4f4f4;\\n}\\n\\n.grid_img:hover {\\n border: 2px solid red;\\n}\\n\\n.sec {\\n justify-content: space-between;\\n width: 100%;\\n height: 600px;\\n border-radius: 8px;\\n}\\n\\n.space_like {\\n display: flex;\\n justify-content: space-between;\\n color: #f4f4f4;\\n font-size: 20px;\\n width: 100%;\\n height: 80px;\\n margin-bottom: 0;\\n}\\n\\n.like_cont {\\n height: auto;\\n}\\n\\nbutton {\\n width: 60px;\\n height: 50px;\\n border-radius: 8px;\\n margin-bottom: 5px;\\n}\\n\\n.comment {\\n display: flex;\\n width: 100%;\\n height: 70px;\\n font-size: 32px;\\n color: #f4f4f4;\\n background: black;\\n justify-content: center;\\n align-items: center;\\n border: 2px solid #f4f4f4;\\n border-radius: 5px;\\n}\\n\\nfooter {\\n border-top: 2px solid #f4f4f4;\\n width: 100%;\\n height: 80px;\\n justify-content: center;\\n align-items: center;\\n padding-left: 40px;\\n font-size: 20px;\\n color: #f4f4f4;\\n background: black;\\n}\\n\\n.modal {\\n display: none;\\n position: fixed;\\n z-index: 99;\\n left: 0;\\n top: 0;\\n width: 100%;\\n height: 100%;\\n overflow-y: scroll;\\n background-color: rgba(0, 0, 0, 0.9); /* darken the background */\\n}\\n.modal::-webkit-scrollbar {\\n width: 15px;\\n height: 3em; /* width of the entire scrollbar */\\n}\\n.modal::-webkit-scrollbar-track {\\n background: #e0de61; /* color of the tracking area */\\n}\\n.modal::-webkit-scrollbar-thumb {\\n background-color: rgba(255, 247, 247, 0); /* color of the scroll thumb */\\n border-radius: 20px; /* roundness of the scroll thumb */\\n border: 5px solid #743206; /* creates padding around scroll thumb */\\n}\\n\\n.modal-content {\\n width: 80%;\\n min-height: 80%;\\n color: white;\\n background-color: #1c1919;\\n margin: 2% auto;\\n padding: 30px;\\n border: 1px solid #888;\\n border-radius: 10px;\\n position: relative;\\n overflow: auto;\\n display: flex;\\n flex-direction: column;\\n gap: 20px;\\n}\\n.modal-content .image-summary-frame {\\n display: flex;\\n gap: 30px;\\n}\\n.modal-content .image-frame {\\n display: inline-block;\\n border: 2px solid gainsboro;\\n border-radius: 3px;\\n}\\n.modal-content img {\\n border-radius: 3px;\\n}\\n.modal-content h1 {\\n margin-top: 0;\\n}\\n.modal-content ul {\\n width: 90%;\\n padding: 20px;\\n border-radius: 5px;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n background-color: #292b2c;\\n gap: 10px;\\n}\\n.modal-content ul li {\\n display: flex;\\n}\\n.modal-content ul li dt {\\n width: 50px;\\n}\\n.modal-content ul li p {\\n margin: 0;\\n}\\n.modal-content .close-btn {\\n color: red;\\n cursor: pointer;\\n font-size: 2.5rem;\\n position: absolute;\\n top: 5px;\\n right: 20px;\\n}\\n.modal-content .comment-frame {\\n width: 100%;\\n min-height: 200px;\\n border: 2px solid black;\\n border-radius: 5px;\\n display: flex;\\n padding-bottom: 20px;\\n flex-direction: column;\\n align-items: center;\\n}\\n.modal-content .comment-frame ul {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n}\\n.modal-content form {\\n display: flex;\\n flex-direction: column;\\n align-items: flex-start;\\n gap: 10px;\\n}\\n.modal-content form input {\\n width: 100%;\\n}\\n.modal-content .btn {\\n background-color: #f4f4f4;\\n color: #13191c;\\n border: 0;\\n height: 20px;\\n border-radius: 4px;\\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);\\n font-size: 10px;\\n cursor: pointer;\\n align-self: center;\\n}\\n.modal-content .btn:active {\\n transform: scale(0.98);\\n}\\n.modal-content .btn:focus {\\n outline: 0;\\n}\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/styles/main.scss\"],\"names\":[],\"mappings\":\"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\",\"sourcesContent\":[\"@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');\\r\\n\\r\\n$primary-color: #13191c;\\r\\n$secondary-color: #f4f4f4;\\r\\n$box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);\\r\\n\\r\\n* {\\r\\n box-sizing: border-box;\\r\\n}\\r\\n\\r\\n.like_cont,\\r\\n.sec,\\r\\nfooter,\\r\\nbody {\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n}\\r\\n\\r\\nbody {\\r\\n background-color: $primary-color;\\r\\n font-family: 'Roboto', sans-serif;\\r\\n margin: 0;\\r\\n align-items: center;\\r\\n padding-top: 40px;\\r\\n}\\r\\n\\r\\nheader {\\r\\n display: flex;\\r\\n align-items: center;\\r\\n justify-content: space-between;\\r\\n margin-bottom: 30px;\\r\\n gap: 80px;\\r\\n color: $secondary-color;\\r\\n font-size: 32px;\\r\\n width: 70%;\\r\\n height: auto;\\r\\n background-image: linear-gradient(black, rgb(39, 30, 30), gray);\\r\\n}\\r\\n\\r\\n.logo {\\r\\n border: 2px solid $secondary-color;\\r\\n width: 200px;\\r\\n}\\r\\n\\r\\n.head_cont {\\r\\n display: flex;\\r\\n align-items: center;\\r\\n justify-content: space-between;\\r\\n width: 70%;\\r\\n height: 120px;\\r\\n}\\r\\n\\r\\n.head_size {\\r\\n width: 60%;\\r\\n flex-grow: 10;\\r\\n}\\r\\n\\r\\n.item_number {\\r\\n text-decoration: underline;\\r\\n}\\r\\n\\r\\n.grid_container {\\r\\n display: grid;\\r\\n grid-template-columns: 1fr 1fr 1fr 1fr;\\r\\n gap: 20px;\\r\\n width: 70%;\\r\\n height: auto;\\r\\n padding: 30px;\\r\\n margin-bottom: 80px;\\r\\n border: 1px solid white;\\r\\n border-radius: 10px;\\r\\n}\\r\\n\\r\\n.grid_img {\\r\\n border-radius: 5px;\\r\\n width: 100%;\\r\\n height: 400px;\\r\\n border: 1px solid $secondary-color;\\r\\n}\\r\\n\\r\\n.grid_img:hover {\\r\\n border: 2px solid red;\\r\\n}\\r\\n\\r\\n.sec {\\r\\n justify-content: space-between;\\r\\n width: 100%;\\r\\n height: 600px;\\r\\n border-radius: 8px;\\r\\n}\\r\\n\\r\\n.space_like {\\r\\n display: flex;\\r\\n justify-content: space-between;\\r\\n color: $secondary-color;\\r\\n font-size: 20px;\\r\\n width: 100%;\\r\\n height: 80px;\\r\\n margin-bottom: 0;\\r\\n}\\r\\n\\r\\n.like_cont {\\r\\n height: auto;\\r\\n}\\r\\n\\r\\nbutton {\\r\\n width: 60px;\\r\\n height: 50px;\\r\\n border-radius: 8px;\\r\\n margin-bottom: 5px;\\r\\n}\\r\\n\\r\\n.comment {\\r\\n display: flex;\\r\\n width: 100%;\\r\\n height: 70px;\\r\\n font-size: 32px;\\r\\n color: $secondary-color;\\r\\n background: black;\\r\\n justify-content: center;\\r\\n align-items: center;\\r\\n border: 2px solid $secondary-color;\\r\\n border-radius: 5px;\\r\\n}\\r\\n\\r\\nfooter {\\r\\n border-top: 2px solid $secondary-color;\\r\\n width: 100%;\\r\\n height: 80px;\\r\\n justify-content: center;\\r\\n align-items: center;\\r\\n padding-left: 40px;\\r\\n font-size: 20px;\\r\\n color: $secondary-color;\\r\\n background: black;\\r\\n}\\r\\n\\r\\n.modal {\\r\\n display: none;\\r\\n position: fixed;\\r\\n z-index: 99;\\r\\n left: 0;\\r\\n top: 0;\\r\\n width: 100%;\\r\\n height: 100%;\\r\\n overflow-y: scroll;\\r\\n background-color: rgba(0, 0, 0, 0.9); /* darken the background */\\r\\n\\r\\n &::-webkit-scrollbar {\\r\\n width: 15px;\\r\\n height: 3em; /* width of the entire scrollbar */\\r\\n }\\r\\n\\r\\n &::-webkit-scrollbar-track {\\r\\n background: #e0de61; /* color of the tracking area */\\r\\n }\\r\\n\\r\\n &::-webkit-scrollbar-thumb {\\r\\n background-color: rgba(255, 247, 247, 0); /* color of the scroll thumb */\\r\\n border-radius: 20px; /* roundness of the scroll thumb */\\r\\n border: 5px solid #743206; /* creates padding around scroll thumb */\\r\\n }\\r\\n}\\r\\n\\r\\n.modal-content {\\r\\n width: 80%;\\r\\n min-height: 80%;\\r\\n color: white;\\r\\n background-color: #1c1919;\\r\\n margin: 2% auto;\\r\\n padding: 30px;\\r\\n border: 1px solid #888;\\r\\n border-radius: 10px;\\r\\n position: relative;\\r\\n overflow: auto;\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n gap: 20px;\\r\\n\\r\\n & .image-summary-frame {\\r\\n display: flex;\\r\\n gap: 30px;\\r\\n }\\r\\n\\r\\n & .image-frame {\\r\\n display: inline-block;\\r\\n border: 2px solid gainsboro;\\r\\n border-radius: 3px;\\r\\n }\\r\\n\\r\\n & img {\\r\\n border-radius: 3px;\\r\\n }\\r\\n\\r\\n & h1 {\\r\\n margin-top: 0;\\r\\n }\\r\\n\\r\\n & ul {\\r\\n width: 90%;\\r\\n padding: 20px;\\r\\n border-radius: 5px;\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n justify-content: center;\\r\\n background-color: #292b2c;\\r\\n gap: 10px;\\r\\n }\\r\\n\\r\\n & ul li {\\r\\n display: flex;\\r\\n }\\r\\n\\r\\n & ul li dt {\\r\\n width: 50px;\\r\\n }\\r\\n\\r\\n & ul li p {\\r\\n margin: 0;\\r\\n }\\r\\n\\r\\n & .close-btn {\\r\\n color: red;\\r\\n cursor: pointer;\\r\\n font-size: 2.5rem;\\r\\n position: absolute;\\r\\n top: 5px;\\r\\n right: 20px;\\r\\n }\\r\\n\\r\\n & .comment-frame {\\r\\n width: 100%;\\r\\n min-height: 200px;\\r\\n border: 2px solid black;\\r\\n border-radius: 5px;\\r\\n display: flex;\\r\\n padding-bottom: 20px;\\r\\n flex-direction: column;\\r\\n align-items: center;\\r\\n\\r\\n & ul {\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n align-items: center;\\r\\n justify-content: center;\\r\\n }\\r\\n }\\r\\n\\r\\n & form {\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n align-items: flex-start;\\r\\n gap: 10px;\\r\\n\\r\\n & input {\\r\\n width: 100%;\\r\\n }\\r\\n }\\r\\n\\r\\n .btn {\\r\\n background-color: $secondary-color;\\r\\n color: $primary-color;\\r\\n border: 0;\\r\\n height: 20px;\\r\\n border-radius: 4px;\\r\\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);\\r\\n font-size: 10px;\\r\\n cursor: pointer;\\r\\n align-self: center;\\r\\n\\r\\n &:active {\\r\\n transform: scale(0.98);\\r\\n }\\r\\n\\r\\n &:focus {\\r\\n outline: 0;\\r\\n }\\r\\n }\\r\\n}\\r\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","\"use strict\";\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 = [];\n\n // return the list of modules as css string\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n content += cssWithMappingToString(item);\n if (needLayer) {\n content += \"}\";\n }\n if (item[2]) {\n content += \"}\";\n }\n if (item[4]) {\n content += \"}\";\n }\n return content;\n }).join(\"\");\n };\n\n // import a list of modules into the list\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n var alreadyImportedModules = {};\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\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 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 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 list.push(item);\n }\n };\n return list;\n};","\"use strict\";\n\nmodule.exports = function (item) {\n var content = item[1];\n var cssMapping = item[3];\n if (!cssMapping) {\n return content;\n }\n if (typeof btoa === \"function\") {\n var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(cssMapping))));\n var data = \"sourceMappingURL=data:application/json;charset=utf-8;base64,\".concat(base64);\n var sourceMapping = \"/*# \".concat(data, \" */\");\n return [content].concat([sourceMapping]).join(\"\\n\");\n }\n return [content].join(\"\\n\");\n};","\n import API from \"!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!./main.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!./main.scss\";\n export default content && content.locals ? content.locals : undefined;\n","\"use strict\";\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};","\"use strict\";\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;","\"use strict\";\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;","\"use strict\";\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(styleElement) {\n var nonce = typeof __webpack_nonce__ !== \"undefined\" ? __webpack_nonce__ : null;\n\n if (nonce) {\n styleElement.setAttribute(\"nonce\", nonce);\n }\n}\n\nmodule.exports = setAttributesWithoutAttributes;","\"use strict\";\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;","\"use strict\";\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;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\tid: moduleId,\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","var scriptUrl;\nif (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + \"\";\nvar document = __webpack_require__.g.document;\nif (!scriptUrl && document) {\n\tif (document.currentScript)\n\t\tscriptUrl = document.currentScript.src;\n\tif (!scriptUrl) {\n\t\tvar scripts = document.getElementsByTagName(\"script\");\n\t\tif(scripts.length) scriptUrl = scripts[scripts.length - 1].src\n\t}\n}\n// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration\n// or pass an empty string (\"\") and set the __webpack_public_path__ variable from your code to use your own logic.\nif (!scriptUrl) throw new Error(\"Automatic publicPath is not supported in this browser\");\nscriptUrl = scriptUrl.replace(/#.*$/, \"\").replace(/\\?.*$/, \"\").replace(/\\/[^\\/]+$/, \"/\");\n__webpack_require__.p = scriptUrl;","__webpack_require__.nc = undefined;","import './styles/main.scss';\nimport logo5 from './assets/logo5.png';\nimport showSelectedMovie from './modules/popUp.js';\nimport { getMovie, getLikes, postLikes } from './modules/getMovies.js';\n\nconst logo = document.getElementById('logo');\nlogo.src = logo5;\n\nconst container = document.querySelector('.grid_container');\n\n// Total displayed items\nconst movieCount = () => document.querySelectorAll('.sec').length;\n\nasync function display(data) {\n container.innerHTML = '';\n data.forEach((item) => {\n const section = document.createElement('section');\n section.classList.add('sec');\n\n const movieImg = document.createElement('img');\n movieImg.classList.add('grid_img');\n movieImg.src = item.image.medium;\n\n const spacelikeCont = document.createElement('div');\n spacelikeCont.classList.add('space_like');\n\n const name = document.createElement('div');\n name.innerText = `${item.id}. ${item.name} `;\n\n const likeCont = document.createElement('div');\n likeCont.classList.add('like_cont');\n\n const likeBtn = document.createElement('button');\n likeBtn.classList.add('likeBtn');\n likeBtn.dataset.id = `${item.id}`;\n likeBtn.innerHTML = '';\n\n // like counter function\n const likes = document.createElement('div');\n const dispLikes = async () => {\n const like = await getLikes();\n like.forEach((id) => {\n if (id.item_id === item.id) {\n likes.innerText = `${id.likes} likes`;\n }\n });\n\n // Movie count display\n const totalItems = document.querySelector('.item_number');\n totalItems.innerHTML = `Movies(${movieCount()})`;\n };\n dispLikes();\n\n const commentBtn = document.createElement('button');\n commentBtn.innerText = 'comments';\n commentBtn.classList.add('comment');\n\n section.appendChild(movieImg);\n section.appendChild(spacelikeCont);\n spacelikeCont.appendChild(name);\n spacelikeCont.appendChild(likeCont);\n\n likeCont.appendChild(likeBtn);\n likeCont.appendChild(likes);\n\n container.appendChild(section);\n section.appendChild(commentBtn);\n\n commentBtn.addEventListener('click', () => {\n showSelectedMovie(item.id);\n });\n\n likeBtn.addEventListener('click', async () => {\n postLikes(item.id);\n dispLikes();\n });\n });\n}\n\nasync function show() {\n const showMovie = await getMovie();\n display(showMovie);\n}\n\nshow();\n"],"names":["countListItems","api","addcommentsToList","comment","list","document","querySelector","li","createElement","span","innerHTML","creation_date","username","appendChild","h3","countComments","displayComments","targetMovie","comments","fetch","json","forEach","postComment","item_id","newComment","Date","toISOString","res","method","headers","body","JSON","stringify","data","result","getMovie","getLikes","likesApi","likesArray","postLikes","item","settings","fetchRes","showModal","modal","style","display","hideModal","parentNode","removeChild","createModal","filterResult","filter","id","classList","add","modalContent","imageSummaryFrame","imageFrame","movieImage","src","image","medium","summaryFrame","titleFrame","name","ul","genres","type","language","summary","closeBtn","commentFrame","form","addEventListener","event","preventDefault","itemId","value","showSelectedMovie","querySelectorAll","length","module","exports","logo5","logo","getElementById","container","movieCount","section","movieImg","spacelikeCont","innerText","likeCont","likeBtn","dataset","likes","dispLikes","like","totalItems","commentBtn","show","showMovie"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Amazing Movies 9 | 10 | 11 |
    12 | 13 |
    14 |
    15 |
    Genres
    16 |
    Schedule
    17 |
    18 |
    19 | 20 |
    21 |
    22 | 23 | 26 | 27 | -------------------------------------------------------------------------------- /dist/logo5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/JavaScriptCapstone/bc3be3dd42689618411bccec2cc60961c904c80c/dist/logo5.png -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // other configuration options... 3 | testEnvironment: 'jsdom', 4 | 5 | moduleNameMapper: { 6 | '\\.(scss)$': '/__mocks__/styleMock.js', 7 | }, 8 | 9 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascriptcapstone", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack", 8 | "dev": "webpack serve", 9 | "predeploy": "npm run build", 10 | "deploy": "gh-pages -d dist", 11 | "test": "jest" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/ab-noori/JavaScriptCapstone.git" 16 | }, 17 | "keywords": [], 18 | "author": "", 19 | "license": "ISC", 20 | "bugs": { 21 | "url": "https://github.com/ab-noori/JavaScriptCapstone/issues" 22 | }, 23 | "homepage": "https://github.com/ab-noori/JavaScriptCapstone#readme", 24 | "devDependencies": { 25 | "@babel/core": "^7.21.0", 26 | "@babel/plugin-transform-modules-commonjs": "^7.21.2", 27 | "@babel/preset-env": "^7.20.2", 28 | "babel-eslint": "^10.1.0", 29 | "babel-loader": "^9.1.2", 30 | "css-loader": "^6.7.3", 31 | "eslint": "^7.32.0", 32 | "eslint-config-airbnb-base": "^14.2.1", 33 | "eslint-plugin-import": "^2.27.5", 34 | "hint": "^2.0.0", 35 | "html-webpack-plugin": "^5.5.0", 36 | "jest": "^29.5.0", 37 | "jest-environment-jsdom": "^29.5.0", 38 | "jsdom": "^21.1.1", 39 | "sass": "^1.58.3", 40 | "sass-loader": "^13.2.0", 41 | "style-loader": "^3.3.1", 42 | "stylelint": "^13.13.1", 43 | "stylelint-config-standard": "^21.0.0", 44 | "stylelint-csstree-validator": "^1.9.0", 45 | "stylelint-scss": "^3.21.0", 46 | "webpack": "^5.75.0", 47 | "webpack-cli": "^5.0.1", 48 | "webpack-dev-server": "^4.11.1" 49 | }, 50 | "dependencies": { 51 | "axios": "^1.3.4", 52 | "text-encoding": "^0.7.0" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/assets/desktop-shot.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/JavaScriptCapstone/bc3be3dd42689618411bccec2cc60961c904c80c/src/assets/desktop-shot.PNG -------------------------------------------------------------------------------- /src/assets/desktop-shot2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/JavaScriptCapstone/bc3be3dd42689618411bccec2cc60961c904c80c/src/assets/desktop-shot2.PNG -------------------------------------------------------------------------------- /src/assets/logo5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/JavaScriptCapstone/bc3be3dd42689618411bccec2cc60961c904c80c/src/assets/logo5.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './styles/main.scss'; 2 | import logo5 from './assets/logo5.png'; 3 | import showSelectedMovie from './modules/popUp.js'; 4 | import { getMovie, getLikes, postLikes } from './modules/getMovies.js'; 5 | 6 | const logo = document.getElementById('logo'); 7 | logo.src = logo5; 8 | 9 | const container = document.querySelector('.grid_container'); 10 | 11 | // Total displayed items 12 | const movieCount = () => document.querySelectorAll('.sec').length; 13 | 14 | async function display(data) { 15 | container.innerHTML = ''; 16 | data.forEach((item) => { 17 | const section = document.createElement('section'); 18 | section.classList.add('sec'); 19 | 20 | const movieImg = document.createElement('img'); 21 | movieImg.classList.add('grid_img'); 22 | movieImg.src = item.image.medium; 23 | 24 | const spacelikeCont = document.createElement('div'); 25 | spacelikeCont.classList.add('space_like'); 26 | 27 | const name = document.createElement('div'); 28 | name.innerText = `${item.id}. ${item.name} `; 29 | 30 | const likeCont = document.createElement('div'); 31 | likeCont.classList.add('like_cont'); 32 | 33 | const likeBtn = document.createElement('button'); 34 | likeBtn.classList.add('likeBtn'); 35 | likeBtn.dataset.id = `${item.id}`; 36 | likeBtn.innerHTML = ''; 37 | 38 | // like counter function 39 | const likes = document.createElement('div'); 40 | const dispLikes = async () => { 41 | const like = await getLikes(); 42 | like.forEach((id) => { 43 | if (id.item_id === item.id) { 44 | likes.innerText = `${id.likes} likes`; 45 | } 46 | }); 47 | 48 | // Movie count display 49 | const totalItems = document.querySelector('.item_number'); 50 | totalItems.innerHTML = `Movies(${movieCount()})`; 51 | }; 52 | dispLikes(); 53 | 54 | const commentBtn = document.createElement('button'); 55 | commentBtn.innerText = 'comments'; 56 | commentBtn.classList.add('comment'); 57 | 58 | section.appendChild(movieImg); 59 | section.appendChild(spacelikeCont); 60 | spacelikeCont.appendChild(name); 61 | spacelikeCont.appendChild(likeCont); 62 | 63 | likeCont.appendChild(likeBtn); 64 | likeCont.appendChild(likes); 65 | 66 | container.appendChild(section); 67 | section.appendChild(commentBtn); 68 | 69 | commentBtn.addEventListener('click', () => { 70 | showSelectedMovie(item.id); 71 | }); 72 | 73 | likeBtn.addEventListener('click', async () => { 74 | postLikes(item.id); 75 | dispLikes(); 76 | }); 77 | }); 78 | } 79 | 80 | async function show() { 81 | const showMovie = await getMovie(); 82 | display(showMovie); 83 | } 84 | 85 | show(); 86 | -------------------------------------------------------------------------------- /src/modules/comments.js: -------------------------------------------------------------------------------- 1 | import { countListItems } from '../tests/commentCounter.js'; 2 | 3 | const api = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/yGJsLE5rhYlcLOG1HopD/comments'; 4 | 5 | const addcommentsToList = (comment) => { 6 | const list = document.querySelector('#comment-list'); 7 | const li = document.createElement('li'); 8 | 9 | const span = document.createElement('span'); 10 | 11 | span.innerHTML = `${comment.creation_date} ${comment.username}: ${comment.comment}`; 12 | 13 | li.appendChild(span); 14 | list.appendChild(li); 15 | const h3 = document.querySelector('#commentTitle'); 16 | const countComments = countListItems(list); 17 | h3.innerHTML = `Comments(${countComments})`; 18 | }; 19 | 20 | export const displayComments = async (targetMovie) => { 21 | const comments = await (await fetch(`${api}?item_id=${targetMovie}`)).json(); 22 | comments.forEach((comment) => addcommentsToList(comment)); 23 | }; 24 | 25 | // eslint-disable-next-line camelcase 26 | export const postComment = async (item_id, username, comment) => { 27 | const newComment = { 28 | item_id, username, comment, creation_date: new Date().toISOString(), 29 | }; 30 | 31 | addcommentsToList(newComment); 32 | 33 | const res = await fetch(api, 34 | { 35 | method: 'POST', 36 | headers: { 'content-type': 'application/json' }, 37 | body: JSON.stringify({ item_id, username, comment }), 38 | }); 39 | const data = await res.json(); 40 | 41 | return data.result; 42 | }; -------------------------------------------------------------------------------- /src/modules/getMovies.js: -------------------------------------------------------------------------------- 1 | export const getMovie = async () => { 2 | const getMovie = await fetch('https://api.tvmaze.com/shows'); 3 | const result = await getMovie.json(); 4 | return result; 5 | }; 6 | 7 | const api = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/yGJsLE5rhYlcLOG1HopD/likes'; 8 | 9 | export const getLikes = async () => { 10 | const likesApi = await fetch(api); 11 | const likesArray = await likesApi.json(); 12 | return likesArray; 13 | }; 14 | 15 | export const postLikes = async (item) => { 16 | const settings = { 17 | method: 'POST', 18 | headers: { 'content-type': 'application/json' }, 19 | body: JSON.stringify({ item_id: item }), 20 | }; 21 | 22 | const fetchRes = await fetch(api, settings); 23 | return fetchRes; 24 | }; 25 | -------------------------------------------------------------------------------- /src/modules/popUp.js: -------------------------------------------------------------------------------- 1 | import { getMovie } from './getMovies.js'; 2 | import { displayComments, postComment } from './comments.js'; 3 | 4 | function showModal(modal) { 5 | document.body.appendChild(modal); 6 | modal.style.display = 'block'; 7 | } 8 | 9 | function hideModal(modal) { 10 | modal.style.display = 'none'; 11 | modal.parentNode.removeChild(modal); 12 | } 13 | 14 | function createModal(data, targetMovie) { 15 | const filterResult = data.filter((item) => item.id === targetMovie); 16 | 17 | const modal = document.createElement('div'); 18 | modal.classList.add('modal'); 19 | 20 | const modalContent = document.createElement('div'); 21 | modalContent.classList.add('modal-content'); 22 | 23 | const imageSummaryFrame = document.createElement('div'); 24 | imageSummaryFrame.classList.add('image-summary-frame'); 25 | 26 | const imageFrame = document.createElement('div'); 27 | imageFrame.classList.add('image-frame'); 28 | 29 | const movieImage = document.createElement('img'); 30 | movieImage.src = `${filterResult[0].image.medium}`; 31 | imageFrame.appendChild(movieImage); 32 | 33 | const summaryFrame = document.createElement('div'); 34 | summaryFrame.classList.add('summary-frame'); 35 | 36 | const titleFrame = document.createElement('h1'); 37 | titleFrame.classList.add('title-frame'); 38 | titleFrame.innerHTML = `${filterResult[0].name}`; 39 | summaryFrame.appendChild(titleFrame); 40 | 41 | const ul = document.createElement('ul'); 42 | ul.innerHTML = ` 43 |
  • Genre:
    ${filterResult[0].genres[0]} ${filterResult[0].genres[1]}
    • 44 |
  • Type:
    ${filterResult[0].type}
    • 45 |
  • Language:
    ${filterResult[0].language}
    • 46 |
  • Summary:
    ${filterResult[0].summary}
    • 47 | `; 48 | summaryFrame.appendChild(ul); 49 | 50 | const closeBtn = document.createElement('span'); 51 | closeBtn.classList.add('close-btn'); 52 | closeBtn.innerHTML = '×'; 53 | 54 | imageSummaryFrame.appendChild(imageFrame); 55 | imageSummaryFrame.appendChild(summaryFrame); 56 | 57 | modalContent.appendChild(imageSummaryFrame); 58 | modalContent.appendChild(closeBtn); 59 | 60 | const commentFrame = document.createElement('div'); 61 | commentFrame.classList.add('comment-frame'); 62 | commentFrame.innerHTML = ` 63 |

    64 | 67 |

    Add a comment

    68 |
    69 | 70 | 71 | 72 | 73 |
    74 | `; 75 | 76 | modalContent.appendChild(commentFrame); 77 | 78 | modal.appendChild(modalContent); 79 | 80 | showModal(modal); 81 | 82 | const form = document.querySelector('#comment-form'); 83 | form.addEventListener('submit', async (event) => { 84 | event.preventDefault(); 85 | const itemId = document.querySelector('#movieId').value; 86 | const username = document.querySelector('#username').value; 87 | const comment = document.querySelector('#comment').value; 88 | 89 | if (username !== '' && comment !== '') { 90 | document.querySelector('#username').value = ''; 91 | document.querySelector('#comment').value = ''; 92 | 93 | await postComment(itemId, username, comment); 94 | } 95 | }); 96 | 97 | closeBtn.addEventListener('click', () => { 98 | hideModal(modal); 99 | }); 100 | } 101 | 102 | export default async function showSelectedMovie(targetMovie) { 103 | const data = await getMovie(); 104 | createModal(data, targetMovie); 105 | displayComments(targetMovie); 106 | } 107 | -------------------------------------------------------------------------------- /src/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | $primary-color: #13191c; 4 | $secondary-color: #f4f4f4; 5 | $box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); 6 | 7 | * { 8 | box-sizing: border-box; 9 | } 10 | 11 | .like_cont, 12 | .sec, 13 | footer, 14 | body { 15 | display: flex; 16 | flex-direction: column; 17 | } 18 | 19 | body { 20 | background-color: $primary-color; 21 | font-family: 'Roboto', sans-serif; 22 | margin: 0; 23 | align-items: center; 24 | padding-top: 40px; 25 | } 26 | 27 | header { 28 | display: flex; 29 | align-items: center; 30 | justify-content: space-between; 31 | margin-bottom: 30px; 32 | gap: 80px; 33 | color: $secondary-color; 34 | font-size: 32px; 35 | width: 70%; 36 | height: auto; 37 | background-image: linear-gradient(black, rgb(39, 30, 30), gray); 38 | } 39 | 40 | .logo { 41 | border: 2px solid $secondary-color; 42 | width: 200px; 43 | } 44 | 45 | .head_cont { 46 | display: flex; 47 | align-items: center; 48 | justify-content: space-between; 49 | width: 70%; 50 | height: 120px; 51 | } 52 | 53 | .head_size { 54 | width: 60%; 55 | flex-grow: 10; 56 | } 57 | 58 | .item_number { 59 | text-decoration: underline; 60 | } 61 | 62 | .grid_container { 63 | display: grid; 64 | grid-template-columns: 1fr 1fr 1fr 1fr; 65 | gap: 20px; 66 | width: 70%; 67 | height: auto; 68 | padding: 30px; 69 | margin-bottom: 80px; 70 | border: 1px solid white; 71 | border-radius: 10px; 72 | } 73 | 74 | .grid_img { 75 | border-radius: 5px; 76 | width: 100%; 77 | height: 400px; 78 | border: 1px solid $secondary-color; 79 | } 80 | 81 | .grid_img:hover { 82 | border: 2px solid red; 83 | } 84 | 85 | .sec { 86 | justify-content: space-between; 87 | width: 100%; 88 | height: 600px; 89 | border-radius: 8px; 90 | } 91 | 92 | .space_like { 93 | display: flex; 94 | justify-content: space-between; 95 | color: $secondary-color; 96 | font-size: 20px; 97 | width: 100%; 98 | height: 80px; 99 | margin-bottom: 0; 100 | } 101 | 102 | .like_cont { 103 | height: auto; 104 | } 105 | 106 | button { 107 | width: 60px; 108 | height: 50px; 109 | border-radius: 8px; 110 | margin-bottom: 5px; 111 | } 112 | 113 | .comment { 114 | display: flex; 115 | width: 100%; 116 | height: 70px; 117 | font-size: 32px; 118 | color: $secondary-color; 119 | background: black; 120 | justify-content: center; 121 | align-items: center; 122 | border: 2px solid $secondary-color; 123 | border-radius: 5px; 124 | } 125 | 126 | footer { 127 | border-top: 2px solid $secondary-color; 128 | width: 100%; 129 | height: 80px; 130 | justify-content: center; 131 | align-items: center; 132 | padding-left: 40px; 133 | font-size: 20px; 134 | color: $secondary-color; 135 | background: black; 136 | } 137 | 138 | .modal { 139 | display: none; 140 | position: fixed; 141 | z-index: 99; 142 | left: 0; 143 | top: 0; 144 | width: 100%; 145 | height: 100%; 146 | overflow-y: scroll; 147 | background-color: rgba(0, 0, 0, 0.9); /* darken the background */ 148 | 149 | &::-webkit-scrollbar { 150 | width: 15px; 151 | height: 3em; /* width of the entire scrollbar */ 152 | } 153 | 154 | &::-webkit-scrollbar-track { 155 | background: #e0de61; /* color of the tracking area */ 156 | } 157 | 158 | &::-webkit-scrollbar-thumb { 159 | background-color: rgba(255, 247, 247, 0); /* color of the scroll thumb */ 160 | border-radius: 20px; /* roundness of the scroll thumb */ 161 | border: 5px solid #743206; /* creates padding around scroll thumb */ 162 | } 163 | } 164 | 165 | .modal-content { 166 | width: 80%; 167 | min-height: 80%; 168 | color: white; 169 | background-color: #1c1919; 170 | margin: 2% auto; 171 | padding: 30px; 172 | border: 1px solid #888; 173 | border-radius: 10px; 174 | position: relative; 175 | overflow: auto; 176 | display: flex; 177 | flex-direction: column; 178 | gap: 20px; 179 | 180 | & .image-summary-frame { 181 | display: flex; 182 | gap: 30px; 183 | } 184 | 185 | & .image-frame { 186 | display: inline-block; 187 | border: 2px solid gainsboro; 188 | border-radius: 3px; 189 | } 190 | 191 | & img { 192 | border-radius: 3px; 193 | } 194 | 195 | & h1 { 196 | margin-top: 0; 197 | } 198 | 199 | & ul { 200 | width: 90%; 201 | padding: 20px; 202 | border-radius: 5px; 203 | display: flex; 204 | flex-direction: column; 205 | justify-content: center; 206 | background-color: #292b2c; 207 | gap: 10px; 208 | } 209 | 210 | & ul li { 211 | display: flex; 212 | } 213 | 214 | & ul li dt { 215 | width: 50px; 216 | } 217 | 218 | & ul li p { 219 | margin: 0; 220 | } 221 | 222 | & .close-btn { 223 | color: red; 224 | cursor: pointer; 225 | font-size: 2.5rem; 226 | position: absolute; 227 | top: 5px; 228 | right: 20px; 229 | } 230 | 231 | & .comment-frame { 232 | width: 100%; 233 | min-height: 200px; 234 | border: 2px solid black; 235 | border-radius: 5px; 236 | display: flex; 237 | padding-bottom: 20px; 238 | flex-direction: column; 239 | align-items: center; 240 | 241 | & ul { 242 | display: flex; 243 | flex-direction: column; 244 | align-items: center; 245 | justify-content: center; 246 | } 247 | } 248 | 249 | & form { 250 | display: flex; 251 | flex-direction: column; 252 | align-items: flex-start; 253 | gap: 10px; 254 | 255 | & input { 256 | width: 100%; 257 | } 258 | } 259 | 260 | .btn { 261 | background-color: $secondary-color; 262 | color: $primary-color; 263 | border: 0; 264 | height: 20px; 265 | border-radius: 4px; 266 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); 267 | font-size: 10px; 268 | cursor: pointer; 269 | align-self: center; 270 | 271 | &:active { 272 | transform: scale(0.98); 273 | } 274 | 275 | &:focus { 276 | outline: 0; 277 | } 278 | } 279 | } 280 | -------------------------------------------------------------------------------- /src/styles/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: sans-serif; 9 | } 10 | -------------------------------------------------------------------------------- /src/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 |
    12 | 13 |
    14 |
    15 |
    Genres
    16 |
    Schedule
    17 |
    18 |
    19 | 20 |
    21 |
    22 | 23 | 26 | 27 | -------------------------------------------------------------------------------- /src/tests/commentCounter.js: -------------------------------------------------------------------------------- 1 | function countListItems(list) { 2 | if (list == null) { 3 | return 0; 4 | } 5 | return list.querySelectorAll('li').length; 6 | } 7 | 8 | module.exports = { countListItems }; 9 | -------------------------------------------------------------------------------- /src/tests/commentCounter.test.js: -------------------------------------------------------------------------------- 1 | const { countListItems } = require('./commentCounter.js'); 2 | 3 | describe('countListItems', () => { 4 | test('returns 0 for an empty list', () => { 5 | const list = document.createElement('ul'); 6 | expect(countListItems(list)).toBe(0); 7 | }); 8 | 9 | test('returns the correct count for a list with items', () => { 10 | const list = document.createElement('ul'); 11 | list.innerHTML = '
  • Item 1
  • Item 2
  • Item 3
    • '; 12 | expect(countListItems(list)).toBe(3); 13 | }); 14 | 15 | test('returns 0 if the list is null or undefined', () => { 16 | expect(countListItems(null)).toBe(0); 17 | expect(countListItems(undefined)).toBe(0); 18 | }); 19 | }); -------------------------------------------------------------------------------- /src/tests/movieCounter.js: -------------------------------------------------------------------------------- 1 | const movieCount = () => document.querySelectorAll('.sec').length; 2 | 3 | module.exports = movieCount; -------------------------------------------------------------------------------- /src/tests/movieCounter.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | const movieCount = require('./movieCounter.js'); 6 | 7 | describe('Test movie counter', () => { 8 | it('Movie counter returns zero since no value was diplayed', () => { 9 | // Arrange 10 | document.body.innerHTML = ` 11 |
    `; 12 | 13 | // Act 14 | const movie = movieCount(); 15 | 16 | // Assert 17 | expect(movie).toBe(0); 18 | }); 19 | 20 | it('The movie counter returns the right number of movies displayed', () => { 21 | // Arrange 22 | document.body.innerHTML = ` 23 |
    24 |
    25 |
    26 |
    27 |
    `; 28 | 29 | // Act 30 | const movie = movieCount(); 31 | 32 | // Assert 33 | expect(movie).toBe(2); 34 | }); 35 | }); -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | // eslint-disable-next-line import/no-extraneous-dependencies 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | module.exports = { 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.(scss|sass|less|css)$/, 10 | use: ['style-loader', 'css-loader', 'sass-loader'], 11 | }, 12 | 13 | { 14 | test: /\.js$/, 15 | exclude: /node_modules/, 16 | use: { 17 | loader: 'babel-loader', 18 | options: { 19 | presets: ['@babel/preset-env'], 20 | }, 21 | }, 22 | }, 23 | 24 | { 25 | test: /\.(png|svg|jpg|gpeg|gif)/i, 26 | type: 'asset/resource', 27 | }, 28 | ], 29 | }, 30 | 31 | plugins: [ 32 | new HtmlWebpackPlugin({ 33 | title: 'Amazing Movies', 34 | filename: 'index.html', 35 | template: 'src/template.html', 36 | }), 37 | ], 38 | 39 | mode: 'development', 40 | entry: { 41 | bundle: path.resolve(__dirname, './src/index.js'), 42 | }, 43 | 44 | output: { 45 | path: path.resolve(__dirname, 'dist'), 46 | filename: '[name].js', 47 | clean: true, 48 | assetModuleFilename: '[name][ext]', 49 | }, 50 | 51 | devtool: 'source-map', 52 | 53 | devServer: { 54 | static: { 55 | directory: path.resolve(__dirname, 'dist'), 56 | }, 57 | port: 4000, 58 | open: true, 59 | hot: true, 60 | compress: true, 61 | historyApiFallback: true, 62 | }, 63 | }; 64 | --------------------------------------------------------------------------------