From a2be5fcd84466353a007608bfa400f740a8c97c1 Mon Sep 17 00:00:00 2001 From: Feliverse <114632980+Feliverse@users.noreply.github.com> Date: Tue, 14 Feb 2023 18:08:25 -0400 Subject: [PATCH 01/12] add comments functionalities --- src/modules/comments/comments.js | 8 ++ src/modules/comments/getApi.js | 9 ++ src/modules/comments/getComment.js | 21 +++++ src/modules/comments/getMovieDetails.js | 111 ++++++++++++++++++++++++ src/modules/comments/showComment.js | 18 ++++ 5 files changed, 167 insertions(+) create mode 100644 src/modules/comments/comments.js create mode 100644 src/modules/comments/getApi.js create mode 100644 src/modules/comments/getComment.js create mode 100644 src/modules/comments/getMovieDetails.js create mode 100644 src/modules/comments/showComment.js diff --git a/src/modules/comments/comments.js b/src/modules/comments/comments.js new file mode 100644 index 0000000..ca9d887 --- /dev/null +++ b/src/modules/comments/comments.js @@ -0,0 +1,8 @@ +const getComments = async (movieId) => { + const response = await fetch(`https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/V9PGHS19NclaPI0zbq7b/comments?item_id=${movieId}`); + const myJson = await response.json(); // extract JSON from the http respo + + return myJson; +}; + +export default getComments; diff --git a/src/modules/comments/getApi.js b/src/modules/comments/getApi.js new file mode 100644 index 0000000..234a2df --- /dev/null +++ b/src/modules/comments/getApi.js @@ -0,0 +1,9 @@ +const getItems = async (searchQuery) => { + const response = await fetch( + `https://api.tvmaze.com/search/shows?q=${searchQuery}`, + ); + const myJson = await response.json(); + return myJson; +}; + +export default getItems; diff --git a/src/modules/comments/getComment.js b/src/modules/comments/getComment.js new file mode 100644 index 0000000..8086027 --- /dev/null +++ b/src/modules/comments/getComment.js @@ -0,0 +1,21 @@ +import getMovieDetails from './getMovieDetails.js'; + +const showCommentPopUp = () => { + const popup = document.querySelector('.popup'); + + const commentButton = document.querySelectorAll('.comment'); + commentButton.forEach((submitButton) => { + submitButton.addEventListener('click', (event) => { + event.preventDefault(); + const movieId = event.target.id; + getMovieDetails(movieId); + popup.classList.remove('hide'); + }); + }); + const closeButton = document.querySelectorAll('#popup-close'); + closeButton.forEach((button) => button.addEventListener('click', () => { + popup.style.display = 'none'; + window.location.reload(); + })); +}; +export default showCommentPopUp; diff --git a/src/modules/comments/getMovieDetails.js b/src/modules/comments/getMovieDetails.js new file mode 100644 index 0000000..8116c33 --- /dev/null +++ b/src/modules/comments/getMovieDetails.js @@ -0,0 +1,111 @@ +import showComment from './showComment.js'; +import getComments from './comments.js'; + +const getMovieDetails = async (movieId) => { + const response = await fetch(`https://api.tvmaze.com/shows/${movieId}`); + const movieDetails = await response.json(); // extract JSON from the http response + // do something with myJson + const popupContainer = document.querySelector('.popup-container'); + const movieName = movieDetails.name; + const { summary } = movieDetails; + const { image } = movieDetails; + + let imageSrc = 'https://static.tvmaze.com/uploads/images/original_untouched/53/133615.jpg'; + + if (image !== 'null') { + if (image.original !== 'null') { + imageSrc = movieDetails.image.original; + } else { + imageSrc = movieDetails.image.medium; + } + } + const comments = await getComments(movieId); + let totalComment = 0; + if (comments.length > 0) { + totalComment = comments.length; + } + const firstPart = ` +
+ ${movieName} Banner +
+
+
+

${movieName}

+
+
+ ${summary} +
+ +
+

+ Comments(${totalComment}) +

+
+
    + `; + + let commentList = ''; + for (let k = 0; k < comments.length; k += 1) { + const temp = `
  • ${comments[k].creation_date} ${comments[k].username}: ${comments[k].comment}
    • `; + commentList += temp; + } + const secondPart = ` +
+
+
+ +
+

+ Add Comments +

+
+ + + + +
+
+
`; + + popupContainer.innerHTML = firstPart + commentList + secondPart; + + const addComment = document.querySelector('#addComment'); + + addComment.addEventListener('submit', (event) => { + event.preventDefault(); + const name = addComment.querySelector('input[name="name"]').value; + const comment = addComment.querySelector('textarea[name="comment"]').value; + const movieId = addComment.querySelector('input[name="movieId"]').value; + window.location.reload(); + showComment(movieId, name, comment); + showComment.fire({ + title: 'Success!', + text: 'Your comment has been added', + icon: 'success', + confirmButtonText: 'Cool', + }); + const d = new Date(); + const commentDescription = document.querySelector('.comment-description'); + const commentConter = document.querySelector('#totalComment'); + + const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d); + const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(d); + const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d); + commentDescription.innerHTML += `
  • ${ye}-${mo}-${da} ${name}: ${comment}
    • `; + commentConter.innerHTML = Number(commentConter.innerHTML) + 1; + }); +}; + +export default getMovieDetails; diff --git a/src/modules/comments/showComment.js b/src/modules/comments/showComment.js new file mode 100644 index 0000000..f13ff1f --- /dev/null +++ b/src/modules/comments/showComment.js @@ -0,0 +1,18 @@ +const showComment = async (movieId, name, description) => { + const data = `{"item_id": "${movieId}", "username": "${name}", "comment": "${description}"}`; + + const mBody = JSON.parse(data); + + const response = await fetch('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/V9PGHS19NclaPI0zbq7b/comments/', + { + method: 'POST', + body: JSON.stringify(mBody), + + headers: {'Content-Type': 'application/JSON'}, + }); + //await response; // extract JSON from the http response + const result = await response.text(); + return result; +}; + +export default showComment; From 6635a354f49bcf691fcb98dc1722f4113c7fd5d8 Mon Sep 17 00:00:00 2001 From: Feliverse <114632980+Feliverse@users.noreply.github.com> Date: Thu, 16 Feb 2023 11:52:51 -0400 Subject: [PATCH 02/12] config x button to reopen comment popup --- src/__tests__/commentCounter.test.js | 44 +++ src/css/index.css | 404 ++++++++++++++++++++++-- src/modules/comments/getApi.js | 9 - src/modules/comments/getComment.js | 4 +- src/modules/comments/getMovieDetails.js | 49 ++- 5 files changed, 437 insertions(+), 73 deletions(-) create mode 100644 src/__tests__/commentCounter.test.js delete mode 100644 src/modules/comments/getApi.js diff --git a/src/__tests__/commentCounter.test.js b/src/__tests__/commentCounter.test.js new file mode 100644 index 0000000..7e5054f --- /dev/null +++ b/src/__tests__/commentCounter.test.js @@ -0,0 +1,44 @@ +/** + * @jest-environment jsdom + */ + +import { commentsCounter } from '../modules/comments/getMovieDetails'; + +const array = [ + { username: 'ok', comment: 'comment new', creation_date: '2023-02-11' }, + { username: 'tom', creation_date: '2023-02-10', comment: 'Hello' }, + { comment: 'comment 1', username: 'solomon', creation_date: '2023-02-07' }, + { comment: 'comment 2', username: 'fahd', creation_date: '2023-02-04' }, + { comment: 'comment 3', username: 'didier', creation_date: '2023-01-03' }, +]; + +describe('movies counter', () => { + test('it should display the number of comments', async () => { + const countComment = commentsCounter(array); + expect(countComment).toBe(5); + }); + + test('Adding new comment and testing the function', async () => { + array.push({ username: 'Anna', comment: 'Nice movie', creation_date: '2023-02-15' }); + const countComment = commentsCounter(array); + expect(countComment).toBe(6); + }); + + test('it should display the number of comment item list', async () => { + array.push({ username: 'Anna', comment: 'Best movie', creation_date: '2023-02-15' }); + document.body.innerHTML = ''; + const ul = document.querySelector('.comment-container'); + array.forEach((elem) => { + const date = new Date(elem.creation_date); + ul.innerHTML += ` +
  • + ${date.toLocaleDateString('en-US')} + ${elem.username}: + ${elem.comment} +
    • `; + }); + const commentList = document.querySelectorAll('.comment-container li'); + const comments = commentsCounter(array); + expect(commentList).toHaveLength(comments); + }); +}); \ No newline at end of file diff --git a/src/css/index.css b/src/css/index.css index 7f3e2ec..01c82ab 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -1,8 +1,10 @@ +/* stylelint-disable indentation */ + * { - box-sizing: border-box; margin: 0; padding: 0; scroll-behavior: smooth; + box-sizing: border-box; } :root { @@ -13,73 +15,71 @@ } body { - font-family: Verdana, Geneva, Tahoma, sans-serif; width: 100%; padding: 1rem; - background-color: black; + background-color: rgb(238, 238, 238); + background-color: var(--color-secondary); + color: var(--color-font); + font-family: 'Montserrat', sans-serif; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ } -#tv-main-info { +body::-webkit-scrollbar { + display: none; +} + +div.tv-main-info { display: flex; gap: 1rem; - justify-content: space-between; + width: 100%; } -#tv-likes { - display: flex; - align-items: center; +img.tv-main-img { + width: 100%; } -.tv-section { - padding: 5px; - box-shadow: #fff 0 0 10px; +span.tv-likes { + display: flex; + align-items: center; } -#tv-other-info { - color: white; +div.tv-other-info { display: flex; - justify-content: space-between; - font-weight: normal; - font-size: 0.5em; flex-direction: column; - background-color: rgb(26, 16, 4, 0.4); + background-color: #9c8263; padding: 0.5rem; } .tv-div { display: flex; - flex-direction: row-reverse; align-items: center; - justify-content: space-between; + justify-content: center; gap: 0.5rem; flex-wrap: wrap; overflow-wrap: anywhere; - margin-block-start: 2%; } -#section { - display: flex; - flex-wrap: wrap; - gap: 1rem; +section#section { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-gap: 1rem; overflow-wrap: break-word; justify-items: center; - justify-content: center; } .button { - background-color: rgb(130, 99, 156); - border-radius: 5px; + background-color: rgb(238, 238, 238); + border-radius: 100px; cursor: pointer; display: inline-block; - font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto, sans-serif; - width: 100%; - height: max-content; + font-family: cursive, CerebriSans-Regular, -apple-system, system-ui, Roboto,sans-serif; + padding: 7px 20px; text-align: center; text-decoration: none; transition: all 250ms; border: 0; font-size: 16px; - font-weight: bold; user-select: none; -webkit-user-select: none; touch-action: manipulation; @@ -87,8 +87,346 @@ body { .button:hover { transform: scale(1.05) rotate(-1deg); - background-color: #fff; - color: #9c8263; + background-color: #000; + color: #eee; +} + +.heart { + display: inline-block; + width: 1rem; + aspect-ratio: 1/1; + border-image: radial-gradient(red 69%, #0000 70%) 84.5% fill/100%; + clip-path: polygon(-41% 0, 50% 91%, 141% 0); +} + +div.heart:hover { + transform: scale(1.25); +} + +button.heart-button { + border-style: none; + background: none; +} + +.container { + max-width: 90%; + margin: 0 auto; +} + +nav { + list-style-type: none; + display: flex; + background-color: var(--color-secondary); + justify-content: flex-start; + align-items: center; + position: absolute; + top: 0; +} + +.logo p { + font-size: 2.5rem; + font-weight: 700; + margin: 0; + color: var(--color-primary); +} + +.navigation { + list-style-type: none; + display: flex; +} + +.navigation li { + margin: 0 2rem; +} + +.navigation li a { + text-decoration: none; + color: var(--color-font); +} + +.navigation li:hover { + color: var(--color-primary); + border-bottom: 3px solid var(--color-primary); +} + +.active { + color: var(--color-primary); + border-bottom: 3px solid var(--color-primary); +} + +main { + margin-top: 5rem; +} + +.row { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.card { + padding: 1.5rem; + margin: 1.5rem 1rem; + border-radius: 10px; + box-shadow: 2px 2px 5px 1px rgb(207, 91, 91); +} + +.card:hover { + border: 2px solid var(--color-primary); +} + +.single-movies { + display: flex; + flex-direction: column; + align-items: center; + width: 20%; +} + +.title-rection { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding-top: 10px; +} + +.movie-banner-img { + width: 100%; + height: 370px; + border-radius: 5px; +} + +.movie-banner { + width: 100%; + border-radius: 5px; +} + +footer { + position: relative; + bottom: 0; + left: 0; + right: 0; + margin: 1rem; +} + +.footer-section { + display: flex; + justify-content: flex-start; + align-items: center; + height: 100%; +} + +button { + margin: 0; + padding: 0; +} + +.btn { + padding: 0.5rem 1rem; + cursor: pointer; + height: 40px; + border-radius: 5px; + width: 90%; + display: flex; + justify-content: center; + align-items: center; +} + +.action-btns { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.btn-primary { + background-color: var(--color-primary); + color: var(--color-secondary); + border: 1px solid var(--color-primary); } +.btn-secondary { + background-color: var(--color-secondary); + color: var(--color-primary); + border: 1px solid var(--color-primary); +} + +.btn-secondary:hover { + background-color: rgb(215, 197, 197); + color: var(--color-font); + border: 1px solid rgb(215, 197, 197); +} + +.btn-primary:hover { + background-color: var(--color-secondary); + color: var(--color-primary); + border: 1px solid var(--color-primary); +} + +.movie-likes p { + margin: 0; + padding: 10px 0 10px 0; + width: 100%; + text-align: right; +} + +.movie-likes { + margin: 0; + padding: 0 0 10px 0; + width: 100%; +} + +h3 { + margin: 0; + padding: 0; +} + +.popup { + position: fixed; + bottom: 0; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + display: flex; + background-color: var(--color-secondary); +} + +.popup-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + overflow-y: scroll; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +.popup-container::-webkit-scrollbar { + display: none; +} + +.popup-header { + position: fixed; + top: 0; + right: 10px; + padding: 10px; + background: #0000003b; + border-radius: 50px; +} + +.popup-movie-banner { + display: flex; + justify-content: center; + height: 50%; + width: 100%; + background: linear-gradient(5deg,yellow,gold 50%, tomato) 10 stretch; +} +.popup-movie-banner-img { + width: 100%; + height: 100%; + border-radius: 5px; + object-fit: cover; +} + +.popup-details { + display: flex; + flex-direction: column; + max-width: 90%; + margin: 0 auto; + align-items: flex-start; +} + +.popup-description { + max-width: 100; + font-weight: 400; +} + + + +form { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; +} + +input[type='text'], +li, +.btn-outline-primary { + display: flex; + align-items: center; + width: 150%; + height: 5px; + border: none; + list-style: none; + background: rgb(56, 54, 54); + padding: 20px ; + border-radius: 50px; + margin: 10px 5px; + color: var(--color-primary); + font-size: medium; +} + +input[name="comment"] { + width: 400%; + font-size: medium; +} + +.popup-comments { + width: 100%; + display: flex; + gap: 25%; + flex-direction: row-reverse; + justify-content: center; +} + +.btn-outline-primary { + width: 10%; + font-size: larger; +} + +::placeholder { + color: var(--color-primary); + font-size: medium; +} + +input[type='submit'] { + width: 120px; + height: 40px; + border-radius: 5px; + border: 1px solid var(--color-primary); + padding: 0 10px; + margin: 10px 0; +} + +.add-comment-form { + width: 100%; + background: black; + border-radius: 15px; +} + +.hide { + display: none; +} + +@media (min-width: 576px) { + section#section { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +@media (min-width: 1024px) { + section#section { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } +} + +@media (min-width: 1440px) { + section#section { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } +} diff --git a/src/modules/comments/getApi.js b/src/modules/comments/getApi.js deleted file mode 100644 index 234a2df..0000000 --- a/src/modules/comments/getApi.js +++ /dev/null @@ -1,9 +0,0 @@ -const getItems = async (searchQuery) => { - const response = await fetch( - `https://api.tvmaze.com/search/shows?q=${searchQuery}`, - ); - const myJson = await response.json(); - return myJson; -}; - -export default getItems; diff --git a/src/modules/comments/getComment.js b/src/modules/comments/getComment.js index 8086027..ba9a264 100644 --- a/src/modules/comments/getComment.js +++ b/src/modules/comments/getComment.js @@ -1,4 +1,4 @@ -import getMovieDetails from './getMovieDetails.js'; +import { getMovieDetails } from '../comments/getMovieDetails'; const showCommentPopUp = () => { const popup = document.querySelector('.popup'); @@ -10,12 +10,12 @@ const showCommentPopUp = () => { const movieId = event.target.id; getMovieDetails(movieId); popup.classList.remove('hide'); + popup.style.display = 'flex'; }); }); const closeButton = document.querySelectorAll('#popup-close'); closeButton.forEach((button) => button.addEventListener('click', () => { popup.style.display = 'none'; - window.location.reload(); })); }; export default showCommentPopUp; diff --git a/src/modules/comments/getMovieDetails.js b/src/modules/comments/getMovieDetails.js index 8116c33..26a5191 100644 --- a/src/modules/comments/getMovieDetails.js +++ b/src/modules/comments/getMovieDetails.js @@ -3,8 +3,7 @@ import getComments from './comments.js'; const getMovieDetails = async (movieId) => { const response = await fetch(`https://api.tvmaze.com/shows/${movieId}`); - const movieDetails = await response.json(); // extract JSON from the http response - // do something with myJson + const movieDetails = await response.json(); const popupContainer = document.querySelector('.popup-container'); const movieName = movieDetails.name; const { summary } = movieDetails; @@ -37,7 +36,7 @@ const getMovieDetails = async (movieId) => {

    ${movieName}

    - ${summary} + ${summary}
    @@ -50,7 +49,7 @@ const getMovieDetails = async (movieId) => { let commentList = ''; for (let k = 0; k < comments.length; k += 1) { - const temp = `
  • ${comments[k].creation_date} ${comments[k].username}: ${comments[k].comment}
    • `; + const temp = `
  • 🗩     ${comments[k].creation_date} ${comments[k].username}:    ${comments[k].comment}
    • `; commentList += temp; } const secondPart = ` @@ -59,22 +58,11 @@ const getMovieDetails = async (movieId) => {
    -

    - Add Comments -

    - + - - + +
    `; @@ -86,16 +74,11 @@ const getMovieDetails = async (movieId) => { addComment.addEventListener('submit', (event) => { event.preventDefault(); const name = addComment.querySelector('input[name="name"]').value; - const comment = addComment.querySelector('textarea[name="comment"]').value; + const comment = addComment.querySelector('input[name="comment"]').value; const movieId = addComment.querySelector('input[name="movieId"]').value; - window.location.reload(); + showComment(movieId, name, comment); - showComment.fire({ - title: 'Success!', - text: 'Your comment has been added', - icon: 'success', - confirmButtonText: 'Cool', - }); + const d = new Date(); const commentDescription = document.querySelector('.comment-description'); const commentConter = document.querySelector('#totalComment'); @@ -103,9 +86,17 @@ const getMovieDetails = async (movieId) => { const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d); const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(d); const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d); - commentDescription.innerHTML += `
  • ${ye}-${mo}-${da} ${name}: ${comment}
    • `; + commentDescription.innerHTML += `
  • ${ye}-${mo}-${da} ${name}: ${comment}
    • `; commentConter.innerHTML = Number(commentConter.innerHTML) + 1; - }); + addComment.reset(); + }); +}; + +const commentsCounter = (comments) => { + if (!comments.length) { + return 0; + } + return comments.length; }; -export default getMovieDetails; +export {getMovieDetails, commentsCounter} From 40b23d2bef2bc24bacbda884db00156c5ade3bea Mon Sep 17 00:00:00 2001 From: Feliverse <114632980+Feliverse@users.noreply.github.com> Date: Thu, 16 Feb 2023 12:28:43 -0400 Subject: [PATCH 03/12] apply linter fix --- src/__tests__/commentCounter.test.js | 2 +- src/css/index.css | 10 +++------- src/modules/comments/getComment.js | 2 +- src/modules/comments/getMovieDetails.js | 10 +++++----- src/modules/comments/showComment.js | 6 +++--- 5 files changed, 13 insertions(+), 17 deletions(-) diff --git a/src/__tests__/commentCounter.test.js b/src/__tests__/commentCounter.test.js index 7e5054f..d28dae9 100644 --- a/src/__tests__/commentCounter.test.js +++ b/src/__tests__/commentCounter.test.js @@ -2,7 +2,7 @@ * @jest-environment jsdom */ -import { commentsCounter } from '../modules/comments/getMovieDetails'; +import { commentsCounter } from '../modules/comments/getMovieDetails.js'; const array = [ { username: 'ok', comment: 'comment new', creation_date: '2023-02-11' }, diff --git a/src/css/index.css b/src/css/index.css index 01c82ab..71ca573 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -73,7 +73,7 @@ section#section { border-radius: 100px; cursor: pointer; display: inline-block; - font-family: cursive, CerebriSans-Regular, -apple-system, system-ui, Roboto,sans-serif; + font-family: cursive, CerebriSans-Regular, -apple-system, system-ui, Roboto, sans-serif; padding: 7px 20px; text-align: center; text-decoration: none; @@ -322,7 +322,6 @@ h3 { justify-content: center; height: 50%; width: 100%; - background: linear-gradient(5deg,yellow,gold 50%, tomato) 10 stretch; } .popup-movie-banner-img { @@ -341,12 +340,10 @@ h3 { } .popup-description { - max-width: 100; + max-width: 100%; font-weight: 400; } - - form { display: flex; flex-direction: row; @@ -355,7 +352,6 @@ form { } input[type='text'], -li, .btn-outline-primary { display: flex; align-items: center; @@ -364,7 +360,7 @@ li, border: none; list-style: none; background: rgb(56, 54, 54); - padding: 20px ; + padding: 20px; border-radius: 50px; margin: 10px 5px; color: var(--color-primary); diff --git a/src/modules/comments/getComment.js b/src/modules/comments/getComment.js index ba9a264..574cc47 100644 --- a/src/modules/comments/getComment.js +++ b/src/modules/comments/getComment.js @@ -1,4 +1,4 @@ -import { getMovieDetails } from '../comments/getMovieDetails'; +import { getMovieDetails } from './getMovieDetails.js'; const showCommentPopUp = () => { const popup = document.querySelector('.popup'); diff --git a/src/modules/comments/getMovieDetails.js b/src/modules/comments/getMovieDetails.js index 26a5191..94f0ac9 100644 --- a/src/modules/comments/getMovieDetails.js +++ b/src/modules/comments/getMovieDetails.js @@ -3,7 +3,7 @@ import getComments from './comments.js'; const getMovieDetails = async (movieId) => { const response = await fetch(`https://api.tvmaze.com/shows/${movieId}`); - const movieDetails = await response.json(); + const movieDetails = await response.json(); const popupContainer = document.querySelector('.popup-container'); const movieName = movieDetails.name; const { summary } = movieDetails; @@ -76,9 +76,9 @@ const getMovieDetails = async (movieId) => { const name = addComment.querySelector('input[name="name"]').value; const comment = addComment.querySelector('input[name="comment"]').value; const movieId = addComment.querySelector('input[name="movieId"]').value; - + showComment(movieId, name, comment); - + const d = new Date(); const commentDescription = document.querySelector('.comment-description'); const commentConter = document.querySelector('#totalComment'); @@ -89,7 +89,7 @@ const getMovieDetails = async (movieId) => { commentDescription.innerHTML += `
  • ${ye}-${mo}-${da} ${name}: ${comment}
    • `; commentConter.innerHTML = Number(commentConter.innerHTML) + 1; addComment.reset(); - }); + }); }; const commentsCounter = (comments) => { @@ -99,4 +99,4 @@ const commentsCounter = (comments) => { return comments.length; }; -export {getMovieDetails, commentsCounter} +export { getMovieDetails, commentsCounter }; diff --git a/src/modules/comments/showComment.js b/src/modules/comments/showComment.js index f13ff1f..b64336c 100644 --- a/src/modules/comments/showComment.js +++ b/src/modules/comments/showComment.js @@ -7,10 +7,10 @@ const showComment = async (movieId, name, description) => { { method: 'POST', body: JSON.stringify(mBody), - - headers: {'Content-Type': 'application/JSON'}, + + headers: { 'Content-Type': 'application/JSON' }, }); - //await response; // extract JSON from the http response + // await response; // extract JSON from the http response const result = await response.text(); return result; }; From 12c5136a2878a9054d24f888348b71a550ba1a94 Mon Sep 17 00:00:00 2001 From: Feliverse <114632980+Feliverse@users.noreply.github.com> Date: Thu, 16 Feb 2023 14:44:07 -0400 Subject: [PATCH 04/12] active comments section --- src/css/index.css | 246 +---------------------------- src/index.html | 1 + src/modules/likes/displayMovies.js | 4 +- 3 files changed, 8 insertions(+), 243 deletions(-) diff --git a/src/css/index.css b/src/css/index.css index 8409144..cb540b7 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -377,7 +377,7 @@ h3 { } .popup-description { - max-width: 100%; + max-width: 100; font-weight: 400; } @@ -389,6 +389,7 @@ form { } input[type='text'], +li, .btn-outline-primary { display: flex; align-items: center; @@ -397,7 +398,7 @@ input[type='text'], border: none; list-style: none; background: rgb(56, 54, 54); - padding: 20px; + padding: 20px ; border-radius: 50px; margin: 10px 5px; color: var(--color-primary); @@ -422,234 +423,9 @@ input[name="comment"] { font-size: larger; } -.heart { - display: inline-block; - width: 1rem; - aspect-ratio: 1/1; - border-image: radial-gradient(red 69%, #0000 70%) 84.5% fill/100%; - clip-path: polygon(-41% 0, 50% 91%, 141% 0); -} - -div.heart:hover { - transform: scale(1.25); -} - -button.heart-button { - border-style: none; - background: none; -} - -.row { - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -.card { - padding: 1.5rem; - margin: 1.5rem 1rem; - border-radius: 10px; - box-shadow: 2px 2px 5px 1px rgb(207, 91, 91); -} - -.card:hover { - border: 2px solid var(--color-primary); -} - -.single-movies { - display: flex; - flex-direction: column; - align-items: center; - width: 20%; -} - -.title-rection { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding-top: 10px; -} - -.movie-banner-img { - width: 100%; - height: 370px; - border-radius: 5px; -} - -.movie-banner { - width: 100%; - border-radius: 5px; -} - -footer { - position: relative; - bottom: 0; - left: 0; - right: 0; - margin: 1rem; -} - -.movie-likes p { - margin: 0; - padding: 10px 0 10px 0; - width: 100%; - text-align: right; -} - -#footer p { - padding: 1rem; - margin: auto; - color: beige; - background-color: darkred; - width: 100%; - text-align: center; -} - -.footer-section { - display: flex; - justify-content: flex-start; - align-items: center; - height: 100%; -} - -button { - margin: 0; - padding: 0; -} - -.btn { - padding: 0.5rem 1rem; - cursor: pointer; - height: 40px; - border-radius: 5px; - width: 90%; - display: flex; - justify-content: center; - align-items: center; -} - -.action-btns { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} - -.btn-primary { - background-color: var(--color-primary); - color: var(--color-secondary); - border: 1px solid var(--color-primary); -} - -.btn-secondary { - background-color: var(--color-secondary); +::placeholder { color: var(--color-primary); - border: 1px solid var(--color-primary); -} - -.btn-secondary:hover { - background-color: rgb(215, 197, 197); - color: var(--color-font); - border: 1px solid rgb(215, 197, 197); -} - -.btn-primary:hover { - background-color: var(--color-secondary); - color: var(--color-primary); - border: 1px solid var(--color-primary); -} - -.movie-likes { - margin: 0; - padding: 0 0 10px 0; - width: 100%; -} - -h3 { - margin: 0; - padding: 0; -} - -.popup { - position: fixed; - bottom: 0; - top: 0; - left: 0; - right: 0; - width: 100%; - height: 100%; - display: flex; - background-color: var(--color-secondary); -} - -.popup-container { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - overflow-y: scroll; - -ms-overflow-style: none; - scrollbar-width: none; -} - -.popup-container::-webkit-scrollbar { - display: none; -} - -.popup-header { - position: fixed; - top: 0; - right: 10px; - padding: 10px; -} - -.popup-movie-banner { - display: flex; - justify-content: center; - height: 50%; - width: 100%; -} - -.popup-movie-banner-img { - width: 100%; - height: 100%; - border-radius: 5px; - object-fit: contain; -} - -.popup-details { - display: flex; - flex-direction: column; - max-width: 90%; - margin: 0 auto; - align-items: flex-start; -} - -.popup-description { - max-width: 70%; - font-weight: 400; -} - -.comments-received { - list-style-type: none; - margin: 0; - padding: 0; -} - -form { - display: flex; - flex-direction: column; - width: 100%; -} - -input[type='text'] { - width: 90%; - height: 45px; - border-radius: 5px; - border: 1px solid var(--color-primary); - padding: 0 10px; - margin: 10px 0; + font-size: medium; } input[type='submit'] { @@ -665,18 +441,6 @@ input[type='submit'] { width: 100%; background: black; border-radius: 15px; - -textarea { - width: 90%; - height: 120px; - border-radius: 5px; - border: 1px solid var(--color-primary); - padding: 0 10px; - margin: 10px 0; -} - -.add-comment-form { - width: 50%; } .hide { diff --git a/src/index.html b/src/index.html index 434c639..1e87a26 100644 --- a/src/index.html +++ b/src/index.html @@ -42,6 +42,7 @@
    +