16 |
27 |
28 |
17 | 
18 | 
19 | 
20 | 
21 |
24 | 
25 |
26 |
18 |
19 |
20 |
21 |
24 |
25 | NASA
30 | 37 |
16 |
30 |
39 |
40 |
41 |
42 |
49 |
50 |
51 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/src/stylesForComment.css:
--------------------------------------------------------------------------------
1 | .comment-model {
2 | position: fixed;
3 | left: 0;
4 | top: 0;
5 | width: 100%;
6 | height: 100%;
7 | overflow: auto;
8 | z-index: -1;
9 | opacity: 0;
10 | animation: hide 0.25s;
11 | transform: scale(0);
12 | }
13 |
14 | @keyframes hide {
15 | from {
16 | z-index: 2;
17 | transform: scale(1);
18 | opacity: 1;
19 | }
20 |
21 | to {
22 | z-index: -1;
23 | transform: scale(0);
24 | opacity: 0;
25 | }
26 | }
27 |
28 | .active {
29 | opacity: 1;
30 | z-index: 2;
31 | animation: show 0.2s;
32 | transform: scale(1);
33 | }
34 |
35 | @keyframes show {
36 | from {
37 | transform: scale(0);
38 | opacity: 0;
39 | z-index: -1;
40 | }
41 |
42 | to {
43 | transform: scale(1);
44 | opacity: 1;
45 | z-index: 2;
46 | }
47 | }
48 |
49 | .comment-card {
50 | width: 70%;
51 | margin: 3rem auto;
52 | border: 4px solid #be9ce7;
53 | background-color: #111624;
54 | border-radius: 15px;
55 | }
56 |
57 | .close-icon {
58 | float: right;
59 | margin: 10px 18px;
60 | font-size: 2.5rem;
61 | cursor: pointer;
62 | }
63 |
64 | .close-icon i:hover {
65 | color: red;
66 | transform: scale(1.3);
67 | transition: 0.4s;
68 | }
69 |
70 | .main-description {
71 | padding: 80px 130px;
72 | }
73 |
74 | .mediaImage {
75 | width: 100%;
76 | border-radius: 10px;
77 | }
78 |
79 | .mediaVideo {
80 | width: 100%;
81 | height: 50vh;
82 | }
83 |
84 | ::-webkit-scrollbar {
85 | display: none;
86 | }
87 |
88 | .image-title {
89 | text-align: center;
90 | font-size: 2rem;
91 | }
92 |
93 | .image-explanation {
94 | font-style: italic;
95 | }
96 |
97 | .copyright {
98 | text-decoration: underline;
99 | }
100 |
101 | .image-date {
102 | float: right;
103 | }
104 |
105 | .comment-card h2 {
106 | text-align: center;
107 | }
108 |
109 | form {
110 | width: 50%;
111 | margin: 0 auto;
112 | }
113 |
114 | .name-input {
115 | outline: none;
116 | color: #111624;
117 | font-size: 1rem;
118 | padding: 10px;
119 | border-radius: 5px;
120 | width: 100%;
121 | border: none;
122 | box-sizing: border-box;
123 | background-color: snow;
124 | }
125 |
126 | .comment-input {
127 | width: 100%;
128 | height: 150px;
129 | outline: none;
130 | padding: 10px;
131 | color: #111624;
132 | border: none;
133 | border-radius: 5px;
134 | font-size: 1rem;
135 | font-family: inherit;
136 | resize: none;
137 | margin: 25px 0;
138 | box-sizing: border-box;
139 | background-color: snow;
140 | }
141 |
142 | form button {
143 | width: 100%;
144 | background-color: #3ac4;
145 | border: none;
146 | font-size: 1.2rem;
147 | padding: 10px;
148 | border-radius: 5px;
149 | cursor: pointer;
150 | }
151 |
152 | form button:hover {
153 | background-color: rgba(64, 214, 255, 0.527);
154 | }
155 |
156 | .comment-message {
157 | margin: 20px auto;
158 | display: block;
159 | padding: 10px 20px;
160 | font-size: 1.5rem;
161 | color: black;
162 | width: 200px;
163 | cursor: pointer;
164 | }
165 |
--------------------------------------------------------------------------------
/src/modules/cards.js:
--------------------------------------------------------------------------------
1 | import getPictures from './GetRequest';
2 | import { postLike, getLikes } from './involvementApp';
3 | import showCommentCard from './showCommentsCard'; // eslint-disable-line import/no-cycle
4 | import countCards from './count';
5 |
6 | const itemGrid = document.querySelector('.item-grid');
7 |
8 | const createCards = async () => {
9 | const myPictures = await getPictures();
10 | myPictures.forEach((item, i) => {
11 | const card = document.createElement('div');
12 | card.classList.add('card');
13 |
14 | if (item.media_type === 'image') {
15 | const media = document.createElement('img');
16 | media.classList.add('picture');
17 | media.src = item.url;
18 | card.appendChild(media);
19 | media.addEventListener('click', async () => {
20 | await showCommentCard(item.title);
21 | const modal = document.querySelector('.comment-model');
22 | modal.classList.add('active');
23 | });
24 | } else {
25 | const media = document.createElement('iframe');
26 | media.classList.add('video');
27 | media.src = item.url;
28 | card.appendChild(media);
29 | }
30 |
31 | const titleContainer = document.createElement('div');
32 | titleContainer.classList.add('title-container');
33 |
34 | const cardTitle = document.createElement('h3');
35 | cardTitle.textContent = item.title;
36 | cardTitle.classList.add('card-title');
37 |
38 | const contentContainer = document.createElement('div');
39 | contentContainer.classList.add('content-container');
40 |
41 | const likesContainer = document.createElement('div');
42 | likesContainer.classList.add('likes-container');
43 |
44 | const love = document.createElement('i');
45 | love.classList.add('fas', 'fa-heart');
46 | love.setAttribute('index', `${i}`);
47 | likesContainer.appendChild(love);
48 |
49 | const likes = document.createElement('p');
50 | likes.textContent = '0 likes';
51 |
52 | const likeNumber = async () => {
53 | const itemLikes = await getLikes();
54 | itemLikes.forEach((like) => {
55 | if (like.item_id === `picture-${i}`) {
56 | likes.textContent = '';
57 | likes.classList.add('like-number');
58 | likes.textContent = `${like.likes} likes`;
59 | }
60 | });
61 | };
62 |
63 | love.addEventListener('click', async () => {
64 | await postLike(`picture-${i}`);
65 | likeNumber();
66 | love.classList.add('hearted');
67 | });
68 |
69 | likeNumber();
70 | likesContainer.appendChild(likes);
71 |
72 | const comment = document.createElement('button');
73 | comment.classList.add('comment-btn');
74 | comment.type = 'button';
75 | comment.setAttribute('title', `${item.title}`);
76 | comment.innerText = 'Comments';
77 |
78 | comment.addEventListener('click', async () => {
79 | await showCommentCard(item.title);
80 | const modal = document.querySelector('.comment-model');
81 | modal.classList.add('active');
82 | });
83 |
84 | titleContainer.appendChild(cardTitle);
85 | titleContainer.appendChild(contentContainer);
86 | contentContainer.appendChild(likesContainer);
87 | contentContainer.appendChild(comment);
88 | card.appendChild(titleContainer);
89 | card.setAttribute('index', `${i}`);
90 | itemGrid.appendChild(card);
91 | });
92 |
93 | const counter = document.getElementById('picture-counter');
94 | counter.textContent = countCards();
95 | };
96 |
97 | export { createCards as default };
98 |
--------------------------------------------------------------------------------
/src/modules/showCommentsCard.js:
--------------------------------------------------------------------------------
1 | import getPictures from './GetRequest';
2 | import displayComments from './comments';
3 | import { addComments } from './APIcomments';
4 | import countComments from './countComments';
5 |
6 | const showCommentCard = async (title) => {
7 | const myPicturesJson = await getPictures();
8 | const stringifiedJson = JSON.stringify(myPicturesJson);
9 | const myPictures = JSON.parse(stringifiedJson);
10 |
11 | myPictures.forEach((element, index) => {
12 | if (element.title === title) {
13 | const commentModel = document.querySelector('.comment-model');
14 | const commentCard = document.createElement('div');
15 | commentCard.classList.add('comment-card');
16 | commentCard.setAttribute('index', index);
17 |
18 | const closeIcon = document.createElement('div');
19 | closeIcon.classList.add('close-icon');
20 | const icon = document.createElement('i');
21 | icon.classList.add('fas', 'fa-times');
22 | closeIcon.appendChild(icon);
23 |
24 | const closeClick = () => {
25 | commentModel.classList.remove('active');
26 | commentModel.innerHTML = '';
27 | };
28 |
29 | closeIcon.addEventListener('click', closeClick);
30 |
31 | const mainDescription = document.createElement('div');
32 | mainDescription.classList.add('main-description');
33 |
34 | if (element.media_type === 'image') {
35 | const media = document.createElement('img');
36 | media.classList.add('mediaImage');
37 | media.src = element.url;
38 | mainDescription.appendChild(media);
39 | } else {
40 | const media = document.createElement('iframe');
41 | media.classList.add('mediaVideo');
42 | media.src = element.url;
43 | mainDescription.appendChild(media);
44 | }
45 | const h1 = document.createElement('h1');
46 | h1.classList.add('image-title');
47 | h1.innerText = element.title;
48 |
49 | const explanation = document.createElement('p');
50 | explanation.classList.add('image-explanation');
51 | explanation.innerText = element.explanation;
52 |
53 | const extraExplanation = document.createElement('p');
54 | const copyright = document.createElement('span');
55 | copyright.classList.add('copyright');
56 | copyright.innerText = `By ${element.copyright ?? 'Anonymous'}`;
57 |
58 | const imageDate = document.createElement('span');
59 | imageDate.classList.add('image-date');
60 | imageDate.innerText = `${element.date}`;
61 | extraExplanation.append(copyright, imageDate);
62 |
63 | const h2 = document.createElement('h2');
64 | h2.innerText = 'Comments (';
65 | const commentCounter = document.createElement('span');
66 | commentCounter.classList.add('comment-counter');
67 | commentCounter.innerText = '';
68 | const bracket = document.createTextNode(')');
69 | h2.append(commentCounter, bracket);
70 |
71 | const commentContainer = document.createElement('ul');
72 | commentContainer.classList.add('comment-container');
73 |
74 | const commentTitle = document.createElement('h2');
75 | commentTitle.innerText = 'Add a comment';
76 |
77 | const form = document.createElement('form');
78 | form.innerHTML = `
79 |
80 |
81 |
82 | `;
83 |
84 | mainDescription.append(h1, explanation, extraExplanation, h2, commentContainer, commentTitle, form); // eslint-disable-line max-len
85 | commentCard.append(closeIcon, mainDescription);
86 | commentModel.appendChild(commentCard);
87 |
88 | form.addEventListener('submit', async (event) => {
89 | event.preventDefault();
90 | commentContainer.innerHTML = '';
91 |
92 | const username = document.querySelector('.name-input').value;
93 | const commentMessage = document.querySelector('.comment-input').value;
94 | const userID = commentCard.getAttribute('index');
95 |
96 | await addComments(username, commentMessage, userID);
97 | await displayComments(userID);
98 |
99 | form.reset();
100 |
101 | const counter = document.querySelector('.comment-counter');
102 | counter.textContent = countComments();
103 | });
104 | }
105 | });
106 |
107 | const commentCard = document.querySelector('.comment-card');
108 | const userID = commentCard.getAttribute('index');
109 | await displayComments(userID);
110 |
111 | const commentCounter = document.querySelector('.comment-counter');
112 | commentCounter.innerHTML = countComments();
113 | };
114 |
115 | export { showCommentCard as default };
116 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Nasalization";
3 | src: url(./assets/nasalization-cufonfonts-webfont/nasalization\ rg.woff);
4 | }
5 |
6 | @font-face {
7 | font-family: "Helvetica";
8 | src: url(./assets/Helvetica-Font/Helvetica.ttf) format("truetype");
9 | }
10 |
11 | :root {
12 | --light-violet: #be9ce7;
13 | --dark-violet: #9f5eee;
14 | --dark-background: #18161e;
15 | --light-background: #1b1a27;
16 | --custom-red: #eb3f5e;
17 | }
18 |
19 | body {
20 | margin: 0;
21 | box-sizing: border-box;
22 | font-family: "Helvetica", sans-serif;
23 | }
24 |
25 | a {
26 | text-decoration: none;
27 | }
28 |
29 | .app-container {
30 | width: 100%;
31 | height: 100vh;
32 | overflow: hidden;
33 | box-sizing: border-box;
34 | display: grid;
35 | grid-template-columns: 1fr;
36 | grid-template-rows: auto auto 1fr auto auto;
37 | grid-template-areas:
38 | "top-decoration"
39 | "header"
40 | "main"
41 | "footer";
42 | border: 4px solid var(--light-violet);
43 | background-color: var(--dark-background);
44 | }
45 |
46 | .browser {
47 | grid-area: top-decoration;
48 | display: flex;
49 | flex-direction: column;
50 | text-align: center;
51 | border-bottom: 4px solid var(--light-violet);
52 | }
53 |
54 | .browser-navigation {
55 | display: flex;
56 | flex-direction: row;
57 | justify-content: space-around;
58 | align-items: center;
59 | padding: 1.5vh 30px;
60 | }
61 |
62 | .browser-navigation img {
63 | width: auto;
64 | height: 43px;
65 | }
66 |
67 | .address-bar {
68 | text-align: left;
69 | box-sizing: border-box;
70 | margin-bottom: 1vh;
71 | padding: 8px;
72 | width: 60vw;
73 | height: 40px;
74 | border: 4px solid var(--light-violet);
75 | background-color: var(--dark-background);
76 | color: var(--light-violet);
77 | font-weight: bold;
78 | border-radius: 10px;
79 | }
80 |
81 | #address {
82 | margin: 0;
83 | }
84 |
85 | header {
86 | background-color: var(--light-background);
87 | grid-area: header;
88 | margin: 15px 20px;
89 | padding: 5px 0 5px 40px;
90 | display: flex;
91 | justify-content: space-between;
92 | align-items: center;
93 | border: 3px solid var(--light-violet);
94 | border-radius: 10px;
95 | }
96 |
97 | .web-title {
98 | font-family: "Nasalization", sans-serif;
99 | font-size: 2.7rem;
100 | margin: 0 0;
101 | color: var(--custom-red);
102 | }
103 |
104 | .content {
105 | grid-area: main;
106 | overflow-y: auto;
107 | margin: 0 5vw;
108 | }
109 |
110 | .title {
111 | text-align: center;
112 | font-family: "Nasalization", sans-serif;
113 | font-size: 2.5rem;
114 | margin-bottom: 3vw;
115 | }
116 |
117 | .title-link {
118 | text-decoration: none;
119 | }
120 |
121 | .title-link:hover {
122 | color: var(--light-violet);
123 | cursor: pointer;
124 | }
125 |
126 | .item-grid {
127 | display: grid;
128 | grid-template-columns: 1fr 1fr 1fr;
129 | justify-items: center;
130 | }
131 |
132 | .card {
133 | display: flex;
134 | flex-direction: column;
135 | align-items: center;
136 | border: 3px solid #fff;
137 | border-radius: 15px;
138 | width: 25vw;
139 | margin-bottom: 8vh;
140 | animation-name: out;
141 | transition: ease-in-out 0.4s;
142 | }
143 |
144 | .card:hover {
145 | border-color: var(--dark-violet);
146 | transform: scale(1.05);
147 | transition: ease-in-out 0.4s;
148 | animation-name: in;
149 | }
150 |
151 | @keyframes in {
152 | from { transform: scale(1); }
153 | to { transform: scale(1.02); }
154 | }
155 |
156 | @keyframes out {
157 | from { transform: scale(1.05); }
158 | to { transform: scale(1); }
159 | }
160 |
161 | .picture {
162 | width: 20vw;
163 | height: 15vw;
164 | border-radius: 15px;
165 | object-fit: cover;
166 | margin-top: 5vh;
167 | }
168 |
169 | .picture:hover {
170 | cursor: pointer;
171 | }
172 |
173 | .video {
174 | width: 20vw;
175 | height: 15vw;
176 | border-radius: 15px;
177 | margin-top: 5vh;
178 | }
179 |
180 | .title-container {
181 | width: 18vw;
182 | text-align: center;
183 | align-items: center;
184 | }
185 |
186 | .card-title {
187 | font-size: 1.4rem;
188 | }
189 |
190 | .card-title:hover {
191 | color: var(--light-violet);
192 | cursor: pointer;
193 | }
194 |
195 | .content-container {
196 | display: flex;
197 | justify-content: space-between;
198 | align-items: center;
199 | width: 18vw;
200 | margin-bottom: 3vh;
201 | }
202 |
203 | .likes-container {
204 | display: flex;
205 | align-items: center;
206 | }
207 |
208 | .comment-btn {
209 | color: #fff;
210 | background-color: var(--dark-background);
211 | border: 3px solid #fff;
212 | font-family: "Helvetica", sans-serif;
213 | font-weight: bold;
214 | font-size: 1.2rem;
215 | }
216 |
217 | .comment-btn:hover {
218 | color: var(--light-violet);
219 | border-color: var(--light-violet);
220 | cursor: pointer;
221 | }
222 |
223 | .fa-heart {
224 | margin-right: 15px;
225 | font-size: 1.3rem;
226 | color: white;
227 | }
228 |
229 | .fa-heart:hover {
230 | cursor: pointer;
231 | color: var(--custom-red);
232 | }
233 |
234 | .hearted {
235 | color: var(--custom-red);
236 | }
237 |
238 | footer {
239 | grid-area: footer;
240 | border: 3px solid var(--light-violet);
241 | height: 50px;
242 | margin: 15px 20px 15px 20px;
243 | padding-left: 20px;
244 | background-color: var(--light-background);
245 | border-radius: 10px;
246 | }
247 |
248 | @media screen and (max-width: 1200px) {
249 | .browser-navigation img {
250 | display: none;
251 | }
252 | }
253 |
254 | * {
255 | color: #ebebeb;
256 | }
257 |
258 | section {
259 | margin-bottom: 100px;
260 | }
261 |
262 | header p {
263 | font-size: 1.2rem;
264 | }
265 |
266 | nav ul li {
267 | list-style-type: none;
268 | display: inline;
269 | padding: 0 30px;
270 | font-size: 1.2rem;
271 | }
272 |
273 | nav ul li a {
274 | text-decoration: none;
275 | }
276 |
277 | a:hover {
278 | color: var(--light-violet);
279 | }
280 |
281 | .active-tab {
282 | color: rgb(255, 208, 0);
283 | }
284 |
--------------------------------------------------------------------------------
/dist/main.js:
--------------------------------------------------------------------------------
1 | /*
2 | * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
3 | * This devtool is neither made for production nor for readable output files.
4 | * It uses "eval()" calls to create a separate source file in the browser devtools.
5 | * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
6 | * or disable the default devtool with "devtool: false".
7 | * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
8 | */
9 | /******/ (() => { // webpackBootstrap
10 | /******/ "use strict";
11 | /******/ var __webpack_modules__ = ({
12 |
13 | /***/ "./node_modules/css-loader/dist/cjs.js!./src/style.css":
14 | /*!*************************************************************!*\
15 | !*** ./node_modules/css-loader/dist/cjs.js!./src/style.css ***!
16 | \*************************************************************/
17 | /***/ ((module, __webpack_exports__, __webpack_require__) => {
18 |
19 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__);\n// Imports\n\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! ./assets/nasalization-cufonfonts-webfont/nasalization rg.woff */ \"./src/assets/nasalization-cufonfonts-webfont/nasalization rg.woff\"), __webpack_require__.b);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__(/*! ./assets/Helvetica-Font/Helvetica.ttf */ \"./src/assets/Helvetica-Font/Helvetica.ttf\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"@font-face {\\r\\n font-family: \\\"Nasalization\\\";\\r\\n src: url(\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \");\\r\\n}\\r\\n\\r\\n@font-face {\\r\\n font-family: \\\"Helvetica\\\";\\r\\n src: url(\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \") format(\\\"truetype\\\");\\r\\n}\\r\\n\\r\\n:root {\\r\\n --light-violet: #be9ce7;\\r\\n --dark-violet: #9f5eee;\\r\\n --dark-background: #18161e;\\r\\n --light-background: #1b1a27;\\r\\n --custom-red: #eb3f5e;\\r\\n}\\r\\n\\r\\nbody {\\r\\n margin: 0;\\r\\n box-sizing: border-box;\\r\\n font-family: \\\"Helvetica\\\", sans-serif;\\r\\n}\\r\\n\\r\\na {\\r\\n text-decoration: none;\\r\\n}\\r\\n\\r\\n.app-container {\\r\\n width: 100%;\\r\\n height: 100vh;\\r\\n overflow: hidden;\\r\\n box-sizing: border-box;\\r\\n display: grid;\\r\\n grid-template-columns: 1fr;\\r\\n grid-template-rows: auto auto 1fr auto auto;\\r\\n grid-template-areas:\\r\\n \\\"top-decoration\\\"\\r\\n \\\"header\\\"\\r\\n \\\"main\\\"\\r\\n \\\"footer\\\";\\r\\n border: 4px solid var(--light-violet);\\r\\n background-color: var(--dark-background);\\r\\n}\\r\\n\\r\\n.browser {\\r\\n grid-area: top-decoration;\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n text-align: center;\\r\\n border-bottom: 4px solid var(--light-violet);\\r\\n}\\r\\n\\r\\n.browser-navigation {\\r\\n display: flex;\\r\\n flex-direction: row;\\r\\n justify-content: space-around;\\r\\n align-items: center;\\r\\n padding: 1.5vh 30px;\\r\\n}\\r\\n\\r\\n.browser-navigation img {\\r\\n width: auto;\\r\\n height: 43px;\\r\\n}\\r\\n\\r\\n.address-bar {\\r\\n text-align: left;\\r\\n box-sizing: border-box;\\r\\n margin-bottom: 1vh;\\r\\n padding: 8px;\\r\\n width: 60vw;\\r\\n height: 40px;\\r\\n border: 4px solid var(--light-violet);\\r\\n background-color: var(--dark-background);\\r\\n color: var(--light-violet);\\r\\n font-weight: bold;\\r\\n border-radius: 10px;\\r\\n}\\r\\n\\r\\n#address {\\r\\n margin: 0;\\r\\n}\\r\\n\\r\\nheader {\\r\\n background-color: var(--light-background);\\r\\n grid-area: header;\\r\\n margin: 15px 20px;\\r\\n padding: 5px 0 5px 40px;\\r\\n display: flex;\\r\\n justify-content: space-between;\\r\\n align-items: center;\\r\\n border: 3px solid var(--light-violet);\\r\\n border-radius: 10px;\\r\\n}\\r\\n\\r\\n.web-title {\\r\\n font-family: \\\"Nasalization\\\", sans-serif;\\r\\n font-size: 2.7rem;\\r\\n margin: 0 0;\\r\\n color: var(--custom-red);\\r\\n}\\r\\n\\r\\n.content {\\r\\n grid-area: main;\\r\\n overflow-y: auto;\\r\\n margin: 0 5vw;\\r\\n}\\r\\n\\r\\n.title {\\r\\n text-align: center;\\r\\n font-family: \\\"Nasalization\\\", sans-serif;\\r\\n font-size: 2.5rem;\\r\\n margin-bottom: 3vw;\\r\\n}\\r\\n\\r\\n.title-link {\\r\\n text-decoration: none;\\r\\n}\\r\\n\\r\\n.title-link:hover {\\r\\n color: var(--light-violet);\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.item-grid {\\r\\n display: grid;\\r\\n grid-template-columns: 1fr 1fr 1fr;\\r\\n justify-items: center;\\r\\n}\\r\\n\\r\\n.card {\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n align-items: center;\\r\\n border: 3px solid #fff;\\r\\n border-radius: 15px;\\r\\n width: 25vw;\\r\\n margin-bottom: 8vh;\\r\\n animation-name: out;\\r\\n transition: ease-in-out 0.4s;\\r\\n}\\r\\n\\r\\n.card:hover {\\r\\n border-color: var(--dark-violet);\\r\\n transform: scale(1.05);\\r\\n transition: ease-in-out 0.4s;\\r\\n animation-name: in;\\r\\n}\\r\\n\\r\\n@keyframes in {\\r\\n from { transform: scale(1) };\\r\\n to { transform: scale(1.02) };\\r\\n}\\r\\n\\r\\n@keyframes out {\\r\\n from { transform: scale(1.05) };\\r\\n to { transform: scale(1) };\\r\\n}\\r\\n\\r\\n.picture {\\r\\n width: 20vw;\\r\\n height: 15vw;\\r\\n border-radius: 15px;\\r\\n object-fit: cover;\\r\\n margin-top: 5vh;\\r\\n}\\r\\n\\r\\n.picture:hover {\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.video {\\r\\n width: 20vw;\\r\\n height: 15vw;\\r\\n border-radius: 15px;\\r\\n margin-top: 5vh;\\r\\n}\\r\\n\\r\\n.title-container {\\r\\n width: 18vw;\\r\\n text-align: center;\\r\\n align-items: center;\\r\\n}\\r\\n\\r\\n.card-title {\\r\\n font-size: 1.4rem;\\r\\n}\\r\\n\\r\\n.card-title:hover {\\r\\n color: var(--light-violet);\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.content-container {\\r\\n display: flex;\\r\\n justify-content: space-between;\\r\\n align-items: center;\\r\\n width: 18vw;\\r\\n margin-bottom: 3vh;\\r\\n}\\r\\n\\r\\n.likes-container {\\r\\n display: flex;\\r\\n align-items: center;\\r\\n}\\r\\n\\r\\n.comment-btn {\\r\\n color: #fff;\\r\\n background-color: var(--dark-background);\\r\\n border: 3px solid #fff;\\r\\n font-family: \\\"Helvetica\\\", sans-serif;\\r\\n font-weight: bold;\\r\\n font-size: 1.2rem;\\r\\n}\\r\\n\\r\\n.comment-btn:hover {\\r\\n color: var(--light-violet);\\r\\n border-color: var(--light-violet);\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.fa-heart {\\r\\n margin-right: 15px;\\r\\n font-size: 1.3rem;\\r\\n color: white;\\r\\n}\\r\\n\\r\\n.fa-heart:hover {\\r\\n cursor: pointer;\\r\\n color: var(--custom-red);\\r\\n}\\r\\n\\r\\n.hearted {\\r\\n color: var(--custom-red);\\r\\n}\\r\\n\\r\\nfooter {\\r\\n grid-area: footer;\\r\\n border: 3px solid var(--light-violet);\\r\\n height: 50px;\\r\\n margin: 15px 20px 15px 20px;\\r\\n padding-left: 20px;\\r\\n background-color: var(--light-background);\\r\\n border-radius: 10px;\\r\\n}\\r\\n\\r\\n@media screen and (max-width: 1200px) {\\r\\n .browser-navigation img {\\r\\n display: none;\\r\\n }\\r\\n}\\r\\n\\r\\n* {\\r\\n color: #ebebeb;\\r\\n}\\r\\n\\r\\nsection {\\r\\n margin-bottom: 100px;\\r\\n}\\r\\n\\r\\nheader p {\\r\\n font-size: 1.2rem;\\r\\n}\\r\\n\\r\\nnav ul li {\\r\\n list-style-type: none;\\r\\n display: inline;\\r\\n padding: 0 30px;\\r\\n font-size: 1.2rem;\\r\\n}\\r\\n\\r\\nnav ul li a {\\r\\n text-decoration: none;\\r\\n}\\r\\n\\r\\na:hover {\\r\\n color: var(--light-violet);\\r\\n}\\r\\n\\r\\n.active-tab {\\r\\n color: rgb(255, 208, 0);\\r\\n}\\r\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/style.css?./node_modules/css-loader/dist/cjs.js");
20 |
21 | /***/ }),
22 |
23 | /***/ "./node_modules/css-loader/dist/cjs.js!./src/stylesForComment.css":
24 | /*!************************************************************************!*\
25 | !*** ./node_modules/css-loader/dist/cjs.js!./src/stylesForComment.css ***!
26 | \************************************************************************/
27 | /***/ ((module, __webpack_exports__, __webpack_require__) => {
28 |
29 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".comment-model {\\r\\n position: fixed;\\r\\n left: 0;\\r\\n top: 0;\\r\\n width: 100%;\\r\\n height: 100%;\\r\\n overflow: auto;\\r\\n z-index: -1;\\r\\n opacity: 0;\\r\\n animation: hide 0.25s;\\r\\n transform: scale(0);\\r\\n}\\r\\n\\r\\n@keyframes hide {\\r\\n from {\\r\\n z-index: 2;\\r\\n transform: scale(1);\\r\\n opacity: 1;\\r\\n }\\r\\n\\r\\n to {\\r\\n z-index: -1;\\r\\n transform: scale(0);\\r\\n opacity: 0;\\r\\n }\\r\\n}\\r\\n\\r\\n.active {\\r\\n opacity: 1;\\r\\n z-index: 2;\\r\\n animation: show 0.2s;\\r\\n transform: scale(1);\\r\\n}\\r\\n\\r\\n@keyframes show {\\r\\n from {\\r\\n transform: scale(0);\\r\\n opacity: 0;\\r\\n z-index: -1;\\r\\n }\\r\\n\\r\\n to {\\r\\n transform: scale(1);\\r\\n opacity: 1;\\r\\n z-index: 2;\\r\\n }\\r\\n}\\r\\n\\r\\n.comment-card {\\r\\n width: 70%;\\r\\n margin: 3rem auto;\\r\\n border: 4px solid #be9ce7;\\r\\n background-color: #111624;\\r\\n border-radius: 15px;\\r\\n}\\r\\n\\r\\n.close-icon {\\r\\n float: right;\\r\\n margin: 10px 18px;\\r\\n font-size: 2.5rem;\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.close-icon i:hover {\\r\\n color: red;\\r\\n transform: scale(1.3);\\r\\n transition: 0.4s;\\r\\n}\\r\\n\\r\\n.main-description {\\r\\n padding: 80px 130px;\\r\\n}\\r\\n\\r\\n.mediaImage {\\r\\n width: 100%;\\r\\n border-radius: 10px;\\r\\n}\\r\\n\\r\\n.mediaVideo {\\r\\n width: 100%;\\r\\n height: 50vh;\\r\\n}\\r\\n\\r\\n::-webkit-scrollbar {\\r\\n display: none;\\r\\n}\\r\\n\\r\\n.image-title {\\r\\n text-align: center;\\r\\n font-size: 2rem;\\r\\n}\\r\\n\\r\\n.image-explanation {\\r\\n font-style: italic;\\r\\n}\\r\\n\\r\\n.copyright {\\r\\n text-decoration: underline;\\r\\n}\\r\\n\\r\\n.image-date {\\r\\n float: right;\\r\\n}\\r\\n\\r\\n.comment-card h2 {\\r\\n text-align: center;\\r\\n}\\r\\n\\r\\nform {\\r\\n width: 50%;\\r\\n margin: 0 auto;\\r\\n}\\r\\n\\r\\n.name-input {\\r\\n outline: none;\\r\\n color: #111624;\\r\\n font-size: 1rem;\\r\\n padding: 10px;\\r\\n border-radius: 5px;\\r\\n width: 100%;\\r\\n border: none;\\r\\n box-sizing: border-box;\\r\\n background-color: snow;\\r\\n}\\r\\n\\r\\n.comment-input {\\r\\n width: 100%;\\r\\n height: 150px;\\r\\n outline: none;\\r\\n padding: 10px;\\r\\n color: #111624;\\r\\n border: none;\\r\\n border-radius: 5px;\\r\\n font-size: 1rem;\\r\\n font-family: inherit;\\r\\n resize: none;\\r\\n margin: 25px 0;\\r\\n box-sizing: border-box;\\r\\n background-color: snow;\\r\\n}\\r\\n\\r\\nform button {\\r\\n width: 100%;\\r\\n background-color: #3ac4;\\r\\n border: none;\\r\\n font-size: 1.2rem;\\r\\n padding: 10px;\\r\\n border-radius: 5px;\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\nform button:hover {\\r\\n background-color: rgba(64, 214, 255, 0.527);\\r\\n}\\r\\n\\r\\n.comment-message {\\r\\n margin: 20px auto;\\r\\n display: block;\\r\\n padding: 10px 20px;\\r\\n font-size: 1.5rem;\\r\\n color: black;\\r\\n width: 200px;\\r\\n cursor: pointer;\\r\\n}\\r\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/stylesForComment.css?./node_modules/css-loader/dist/cjs.js");
30 |
31 | /***/ }),
32 |
33 | /***/ "./node_modules/css-loader/dist/runtime/api.js":
34 | /*!*****************************************************!*\
35 | !*** ./node_modules/css-loader/dist/runtime/api.js ***!
36 | \*****************************************************/
37 | /***/ ((module) => {
38 |
39 | eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n var list = []; // return the list of modules as css string\n\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n\n content += cssWithMappingToString(item);\n\n if (needLayer) {\n content += \"}\";\n }\n\n if (item[2]) {\n content += \"}\";\n }\n\n if (item[4]) {\n content += \"}\";\n }\n\n return content;\n }).join(\"\");\n }; // import a list of modules into the list\n\n\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n\n var alreadyImportedModules = {};\n\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\n\n if (typeof layer !== \"undefined\") {\n if (typeof item[5] === \"undefined\") {\n item[5] = layer;\n } else {\n item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n item[5] = layer;\n }\n }\n\n if (media) {\n if (!item[2]) {\n item[2] = media;\n } else {\n item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n item[2] = media;\n }\n }\n\n if (supports) {\n if (!item[4]) {\n item[4] = \"\".concat(supports);\n } else {\n item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n item[4] = supports;\n }\n }\n\n list.push(item);\n }\n };\n\n return list;\n};\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./node_modules/css-loader/dist/runtime/api.js?");
40 |
41 | /***/ }),
42 |
43 | /***/ "./node_modules/css-loader/dist/runtime/getUrl.js":
44 | /*!********************************************************!*\
45 | !*** ./node_modules/css-loader/dist/runtime/getUrl.js ***!
46 | \********************************************************/
47 | /***/ ((module) => {
48 |
49 | eval("\n\nmodule.exports = function (url, options) {\n if (!options) {\n options = {};\n }\n\n if (!url) {\n return url;\n }\n\n url = String(url.__esModule ? url.default : url); // If url is already wrapped in quotes, remove them\n\n if (/^['\"].*['\"]$/.test(url)) {\n url = url.slice(1, -1);\n }\n\n if (options.hash) {\n url += options.hash;\n } // Should url be wrapped?\n // See https://drafts.csswg.org/css-values-3/#urls\n\n\n if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n }\n\n return url;\n};\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./node_modules/css-loader/dist/runtime/getUrl.js?");
50 |
51 | /***/ }),
52 |
53 | /***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js":
54 | /*!**************************************************************!*\
55 | !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***!
56 | \**************************************************************/
57 | /***/ ((module) => {
58 |
59 | eval("\n\nmodule.exports = function (i) {\n return i[1];\n};\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./node_modules/css-loader/dist/runtime/noSourceMaps.js?");
60 |
61 | /***/ }),
62 |
63 | /***/ "./src/style.css":
64 | /*!***********************!*\
65 | !*** ./src/style.css ***!
66 | \***********************/
67 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
68 |
69 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./style.css */ \"./node_modules/css-loader/dist/cjs.js!./src/style.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/style.css?");
70 |
71 | /***/ }),
72 |
73 | /***/ "./src/stylesForComment.css":
74 | /*!**********************************!*\
75 | !*** ./src/stylesForComment.css ***!
76 | \**********************************/
77 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
78 |
79 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_stylesForComment_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./stylesForComment.css */ \"./node_modules/css-loader/dist/cjs.js!./src/stylesForComment.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_stylesForComment_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_stylesForComment_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_stylesForComment_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_stylesForComment_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/stylesForComment.css?");
80 |
81 | /***/ }),
82 |
83 | /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
84 | /*!****************************************************************************!*\
85 | !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
86 | \****************************************************************************/
87 | /***/ ((module) => {
88 |
89 | eval("\n\nvar stylesInDOM = [];\n\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n\n for (var i = 0; i < stylesInDOM.length; i++) {\n if (stylesInDOM[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n\n return result;\n}\n\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var indexByIdentifier = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3],\n supports: item[4],\n layer: item[5]\n };\n\n if (indexByIdentifier !== -1) {\n stylesInDOM[indexByIdentifier].references++;\n stylesInDOM[indexByIdentifier].updater(obj);\n } else {\n var updater = addElementStyle(obj, options);\n options.byIndex = i;\n stylesInDOM.splice(i, 0, {\n identifier: identifier,\n updater: updater,\n references: 1\n });\n }\n\n identifiers.push(identifier);\n }\n\n return identifiers;\n}\n\nfunction addElementStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n\n var updater = function updater(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n return;\n }\n\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n\n return updater;\n}\n\nmodule.exports = function (list, options) {\n options = options || {};\n list = list || [];\n var lastIdentifiers = modulesToDom(list, options);\n return function update(newList) {\n newList = newList || [];\n\n for (var i = 0; i < lastIdentifiers.length; i++) {\n var identifier = lastIdentifiers[i];\n var index = getIndexByIdentifier(identifier);\n stylesInDOM[index].references--;\n }\n\n var newLastIdentifiers = modulesToDom(newList, options);\n\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n\n var _index = getIndexByIdentifier(_identifier);\n\n if (stylesInDOM[_index].references === 0) {\n stylesInDOM[_index].updater();\n\n stylesInDOM.splice(_index, 1);\n }\n }\n\n lastIdentifiers = newLastIdentifiers;\n };\n};\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?");
90 |
91 | /***/ }),
92 |
93 | /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js":
94 | /*!********************************************************************!*\
95 | !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***!
96 | \********************************************************************/
97 | /***/ ((module) => {
98 |
99 | eval("\n\nvar memo = {};\n/* istanbul ignore next */\n\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n\n memo[target] = styleTarget;\n }\n\n return memo[target];\n}\n/* istanbul ignore next */\n\n\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n\n target.appendChild(style);\n}\n\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./node_modules/style-loader/dist/runtime/insertBySelector.js?");
100 |
101 | /***/ }),
102 |
103 | /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js":
104 | /*!**********************************************************************!*\
105 | !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***!
106 | \**********************************************************************/
107 | /***/ ((module) => {
108 |
109 | eval("\n\n/* istanbul ignore next */\nfunction insertStyleElement(options) {\n var element = document.createElement(\"style\");\n options.setAttributes(element, options.attributes);\n options.insert(element, options.options);\n return element;\n}\n\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./node_modules/style-loader/dist/runtime/insertStyleElement.js?");
110 |
111 | /***/ }),
112 |
113 | /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":
114 | /*!**********************************************************************************!*\
115 | !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***!
116 | \**********************************************************************************/
117 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
118 |
119 | eval("\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(styleElement) {\n var nonce = true ? __webpack_require__.nc : 0;\n\n if (nonce) {\n styleElement.setAttribute(\"nonce\", nonce);\n }\n}\n\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?");
120 |
121 | /***/ }),
122 |
123 | /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js":
124 | /*!***************************************************************!*\
125 | !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***!
126 | \***************************************************************/
127 | /***/ ((module) => {
128 |
129 | eval("\n\n/* istanbul ignore next */\nfunction apply(styleElement, options, obj) {\n var css = \"\";\n\n if (obj.supports) {\n css += \"@supports (\".concat(obj.supports, \") {\");\n }\n\n if (obj.media) {\n css += \"@media \".concat(obj.media, \" {\");\n }\n\n var needLayer = typeof obj.layer !== \"undefined\";\n\n if (needLayer) {\n css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n }\n\n css += obj.css;\n\n if (needLayer) {\n css += \"}\";\n }\n\n if (obj.media) {\n css += \"}\";\n }\n\n if (obj.supports) {\n css += \"}\";\n }\n\n var sourceMap = obj.sourceMap;\n\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n } // For old IE\n\n /* istanbul ignore if */\n\n\n options.styleTagTransform(css, styleElement, options.options);\n}\n\nfunction removeStyleElement(styleElement) {\n // istanbul ignore if\n if (styleElement.parentNode === null) {\n return false;\n }\n\n styleElement.parentNode.removeChild(styleElement);\n}\n/* istanbul ignore next */\n\n\nfunction domAPI(options) {\n var styleElement = options.insertStyleElement(options);\n return {\n update: function update(obj) {\n apply(styleElement, options, obj);\n },\n remove: function remove() {\n removeStyleElement(styleElement);\n }\n };\n}\n\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./node_modules/style-loader/dist/runtime/styleDomAPI.js?");
130 |
131 | /***/ }),
132 |
133 | /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js":
134 | /*!*********************************************************************!*\
135 | !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***!
136 | \*********************************************************************/
137 | /***/ ((module) => {
138 |
139 | eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElement) {\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css;\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild);\n }\n\n styleElement.appendChild(document.createTextNode(css));\n }\n}\n\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./node_modules/style-loader/dist/runtime/styleTagTransform.js?");
140 |
141 | /***/ }),
142 |
143 | /***/ "./src/index.js":
144 | /*!**********************!*\
145 | !*** ./src/index.js ***!
146 | \**********************/
147 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
148 |
149 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _modules_cards__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/cards */ \"./src/modules/cards.js\");\n/* harmony import */ var _stylesForComment_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stylesForComment.css */ \"./src/stylesForComment.css\");\n\r\n\r\n\r\n\r\nwindow.onload = (0,_modules_cards__WEBPACK_IMPORTED_MODULE_1__[\"default\"])();\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/index.js?");
150 |
151 | /***/ }),
152 |
153 | /***/ "./src/modules/APIcomments.js":
154 | /*!************************************!*\
155 | !*** ./src/modules/APIcomments.js ***!
156 | \************************************/
157 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
158 |
159 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"getComments\": () => (/* binding */ getComments),\n/* harmony export */ \"addComments\": () => (/* binding */ addComments)\n/* harmony export */ });\nconst getComments = async (itemId) => {\r\n const response = await fetch(`https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/PXvVn75NsImDnwHgqLa4/comments?item_id=${itemId}`);\r\n const data = await response.json();\r\n return data;\r\n};\r\n\r\nconst addComments = async (username, comment, itemID) => {\r\n const response = await fetch('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/PXvVn75NsImDnwHgqLa4/comments', {\r\n method: 'POST',\r\n body: JSON.stringify({\r\n item_id: itemID,\r\n username,\r\n comment,\r\n }),\r\n headers: {\r\n 'Content-Type': 'application/json; charset=UTF-8',\r\n },\r\n });\r\n return response.text();\r\n};\r\n\r\n\r\n\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/modules/APIcomments.js?");
160 |
161 | /***/ }),
162 |
163 | /***/ "./src/modules/GetRequest.js":
164 | /*!***********************************!*\
165 | !*** ./src/modules/GetRequest.js ***!
166 | \***********************************/
167 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
168 |
169 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ getPictures)\n/* harmony export */ });\nconst baseUrl = 'https://api.nasa.gov/planetary/apod?api_key=';\r\nconst key = 'j9gWflgyCduUULTGmKMfahoaNAbzAULMkGGuu9jN';\r\nconst startDate = '2022-01-27';\r\nconst endDate = '2022-02-07';\r\nconst url = `${baseUrl}${key}&start_date=${startDate}&end_date=${endDate}`;\r\n\r\nconst getPictures = async () => {\r\n const response = await fetch(url);\r\n const answer = await response.json();\r\n return answer;\r\n};\r\n\r\n\r\n\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/modules/GetRequest.js?");
170 |
171 | /***/ }),
172 |
173 | /***/ "./src/modules/cards.js":
174 | /*!******************************!*\
175 | !*** ./src/modules/cards.js ***!
176 | \******************************/
177 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
178 |
179 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ createCards)\n/* harmony export */ });\n/* harmony import */ var _GetRequest__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./GetRequest */ \"./src/modules/GetRequest.js\");\n/* harmony import */ var _involvementApp__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./involvementApp */ \"./src/modules/involvementApp.js\");\n/* harmony import */ var _showCommentsCard__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./showCommentsCard */ \"./src/modules/showCommentsCard.js\");\n/* harmony import */ var _count__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./count */ \"./src/modules/count.js\");\n\r\n\r\n // eslint-disable-line import/no-cycle\r\n\r\n\r\nconst itemGrid = document.querySelector('.item-grid');\r\n\r\nconst createCards = async () => {\r\n const myPictures = await (0,_GetRequest__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\r\n myPictures.forEach((item, i) => {\r\n const card = document.createElement('div');\r\n card.classList.add('card');\r\n\r\n if (item.media_type === 'image') {\r\n const media = document.createElement('img');\r\n media.classList.add('picture');\r\n media.src = item.url;\r\n card.appendChild(media);\r\n media.addEventListener('click', async () => {\r\n await (0,_showCommentsCard__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(item.title);\r\n const modal = document.querySelector('.comment-model');\r\n modal.classList.add('active');\r\n });\r\n } else {\r\n const media = document.createElement('iframe');\r\n media.classList.add('video');\r\n media.src = item.url;\r\n card.appendChild(media);\r\n }\r\n\r\n const titleContainer = document.createElement('div');\r\n titleContainer.classList.add('title-container');\r\n\r\n const cardTitle = document.createElement('h3');\r\n cardTitle.textContent = item.title;\r\n cardTitle.classList.add('card-title');\r\n\r\n const contentContainer = document.createElement('div');\r\n contentContainer.classList.add('content-container');\r\n\r\n const likesContainer = document.createElement('div');\r\n likesContainer.classList.add('likes-container');\r\n\r\n const love = document.createElement('i');\r\n love.classList.add('fas', 'fa-heart');\r\n love.setAttribute('index', `${i}`);\r\n likesContainer.appendChild(love);\r\n\r\n const likes = document.createElement('p');\r\n likes.textContent = '0 likes';\r\n\r\n const likeNumber = async () => {\r\n const itemLikes = await (0,_involvementApp__WEBPACK_IMPORTED_MODULE_1__.getLikes)();\r\n itemLikes.forEach((like) => {\r\n if (like.item_id === `picture-${i}`) {\r\n likes.textContent = '';\r\n likes.classList.add('like-number');\r\n likes.textContent = `${like.likes} likes`;\r\n }\r\n });\r\n };\r\n\r\n love.addEventListener('click', async () => {\r\n await (0,_involvementApp__WEBPACK_IMPORTED_MODULE_1__.postLike)(`picture-${i}`);\r\n likeNumber();\r\n love.classList.add('hearted');\r\n });\r\n\r\n likeNumber();\r\n likesContainer.appendChild(likes);\r\n\r\n const comment = document.createElement('button');\r\n comment.classList.add('comment-btn');\r\n comment.type = 'button';\r\n comment.setAttribute('title', `${item.title}`);\r\n comment.innerText = 'Comments';\r\n\r\n comment.addEventListener('click', async () => {\r\n await (0,_showCommentsCard__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(item.title);\r\n const modal = document.querySelector('.comment-model');\r\n modal.classList.add('active');\r\n });\r\n\r\n titleContainer.appendChild(cardTitle);\r\n titleContainer.appendChild(contentContainer);\r\n contentContainer.appendChild(likesContainer);\r\n contentContainer.appendChild(comment);\r\n card.appendChild(titleContainer);\r\n card.setAttribute('index', `${i}`);\r\n itemGrid.appendChild(card);\r\n });\r\n\r\n const counter = document.getElementById('picture-counter');\r\n counter.textContent = (0,_count__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\r\n};\r\n\r\n\r\n\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/modules/cards.js?");
180 |
181 | /***/ }),
182 |
183 | /***/ "./src/modules/comments.js":
184 | /*!*********************************!*\
185 | !*** ./src/modules/comments.js ***!
186 | \*********************************/
187 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
188 |
189 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ displayComments)\n/* harmony export */ });\n/* harmony import */ var _APIcomments__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./APIcomments */ \"./src/modules/APIcomments.js\");\n\r\n\r\nconst displayComments = async (userID) => {\r\n const comments = await (0,_APIcomments__WEBPACK_IMPORTED_MODULE_0__.getComments)(userID);\r\n\r\n if (comments.length === undefined) {\r\n const commentCounter = document.querySelector('.comment-counter');\r\n commentCounter.innerHTML = 0;\r\n } else {\r\n comments.forEach((comment) => {\r\n const commentContainer = document.querySelector('.comment-container');\r\n\r\n const li = document.createElement('li');\r\n li.classList.add('single-comment');\r\n const time = document.createElement('span');\r\n time.classList.add('comment-time');\r\n time.innerText = `${comment.creation_date}, `;\r\n\r\n const author = document.createElement('span');\r\n author.classList.add('comment-author');\r\n author.innerText = `${comment.username}: `;\r\n\r\n const message = document.createElement('span');\r\n message.classList.add('commentMsg');\r\n message.innerText = comment.comment;\r\n\r\n li.append(time, author, message);\r\n commentContainer.appendChild(li);\r\n });\r\n }\r\n};\r\n\r\n\r\n\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/modules/comments.js?");
190 |
191 | /***/ }),
192 |
193 | /***/ "./src/modules/count.js":
194 | /*!******************************!*\
195 | !*** ./src/modules/count.js ***!
196 | \******************************/
197 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
198 |
199 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst countCards = () => {\r\n const myArray = document.querySelectorAll('.card');\r\n const count = myArray.length;\r\n return count;\r\n};\r\n\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (countCards);\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/modules/count.js?");
200 |
201 | /***/ }),
202 |
203 | /***/ "./src/modules/countComments.js":
204 | /*!**************************************!*\
205 | !*** ./src/modules/countComments.js ***!
206 | \**************************************/
207 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
208 |
209 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst countComments = () => {\r\n const allComments = document.querySelectorAll('.single-comment').length;\r\n return allComments;\r\n};\r\n\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (countComments);\r\n\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/modules/countComments.js?");
210 |
211 | /***/ }),
212 |
213 | /***/ "./src/modules/involvementApp.js":
214 | /*!***************************************!*\
215 | !*** ./src/modules/involvementApp.js ***!
216 | \***************************************/
217 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
218 |
219 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"postLike\": () => (/* binding */ postLike),\n/* harmony export */ \"getLikes\": () => (/* binding */ getLikes)\n/* harmony export */ });\nconst postLike = async (itemId) => {\r\n const response = await fetch('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/PXvVn75NsImDnwHgqLa4/likes/', {\r\n method: 'POST',\r\n body: JSON.stringify({\r\n item_id: itemId,\r\n }),\r\n headers: {\r\n 'Content-Type': 'application/json; charset=UTF-8',\r\n },\r\n });\r\n return response.text();\r\n};\r\n\r\nconst getLikes = async () => {\r\n const response = await fetch('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/PXvVn75NsImDnwHgqLa4/likes/');\r\n const data = await response.json();\r\n return data;\r\n};\r\n\r\n\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/modules/involvementApp.js?");
220 |
221 | /***/ }),
222 |
223 | /***/ "./src/modules/showCommentsCard.js":
224 | /*!*****************************************!*\
225 | !*** ./src/modules/showCommentsCard.js ***!
226 | \*****************************************/
227 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
228 |
229 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ showCommentCard)\n/* harmony export */ });\n/* harmony import */ var _GetRequest__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./GetRequest */ \"./src/modules/GetRequest.js\");\n/* harmony import */ var _comments__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./comments */ \"./src/modules/comments.js\");\n/* harmony import */ var _APIcomments__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./APIcomments */ \"./src/modules/APIcomments.js\");\n/* harmony import */ var _countComments__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./countComments */ \"./src/modules/countComments.js\");\n\r\n\r\n\r\n\r\n\r\nconst showCommentCard = async (title) => {\r\n const myPicturesJson = await (0,_GetRequest__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\r\n const stringifiedJson = JSON.stringify(myPicturesJson);\r\n const myPictures = JSON.parse(stringifiedJson);\r\n\r\n myPictures.forEach((element, index) => {\r\n if (element.title === title) {\r\n const commentModel = document.querySelector('.comment-model');\r\n const commentCard = document.createElement('div');\r\n commentCard.classList.add('comment-card');\r\n commentCard.setAttribute('index', index);\r\n\r\n const closeIcon = document.createElement('div');\r\n closeIcon.classList.add('close-icon');\r\n const icon = document.createElement('i');\r\n icon.classList.add('fas', 'fa-times');\r\n closeIcon.appendChild(icon);\r\n\r\n const closeClick = () => {\r\n commentModel.classList.remove('active');\r\n commentModel.innerHTML = '';\r\n };\r\n\r\n closeIcon.addEventListener('click', closeClick);\r\n\r\n const mainDescription = document.createElement('div');\r\n mainDescription.classList.add('main-description');\r\n\r\n if (element.media_type === 'image') {\r\n const media = document.createElement('img');\r\n media.classList.add('mediaImage');\r\n media.src = element.url;\r\n mainDescription.appendChild(media);\r\n } else {\r\n const media = document.createElement('iframe');\r\n media.classList.add('mediaVideo');\r\n media.src = element.url;\r\n mainDescription.appendChild(media);\r\n }\r\n const h1 = document.createElement('h1');\r\n h1.classList.add('image-title');\r\n h1.innerText = element.title;\r\n\r\n const explanation = document.createElement('p');\r\n explanation.classList.add('image-explanation');\r\n explanation.innerText = element.explanation;\r\n\r\n const extraExplanation = document.createElement('p');\r\n const copyright = document.createElement('span');\r\n copyright.classList.add('copyright');\r\n copyright.innerText = `By ${element.copyright ?? 'Anonymous'}`;\r\n\r\n const imageDate = document.createElement('span');\r\n imageDate.classList.add('image-date');\r\n imageDate.innerText = `${element.date}`;\r\n extraExplanation.append(copyright, imageDate);\r\n\r\n const h2 = document.createElement('h2');\r\n h2.innerText = 'Comments (';\r\n const commentCounter = document.createElement('span');\r\n commentCounter.classList.add('comment-counter');\r\n commentCounter.innerText = '';\r\n const bracket = document.createTextNode(')');\r\n h2.append(commentCounter, bracket);\r\n\r\n const commentContainer = document.createElement('ul');\r\n commentContainer.classList.add('comment-container');\r\n\r\n const commentTitle = document.createElement('h2');\r\n commentTitle.innerText = 'Add a comment';\r\n\r\n const form = document.createElement('form');\r\n form.innerHTML = `\r\n \r\n \r\n \r\n `;\r\n\r\n mainDescription.append(h1, explanation, extraExplanation, h2, commentContainer, commentTitle, form); // eslint-disable-line max-len\r\n commentCard.append(closeIcon, mainDescription);\r\n commentModel.appendChild(commentCard);\r\n\r\n form.addEventListener('submit', async (event) => {\r\n event.preventDefault();\r\n commentContainer.innerHTML = '';\r\n\r\n const username = document.querySelector('.name-input').value;\r\n const commentMessage = document.querySelector('.comment-input').value;\r\n const userID = commentCard.getAttribute('index');\r\n\r\n await (0,_APIcomments__WEBPACK_IMPORTED_MODULE_2__.addComments)(username, commentMessage, userID);\r\n await (0,_comments__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(userID);\r\n\r\n form.reset();\r\n\r\n const counter = document.querySelector('.comment-counter');\r\n counter.textContent = (0,_countComments__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\r\n });\r\n }\r\n });\r\n\r\n const commentCard = document.querySelector('.comment-card');\r\n const userID = commentCard.getAttribute('index');\r\n await (0,_comments__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(userID);\r\n\r\n const commentCounter = document.querySelector('.comment-counter');\r\n commentCounter.innerHTML = (0,_countComments__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\r\n};\r\n\r\n\r\n\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/modules/showCommentsCard.js?");
230 |
231 | /***/ }),
232 |
233 | /***/ "./src/assets/Helvetica-Font/Helvetica.ttf":
234 | /*!*************************************************!*\
235 | !*** ./src/assets/Helvetica-Font/Helvetica.ttf ***!
236 | \*************************************************/
237 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
238 |
239 | eval("module.exports = __webpack_require__.p + \"06113bf748ae7dc33e05.ttf\";\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/assets/Helvetica-Font/Helvetica.ttf?");
240 |
241 | /***/ }),
242 |
243 | /***/ "./src/assets/nasalization-cufonfonts-webfont/nasalization rg.woff":
244 | /*!*************************************************************************!*\
245 | !*** ./src/assets/nasalization-cufonfonts-webfont/nasalization rg.woff ***!
246 | \*************************************************************************/
247 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
248 |
249 | eval("module.exports = __webpack_require__.p + \"329b50bddebde6dc070b.woff\";\n\n//# sourceURL=webpack://AstronomyPictureOfTheDay/./src/assets/nasalization-cufonfonts-webfont/nasalization_rg.woff?");
250 |
251 | /***/ })
252 |
253 | /******/ });
254 | /************************************************************************/
255 | /******/ // The module cache
256 | /******/ var __webpack_module_cache__ = {};
257 | /******/
258 | /******/ // The require function
259 | /******/ function __webpack_require__(moduleId) {
260 | /******/ // Check if module is in cache
261 | /******/ var cachedModule = __webpack_module_cache__[moduleId];
262 | /******/ if (cachedModule !== undefined) {
263 | /******/ return cachedModule.exports;
264 | /******/ }
265 | /******/ // Create a new module (and put it into the cache)
266 | /******/ var module = __webpack_module_cache__[moduleId] = {
267 | /******/ id: moduleId,
268 | /******/ // no module.loaded needed
269 | /******/ exports: {}
270 | /******/ };
271 | /******/
272 | /******/ // Execute the module function
273 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
274 | /******/
275 | /******/ // Return the exports of the module
276 | /******/ return module.exports;
277 | /******/ }
278 | /******/
279 | /******/ // expose the modules object (__webpack_modules__)
280 | /******/ __webpack_require__.m = __webpack_modules__;
281 | /******/
282 | /************************************************************************/
283 | /******/ /* webpack/runtime/compat get default export */
284 | /******/ (() => {
285 | /******/ // getDefaultExport function for compatibility with non-harmony modules
286 | /******/ __webpack_require__.n = (module) => {
287 | /******/ var getter = module && module.__esModule ?
288 | /******/ () => (module['default']) :
289 | /******/ () => (module);
290 | /******/ __webpack_require__.d(getter, { a: getter });
291 | /******/ return getter;
292 | /******/ };
293 | /******/ })();
294 | /******/
295 | /******/ /* webpack/runtime/define property getters */
296 | /******/ (() => {
297 | /******/ // define getter functions for harmony exports
298 | /******/ __webpack_require__.d = (exports, definition) => {
299 | /******/ for(var key in definition) {
300 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
301 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
302 | /******/ }
303 | /******/ }
304 | /******/ };
305 | /******/ })();
306 | /******/
307 | /******/ /* webpack/runtime/global */
308 | /******/ (() => {
309 | /******/ __webpack_require__.g = (function() {
310 | /******/ if (typeof globalThis === 'object') return globalThis;
311 | /******/ try {
312 | /******/ return this || new Function('return this')();
313 | /******/ } catch (e) {
314 | /******/ if (typeof window === 'object') return window;
315 | /******/ }
316 | /******/ })();
317 | /******/ })();
318 | /******/
319 | /******/ /* webpack/runtime/hasOwnProperty shorthand */
320 | /******/ (() => {
321 | /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
322 | /******/ })();
323 | /******/
324 | /******/ /* webpack/runtime/make namespace object */
325 | /******/ (() => {
326 | /******/ // define __esModule on exports
327 | /******/ __webpack_require__.r = (exports) => {
328 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
329 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
330 | /******/ }
331 | /******/ Object.defineProperty(exports, '__esModule', { value: true });
332 | /******/ };
333 | /******/ })();
334 | /******/
335 | /******/ /* webpack/runtime/publicPath */
336 | /******/ (() => {
337 | /******/ var scriptUrl;
338 | /******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
339 | /******/ var document = __webpack_require__.g.document;
340 | /******/ if (!scriptUrl && document) {
341 | /******/ if (document.currentScript)
342 | /******/ scriptUrl = document.currentScript.src
343 | /******/ if (!scriptUrl) {
344 | /******/ var scripts = document.getElementsByTagName("script");
345 | /******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
346 | /******/ }
347 | /******/ }
348 | /******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
349 | /******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
350 | /******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
351 | /******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
352 | /******/ __webpack_require__.p = scriptUrl;
353 | /******/ })();
354 | /******/
355 | /******/ /* webpack/runtime/jsonp chunk loading */
356 | /******/ (() => {
357 | /******/ __webpack_require__.b = document.baseURI || self.location.href;
358 | /******/
359 | /******/ // object to store loaded and loading chunks
360 | /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
361 | /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
362 | /******/ var installedChunks = {
363 | /******/ "main": 0
364 | /******/ };
365 | /******/
366 | /******/ // no chunk on demand loading
367 | /******/
368 | /******/ // no prefetching
369 | /******/
370 | /******/ // no preloaded
371 | /******/
372 | /******/ // no HMR
373 | /******/
374 | /******/ // no HMR manifest
375 | /******/
376 | /******/ // no on chunks loaded
377 | /******/
378 | /******/ // no jsonp function
379 | /******/ })();
380 | /******/
381 | /************************************************************************/
382 | /******/
383 | /******/ // startup
384 | /******/ // Load entry module and return exports
385 | /******/ // This entry module can't be inlined because the eval devtool is used.
386 | /******/ var __webpack_exports__ = __webpack_require__("./src/index.js");
387 | /******/
388 | /******/ })()
389 | ;
--------------------------------------------------------------------------------
17 |
28 |
29 |
18 | 
19 | 
20 | 
21 | 
22 |
25 | 
26 |
27 |
19 |
20 |
21 |
22 |
25 |
26 | NASA
31 | 38 |