https://codepen.io/camobap6/pen/oNbOgWv
Нужно что бы при добавлении картинки она загружалась (не на сервер). Не могу понять чего не хватает , вроде всё что нужно указал
let popupAdd = document.querySelector('.popup-add');
let popupAddEditForm = document.querySelector('.profile__add-button');
let popupAddClose = document.querySelector('.popup-add__close');
let popupLoad = document.querySelector('.popup-add__save-button');
function toggleAddPopup() {
popupAdd.classList.toggle('popup-add_active');
}
function addForm() {
toggleAddPopup();
}
popupAddEditForm.addEventListener('click', addForm);
popupAddClose.addEventListener('click', toggleAddPopup);
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 toggleLikeButton = (e) => {
e.target.classList.toggle('element-grid__like-button_active');
}
const addPhotoElement = (caption, imageLink) => {
const elementTemplate = document.querySelector('#photo-elements-template').content;
const photoElement = elementTemplate.cloneNode(true);
photoElement.querySelector('.element-grid__photo').src = imageLink;
photoElement.querySelector('.element-grid__text').textContent = caption;
const photoElementsList = document.querySelector('.element-grid');
photoElementsList.prepend(photoElement);
document.querySelector('.element-grid__like-button').addEventListener('click', toggleLikeButton);
}
const addCards = (array) => {
array.forEach((item) => {
addPhotoElement(item.name, item.link);
})
}
addCards(initialCards);
const addSubmitHandler = (e) => {
e.preventDefault();
const newPhotoElementName = document.getElementById('#name').value;
const newPhotoElementLink = document.getElementById('#link').value;
addPhotoElement(newPhotoElementName, newPhotoElementLink);
toggleAddPopup();
}
.popup-add {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
}
.popup-add__container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #FFFFFF;
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
border-radius: 10px;
max-width: 430px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.popup-add__close {
border: red solid 1px;
padding: 0;
position: absolute;
cursor: pointer;
background-color:red;
width: 40.7px;
height: 40.7px;
right: -40.7px;
top: -40.7px;
}
.popup-add__close:hover {
opacity: 0.6;
transition: all .1s ease-in;
}
.popup-add__title {
font-weight: 900;
font-family: 'Inter', ‘Arial’, sans-serif;
font-size: 24px;
line-height: 29px;
color: black;
width: 358px;
margin: auto;
padding-top: 34px;
}
@media screen and (max-width: 550px) {
.popup-add__title {
max-width: 230px;
font-size: 16px;
line-height: 20px;
}
}
.popup-add__input {
border: none;
margin: 29.74px auto 0;
padding-bottom: 13.3px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
width: 358px;
font-size: 14px;
line-height: 17px;
outline: none;
color: #C4C4C4;
}
.popup-add__input:nth-of-type(1) {
margin-top: 54px;
}
.popup-add__input:active {
outline: 2px solid blue
}
@media screen and (max-width:750px) {
.popup-add__input {
width: auto;
}
}
.popup-add__save-button {
font-family: 'Inter', ‘Arial’, sans-serif;
background: black;
border: none;
border-radius: 2px;
height: 50.15px;
width: 358px;
margin: auto;
color: white;
margin: 48px auto 36.5px;
cursor: pointer;
}
.popup-add__save-button:hover {
background: rgba(0, 0, 0, 0.8);
transition: all .1s ease-in;
}
@media screen and (max-width: 550px) {
.popup-add__save-button {
width: 200px;
height: 35px;
}
}
.popup-add_active {
display: block;
}
.element-grid__like-button_active {
background-image: url(../images/likepic.PNG);
}
.element-grid__delite-button {
width: 20px;
height: 20px;
z-index: 4;
position: relative;
top: 0;
right: 0;
background-color: red;
}
.elements {
max-width: 882px;
margin: 76px auto 0;
padding: 0;
}
.element-grid__element {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style-type: none;
border-radius: 10px;
overflow: hidden;
max-width: 282px;
}
.element-grid__like-button {
background-image: url(../../../images/like-pic.svg);
padding: 0;
margin-top: 6px;
width: 21px;
height: 20px;
background-color: white;
outline: none;
border: none;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.element-grid__like-button:hover {
opacity: 0.8;
transition: all 1s ease-in;
}
.element-grid__photo {
width: 282px;
height: 282px;
margin: 0;
padding: 0;
}
.element-grid__text {
font-family: 'Inter', ‘Arial’, sans-serif;
font-style: normal;
font-weight: 900;
font-size: 24px;
line-height: 29px;
color: black;
padding: 0;
margin: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 88%;
}
.element-grid__text-container {
margin: 0;
background: #FFFFFF;
display: flex;
justify-content: space-between;
padding: 25px 19px 31px;
align-items: center;
}
.element-grid {
margin: 0;
padding: 0;
display: grid;
grid-gap: 20px 18px;
grid-template-columns: repeat(auto-fit, 282px);
justify-content: center;
}
.profile__add-button{
width:60px;
height:60px;
background-color:red;
}
<button class="profile__add-button" type="button">Нажми</button>
<section class="popup-add">
<form class="popup-add__container" name="popup-add__container">
<button type="button" class="popup-add__close"></button>
<h2 class="popup__title">Новое Место</h2>
<input type="text" class="popup-add__input" placeholder="Название" id="name" />
<input type="text" class="popup-add__input" placeholder="Ссылка на картинку" id="link" />
<button type="submit" class="popup-add__save-button">Загрузить</button>
</form>
</section>
<section class="elements" aria-label="галерея">
<ul class="element-grid">
</ul>
</section>
<template id="photo-elements-template">
<li class="element-grid__element">
<img class="element-grid__photo" id="image" alt="" />
</div>
<div class="element-grid__text-container">
<p class="element-grid__text"></p>
<button class="element-grid__like-button" type="button"></button>
</div>
</li>
</template>
</main>