From 0538517746b4255511556d3be0ac79f73c8e089d Mon Sep 17 00:00:00 2001 From: q965786x Date: Sat, 9 Aug 2025 20:04:55 +0700 Subject: [PATCH 1/6] =?UTF-8?q?=D0=9D=D0=B0=D0=BF=D0=B8=D1=81=D0=B0=D0=BB?= =?UTF-8?q?=D0=B0=20=D0=BA=D0=BE=D0=B4=20=D0=B4=D0=BB=D1=8F=20=D1=80=D0=B5?= =?UTF-8?q?=D0=B0=D0=BB=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B4=D0=BE?= =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BD=D0=BE?= =?UTF-8?q?=D0=B2=D0=BE=D0=B3=D0=BE=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=B0=D1=80=D0=B8=D1=8F.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 6f14ae14a..fc1930726 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - +d Проект "Комменты" @@ -65,6 +65,36 @@ From bb454ae01ea2896eb842146e473faafe79f0d0d3 Mon Sep 17 00:00:00 2001 From: q965786x Date: Mon, 11 Aug 2025 22:00:10 +0700 Subject: [PATCH 2/6] =?UTF-8?q?=D0=92=D0=BD=D0=B5=D1=81=D0=BB=D0=B0=20?= =?UTF-8?q?=D0=BA=D0=BE=D1=80=D1=80=D0=B5=D0=BA=D1=82=D0=B8=D1=80=D0=BE?= =?UTF-8?q?=D0=B2=D0=BA=D0=B8=20=D0=B2=20=D0=BA=D0=BE=D0=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index fc1930726..fef412f85 100644 --- a/index.html +++ b/index.html @@ -68,17 +68,27 @@ const nameInput = document.querySelector('.add-form-name'); const commentInput = document.querySelector('.add-form-text'); const addButton = document.querySelector('.add-form-button'); - const comments = document.querySelector('.comments'); + const commentsEl = document.querySelector('.comments'); addButton.addEventListener('click', () => { if (!nameInput.value || !commentInput.value) { - return; - } + alert('Необходимо заполнить все поля'); + } + + const date = new Date(); + const dateStr = date.toLocaleString('ru-RU', { + day: '2-digit', + month: '2-digit', + year: '2-digit', + hour: '2-digit', + minute: '2-digit' + }).replace(',', ''); + const commentTemplate = `
  • ${nameInput.value}
    -
    ${new Date().toLocaleString()}
    +
    ${dateStr}
    ${commentInput.value}
    @@ -91,7 +101,13 @@
    • `; - comments.insertAdjacentHTML('beforeend', commentTemplate); + + const divEl = document.createElement('div'); + divEl.innerHTML = commentTemplate; + const newComment = divEl.firstElementChild; + + commentsEl.appendChild(newComment); + nameInput.value = ''; commentInput.value = ''; }); From cc7c053cce33e916ba0d6cc3a499eb6b00991511 Mon Sep 17 00:00:00 2001 From: q965786x Date: Tue, 12 Aug 2025 20:49:39 +0700 Subject: [PATCH 3/6] =?UTF-8?q?=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=D0=B0=20=D0=BF=D0=BE=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=87?= =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index fef412f85..e8bcdb040 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,7 @@ addButton.addEventListener('click', () => { if (!nameInput.value || !commentInput.value) { alert('Необходимо заполнить все поля'); + return; } const date = new Date(); From f1c321f3065eeff98a786e3694c4c649347e0d7e Mon Sep 17 00:00:00 2001 From: q965786x Date: Thu, 14 Aug 2025 21:47:07 +0700 Subject: [PATCH 4/6] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20=D0=BA=D0=BE=D0=B4=20=D0=B4=D0=BB=D1=8F=20"=D0=BE?= =?UTF-8?q?=D0=B6=D0=B8=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F"=20=D0=BA?= =?UTF-8?q?=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=B8=20=D1=81=D1=87=D1=91?= =?UTF-8?q?=D1=82=D1=87=D0=B8=D0=BA=D0=B0=20=D0=BB=D0=B0=D0=B9=D0=BA=D0=BE?= =?UTF-8?q?=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 112 ++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 81 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index e8bcdb040..649ddf4d2 100644 --- a/index.html +++ b/index.html @@ -70,49 +70,99 @@ const addButton = document.querySelector('.add-form-button'); const commentsEl = document.querySelector('.comments'); - addButton.addEventListener('click', () => { - if (!nameInput.value || !commentInput.value) { - alert('Необходимо заполнить все поля'); - return; - } - - const date = new Date(); - const dateStr = date.toLocaleString('ru-RU', { - day: '2-digit', - month: '2-digit', - year: '2-digit', - hour: '2-digit', - minute: '2-digit' - }).replace(',', ''); + const formatDate = () => { + const date = new Date(); + return date.toLocaleString('ru-RU', { + day: '2-digit', + month: '2-digit', + year: '2-digit', + hour: '2-digit', + minute: '2-digit' + }).replace(',', ''); + }; - const commentTemplate = ` -
  • + let comments = [ + { + userName: "Глеб Фокин", + date: "12.02.22 12:18", + commentText: "Это будет первый комментарий на этой странице", + likes: 3, + isLiked: false + }, + { + userName: "Варвара Н.", + date: "13.02.22 19:22", + commentText: "Мне нравится как оформлена эта страница! ❤", + likes: 75, + isLiked: true + } + ]; + + const renderComments = () => { + commentsEl.innerHTML = comments.map((comment, index) => { + return ` +
  • -
    ${nameInput.value}
    -
    ${dateStr}
    +
    ${comment.userName}
    +
    ${comment.date}
    -
    ${commentInput.value}
    +
    ${comment.commentText}
    • `; + }).join(''); + }; - const divEl = document.createElement('div'); - divEl.innerHTML = commentTemplate; - const newComment = divEl.firstElementChild; + + renderComments(); - commentsEl.appendChild(newComment); + + addButton.addEventListener('click', () => { + if (!nameInput.value || !commentInput.value) { + alert('Необходимо заполнить все поля'); + return; + } + + const newComment = { + userName: nameInput.value, + date: formatDate(), + commentText: commentInput.value, + likes: 0, + isLiked: false + }; + + comments.push(newComment); + renderComments(); + + nameInput.value = ''; + commentInput.value = ''; + }); + + + commentsEl.addEventListener('click', (event) => { + if (event.target.classList.contains('like-button')) { + const index = event.target.dataset.index; + const comment = comments[index]; + + if (event.target.classList.contains('-active-like')) { + comment.likes--; + comment.isLiked = false; + } else { + comment.likes++; + comment.isLiked = true; + } - nameInput.value = ''; - commentInput.value = ''; - }); - // Код писать здесь - console.log("It works!"); - + renderComments(); + } + }); + + console.log("It works!"); + From e40ea5665cf3e90a4d43a7ea0cc08e0dbe4fdc42 Mon Sep 17 00:00:00 2001 From: q965786x Date: Sat, 16 Aug 2025 07:56:52 +0700 Subject: [PATCH 5/6] =?UTF-8?q?=D0=92=D0=BD=D0=B5=D1=81=D0=B5=D0=BD=D0=B0?= =?UTF-8?q?=20=D0=BD=D0=B5=D0=B1=D0=BE=D0=BB=D1=8C=D1=88=D0=B0=D1=8F=20?= =?UTF-8?q?=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B0=20=D0=B2=20?= =?UTF-8?q?=D0=BF=D1=80=D0=BE=D1=86=D0=B5=D1=81=D1=81=20=D0=BD=D0=B0=D0=B2?= =?UTF-8?q?=D0=B5=D1=88=D0=B8=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F=20"=D0=BA?= =?UTF-8?q?=D0=BB=D0=B8=D0=BA=D0=B0"=20=D0=BD=D0=B0=20=D0=BA=D0=BD=D0=BE?= =?UTF-8?q?=D0=BF=D0=BA=D1=83.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 649ddf4d2..b55c343cc 100644 --- a/index.html +++ b/index.html @@ -125,7 +125,7 @@ addButton.addEventListener('click', () => { - if (!nameInput.value || !commentInput.value) { + if (!nameInput.value.trim() || !commentInput.value.trim()) { alert('Необходимо заполнить все поля'); return; } From eadaa7122801abc674b900798b9f5e7e4aff76ec Mon Sep 17 00:00:00 2001 From: q965786x Date: Sat, 23 Aug 2025 18:58:04 +0700 Subject: [PATCH 6/6] =?UTF-8?q?=D0=A0=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B0=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8?= =?UTF-8?q?=D1=8F,=20=D0=BA=D0=BE=D1=82=D0=BE=D1=80=D0=B0=D1=8F=20=D0=BF?= =?UTF-8?q?=D0=BE=D0=B7=D0=B2=D0=BE=D0=BB=D1=8F=D0=B5=D1=82=20=D0=BF=D0=BE?= =?UTF-8?q?=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB=D1=8E=20?= =?UTF-8?q?=D0=BE=D1=82=D0=B2=D0=B5=D1=87=D0=B0=D1=82=D1=8C=20=D0=BD=D0=B0?= =?UTF-8?q?=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=80=D0=B8?= =?UTF-8?q?=D0=B8,=20=D0=B0=20=D1=82=D0=B0=D0=BA=D0=B6=D0=B5=20=D0=BE?= =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=B1=D0=B0=D1=82=D1=8B=D0=B2=D0=B0=D1=82?= =?UTF-8?q?=D1=8C=20=D0=B2=D0=B2=D0=BE=D0=B4=20HTML-=D0=BA=D0=BE=D0=B4?= =?UTF-8?q?=D0=B0=20=D0=B2=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D0=B0=D1=80=D0=B8=D1=8F=D1=85=20=D1=82=D0=B0=D0=BA,=20=D1=87?= =?UTF-8?q?=D1=82=D0=BE=D0=B1=D1=8B=20=D0=BE=D0=BD=20=D0=BE=D1=82=D0=BE?= =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=B6=D0=B0=D0=BB=D1=81=D1=8F=20=D0=BA=D0=B0?= =?UTF-8?q?=D0=BA=20=D0=BE=D0=B1=D1=8B=D1=87=D0=BD=D1=8B=D0=B9=20=D1=82?= =?UTF-8?q?=D0=B5=D0=BA=D1=81=D1=82.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 185 +++++++++++++++++++++++++++++------------------------ 1 file changed, 102 insertions(+), 83 deletions(-) diff --git a/index.html b/index.html index b55c343cc..1044012ff 100644 --- a/index.html +++ b/index.html @@ -71,98 +71,117 @@ const commentsEl = document.querySelector('.comments'); const formatDate = () => { - const date = new Date(); - return date.toLocaleString('ru-RU', { - day: '2-digit', - month: '2-digit', - year: '2-digit', - hour: '2-digit', - minute: '2-digit' - }).replace(',', ''); - }; + const date = new Date(); + return date.toLocaleString('ru-RU', { + day: '2-digit', + month: '2-digit', + year: '2-digit', + hour: '2-digit', + minute: '2-digit' + }).replace(',', ''); + }; - let comments = [ - { - userName: "Глеб Фокин", - date: "12.02.22 12:18", - commentText: "Это будет первый комментарий на этой странице", - likes: 3, - isLiked: false - }, - { - userName: "Варвара Н.", - date: "13.02.22 19:22", - commentText: "Мне нравится как оформлена эта страница! ❤", - likes: 75, - isLiked: true - } - ]; + const sanitizeHtml = (text) => { + return text.replaceAll('<', '<').replaceAll('>', '>') + }; - const renderComments = () => { - commentsEl.innerHTML = comments.map((comment, index) => { - return ` -
  • -
    -
    ${comment.userName}
    -
    ${comment.date}
    -
    -
    -
    ${comment.commentText}
    -
    -
    - -
    -
    • - `; - }).join(''); - }; + let comments = [ + { + userName: "Глеб Фокин", + date: "12.02.22 12:18", + commentText: "Это будет первый комментарий на этой странице", + likes: 3, + isLiked: false + }, + { + userName: "Варвара Н.", + date: "13.02.22 19:22", + commentText: "Мне нравится как оформлена эта страница! ❤", + likes: 75, + isLiked: true + } + ]; + const renderComments = () => { + commentsEl.innerHTML = comments.map((comment, index) => { + return ` +
  • +
    +
    ${sanitizeHtml(comment.userName)}
    +
    ${comment.date}
    +
    +
    +
    ${sanitizeHtml(comment.commentText)}
    +
    +
    + +
    +
    • + `; + }).join(''); + }; - renderComments(); - + renderComments(); - addButton.addEventListener('click', () => { - if (!nameInput.value.trim() || !commentInput.value.trim()) { - alert('Необходимо заполнить все поля'); - return; - } + addButton.addEventListener('click', () => { + const userName = sanitizeHtml(nameInput.value.trim()); + const commentText = sanitizeHtml(commentInput.value.trim()); + + if (!userName || !commentText) { + alert('Необходимо заполнить все поля'); + return; + } - const newComment = { - userName: nameInput.value, - date: formatDate(), - commentText: commentInput.value, - likes: 0, - isLiked: false - }; + const newComment = { + userName: userName, + date: formatDate(), + commentText: commentText, + likes: 0, + isLiked: false + }; - comments.push(newComment); - renderComments(); - - nameInput.value = ''; - commentInput.value = ''; - }); - - - commentsEl.addEventListener('click', (event) => { - if (event.target.classList.contains('like-button')) { - const index = event.target.dataset.index; - const comment = comments[index]; + comments.push(newComment); + renderComments(); - if (event.target.classList.contains('-active-like')) { - comment.likes--; - comment.isLiked = false; - } else { - comment.likes++; - comment.isLiked = true; + nameInput.value = ''; + commentInput.value = ''; + }); + + commentsEl.addEventListener('click', (event) => { + if (event.target.classList.contains('like-button')) { + event.stopPropagation(); + const commentElement = event.target.closest('.comment') + const index = commentElement.dataset.index; + const comment = comments[index]; + + if (event.target.classList.contains('-active-like')) { + comment.likes--; + comment.isLiked = false; + } else { + comment.likes++; + comment.isLiked = true; + } + + renderComments(); + return; } - - renderComments(); - } - }); - + + const commentElement = event.target.closest('.comment'); + if (commentElement) { + const index = commentElement.dataset.index; + const comment = comments[index]; + + nameInput.value = comment.userName; + commentInput.value = `> ${comment.commentText}\n\n`; + + commentInput.focus(); + } + }); + console.log("It works!");