Привет, пытаюсь сделать добавление карточек с помощью JS, написал код, где должно было открывать модальное окно и через него уже добавлять, модальное окно получилось, но карточки не добавляются, не понимаю в чем проблема, вроде код нормальный.
HTML
<body>
<div class="root">
<header class="header root__section">
<img src="./images/logo.svg" alt="mesto logo" class="logo">
</header>
<div class="profile root__section">
<div class="user-info">
<div class="user-info__photo"></div>
<div class="user-info__data">
<h1 class="user-info__name">Jaques Causteau</h1>
<p class="user-info__job">Sailor, Researcher</p>
</div>
<button class="button user-info__button">+</button>
</div>
</div>
<div class="places-list root__section">
<!-- Пример карточки: -->
<div class="place-card">
<div class="place-card__image" style="background-image: url(https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg)">
<button class="place-card__delete-icon"></button>
</div>
<div class="place-card__description">
<h3 class="place-card__name">Камчатка</h3>
<button class="place-card__like-icon"></button>
</div>
</div>
</div>
<div class="popup">
<div class="popup__content">
<img src="./images/close.svg" alt="" class="popup__close">
<h3 class="popup__title">Новое место</h3>
<form class="popup__form" name="new">
<input type="text" name="name" class="popup__input popup__input_type_name" placeholder="Название">
<input type="text" name="link" class="popup__input popup__input_type_link-url" placeholder="Ссылка на картинку">
<button type class="button popup__button ">+</button>
</form>
</div>
</div>
</div>
<script src="./script.js">
</script>
</body>
</html>
.button {
background-color: transparent;
border: 1px solid white;
color: white;
width: 150px;
height: 50px;
font-size: 30px;
display: block;
cursor: pointer;
}
.button:focus {
outline-color: greenyellow;
}
.header {
min-height: 132px;
display: flex;
align-items: center;
border-bottom: 1px solid #A5A5A5;
}
.place-card {
width: 282px;
background-color: #fff;
border-radius: 10px;
min-height: 360px;
}
.place-card__delete-icon {
background: url(../../../images/trash-icon.svg) center no-repeat;
background-color: transparent;
border: none;
width: 18px;
height: 20px;
position: absolute;
top: 18px;
right: 15px;
cursor: pointer;
display: none;
}
.place-card:hover .place-card__delete-icon {
display: block;
}
.place-card__description {
display: flex;
min-height: 78px;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 22px;
}
.place-card__image {
height: 282px;
background-size: cover;
background-position: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative;
}
.place-card__image::after {
content: '';
display: block;
width: 282px;
height: 282px;
background-color: rgba(0, 0, 0, .3);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.place-card__image_city_karachaevsk {
background-image: url(../../../../../images/card-image.jpg);
}
.place-card__like-icon {
background: url(../../../images/like-inactive.svg) center no-repeat;
background-color: transparent;
border: none;
width: 21px;
height: 19px;
cursor: pointer;
transition: transform .3s linear;
}
.place-card__like-icon_liked {
background-image: url(../../../images/like-active.svg);
}
.place-card__like-icon:hover {
transform: scale(1.03);
}
.place-card__name {
margin: 0;
font-size: 24px;
line-height: 29px;
}
.places-list {
display: grid;
grid-template-columns: repeat(auto-fill, 282px);
grid-gap: 18px 18px;
justify-content: center;
}
.popup__button {
width: 100%;
height: 50px;
border: 1px solid rgba(0, 0, 0, .2);
margin-top: 48px;
color: rgba(0, 0, 0, .2);
font-size: 36px;
}
.popup__close {
width: 26px;
position: absolute;
top: -26px;
right: -26px;
cursor: pointer;
}
.popup__content {
width: 430px;
min-height: 330px;
background-color: #fff;
border-radius: 10px;
position: relative;
box-sizing: border-box;
padding: 34px 36px;
}
@media screen and (max-width: 540px) {
.popup__content {
width: calc(100% - 60px);
}
}
.popup__form {
margin-top: 60px;
}
.popup__input {
width: 100%;
height: 47px;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, .2);
font-size: 14px;
line-height: 17px;
box-sizing: border-box;
padding: 5px 6px 13px;
margin-bottom: 24px;
}
.popup__input:last-of-type {
margin-bottom: 0;
}
.popup__title {
margin: 0;
font-size: 24px;
line-height: 30px;
}
.popup.popup_is-opened {
display: flex;
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.profile {
min-height: 300px;
display: flex;
align-items: center;
}
.root__section {
width: calc(100% - 400px);
margin: auto;
}
@media screen and (max-width: 980px) {
.root__section {
width: 90%;
}
}
.root {
background-color: black;
min-height: 100vh;
font-family: 'Inter';
padding-bottom: 194px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 1024px) {
.root {
padding-bottom: 140px;
}
}
.user-info__button {
position: absolute;
top: 16px;
right: 0;
}
@media screen and (max-width: 980px) {
.user-info__button {
position: static;
margin-bottom: 40px;
}
}
.user-info__data {
max-width: 364px;
margin-left: 36px;
}
@media screen and (max-width: 980px) {
.user-info__data {
margin: 20px 0;
text-align: center;
}
}
.user-info__job {
margin: 20px 0 0 0;
font-size: 20px;
line-height: 25px;
}
.user-info__name {
margin: 0;
font-weight: normal;
font-size: 54px;
line-height: 56px;
}
.user-info__photo {
width: 150px;
height: 150px;
min-width: 150px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-image: url(../../../images/avatar.jpg);
}
@media screen and (max-width: 980px) {
.user-info__photo {
margin-top: 40px;
}
}
.user-info {
display: flex;
position: relative;
align-items: flex-start;
color: white;
width: 100%;
}
@media screen and (max-width: 980px) {
.user-info {
flex-direction: column;
align-items: center;
}
}
body {
background-color: #000;
}
JS
/* Переменные */
const cardsContainer = document.querySelector('.places-list');
const modal = document.querySelector(".popup");
const trigger = document.querySelector(".user-info__button");
const closeButton = document.querySelector(".popup__close");
const addButton = document.querySelector('.popup__button');
/* Функции */
function createCard(nameValue, linkValue) { /* Добавление карточки */
const cardContainer = document.createElement('div'); /* Добавляет див в контейнер */
const nameElement = document.createElement('h3'); /* Добавляет название места */
const linkElement = document.createElement('div'); /* Добавляет задний фон */
const cardButtonElement = document.createElement('button'); /* Добавляет кнопку лайка */
cardContainer.classList.add('place-card'); /* Добавляет див в контейнер */
nameElement.classList.add('place-card__name'); /* Добавляет имя карточки */
nameElement.textContent = nameValue;
linkElement.classList.add('place-card__image'); /* Добавляет фон */
linkElement.textContent = linkValue;
cardButtonElement.classList.add('place-card__like-icon'); /* Добавляет лайк в контейнер карточки*/
cardContainer.appendChild(nameElement); /* Добавляет место в контейнер */
cardContainer.appendChild(linkElement); /* Добавляет фон в контейнер */
cardContainer.appendChild(cardButtonElement); /* Добавляет лайк в контейнер */
return cardContainer;
}
function addCard(event) {
event.preventDefault();
const name = form.elements.name;
const link = form.elements.link;
const cardContainer = createCard(name.value, link.value);
cardsContainer.appendChild(cardContainer);
renderAdded();
addButton.setAttribute('disabled', true);
addButton.classList.add('input__btn_disabled');
}
function inputHandler() {
const name = event.currentTarget.elements.name;
const link = event.currentTarget.elements.link;
if (name.value.length === 0 || link.value.length === 0) {
addButton.setAttribute('disabled', true);
addButton.classList.add('input__btn_disabled');
} else {
addButton.removeAttribute('disabled');
addButton.classList.remove('input__btn_disabled');
}
}
/* Открытие модального окна */
function toggleModal() {
modal.classList.toggle("popup_is-opened");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
/* Добавление Карточки */
/* Слушатели Событий */
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
modal.addEventListener("click", windowOnClick);
form.addEventListener('input', inputHandler);
form.addEventListener('submit', addCard);
