From 90720ec334b749ad96eff0d125d5411d074c30ad Mon Sep 17 00:00:00 2001 From: MethodGirl <94073698+MethodGirl@users.noreply.github.com> Date: Thu, 2 Jul 2026 17:12:07 +0300 Subject: [PATCH 1/5] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=B0=D0=B2=D1=82=D0=BE=D1=80=D0=B8=D0=B7=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D0=B8/=20=D1=80=D0=B5=D0=B3=D0=B8=D1=81=D1=82=D1=80=D0=B0?= =?UTF-8?q?=D1=86=D0=B8=D0=B8=20=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2?= =?UTF-8?q?=D0=B0=D1=82=D0=B5=D0=BB=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 25 +-- js/api/commentsAPI.js | 74 ++++++++- js/handlers/addCopyCommentToFormHandlers.js | 33 ++-- js/handlers/addLikeHandlers.js | 45 +++--- js/handlers/formHandlers.js | 22 ++- js/index.js | 25 ++- js/render/renderComments.js | 33 ++++ js/render/renderForm.js | 35 ++++ js/render/renderLogin.js | 90 +++++++++++ js/render/renderRegistration.js | 19 +++ js/renderComment/renderComments.js | 32 ---- styles.css | 167 +++++++++++++++++++- 12 files changed, 496 insertions(+), 104 deletions(-) create mode 100644 js/render/renderComments.js create mode 100644 js/render/renderForm.js create mode 100644 js/render/renderLogin.js create mode 100644 js/render/renderRegistration.js delete mode 100644 js/renderComment/renderComments.js diff --git a/index.html b/index.html index 00e3c281d..a857059de 100644 --- a/index.html +++ b/index.html @@ -8,29 +8,6 @@ -
-

- Пожалуйста подождите, комментарии загружаются... -

