From f63249e961e2d7061706a65a7d0046ff9abd09c4 Mon Sep 17 00:00:00 2001 From: Gabriel Diniz Date: Sun, 30 Jun 2024 20:19:40 -0300 Subject: [PATCH] update --- codigo/NewComent/ComentSeccion/db.json | 5 - .../NewComent/ComentSeccion/package-lock.json | 6 - codigo/NewComent/ComentSeccion/public/app.js | 154 ----------- .../ComentSeccion/public/favicon-32x32.png | Bin 1063 -> 0 bytes .../ComentSeccion/public/icon-delete.svg | 1 - .../ComentSeccion/public/icon-edit.svg | 1 - .../ComentSeccion/public/icon-minus.svg | 1 - .../ComentSeccion/public/icon-plus.svg | 1 - .../ComentSeccion/public/icon-reply.svg | 1 - .../NewComent/ComentSeccion/public/index.html | 58 ---- .../NewComent/ComentSeccion/public/style.css | 261 ------------------ 11 files changed, 489 deletions(-) delete mode 100644 codigo/NewComent/ComentSeccion/db.json delete mode 100644 codigo/NewComent/ComentSeccion/package-lock.json delete mode 100644 codigo/NewComent/ComentSeccion/public/app.js delete mode 100644 codigo/NewComent/ComentSeccion/public/favicon-32x32.png delete mode 100644 codigo/NewComent/ComentSeccion/public/icon-delete.svg delete mode 100644 codigo/NewComent/ComentSeccion/public/icon-edit.svg delete mode 100644 codigo/NewComent/ComentSeccion/public/icon-minus.svg delete mode 100644 codigo/NewComent/ComentSeccion/public/icon-plus.svg delete mode 100644 codigo/NewComent/ComentSeccion/public/icon-reply.svg delete mode 100644 codigo/NewComent/ComentSeccion/public/index.html delete mode 100644 codigo/NewComent/ComentSeccion/public/style.css diff --git a/codigo/NewComent/ComentSeccion/db.json b/codigo/NewComent/ComentSeccion/db.json deleted file mode 100644 index 2e7784a..0000000 --- a/codigo/NewComent/ComentSeccion/db.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "comments": [ - - ] -} \ No newline at end of file diff --git a/codigo/NewComent/ComentSeccion/package-lock.json b/codigo/NewComent/ComentSeccion/package-lock.json deleted file mode 100644 index df27326..0000000 --- a/codigo/NewComent/ComentSeccion/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "NewComent", - "lockfileVersion": 3, - "requires": true, - "packages": {} -} diff --git a/codigo/NewComent/ComentSeccion/public/app.js b/codigo/NewComent/ComentSeccion/public/app.js deleted file mode 100644 index ee4bb03..0000000 --- a/codigo/NewComent/ComentSeccion/public/app.js +++ /dev/null @@ -1,154 +0,0 @@ -const currentUser = 'usuário atual'; - -const commentSection = document.querySelector('.comment-section'); -const commentTemplate = document.querySelector('.comment-template'); -const replyInputTemplate = document.querySelector('.reply-input-template'); - -let comments = []; - -async function fetchComments() { - const response = await fetch('https://d2c501fa-4177-4d7b-a69b-81eb77e71b05-00-1wjvhqjrblfl5.kirk.replit.dev/comentarios'); - comments = await response.json(); - renderComments(); -} - -async function saveComment(comment) { - comment.id = Date.now(); // Gera um ID único baseado no timestamp atual - const response = await fetch('https://d2c501fa-4177-4d7b-a69b-81eb77e71b05-00-1wjvhqjrblfl5.kirk.replit.dev/comentarios', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(comment) - }); - const newComment = await response.json(); - comments.push(newComment); - renderComments(); -} - -async function updateComment(comment) { - const response = await fetch(`https://d2c501fa-4177-4d7b-a69b-81eb77e71b05-00-1wjvhqjrblfl5.kirk.replit.dev/comentarios/${comment.id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(comment) - }); - const updatedComment = await response.json(); - const index = comments.findIndex(c => c.id === comment.id); - comments[index] = updatedComment; - renderComments(); -} - -async function deleteComment(comment) { - await fetch(`https://d2c501fa-4177-4d7b-a69b-81eb77e71b05-00-1wjvhqjrblfl5.kirk.replit.dev/comentarios/${comment.id}`, { - method: 'DELETE' - }); - comments = comments.filter(c => c.id !== comment.id); - renderComments(); -} - -function createCommentElement(comment) { - const commentElement = commentTemplate.content.cloneNode(true); - const userElement = commentElement.querySelector('.usr-name'); - userElement.textContent = comment.user; - commentElement.querySelector('.c-body').textContent = comment.text; - commentElement.querySelector('.score-number').textContent = comment.score; - - const scorePlus = commentElement.querySelector('.score-plus'); - const scoreMinus = commentElement.querySelector('.score-minus'); - const deleteButton = commentElement.querySelector('.delete'); - const editButton = commentElement.querySelector('.edit'); - const replyButton = commentElement.querySelector('.reply'); - - if (comment.user === currentUser) { - commentElement.querySelector('.comment').classList.add('this-user'); - } - - scorePlus.addEventListener('click', () => { - comment.score++; - updateComment(comment); - }); - - scoreMinus.addEventListener('click', () => { - comment.score--; - updateComment(comment); - }); - - deleteButton.addEventListener('click', () => { - const isConfirmed = confirm('Você tem certeza que deseja deletar este comentário?'); - if (isConfirmed) { - deleteComment(comment); - } - }); - - editButton.addEventListener('click', () => { - const newText = prompt('Edite seu comentário:', comment.text); - if (newText) { - comment.text = newText; - updateComment(comment); - } - }); - - replyButton.addEventListener('click', () => { - const replyInput = replyInputTemplate.content.cloneNode(true); - const replyTextarea = replyInput.querySelector('.cmnt-input'); - const replyButton = replyInput.querySelector('.bu-primary'); - const repliesContainer = commentElement.querySelector('.replies'); - - replyButton.addEventListener('click', () => { - const replyText = replyTextarea.value.trim(); - if (replyText) { - const reply = { - id: Date.now(), - user: currentUser, - text: replyText, - score: 0, - replies: [], - parentId: comment.id - }; - saveComment(reply); - } - }); - - repliesContainer.appendChild(replyInput); - }); - - if (comment.replies && comment.replies.length > 0) { - const repliesContainer = commentElement.querySelector('.replies'); - comment.replies.forEach(reply => { - const replyElement = createCommentElement(reply); - repliesContainer.appendChild(replyElement); - }); - } - - return commentElement; -} - -function renderComments() { - const commentsWrapper = document.querySelector('.comments-wrp'); - commentsWrapper.innerHTML = ''; - comments.forEach(comment => { - const commentElement = createCommentElement(comment); - commentsWrapper.appendChild(commentElement); - }); -} - -const addCommentButton = commentSection.querySelector('.bu-primary'); -addCommentButton.addEventListener('click', () => { - const textarea = commentSection.querySelector('.cmnt-input'); - const text = textarea.value.trim(); - if (text) { - const newComment = { - id: Date.now(), // Gera um ID único baseado no timestamp atual - user: currentUser, - text: text, - score: 0, - replies: [] - }; - saveComment(newComment); - textarea.value = ''; - } -}); - -fetchComments(); diff --git a/codigo/NewComent/ComentSeccion/public/favicon-32x32.png b/codigo/NewComent/ComentSeccion/public/favicon-32x32.png deleted file mode 100644 index 1e2df7f089f46dd930239e418bf13e8e4c1cca0f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1063 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+081EY0-Plzi}!G9Wnr(eF` z|M+F+!xzhMK3;zF(cgdn_B?v|`rD7+fB)V2@MY=EN9|{BEWPpQ{f}RtfBl|!^+Ea3 z%d2iZe)i@2x9`6{eg66V&!4ULpSPU4KJ)Uu^RM22`~BzO$wz&&PyPA(@7<4I`yRjQ zJAZr1#XB#){D-o5+r^Vjdc3)fsquh@R{^yA;Z|8C!Zw`1zDvzMNK{QUFr z^G~yvU&yK5nOnE3q5ts2d8Z#d`S9=G|MwriU%2{m%ii0owp@Sy>dXGuA$NemCsPvS z7YvLEt(>(tKmBDkpML+hROc(RL;oBPGFiO5x8~1ErS?rgb&N^g?k~Ih+L^ zk;M!Q+`=Ht$S`Y;1W=H@#M9T6{SlWiKeL>x)y)*39#2mf#}JFtt&`J}n+ycniko-@ z3;26vOWyCzeS7I$?C$UX{_kIKV}WAF+24(KRQ;Wbm=(hXgpO=b(eBb|byZ~P5M3dt zyDB-nDx`Zw9LoWN-GrY`kHxRfy}Q3KfBxRdclJCv_%N_mL-x0j+x*I+s%JIY&vgg3Y zTes?8j%DMbh5PocynFBNZJq}$w`Q+tKfe6=^y}tkkv_Zb+uQBmSHB|O-+X(*4%OrO zQF%8%OSj*z`t$7X`oHyz%ReTa40^8r7Z}c}C9V-ADTyViR>?)FK#IZ0z|cb1&_LJF zGQ`l-%D~vl*g)IB$jZQAv*1E06b-rgDVb@NxHTN|kz5AU01WSllAy$Lg@U5|w9K4T zg_6pGRE5lfl4J&kiaC!z@o*G|X=t4CKYhmYX%GXmGPhnbx3IFX_hb=fVFi~4lfx;@ u%9}$JPT#n4;>ejJGDp}?H+U@Y(qnifE?Dx($#g2v3I \ No newline at end of file diff --git a/codigo/NewComent/ComentSeccion/public/icon-edit.svg b/codigo/NewComent/ComentSeccion/public/icon-edit.svg deleted file mode 100644 index 4973148..0000000 --- a/codigo/NewComent/ComentSeccion/public/icon-edit.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/codigo/NewComent/ComentSeccion/public/icon-minus.svg b/codigo/NewComent/ComentSeccion/public/icon-minus.svg deleted file mode 100644 index a95c028..0000000 --- a/codigo/NewComent/ComentSeccion/public/icon-minus.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/codigo/NewComent/ComentSeccion/public/icon-plus.svg b/codigo/NewComent/ComentSeccion/public/icon-plus.svg deleted file mode 100644 index 985d656..0000000 --- a/codigo/NewComent/ComentSeccion/public/icon-plus.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/codigo/NewComent/ComentSeccion/public/icon-reply.svg b/codigo/NewComent/ComentSeccion/public/icon-reply.svg deleted file mode 100644 index e30a634..0000000 --- a/codigo/NewComent/ComentSeccion/public/icon-reply.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/codigo/NewComent/ComentSeccion/public/index.html b/codigo/NewComent/ComentSeccion/public/index.html deleted file mode 100644 index 4e3580b..0000000 --- a/codigo/NewComent/ComentSeccion/public/index.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - Comentários - - - - - - - -
-
-
-
- - - -
-
-
- - - diff --git a/codigo/NewComent/ComentSeccion/public/style.css b/codigo/NewComent/ComentSeccion/public/style.css deleted file mode 100644 index 9eef574..0000000 --- a/codigo/NewComent/ComentSeccion/public/style.css +++ /dev/null @@ -1,261 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap"); - -:root { - --Moderate-blue: hsl(238, 40%, 52%); - --Soft-Red: hsl(358, 79%, 66%); - --Light-grayish-blue: hsl(239, 57%, 85%); - --Pale-red: hsl(357, 100%, 86%); - - --Dark-blue: hsl(212, 24%, 26%); - --Grayish-Blue: hsl(211, 10%, 45%); - --Light-gray: hsl(223, 19%, 93%); - --Very-light-gray: hsl(32, 87%, 34%); - --White: hsl(0, 0%, 100%); -} - -* { - padding: 0; - margin: 0; - box-sizing: border-box; - font-family: "Rubik", sans-serif; - font-size: 16px; -} - -p { - line-height: 1.5; -} - -body { - height: 100%; - width: 100%; - padding-top: 3rem; - background-color: var(--Very-light-gray); -} - -a { - cursor: pointer; - text-decoration: none; - font-weight: 500; -} - -button { - cursor: pointer; -} - -button:hover { - filter: saturate(80%); -} - -.bu-primary { - background-color: var(--Moderate-blue); - color: var(--White); - border: none; - padding: 0.75rem 1.5rem; - border-radius: 4px; -} - -.comment-section { - padding: 0 1rem; -} - -.container { - border-radius: 8px; - padding: 1.5rem; - background-color: var(--White); -} - -.comments-wrp { - display: flex; - flex-direction: column; -} - -.comment-section { - max-width: 75ch; - margin: auto; - margin-top: 1rem; -} - -.comment { - margin-bottom: 1rem; - display: grid; - grid-template-areas: - "score user controls" - "score comment comment" - "score comment comment"; - grid-template-columns: auto 1fr auto; - gap: 1.5rem; - row-gap: 1rem; - color: var(--Grayish-Blue); -} - -.c-score { - color: var(--Moderate-blue); - font-weight: 500; - grid-area: score; - display: flex; - align-items: center; - flex-direction: column; - gap: 1rem; - padding: 0.75rem; - padding-top: 0.5rem; - width: 1rem; - box-sizing: content-box; - background-color: var(--White); - border-radius: 8px; - align-self: flex-start; -} - -.score-control { - width: 100%; - cursor: pointer; - object-fit: scale-down; -} - -.c-text { - grid-area: comment; - width: 100%; -} - -.c-user { - width: 100%; - grid-area: user; - display: flex; - gap: 1rem; - align-items: center; -} - -.usr-name { - color: var(--Dark-blue); - font-weight: 700; -} - -.usr-img { - height: 2rem; - width: 2rem; -} - -.c-controls { - display: flex; - gap: 1rem; - color: var(--Moderate-blue); - grid-area: controls; - align-self: center; - justify-self: flex-end; -} - -.c-controls a { - align-items: center; -} - -.edit, -.reply { - color: var(--Moderate-blue); -} - -.edit { - display: none; -} - -.delete { - color: var(--Soft-Red); - display: none; -} - -.control-icon { - margin-right: 0.5rem; -} - -.replies { - display: flex; - margin-left: 2.5rem; - padding-left: 2.4rem; - border-left: 1px solid var(--Light-grayish-blue); -} - -.reply-to { - color: var(--Moderate-blue); - font-weight: 500; -} - -.reply-input { - display: grid; - margin-bottom: 1rem; - grid-template-areas: "avatar input button"; - grid-template-columns: min-content auto min-content; - justify-items: center; - gap: 1rem; - min-height: 9rem; -} - -.reply-input img { - grid-area: avatar; - height: 2.5rem; - width: 2.5rem; -} - -.reply-input button { - grid-area: button; - align-self: flex-start; -} - -.reply-input textarea { - grid-area: input; - padding: 1rem; - width: 100%; - border: 1px solid var(--Light-gray); - border-radius: 4px; - resize: none; -} - -.this-user .usr-name::after { - font-weight: 400; - content: "you"; - color: var(--White); - background-color: var(--Moderate-blue); - padding: 0 0.4rem; - padding-bottom: 0.2rem; - font-size: 0.8rem; - margin-left: 0.5rem; - border-radius: 2px; -} - -.this-user .reply { - display: none; -} - -.this-user .edit, -.this-user .delete { - display: flex; -} - -@media screen and (max-width: 640px) { - .container { - padding: 0.75rem; - } - .replies { - padding-left: 1rem; - margin-left: 0.5rem; - } - .comment { - grid-template-areas: - "user controls" - "comment comment" - "score score"; - grid-template-columns: 1fr auto; - column-gap: 0.25rem; - row-gap: 0.5rem; - } - .c-score { - flex-direction: row; - justify-content: space-around; - grid-area: score; - width: 100%; - padding: 0.5rem; - } - .c-controls { - gap: 0.25rem; - } - .control-icon { - width: 1rem; - } -}