Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dom3 #852

Closed
wants to merge 5 commits into from
Closed

Dom3 #852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9e99b3c
выполнены основные задачи
allizaveta Mar 2, 2024
2125c55
adadada
allizaveta Mar 2, 2024
b25f939
добавлена рабочая система лайков, список комментариев перенесен в массив
allizaveta Mar 3, 2024
336189a
ПИПИПУПУЧЕК
allizaveta Mar 7, 2024
55b55c1
РЕАлизован функционал Ответов на комментарии, ограничено всплытие и и…
allizaveta Mar 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 135 additions & 40 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,64 +8,159 @@

<body>
<div class="container">
<ul class="comments">
<li class="comment">
<div class="comment-header">
<div>Глеб Фокин</div>
<div>12.02.22 12:18</div>
</div>
<div class="comment-body">
<div class="comment-text">
Это будет первый комментарий на этой странице
</div>
</div>
<div class="comment-footer">
<div class="likes">
<span class="likes-counter">3</span>
<button class="like-button"></button>
</div>
</div>
</li>
<li class="comment">
<div class="comment-header">
<div>Варвара Н.</div>
<div>13.02.22 19:22</div>
</div>
<div class="comment-body">
<div class="comment-text">
Мне нравится как оформлена эта страница! ❤
</div>
</div>
<div class="comment-footer">
<div class="likes">
<span class="likes-counter">75</span>
<button class="like-button -active-like"></button>
</div>
</div>
</li>
<ul class="comments" id="list">
<!--список рендерится из js -->
</ul>
<div class="add-form">
<input
type="text"
class="add-form-name"
placeholder="Введите ваше имя"
id="name-input"
/>
<textarea
type="textarea"
class="add-form-text"
placeholder="Введите ваш коментарий"
rows="4"
id="text-input"
></textarea>
<div class="add-form-row">
<button class="add-form-button">Написать</button>
<button class="add-form-button" id="send-button">Написать</button>
</div>
</div>
</div>
</body>

<script>
"use strict";
// Код писать здесь
console.log("It works!");
const nameInputElement = document.getElementById("name-input");
const textInputElement = document.getElementById("text-input");
const buttonElement = document.getElementById("send-button");
const listElement = document.getElementById("list");
//отображение даты в выбранном формате

const comments = [
{
name:"Глеб Фокин",
date:"12.02.22 12:18",
text:"Это будет первый комментарий на этой странице",
isLiked:false,
likeCount:73
},
{
name:"Варвара H.",
date:"13.02.22 19:22",
text:"Мне нравится как оформлена эта страница! ❤",
isLiked:true,
likeCount:3
},
];

//формирую html разметку на основе массива
const renderComments = () => {
const commentsHtml = comments.map((comment, index) => {
// Добавляем класс active-like, если isLiked равно true
const likeButtonClass = comment.isLiked ? 'like-button active-like' : 'like-button';

return `<li class="comment comment-head">
<div class="comment-header">
<div>${comment.name}</div>
<div>${comment.date}</div>
</div>
<div class="comment-body">
<div class="comment-text">
${comment.text}
</div>
</div>
<div class="comment-footer">
<div class="likes">
<span class="likes-counter">${comment.likeCount}</span>
<button data-index="${index}" class="${likeButtonClass}"></button>
</div>
</div>
</li>`;
}).join("");

listElement.innerHTML = commentsHtml;
initLikeButtonListeners();
initAnswerListeners();
};

//инициализация обработчика событий на клик по кнопке лайка
const initLikeButtonListeners = () => {
const likeButtonElements = document.querySelectorAll(".like-button");

for (const likeButtonElement of likeButtonElements) {
likeButtonElement.addEventListener('click', () => {
const index = likeButtonElement.dataset.index;
event.stopPropagation();
// Изменяем значение isLiked и число лайков в соответствии с текущим состоянием кнопки
comments[index].isLiked = !comments[index].isLiked;
if (comments[index].isLiked) {
comments[index].likeCount++;
} else {
comments[index].likeCount--;
}

// Обновляем отображение кнопки "лайк"
renderComments();
});
};
};

// Вызов функции инициализации лайка
initLikeButtonListeners();
//инициализация обработчика событий ответа на комментарий
const initAnswerListeners = () => {
const headElements = document.querySelectorAll(".comment-head");
headElements.forEach((headElement, index) => {
headElement.addEventListener('click', () => {
textInputElement.value = `>${comments[index].text}\n${comments[index].name}`;
});
});
};


// Вызов функции инициализации ответов
initAnswerListeners();


//Обработчик событий на кнопку отправить
buttonElement.addEventListener('click', () =>{
let currentDate = new Date();
let formattedDateTime = ('0' + currentDate.getDate()).slice(-2) + '.' + ('0' + (currentDate.getMonth() + 1)).slice(-2) + '.' + ('' + currentDate.getFullYear()).slice(-2) + ' ' + ('0' + currentDate.getHours()).slice(-2) + ':' + ('0' + currentDate.getMinutes()).slice(-2);
nameInputElement.classList.remove('error');
textInputElement.classList.remove('error');
// Валидация инпута на пустые строки
if(nameInputElement.value.trim() === '' && textInputElement.value.trim() === ''){
nameInputElement.classList.add('error');
textInputElement.classList.add('error');
return;
}
else if(textInputElement.value.trim() === ''){
textInputElement.classList.add('error');
return;
}
else if(nameInputElement.value.trim() === ''){
nameInputElement.classList.add('error');
return;
};

//добавление комментария на страницу
comments.push({
name: nameInputElement.value.replaceAll("<", "&lt;").replaceAll("<", "&gt;"),
date: formattedDateTime,
text: textInputElement.value.replaceAll("<", "&lt;").replaceAll("<", "&gt;"),
isLiked: false,
likeCount: 0
});
renderComments();
//очистка инпута от старого ввода
textInputElement.value = '';
nameInputElement.value = '';
});

// Вызов функции инициализации ответов
renderComments();
</script>
</html>
</html>
8 changes: 6 additions & 2 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ body {
height: 22px;
}

.-active-like {
.active-like {
background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30'/%3E%3C/svg%3E");
}

Expand Down Expand Up @@ -134,4 +134,8 @@ body {

.add-form-button:hover {
opacity: 0.9;
}
}

.error{
background-color: red;
}
Loading