Обучаюсь разработке, освоение идет с переменным успехом. Суть такая: есть набор карточек (которые могу добавлять и удалять) с помощью клика на фото к этой карточке нужно чтобы она открывалась в размерах ширины 80vw, максимальная высота — 80vh. Сделал в дереве этот div, подключил css правило.
HTML
<div class="popup popup__image">
<img scr="./images/close.svg" alt="" class="popup__close popup__close_image">
</div>
CSS
.popup__image {
display: block;
position: relative;
max-width: 80vw;
max-height: 80vh;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
margin-top: 100px;
margin-left: 100px;
}
Сами картинки на странице подгружаются из массива:
javascript:
//массив со ссылками
const initialCards = [
{
name: 'Архыз',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg'
}, ... ]
const Card = function(name, link) {
//создание разметки для карточек
const placeCard = document.createElement('div');
const cardImage = document.createElement('div');
const cardButtonDelete = document.createElement('button');
const cardDescription = document.createElement('div');
const cardName = document.createElement('h3');
const cardButtonLike = document.createElement('button');
// добавление классов
placeCard.classList.add('place-card');
cardImage.classList.add('place-card__image')
cardImage.setAttribute('style', ('style', `background-image: url(${link})`)); // фон карточки
cardButtonDelete.classList.add('place-card__delete-icon');
cardDescription.classList.add('place-card__description');
cardName.classList.add('place-card__name');
cardName.textContent = name;
cardButtonLike.classList.add('place-card__like-icon');
//вложить блок в другой
cardImage.appendChild(cardButtonDelete);
cardDescription.appendChild(cardName);
cardDescription.appendChild(cardButtonLike);
placeCard.appendChild(cardImage);
placeCard.appendChild(cardDescription);
placesList.appendChild(placeCard);
};
//цикл добавления карточек
for (i = 0; i < initialCards.length; i++) {
let name = initialCards[i]['name'];
let link = initialCards[i]['link'];
Card(name, link);
};
//добавить карточку
const addCard = function(event) {
event.preventDefault();
const form = document.forms.new;
const name = form.elements.name.value;
const link = form.elements.link.value;
Card(name, link);
popup.classList.remove('popup_is-opened');
form.reset();
};
Пытаюсь написать функцию, чтобы этот popup реализовать. Нагуглить пока получается только реализации подобных вещей с помощью фреймворков, а мне надо на чистом JS.