- -
- - -
- -
-
-
+
diff --git a/js/api/commentsAPI.js b/js/api/commentsAPI.js index 5029054a9..c37e09820 100644 --- a/js/api/commentsAPI.js +++ b/js/api/commentsAPI.js @@ -1,5 +1,5 @@ import { comments } from '../commentsArray/commentsArray.js' -import { renderComments } from '../renderComment/renderComments.js' +import { renderComments } from '../render/renderComments.js' import { formTextArea, formInput, @@ -7,14 +7,24 @@ import { formName, } from '../handlers/formHandlers.js' +const host = 'https://wedev-api.sky.pro/api/v2/MethodGirl' + +// let token = 'asb4c4boc86gasb4c4boc86g37w3cc3bo3b83k4g37k3bk3cg3c03ck4k' + +export let token = '' + +export const updateToken = (newToken) => { + token = newToken +} export function getCommentsAPI() { - return fetch('https://wedev-api.sky.pro/api/v1/MethodGirl/comments', { + return fetch(host + '/comments', { method: 'GET', + headers: { + Authorization: `Bearer ${token}`, + }, }).then((response) => response.json()) } -const host = 'https://wedev-api.sky.pro/api/v1/MethodGirl' - export function postCommentAPI(newComment) { const commentForAPI = { name: newComment.name, @@ -26,10 +36,12 @@ export function postCommentAPI(newComment) { return fetch(host + '/comments', { method: 'POST', + headers: { + Authorization: `Bearer ${token}`, + }, body: JSON.stringify({ text: newComment.text, name: newComment.name, - forceError: true, }), }).then((response) => { if (response.status === 400) { @@ -47,3 +59,55 @@ export function postCommentAPI(newComment) { response.json() }) } + +export function login({ login, password }) { + return fetch('https://wedev-api.sky.pro/api/user/login', { + method: 'POST', + body: JSON.stringify({ login, password }), + }) + .then((response) => { + return response.json().then((data) => { + if (!response.ok) { + console.error('Ответ сервера:', data) + throw new Error( + data.message || + data.error || + `Ошибка ${response.status}`, + ) + } + return data + }) + }) + .catch((error) => { + if ( + error.message.includes('400') || + error.message.includes('Неверный') + ) { + alert('Неверный пароль или логин, попробуйте снова') + } + }) +} + +export function registration({ login, name, password }) { + return fetch('https://wedev-api.sky.pro/api/user', { + method: 'POST', + body: JSON.stringify({ login, name, password }), + }) + .then((response) => { + return response.json().then((data) => { + if (!response.ok) { + console.error('Ответ сервера:', data) + throw new Error( + data.message || + data.error || + `Ошибка ${response.status}`, + ) + } + return data + }) + }) + .catch((error) => { + console.error('Ошибка запроса:', error) + throw error + }) +} diff --git a/js/handlers/addCopyCommentToFormHandlers.js b/js/handlers/addCopyCommentToFormHandlers.js index fb095f901..e334c5d41 100644 --- a/js/handlers/addCopyCommentToFormHandlers.js +++ b/js/handlers/addCopyCommentToFormHandlers.js @@ -1,22 +1,23 @@ -import { humanizeText } from "../textFormater/humanizeText.js"; -import { comments } from "../commentsArray/commentsArray.js"; -import { formComment } from "../handlers/formHandlers.js"; +import { humanizeText } from '../textFormater/humanizeText.js' +import { comments } from '../commentsArray/commentsArray.js' export function addCopyCommentToFormHandlers() { - let commentsEl = document.querySelectorAll(".comment"); + let formComment = document.querySelector('.add-form-text') - for (let commentEl of commentsEl) { - function copyCommentToForm() { - console.log(commentEl); - let index = commentEl.dataset.id; + let commentsEl = document.querySelectorAll('.comment') - formComment.value = - "Ответ на комментарий: " + - humanizeText(comments[index].text) + - " Автор: " + - humanizeText(comments[index].name); - } + for (let commentEl of commentsEl) { + function copyCommentToForm() { + console.log(commentEl) + let index = commentEl.dataset.id + + formComment.value = + 'Ответ на комментарий: ' + + humanizeText(comments[index].text) + + ' Автор: ' + + humanizeText(comments[index].name) + } - commentEl.addEventListener("click", copyCommentToForm); - } + commentEl?.addEventListener('click', copyCommentToForm) + } } diff --git a/js/handlers/addLikeHandlers.js b/js/handlers/addLikeHandlers.js index 0d76f70b7..531b3314a 100644 --- a/js/handlers/addLikeHandlers.js +++ b/js/handlers/addLikeHandlers.js @@ -1,24 +1,31 @@ -import { comments } from "../commentsArray/commentsArray.js"; -import { renderComments } from "../renderComment/renderComments.js"; +import { comments } from '../commentsArray/commentsArray.js' +import { renderComments } from '../render/renderComments.js' +import { token } from '../api/commentsAPI.js' export function addLikeHandlers() { - let likeButtons = document.querySelectorAll(".like-button"); - let likesCounter = document.querySelectorAll(".likes-counter"); + let likeButtons = document.querySelectorAll('.like-button') + let likesCounter = document.querySelectorAll('.likes-counter') - likeButtons.forEach((button) => { - button.addEventListener("click", (event) => { - event.stopPropagation(); - let index = button.dataset.index; + likeButtons.forEach((button) => { + button.addEventListener('click', (event) => { + event.stopPropagation() - if (comments[index].isLiked === true) { - comments[index].isLiked = false; - comments[index].likesCounter--; - } else { - comments[index].isLiked = true; - comments[index].likesCounter++; - } + if (token === '') { + alert('Авторизуйтесь, чтобы ставить лайки') + return + } - renderComments(); - }); - }); -} \ No newline at end of file + let index = button.dataset.index + + if (comments[index].isLiked === true) { + comments[index].isLiked = false + comments[index].likesCounter-- + } else { + comments[index].isLiked = true + comments[index].likesCounter++ + } + + renderComments() + }) + }) +} diff --git a/js/handlers/formHandlers.js b/js/handlers/formHandlers.js index 5970fea79..9f2e82306 100644 --- a/js/handlers/formHandlers.js +++ b/js/handlers/formHandlers.js @@ -1,5 +1,5 @@ import { comments } from '../commentsArray/commentsArray.js' -import { renderComments } from '../renderComment/renderComments.js' +import { renderComments } from '../render/renderComments.js' import { fixText } from '../textFormater/fixText.js' import { postCommentAPI, getCommentsAPI } from '../api/commentsAPI.js' @@ -15,8 +15,8 @@ function paintBackground() { formInput.style.backgroundColor = 'white' } -formTextArea.addEventListener('click', () => paintBackground(formTextArea)) -formInput.addEventListener('click', () => paintBackground(formInput)) +formTextArea?.addEventListener('click', () => paintBackground(formTextArea)) +formInput?.addEventListener('click', () => paintBackground(formInput)) function delay(ms) { let promise = new Promise((resolve) => { @@ -28,7 +28,20 @@ function delay(ms) { return promise } -formButton.addEventListener('click', async () => { +document.addEventListener('click', async (event) => { + const button = event.target.closest('.add-form-button') + if (!button) return + + const formComment = document.querySelector('.add-form-text') + const formName = document.querySelector('.add-form-name') + const form = document.querySelector('.add-form') + const commentList = document.querySelector('.comments') + + if (!formComment || !formName || !form) { + console.error('Элементы не найдены') + return + } + try { let commentValue = formComment.value let nameValue = formName.value @@ -94,6 +107,7 @@ formButton.addEventListener('click', async () => { formComment.value = '' formName.value = '' form.style.display = 'flex' + console.log('click') } catch (error) { let form = document.querySelector('.add-form') let loadingMessage = document.querySelector('.comment-creating') diff --git a/js/index.js b/js/index.js index 0f5a8cf53..6c8a2d5dc 100644 --- a/js/index.js +++ b/js/index.js @@ -1,6 +1,11 @@ import { getCommentsAPI } from './api/commentsAPI.js' import { comments } from './commentsArray/commentsArray.js' -import { renderComments } from './renderComment/renderComments.js' +import { renderComments } from './render/renderComments.js' +import { renderForm } from './render/renderForm.js' +import { renderLogin } from './render/renderLogin.js' +import { token } from './api/commentsAPI.js' + +renderForm() let loadingMessage = document.querySelector('.loading') @@ -29,7 +34,6 @@ const initPage = async () => { comments.push(...convertedComments) renderComments() - loadingMessage.style.display = 'none' } catch (error) { console.error('Ошибка:', error) @@ -39,3 +43,20 @@ const initPage = async () => { } initPage() + +renderComments() + +export let nameInput = document.querySelector('.add-form-name') +export let commentInput = document.querySelector('.add-form-text') +export let addCommentButton = document.querySelector('.add-form-button') + +if (token === '') { + nameInput.disabled = true + commentInput.disabled = true + addCommentButton.disabled = true +} + +export let autorizationLink = document.querySelector('.autorization-link') +let container = document.querySelector('.container') + +autorizationLink?.addEventListener('click', () => renderLogin()) diff --git a/js/render/renderComments.js b/js/render/renderComments.js new file mode 100644 index 000000000..eda14cffe --- /dev/null +++ b/js/render/renderComments.js @@ -0,0 +1,33 @@ +import { comments } from '../commentsArray/commentsArray.js' +import { addLikeHandlers } from '../handlers/addLikeHandlers.js' +import { addCopyCommentToFormHandlers } from '../handlers/addCopyCommentToFormHandlers.js' +import { getFormattedDate } from '../getFormattedDate/getFormattedDate.js' + +export function renderComments() { + let commentsBox = document.querySelector('.comments') + let commentElements = comments + .map((comment, index) => { + return ` +
  • +
    +
    ${comment.name}
    +
    ${getFormattedDate(comment.data)}
    +
    +
    +
    ${comment.text}
    +
    +
    + +
    +
    • ` + }) + .join('') + + commentsBox.innerHTML = commentElements + addCopyCommentToFormHandlers() + addLikeHandlers() + console.log(comments) +} diff --git a/js/render/renderForm.js b/js/render/renderForm.js new file mode 100644 index 000000000..7e441ead3 --- /dev/null +++ b/js/render/renderForm.js @@ -0,0 +1,35 @@ +import { renderLogin } from './renderLogin.js' + +export function renderForm() { + const container = document.createElement('div') + + let app = document.querySelector('.app') + container.className = 'container' + + container.innerHTML = ` +

    + Пожалуйста подождите, комментарии загружаются... +

    + + Чтобы добавить комментарий, авторизуйтесь +
    + + +
    + +
    +
    ` + + app.before(container) +} diff --git a/js/render/renderLogin.js b/js/render/renderLogin.js new file mode 100644 index 000000000..b53276756 --- /dev/null +++ b/js/render/renderLogin.js @@ -0,0 +1,90 @@ +import { renderRegistration } from './renderRegistration.js' +import { renderForm } from './renderForm.js' +import { renderComments } from './renderComments.js' +import { + login, + registration, + updateToken, + postCommentAPI, +} from '../api/commentsAPI.js' +import { + autorizationLink, + nameInput, + commentInput, + addCommentButton, +} from '../index.js' + +let userName = '' + +export const updateUser = (newUserName) => { + userName = newUserName +} + +function showAuthorizedCommentForm() { + autorizationLink.style.display = 'none' + nameInput.disabled = false + nameInput.readOnly = true + commentInput.disabled = false + addCommentButton.disabled = false +} + +export function renderLogin() { + let app = document.querySelector('.app') + let container = document.querySelector('.container') + + container.style.display = 'none' + + app.innerHTML = ` +
    +

    Логин

    +
    + + +
    +
    + ` + + let buttonRegistration = document.querySelector('.login__button--register') + + buttonRegistration?.addEventListener('click', () => renderRegistration()) + + let loginBlock = document.querySelector('.login') + + loginBlock.addEventListener('submit', async (event) => { + event.preventDefault() + + const loginValue = event.target.elements['login'].value + const passwordValue = event.target.elements['password'].value + + try { + const response = await login({ + login: loginValue, + password: passwordValue, + }) + console.log(response) + if (response.user.token) { + updateToken(response.user.token) + updateUser(response.user.name) + + login({ + login: loginValue, + password: passwordValue, + }) + app.style.display = 'none' + container.style.display = 'flex' + nameInput.value = response.user.name + showAuthorizedCommentForm() + } else { + console.error('Не удалось войти') + } + } catch (error) { + console.error('Произошла ошибка', error) + } + }) +} diff --git a/js/render/renderRegistration.js b/js/render/renderRegistration.js new file mode 100644 index 000000000..f6924ea4a --- /dev/null +++ b/js/render/renderRegistration.js @@ -0,0 +1,19 @@ +export function renderRegistration() { + let app = document.querySelector('.app') + + app.innerHTML = ` +
    +

    Регистрация

    +
    +
    + + + +
    +
    + +
    +
    +
    + ` +} diff --git a/js/renderComment/renderComments.js b/js/renderComment/renderComments.js deleted file mode 100644 index 72212a0ae..000000000 --- a/js/renderComment/renderComments.js +++ /dev/null @@ -1,32 +0,0 @@ -import { comments } from "../commentsArray/commentsArray.js"; -import { addLikeHandlers } from "../handlers/addLikeHandlers.js"; -import { addCopyCommentToFormHandlers } from "../handlers/addCopyCommentToFormHandlers.js"; -import { getFormattedDate } from "../getFormattedDate/getFormattedDate.js"; - -export function renderComments() { - let commentsBox = document.querySelector(".comments"); - let commentElements = comments - .map((comment, index) => { - return `
  • -
    -
    ${comment.name}
    -
    ${getFormattedDate(comment.data)}
    -
    -
    -
    ${comment.text}
    -
    -
    - -
    -
    • `; - }) - .join(""); - - commentsBox.innerHTML = commentElements; - addCopyCommentToFormHandlers(); - addLikeHandlers(); - console.log(comments); -} diff --git a/styles.css b/styles.css index 5af73ba5b..0a991e813 100644 --- a/styles.css +++ b/styles.css @@ -7,7 +7,9 @@ textarea { transition: background-color 0.3s ease; } -.container { +.container, +.login, +.registration { font-family: Helvetica; color: #ffffff; display: flex; @@ -48,6 +50,163 @@ textarea { border-radius: 20px; } +.login, +.registration { + background: radial-gradient( + 75.42% 75.42% at 50% 42.37%, + rgba(53, 53, 53, 0) 15.92%, + #7334ea 100% + ); +} + +.login__title, +.registration__title { + font-size: 40px; + margin-bottom: 0; +} + +.autorization-link { + cursor: pointer; +} + +.registration__input { + margin-top: 24px; + font-size: 20px; + padding: 10px 20px; + background-color: white; + border: none; + border-radius: 18px; + width: 240px; + box-sizing: border-box; +} + +.registration__input:focus-visible { + outline: none; +} + +.registration__input:focus { + border: 1px solid #a180f0; + box-shadow: 0 0 15px rgba(124, 92, 255, 0.35); +} + +.registration__button--submit { + margin-top: 24px; + font-size: 16px; + padding: 10px 20px; + border: none; + border-radius: 18px; + cursor: pointer; + background-color: #a180f0; + position: relative; + overflow: hidden; +} + +@keyframes slideme { + 0% { + left: -200px; + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + left: 200%; + opacity: 0; + } +} + +.registration__button--submit::after { + content: ''; + position: absolute; + top: 0; + left: -200px; + width: 60px; + height: 100px; + background-color: white; + filter: blur(30px); + transform: skewX(30deg) translateZ(0); + transition: 1s; +} + +.registration__button--submit::before { + content: ''; + position: absolute; + top: 0; + left: -200px; + width: 60px; + height: 100px; + background-color: white; + filter: blur(30px); + transform: skewX(30deg) translateZ(0); + transition: 1s; +} + +.registration__button--submit:hover::before { + animation: slideme 1.5s ease; +} + +.registration__input:not(:last-of-type) { + margin-right: 10px; +} + +.registration__input::placeholder { + font-size: 16px; + padding: 0; +} + +.login__input { + margin-top: 24px; + font-size: 20px; + padding: 10px 20px; + background-color: white; + border: none; + border-radius: 18px; + width: 220px; + box-sizing: border-box; +} + +.login__input:first-of-type { + margin-right: 10px; +} + +.login__input:focus-visible { + outline: none; +} + +.login__input:focus { + border: 1px solid #a180f0; + box-shadow: 0 0 15px rgba(124, 92, 255, 0.35); +} + +.login__input::placeholder { + font-size: 16px; + padding: 0; +} + +.login__button { + margin-top: 24px; + font-size: 16px; + padding: 10px 20px; + border: none; + border-radius: 18px; + cursor: pointer; + transition: transform 0.2s; +} + +.login__button:hover { + transform: scale(1.05); +} + +.login__button--submit { + background-color: #a180f0; + margin-right: 10px; +} + +.login__button--register { + background-color: transparent; + border: 1px solid #a180f0; +} + .comments { display: flex; flex-direction: column; @@ -105,9 +264,13 @@ textarea { 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"); } +.comment:last-of-type { + margin-bottom: 24px; +} + .add-form { + margin-top: 24px; padding: 20px; - margin-top: 48px; display: flex; flex-direction: column; } From 1a5b7800b0b91162634bfeeb7101c641b8b65f0c Mon Sep 17 00:00:00 2001 From: MethodGirl <94073698+MethodGirl@users.noreply.github.com> Date: Thu, 2 Jul 2026 18:56:04 +0300 Subject: [PATCH 2/5] =?UTF-8?q?=D0=B2=D1=8B=D0=BD=D0=B5=D1=81=D0=BB=D0=B0?= =?UTF-8?q?=20=D0=BF=D1=80=D0=BE=D1=80=D0=B8=D1=81=D0=BE=D0=B2=D0=BA=D1=83?= =?UTF-8?q?=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20?= =?UTF-8?q?=D0=B2=20=D0=BE=D1=82=D0=B4=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5?= =?UTF-8?q?=20=D1=80=D0=B5=D0=BD=D0=B4=D0=B5=D1=80=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/handlers/addCopyCommentToFormHandlers.js | 4 ++-- js/index.js | 1 + js/render/renderAutorizationLink.js | 10 ++++++++++ js/render/renderCommentsList.js | 9 +++++++++ js/render/renderForm.js | 13 +++++++------ js/render/renderLoader.js | 10 ++++++++++ js/render/renderLogin.js | 8 ++------ 7 files changed, 41 insertions(+), 14 deletions(-) create mode 100644 js/render/renderAutorizationLink.js create mode 100644 js/render/renderCommentsList.js create mode 100644 js/render/renderLoader.js diff --git a/js/handlers/addCopyCommentToFormHandlers.js b/js/handlers/addCopyCommentToFormHandlers.js index e334c5d41..66bd8a534 100644 --- a/js/handlers/addCopyCommentToFormHandlers.js +++ b/js/handlers/addCopyCommentToFormHandlers.js @@ -2,7 +2,7 @@ import { humanizeText } from '../textFormater/humanizeText.js' import { comments } from '../commentsArray/commentsArray.js' export function addCopyCommentToFormHandlers() { - let formComment = document.querySelector('.add-form-text') + let commentForm = document.querySelector('.add-form-text') let commentsEl = document.querySelectorAll('.comment') @@ -11,7 +11,7 @@ export function addCopyCommentToFormHandlers() { console.log(commentEl) let index = commentEl.dataset.id - formComment.value = + commentForm.value = 'Ответ на комментарий: ' + humanizeText(comments[index].text) + ' Автор: ' + diff --git a/js/index.js b/js/index.js index 6c8a2d5dc..4e8125f33 100644 --- a/js/index.js +++ b/js/index.js @@ -4,6 +4,7 @@ import { renderComments } from './render/renderComments.js' import { renderForm } from './render/renderForm.js' import { renderLogin } from './render/renderLogin.js' import { token } from './api/commentsAPI.js' +import { renderLoader } from './render/renderLoader.js' renderForm() diff --git a/js/render/renderAutorizationLink.js b/js/render/renderAutorizationLink.js new file mode 100644 index 000000000..bcc3b7ac2 --- /dev/null +++ b/js/render/renderAutorizationLink.js @@ -0,0 +1,10 @@ +export function renderAutorizationLink() { + let form = document.querySelector('.add-form') + + let autorizationLink = document.createElement('a') + + autorizationLink.className = 'autorization-link' + autorizationLink.textContent = 'Чтобы добавить комментарий, авторизуйтесь' + + form.before(autorizationLink) +} diff --git a/js/render/renderCommentsList.js b/js/render/renderCommentsList.js new file mode 100644 index 000000000..e0d6c22d5 --- /dev/null +++ b/js/render/renderCommentsList.js @@ -0,0 +1,9 @@ +export function renderCommentsList() { + let container = document.querySelector('.container') + + let commentsContainer = document.createElement('ul') + + commentsContainer.className = 'comments' + + container.prepend(commentsContainer) +} diff --git a/js/render/renderForm.js b/js/render/renderForm.js index 7e441ead3..e7e17e71c 100644 --- a/js/render/renderForm.js +++ b/js/render/renderForm.js @@ -1,4 +1,6 @@ -import { renderLogin } from './renderLogin.js' +import { renderLoader } from './renderLoader.js' +import { renderCommentsList } from './renderCommentsList.js' +import { renderAutorizationLink } from './renderAutorizationLink.js' export function renderForm() { const container = document.createElement('div') @@ -7,11 +9,6 @@ export function renderForm() { container.className = 'container' container.innerHTML = ` -

    - Пожалуйста подождите, комментарии загружаются... -

    - - Чтобы добавить комментарий, авторизуйтесь
    ` app.before(container) + + renderAutorizationLink() + renderCommentsList() + renderLoader() } diff --git a/js/render/renderLoader.js b/js/render/renderLoader.js new file mode 100644 index 000000000..340a85727 --- /dev/null +++ b/js/render/renderLoader.js @@ -0,0 +1,10 @@ +export function renderLoader() { + let container = document.querySelector('.container') + + let loader = document.createElement('p') + + loader.className = 'loading' + loader.textContent = 'Пожалуйста подождите, комментарии загружаются...' + + container.prepend(loader) +} diff --git a/js/render/renderLogin.js b/js/render/renderLogin.js index b53276756..13cdadee5 100644 --- a/js/render/renderLogin.js +++ b/js/render/renderLogin.js @@ -50,9 +50,9 @@ export function renderLogin() {
    ` - let buttonRegistration = document.querySelector('.login__button--register') + let registrationButton = document.querySelector('.login__button--register') - buttonRegistration?.addEventListener('click', () => renderRegistration()) + registrationButton?.addEventListener('click', () => renderRegistration()) let loginBlock = document.querySelector('.login') @@ -72,10 +72,6 @@ export function renderLogin() { updateToken(response.user.token) updateUser(response.user.name) - login({ - login: loginValue, - password: passwordValue, - }) app.style.display = 'none' container.style.display = 'flex' nameInput.value = response.user.name From 18a8a6f02d16e0e00355583c6d3c5f82f8c2cb24 Mon Sep 17 00:00:00 2001 From: MethodGirl <94073698+MethodGirl@users.noreply.github.com> Date: Thu, 2 Jul 2026 19:18:43 +0300 Subject: [PATCH 3/5] =?UTF-8?q?=D0=9C=D0=B5=D0=BB=D0=BA=D0=B8=D0=B5=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/handlers/formHandlers.js | 20 +++++++++----- js/index.js | 8 +++++- js/render/renderRegistration.js | 9 ++++++- styles.css | 48 ++++++++++++++++++++++++++++++--- 4 files changed, 73 insertions(+), 12 deletions(-) diff --git a/js/handlers/formHandlers.js b/js/handlers/formHandlers.js index 9f2e82306..8f5745688 100644 --- a/js/handlers/formHandlers.js +++ b/js/handlers/formHandlers.js @@ -10,13 +10,18 @@ export let formInput = document.querySelector('.add-form-name') let formButton = document.querySelector('.add-form-button') -function paintBackground() { - formTextArea.style.backgroundColor = 'white' - formInput.style.backgroundColor = 'white' -} +document.addEventListener('click', (event) => { + let formTextArea = event.target.closest('.add-form-text') + let formInput = event.target.closest('.add-form-name') + + if (formTextArea) { + formTextArea.style.backgroundColor = 'white' + } -formTextArea?.addEventListener('click', () => paintBackground(formTextArea)) -formInput?.addEventListener('click', () => paintBackground(formInput)) + if (formInput) { + formInput.style.backgroundColor = 'white' + } +}) function delay(ms) { let promise = new Promise((resolve) => { @@ -30,6 +35,9 @@ function delay(ms) { document.addEventListener('click', async (event) => { const button = event.target.closest('.add-form-button') + let formTextArea = document.querySelector('.add-form-text') + let formInput = document.querySelector('.add-form-name') + if (!button) return const formComment = document.querySelector('.add-form-text') diff --git a/js/index.js b/js/index.js index 4e8125f33..04398ef86 100644 --- a/js/index.js +++ b/js/index.js @@ -60,4 +60,10 @@ if (token === '') { export let autorizationLink = document.querySelector('.autorization-link') let container = document.querySelector('.container') -autorizationLink?.addEventListener('click', () => renderLogin()) +autorizationLink?.addEventListener('click', () => { + renderLogin() + window.scrollTo({ + top: 0, + behavior: 'smooth', + }) +}) diff --git a/js/render/renderRegistration.js b/js/render/renderRegistration.js index f6924ea4a..2d1068f67 100644 --- a/js/render/renderRegistration.js +++ b/js/render/renderRegistration.js @@ -1,3 +1,5 @@ +import { renderLogin } from './renderLogin.js' + export function renderRegistration() { let app = document.querySelector('.app') @@ -11,9 +13,14 @@ export function renderRegistration() {
    - + +
    ` + + let submitButton = document.querySelector('.registration__button--submit') + + submitButton?.addEventListener('click', () => renderLogin()) } diff --git a/styles.css b/styles.css index 0a991e813..f0eedf202 100644 --- a/styles.css +++ b/styles.css @@ -89,13 +89,21 @@ textarea { box-shadow: 0 0 15px rgba(124, 92, 255, 0.35); } -.registration__button--submit { +.registration__button { margin-top: 24px; font-size: 16px; padding: 10px 20px; border: none; border-radius: 18px; cursor: pointer; +} + +.registration__button--submit { + background-color: transparent; + border: 1px solid #a180f0; +} + +.registration__button--register { background-color: #a180f0; position: relative; overflow: hidden; @@ -115,7 +123,7 @@ textarea { } } -.registration__button--submit::after { +.registration__button--register::after { content: ''; position: absolute; top: 0; @@ -128,7 +136,7 @@ textarea { transition: 1s; } -.registration__button--submit::before { +.registration__button--register::before { content: ''; position: absolute; top: 0; @@ -141,7 +149,7 @@ textarea { transition: 1s; } -.registration__button--submit:hover::before { +.registration__button--register:hover::before { animation: slideme 1.5s ease; } @@ -200,6 +208,8 @@ textarea { .login__button--submit { background-color: #a180f0; margin-right: 10px; + position: relative; + overflow: hidden; } .login__button--register { @@ -207,6 +217,36 @@ textarea { border: 1px solid #a180f0; } +.login__button--submit::after { + content: ''; + position: absolute; + top: 0; + left: -200px; + width: 60px; + height: 100px; + background-color: white; + filter: blur(30px); + transform: skewX(30deg) translateZ(0); + transition: 1s; +} + +.login__button--submit::before { + content: ''; + position: absolute; + top: 0; + left: -200px; + width: 60px; + height: 100px; + background-color: white; + filter: blur(30px); + transform: skewX(30deg) translateZ(0); + transition: 1s; +} + +.login__button--submit:hover::before { + animation: slideme 1.5s ease; +} + .comments { display: flex; flex-direction: column; From 24d0c60a2883bb59aff46a16d3d0f3b4b145b60e Mon Sep 17 00:00:00 2001 From: MethodGirl <94073698+MethodGirl@users.noreply.github.com> Date: Fri, 3 Jul 2026 21:37:34 +0300 Subject: [PATCH 4/5] =?UTF-8?q?=D0=BC=D0=B5=D0=BB=D0=BA=D0=B8=D0=B5=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/handlers/addLikeHandlers.js | 4 +++- js/handlers/formHandlers.js | 1 - js/render/renderLogin.js | 5 +++++ styles.css | 23 +++++++++++++++++++++++ 4 files changed, 31 insertions(+), 2 deletions(-) diff --git a/js/handlers/addLikeHandlers.js b/js/handlers/addLikeHandlers.js index 531b3314a..55bd3e702 100644 --- a/js/handlers/addLikeHandlers.js +++ b/js/handlers/addLikeHandlers.js @@ -9,12 +9,13 @@ export function addLikeHandlers() { likeButtons.forEach((button) => { button.addEventListener('click', (event) => { event.stopPropagation() - + debugger if (token === '') { alert('Авторизуйтесь, чтобы ставить лайки') return } + button.classList.add('shake') let index = button.dataset.index if (comments[index].isLiked === true) { @@ -26,6 +27,7 @@ export function addLikeHandlers() { } renderComments() + // button.classList.remove('shake') }) }) } diff --git a/js/handlers/formHandlers.js b/js/handlers/formHandlers.js index 8f5745688..80fc08d44 100644 --- a/js/handlers/formHandlers.js +++ b/js/handlers/formHandlers.js @@ -113,7 +113,6 @@ document.addEventListener('click', async (event) => { renderComments() formComment.value = '' - formName.value = '' form.style.display = 'flex' console.log('click') } catch (error) { diff --git a/js/render/renderLogin.js b/js/render/renderLogin.js index 13cdadee5..01de01dc5 100644 --- a/js/render/renderLogin.js +++ b/js/render/renderLogin.js @@ -62,6 +62,11 @@ export function renderLogin() { const loginValue = event.target.elements['login'].value const passwordValue = event.target.elements['password'].value + if (loginValue < 3 || passwordValue < 3) { + alert('Пароль и логин должны содержать больше 3х символов') + return + } + try { const response = await login({ login: loginValue, diff --git a/styles.css b/styles.css index f0eedf202..f0086f42e 100644 --- a/styles.css +++ b/styles.css @@ -67,6 +67,7 @@ textarea { .autorization-link { cursor: pointer; + border-bottom: 1px solid white; } .registration__input { @@ -315,6 +316,23 @@ textarea { flex-direction: column; } +@keyframes shake { + 0%, + 100% { + transform: rotate(0deg); + } + 25% { + transform: rotate(-10deg); + } + 75% { + transform: rotate(10deg); + } +} + +.shake { + animation: shake 0.5s ease-in-out; +} + .add-form-name, .add-form-text { font-size: 16px; @@ -323,6 +341,11 @@ textarea { border: none; } +.add-form-name:focus-visible, +.add-form-text:focus-visible { + outline: none; +} + .add-form-name { width: 300px; padding: 11px 22px; From ca96775a0421d1b1f64d82d0056c307fa59c85f3 Mon Sep 17 00:00:00 2001 From: MethodGirl <94073698+MethodGirl@users.noreply.github.com> Date: Fri, 3 Jul 2026 22:21:32 +0300 Subject: [PATCH 5/5] =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D1=8F=20=D0=BB=D0=B0=D0=B9=D0=BA=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/handlers/addLikeHandlers.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/js/handlers/addLikeHandlers.js b/js/handlers/addLikeHandlers.js index 55bd3e702..480d74a92 100644 --- a/js/handlers/addLikeHandlers.js +++ b/js/handlers/addLikeHandlers.js @@ -9,25 +9,34 @@ export function addLikeHandlers() { likeButtons.forEach((button) => { button.addEventListener('click', (event) => { event.stopPropagation() - debugger + if (token === '') { alert('Авторизуйтесь, чтобы ставить лайки') return } - button.classList.add('shake') let index = button.dataset.index + button.classList.add('shake') + button.addEventListener( + 'animationend', + () => { + button.classList.remove('shake') + }, + { once: true }, + ) + if (comments[index].isLiked === true) { + button.classList.remove('-active-like') comments[index].isLiked = false comments[index].likesCounter-- } else { + button.classList.add('-active-like') comments[index].isLiked = true comments[index].likesCounter++ } - renderComments() - // button.classList.remove('shake') + likesCounter[index].textContent = comments[index].likesCounter }) }) }