From 7e23f1f191b673d943c3a1d1aa1cfea6b974e27f Mon Sep 17 00:00:00 2001 From: Maksim Ivanichenko Date: Sun, 15 Mar 2026 09:19:48 +0300 Subject: [PATCH 1/2] =?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=BA=201-=D0=BC=D1=83=20=D0=B7?= =?UTF-8?q?=D0=B0=D0=B4=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 | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/index.html b/index.html index 6f14ae14aa..0064369bf6 100644 --- a/index.html +++ b/index.html @@ -66,6 +66,63 @@ From bb8bedde0a4d176245aebe4608eedc4a6ac435df Mon Sep 17 00:00:00 2001 From: Maksim Ivanichenko Date: Tue, 17 Mar 2026 11:15:05 +0300 Subject: [PATCH 2/2] =?UTF-8?q?=D0=94=D0=BE=D0=BC=D0=B0=D1=88=D0=BA=D0=B0?= =?UTF-8?q?=20=E2=84=962?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 201 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 126 insertions(+), 75 deletions(-) diff --git a/index.html b/index.html index 0064369bf6..d441daaf48 100644 --- a/index.html +++ b/index.html @@ -9,40 +9,7 @@
    -
  • -
    -
    Глеб Фокин
    -
    12.02.22 12:18
    -
    -
    -
    - Это будет первый комментарий на этой странице -
    -
    -
    - -
    -
    • -
  • -
    -
    Варвара Н.
    -
    13.02.22 19:22
    -
    -
    -
    - Мне нравится как оформлена эта страница! ❤ -
    -
    -
    - -
    -
    • +
"use strict"; // Код писать здесь - const nameInput = document.querySelector('.add-form-name') -const commentArea = document.querySelector('.add-form-text') -const buttonSubmit = document.querySelector('.add-form-button') -const commentsList = document.querySelector('.comments') // Переменная для списка комментариев -nameInput.addEventListener('input', function() { - /// console.log('Имя изменено', nameInput.value) -}) + const comments = [ + { -commentArea.addEventListener('input', function() { - /// console.log('Поле изменено', commentArea.value) -}) + name: "Глеб Фокин", + date: "12.02.22 12:18", + text: "Это будет первый комментарий на этой странице", + likes: 3, + isLiked: false + }, + { + name: 'Варвара Н.', + date: '13.02.22 19:22', + text: 'Мне нравится как оформлена эта страница! ❤', + likes: 75, + isLiked: true // true - лайк поставлен + } + ]; -buttonSubmit.addEventListener('click', function() { - /* console.log('Кнопка нажата') - console.log('Имя:', nameInput.value) - console.log('Комментарий:', commentArea.value) */ - - // Получаем текущую дату и время - const now = new Date() - const date = now.toLocaleDateString('ru-RU', { - day: '2-digit', - month: '2-digit', - year: '2-digit' - }).replace(/\//g, '.') - const time = now.toLocaleTimeString('ru-RU', { - hour: '2-digit', - minute: '2-digit' - }) - const dateTime = `${date} ${time}` - - // Создаем шаблонную строку нового комментария - const newCommentHtml = ` + + const nameInput = document.querySelector('.add-form-name') + const commentArea = document.querySelector('.add-form-text') + const buttonSubmit = document.querySelector('.add-form-button') + const commentsList = document.querySelector('.comments') + +function renderComments() { +let commentsHtml = ''; + for(let i=0; i < comments.length; i++) +{ + const comment = comments[i]; + const likeButtonClass = comment.isLiked ? 'like-button -active-like' : 'like-button'; + +commentsHtml += `
  • -
    ${nameInput.value}
    -
    ${dateTime}
    +
    ${comment.name}
    +
    ${comment.date}
    - ${commentArea.value} + ${comment.text}
    • ` - - // Добавляем новый комментарий в конец списка - commentsList.innerHTML += newCommentHtml - nameInput.value = '' - commentArea.value = '' -}) +} +commentsList.innerHTML = commentsHtml; + // Обработчики на кнопки лайков + const likeButtons = document.querySelectorAll('.like-button'); + for(let i = 0; i < likeButtons.length; i++) { + likeButtons[i].addEventListener('click', function() { + toggleLike(i); + }); + } +} + + +function validateForm() { + if(!nameInput.value.trim()) + { + alert('Введите значение в поле'); + nameInput.focus(); + nameInput.style.backgroundColor = 'red'; + return false; + } + if(!commentArea.value.trim()) + { + alert('Введите rкоммантарий'); + commentArea.focus(); + commentArea.style.backgroundColor = 'red'; + return false; + } + return true; + } + + // обработчики input для сброса красного фона + nameInput.addEventListener('input', function() { + nameInput.style.backgroundColor = ''; + }) + + commentArea.addEventListener('input', function() { + commentArea.style.backgroundColor = ''; + }) + +function getCurrentDateTime() { + + // Получаем текущую дату и время + const now = new Date() + const date = now.toLocaleDateString('ru-RU', { + day: '2-digit', + month: '2-digit', + year: '2-digit' + }).replace(/\//g, '.') + const time = now.toLocaleTimeString('ru-RU', { + hour: '2-digit', + minute: '2-digit' + }) + return`${date} ${time}` +} + +// Функция для обработки лайков +function toggleLike(index) { + // Меняем состояние лайка на противоположное + comments[index].isLiked = !comments[index].isLiked; + + // Меняем количество лайков + if (comments[index].isLiked) { + comments[index].likes++; // Если поставили лайк +1 + } else { + comments[index].likes--; // Если убрали лайк -1 + } + + // Перерисовываем все комментарии + renderComments(); +} + +buttonSubmit.addEventListener('click', function() { + if(!validateForm()) + {return} + + const newComment = { + name : nameInput.value, + date: getCurrentDateTime(), + text: commentArea.value, + likes: 0, + isLiked: false + }; + + comments.push(newComment); + renderComments(); + nameInput.value = ''; + commentArea.value = ''; + + }) +renderComments(); console.log("It works!");