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

Hw 12 #934

Closed
wants to merge 9 commits into from
Closed

Hw 12 #934

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bec0ac1
DZ-9
Vladimir-Deymos Mar 18, 2024
3306706
DZ-10
Vladimir-Deymos Mar 23, 2024
2b3f34d
Merge pull request #1 from Vladimir-Deymos/hw-9
Vladimir-Deymos Mar 24, 2024
06a1e4a
Merge pull request #2 from Vladimir-Deymos/hw-10
Vladimir-Deymos Mar 24, 2024
5e5b66b
DZ-11
Vladimir-Deymos Mar 24, 2024
04b0c74
DZ-11 corr
Vladimir-Deymos Mar 24, 2024
231304d
DZ-11 corr1
Vladimir-Deymos Mar 26, 2024
504f2f7
Merge pull request #3 from Vladimir-Deymos/hw-11
Vladimir-Deymos Mar 30, 2024
5509027
DZ-12
Vladimir-Deymos Apr 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
270 changes: 210 additions & 60 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,221 @@
<!DOCTYPE html>
<html>
<head>
<title>Проект "Комменты"</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>

<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">

<head>
<title>Проект "Комменты"</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<div class="container">
<div id="loading" style="display: none;">Пожалуйста, подождите, загружается комментарий...</div>
<ul id="list" class="comments">
<!-- Список через JS -->
</ul>
<div id="loading-message" style="display: none;">Комментарий добавляется</div>
<div class="add-form">
<input id="name-input" type="text" class="add-form-name" placeholder="Введите ваше имя" />
<textarea id="text-input""" type="textarea" class="add-form-text" placeholder="Введите ваш коментарий"
rows="4"></textarea>
<div class="add-form-row">
<button id="add-button" class="add-form-button">Написать</button>
<button id="add-button-delete" class="add-form-button-delete">Удалить последний комментарий</button>

</div>
</div>
</div>
</body>

<style>
.error {
background-color: red;
}
</style>

<script>
"use strict";
// Код писать здесь
const nameInputElement = document.querySelector(".add-form-name");
const textInputElement = document.querySelector(".add-form-text");
const buttonElement = document.querySelector(".add-form-button");

const listElement = document.getElementById("list");

buttonElement.disabled = true;

Date.prototype.format = function () {
return this
.toLocaleDateString('default', { day: '2-digit', month: '2-digit', year: '2-digit' }) + " " + this.toLocaleTimeString().slice(0, -3);
}

String.prototype.sanitize = function () {
return this
.replaceAll("&", "&amp;")
.replaceAll("<", "&lt;")
.replaceAll(">", "&gt;")
.replaceAll('"', "&quot;")
.replaceAll("BEGIN_QUOTE", "<div class='quote'>")
.replaceAll("QUOTE_END", "</div>")
}

function getComments() {
const loadingElement = document.getElementById('loading');
loadingElement.style.display = 'block';

return fetch(
'https://wedev-api.sky.pro/api/v1/vladimir-novikov/comments',
{
method: "GET"
}
)
.then((response) => {
return response.json();
})
.then((responseData) => {
const appComments = responseData.comments.map((comment) => {
return {
name: comment.author.name,
date: new Date(comment.date).format(),
text: comment.text,
likeCount: 0,
isLiked: false,
};
});
comments = appComments;
renderComments();
loadingElement.style.display = 'none';

});
};
getComments();

function deleteComment() {
const buttonDelete = document.querySelectorAll('.add-button-delete');
for (let button of buttonDelete) {
button.addEventListener('click', (event) => {
let id = button.dataset.id;
deleteApiComment(id);
event.stopPropagation();
renderElements();
})
}
};
// массив пользователей
let comments = [];

function renderComments() {
listElement.innerHTML = comments.map((comment, index) => {
const classButton = comment.isLiked ? "-active-like" : "";
return `<li data-index="${index}" class="comment">
<div class="comment-header">
<div>Варвара Н.</div>
<div>13.02.22 19:22</div>
<div>${comment.name}</div>
<div>${comment.date}</div>
</div>
<div class="comment-body">
<div class="comment-text">
Мне нравится как оформлена эта страница! ❤
<div class="comment-text" data-index="${index}">
${comment.text}
</div>
</div>
<div class="comment-footer">
<div class="likes">
<span class="likes-counter">75</span>
<button class="like-button -active-like"></button>
<span class="likes-counter" data-index="${index}">${comment.likeCount}</span>
<button class="like-button ${classButton}" data-index="${index}"></button>
</div>
</div>
</li>
</ul>
<div class="add-form">
<input
type="text"
class="add-form-name"
placeholder="Введите ваше имя"
/>
<textarea
type="textarea"
class="add-form-text"
placeholder="Введите ваш коментарий"
rows="4"
></textarea>
<div class="add-form-row">
<button class="add-form-button">Написать</button>
</div>
</div>
</div>
</body>

<script>
"use strict";
// Код писать здесь
console.log("It works!");
</script>
</html>
</li>`
}).join("");

initEventList();
reply();

};
// функция лайка
function initEventList() {
const likeButtonElements = document.querySelectorAll('.like-button');
for (const likeButtonElement of likeButtonElements) {
likeButtonElement.addEventListener('click', () => {
const index = likeButtonElement.dataset.index
if (comments[index].isLiked) {
comments[index].isLiked = !comments[index].isLiked
comments[index].likeCount--
} else {
comments[index].isLiked = !comments[index].isLiked
comments[index].likeCount++
}
renderComments();
});
};
}

// функция ответа на комментарий
function reply() {
const commentsForms = document.querySelectorAll(".comment-text");

for (const commentForm of commentsForms) {
commentForm.addEventListener('click', () => {
const index = commentForm.dataset.index;
// const styleQuote = document.querySelectorAll(".quote");
textInputElement.value = `BEGIN_QUOTE ${comments[index].text} : ${comments[index].name} QUOTE_END`;
textInputElement.focus();
});
};
};
// ввод комментария через "Enter"
document.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
buttonElement.click();
}
})

buttonElement.disabled = true;
nameInputElement.addEventListener('input', () => {
if (nameInputElement.value === '') {
buttonElement.disabled = true;
return;

} else {
buttonElement.disabled = false;
}
})


buttonElement.addEventListener('click', () => {
nameInputElement.classList.remove("error");
textInputElement.classList.remove("error");
if (nameInputElement.value.trim() === "" || textInputElement.value.trim() === "") {
nameInputElement.classList.add("error");
textInputElement.classList.add("error")
return;
};



const featchPushComment = fetch(
'https://wedev-api.sky.pro/api/v1/vladimir-novikov/comments',
{
method: "POST",
body: JSON.stringify({

text: textInputElement.value.sanitize(),
name: nameInputElement.value.sanitize(),
// forceError: true,

}),
}).then((response) => {
getComments();
});



nameInputElement.value = "";
textInputElement.value = "";
});

renderComments();


console.log("It works!");
</script>

</html>
Loading
Loading