Skip to content

добавление форму в конец списка #1357

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

Closed
metr1cs wants to merge 1 commit into from
Closed

добавление форму в конец списка #1357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 3 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<title>Проект "Комменты"</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="style.css" />
</head>

<body>
Expand Down Expand Up @@ -63,9 +63,7 @@
</div>
</body>

<script>
"use strict";
// Код писать здесь
console.log("It works!");
<script src="./main.js">

</script>
</html>
39 changes: 39 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
const commentsList = document.querySelector('.comments');
const nameInput = document.querySelector('.add-form-name');
const textInput = document.querySelector('.add-form-text');
const addButton = document.querySelector('.add-form-button');

addButton.addEventListener('click', function() {
// проверка на пустые плдя
if (nameInput.value === '' || textInput.value === '') {
alert('Заполните все поля');
return;
}

// создание комента
const newComment = document.createElement('li');
newComment.className = 'comment';
newComment.innerHTML = `
<div class="comment-header">
<div>${nameInput.value}</div>
</div>
<div class="comment-body">
<div class="comment-text">
${textInput.value}
</div>
</div>
<div class="comment-footer">
<div class="likes">
<span class="likes-counter">0</span>
<button class="like-button"></button>
</div>
</div>
`;

// в начало списка
commentsList.append(newComment);

// Очищаем поля
nameInput.value = '';
textInput.value = '';
});
133 changes: 133 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
body {
margin: 0;
}

.container {
font-family: Helvetica;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 80px;
padding-bottom: 200px;
background: #202020;
min-height: 100vh;
}

.comments,
.comment {
margin: 0;
padding: 0;
list-style: none;
}

.comment,
.add-form {
width: 596px;
box-sizing: border-box;
background: radial-gradient(75.42% 75.42% at 50% 42.37%, rgba(53, 53, 53, 0) 22.92%, #7334ea 100%);
filter: drop-shadow(0px 20px 67px rgba(0, 0, 0, 0.08));
border-radius: 20px;
}

.comments {
display: flex;
flex-direction: column;
gap: 24px;
}

.comment {
padding: 48px;
}

.comment-header {
font-size: 16px;
display: flex;
justify-content: space-between;
}

.comment-footer {
display: flex;
justify-content: flex-end;
}

.comment-body {
margin-top: 32px;
margin-bottom: 32px;
}

.comment-text {
font-size: 32px;
}

.likes {
display: flex;
align-items: center;
}

.like-button {
all: unset;
cursor: pointer;
}

.likes-counter {
font-size: 26px;
margin-right: 8px;
}

.like-button {
margin-left: 10px;
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='M11.11 16.9482L11 17.0572L10.879 16.9482C5.654 12.2507 2.2 9.14441 2.2 5.99455C2.2 3.81471 3.85 2.17984 6.05 2.17984C7.744 2.17984 9.394 3.26975 9.977 4.75204H12.023C12.606 3.26975 14.256 2.17984 15.95 2.17984C18.15 2.17984 19.8 3.81471 19.8 5.99455C19.8 9.14441 16.346 12.2507 11.11 16.9482ZM15.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");
background-repeat: no-repeat;
width: 22px;
height: 22px;
}

.-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");
}

.add-form {
padding: 20px;
margin-top: 48px;
display: flex;
flex-direction: column;
}

.add-form-name,
.add-form-text {
font-size: 16px;
font-family: Helvetica;
border-radius: 8px;
border: none;
}

.add-form-name {
width: 300px;
padding: 11px 22px;
}

.add-form-text {
margin-top: 12px;
padding: 22px;
resize: none;
}

.add-form-row {
display: flex;
justify-content: flex-end;
}

.add-form-button {
margin-top: 24px;
font-size: 24px;
padding: 10px 20px;
background-color: #bcec30;
border: none;
border-radius: 18px;
cursor: pointer;
}

.add-form-button:hover {
opacity: 0.9;
}/*# sourceMappingURL=style.css.map */
1 change: 1 addition & 0 deletions style.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 styles.css → style.scss
View file
Open in desktop
File renamed without changes.