<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./pages/index.css">
<title>Место</title>
</head>
<body class="page">
<div class="wrapper">
<header class="header">
<img class="header__logo" src="./images/vector/header__logo.svg" alt="Лого">
</header>
<section class="profile">
<img class="profile__avatar" src="./images/jpg/kysto.jpg" alt="Кусто">
<article class="profile__info">
<div class="profile__heading">
<h1 class="profile__name">Жак-Ив Кусто</h1>
<button type="button" class="profile__edit-button"></button>
</div>
<p class="profile__subtitle">Исследователь океана</p>
</article>
<button type="button" class="profile__add-button"></button>
</section>
<section class="elements">
</section>
<footer class="footer">
<h2 class="footer__copyright">© 2020 Mesto Russia</h2>
</footer>
</div>
<div class="popup">
<div class="menu">
<button class="menu__close-icon" type="button"></button>
<h2 class="menu__title">Редактировать профиль</h2>
<form class="form" name="formMenu">
<input type="text" name="menuName" value="Жак-Ив Кусто" class="form__input form__input_type_name">
<input type="text" name="menuSubtitle" value="Исследователь океана"
class="form__input form__input_type_job">
<button type="submit" class="menu__button">
Сохранить
</button>
</form>
</div>
</div>
<div class="popup-cards ">
<div class="menu-cards menu">
<button class="menu__close-icon menu__card-close" type="button"></button>
<h2 class="menu__title menu__title-cards">Новое место</h2>
<form class="form" name="formMenu">
<input type="text" name="cardName" placeholder="Название" class="form__input form__input_type_text">
<input type="link" name="link" placeholder="Ссылка на картинку"
class="form__input form__input_type_link">
<input type="button" class="menu__button card_create" value="Создать">
</input>
</form>
</div>
</div>
<template class = "card-template">
<div class="card">
<button class="card__button-delete" type="button"></button>
<img src="" alt="" class="card__image">
<div class="card__description">
<h2 class="card__title"></h2>
<button class="card__button-like" type="button"></button>
</div><code lang="javascript">
</code>
</div>
</template>
<script src="./scripts/script.js"></script>
</body>
</html>
const page = document.querySelector('.page');
const wrapper = page.querySelector('.wrapper');
const editButton = wrapper.querySelector('.profile__edit-button');
const menu = document.querySelector('.menu');
const saveButton = menu.querySelector('.menu__button');
const closeButton = menu.querySelector('.menu__close-icon');
const popup = page.querySelector('.popup');
const textName = document.querySelector('.form__input_type_name');
const textSubtitle = document.querySelector('.form__input_type_job');
const profileNameText = document.querySelector('.profile__name');
const profileSubtitleText = document.querySelector('.profile__subtitle');
const formElement = popup.querySelector('.form');
const popupCards = document.querySelector('.popup-cards');
const addButton = document.querySelector(".profile__add-button");
const closeCardsButton = document.querySelector('.menu__card-close');
const initialCards = [
{
name: 'Архыз',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg'
},
{
name: 'Челябинская область',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg'
},
{
name: 'Иваново',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/ivanovo.jpg'
},
{
name: 'Камчатка',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg'
},
{
name: 'Холмогорский район',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kholmogorsky-rayon.jpg'
},
{
name: 'Байкал',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/baikal.jpg'
}
];
const container = document.querySelector('.elements')
const cardTemplate = document.querySelector('.card-template').content
const formButton = document.querySelector('.card_create')
function render() {
initialCards.forEach(renderItem);
}
// функция рендеренга
function renderItem(cardData) {
const newCard = cardTemplate.cloneNode(true) //Клоним кароточку
const cardTitle = newCard.querySelector('.card__title')
const cardImage = newCard.querySelector('.card__image')
cardImage.src = cardData.link;
cardImage.alt = cardData.name
cardTitle.textContent = cardData.name;
//Добавить обработччик
setListenersForButtons(newCard);
//Добаить карточку
container.append(newCard);
}
// Создать обработчики для кнопок
function setListenersForButtons(element) {
const deleteCardButton = element.querySelector('.card__button-delete')
deleteCardButton.addEventListener ('click', handleDelete)
const cardLikeButton = element.querySelector('.card__button-like')
cardLikeButton.addEventListener ('click', handleLike)
}
//Удаление карточки
function handleDelete (event){
const currentCard = event.target.closest ('.card')
currentCard.remove()
}
// кнопка лайка
function handleLike (event){
const currentLike = event.target.closest ('.card__button-like')
currentLike.classList.toggle ('card__button-like_active')
}
//Добавление карточки
function handleSubmit (){
const mesto = document.querySelector ('.form__input_type_text')
const mestoLink = document.querySelector ('.form__input_type_name')
renderItem ()
}
render()
const cardAddButton = popupCards.querySelector ('.card_create')
cardAddButton.addEventListener ('click', handleSubmit)
function openEditProfilePopup() {
popup.classList.add('popup_active');
textName.value = profileNameText.textContent;
textSubtitle.value = profileSubtitleText.textContent;
}
function openEditCardsPopup() {
popupCards.classList.add('popup-cards_active');
}
function closeEditProfilePopup() {
popup.classList.remove('popup_active');
}
function closeEditCardsPopup() {
popupCards.classList.remove('popup-cards_active');
}
function formSubmitHandler(evt) {
evt.preventDefault();
profileNameText.textContent = textName.value;
profileSubtitleText.textContent = textSubtitle.value;
closeEditProfilePopup();
}
closeCardsButton.addEventListener('click', closeEditCardsPopup)
closeButton.addEventListener('click', closeEditProfilePopup);
editButton.addEventListener('click', openEditProfilePopup);
formElement.addEventListener('submit', formSubmitHandler);
addButton.addEventListener('click', openEditCardsPopup);
Есть массив , из которого в карточки добавлены значения и все это попадает в html. Но так же есть popup (popup-cards), который вызывается нажатием profile__add-button. В нем два интпута (заголовок карточки и ссылка на картинку), с ними и нужно реализовать работу. После нажатия кнопки добавить, должна вызываться функция handleSubmit и добавлять новую карточку в начало массива. Подскажите, как правильно ее написать, что бы все работало. Всем спасибо!
