Как с помощью JavaScript создать карточки с изображениями на странице, используя ссылки на картинки, которые я ввожу в поле ввода модального окна?

Question

Тельман

css , html , javascript

Как с помощью JavaScript создать карточки с изображениями на странице, используя ссылки на картинки, которые я ввожу в поле ввода модального окна?

Как создать функциональность, позволяющую вводить имя карточки и ссылку на картинку в модальном окне с двумя полями ввода, чтобы при нажатии на кнопку "Сохранить" новая карточка добавлялась на страницу? У меня есть список с классом `<ul class="places__list">`, в который необходимо вставлять новые карточки по следующему шаблону: 

<pre><code class="html">&lt;template id="card-template"&gt;
  &lt;li class="places__item card"&gt;
    &lt;img class="card__image" src="" alt="" /&gt;
    &lt;button type="button" class="card__delete-button"&gt;&lt;/button&gt;
    &lt;div class="card__description"&gt;
      &lt;h2 class="card__title"&gt;
      &lt;/h2&gt;
      &lt;button type="button" class="card__like-button"&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/template&gt;</code></pre>

25 сентября 2024 г. 14:43

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для реализации функциональности создания карточек с изображениями на странице с использованием модального окна в JavaScript, вам необходимо выполнить несколько шагов. Вот пример кода, который поможет вам создать эту логику:

### HTML часть

1. Создайте структуру HTML, включая модальное окно и список для карточек:

```html
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Карточки с изображениями</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <button id="open-modal">Добавить карточку</button>
    
    <ul class="places__list"></ul>

    <template id="card-template">
        <li class="places__item card">
            <img class="card__image" src="" alt="" />
            <button type="button" class="card__delete-button"></button>
            <div class="card__description">
                <h2 class="card__title"></h2>
                <button type="button" class="card__like-button"></button>
            </div>
        </li>
    </template>

    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Добавить карточку</h2>
            <input type="text" id="card-title" placeholder="Название карточки">
            <input type="text" id="card-image-url" placeholder="Ссылка на изображение">
            <button id="save-card">Сохранить</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>
```

### CSS часть

Добавьте немного стилей для модального окна (опционально):

```css
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
```

### JavaScript часть

Добавьте следующий JavaScript для обработки логики добавления карточек:

```javascript
document.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById('modal');
    const openModalButton = document.getElementById('open-modal');
    const closeModalButton = document.querySelector('.close');
    const saveCardButton = document.getElementById('save-card');
    const cardTitleInput = document.getElementById('card-title');
    const cardImageUrlInput = document.getElementById('card-image-url');
    const placesList = document.querySelector('.places__list');

    // Открыть модальное окно
    openModalButton.addEventListener('click', () => {
        modal.style.display = "block";
    });

    // Закрыть модальное окно
    closeModalButton.addEventListener('click', () => {
        modal.style.display = "none";
    });

    window.addEventListener('click', (event) => {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    });

    // Сохранить карточку
    saveCardButton.addEventListener('click', () => {
        const title = cardTitleInput.value;
        const imageUrl = cardImageUrlInput.value;

        if (title && imageUrl) {
            const template = document.getElementById('card-template').content.cloneNode(true);
            const cardItem = template.querySelector('.card');
            const cardImage = template.querySelector('.card__image');
            const cardTitle = template.querySelector('.card__title');

            cardImage.src = imageUrl;
            cardImage.alt = title;
            cardTitle.textContent = title;

            // Добавляем карточку в список
            placesList.appendChild(cardItem);

            // Очистить поля ввода
            cardTitleInput.value = '';
            cardImageUrlInput.value = '';

            // Закрываем модальное окно
            modal.style.display = "none";
        } else {
            alert('Пожалуйста,

Answer 2

кнопка.addEventListener('click', () => {
  const [ li ] = шаблон.content.cloneNode(true).children;
  li.querySelector('.card__image').src = инпут_с_ссылкой.value;
  li.querySelector('.card__title').textContent = инпут_с_подписью.value;
  список.insertAdjacentElement('afterbegin', li);
});
 
 или 
 
 кнопка.addEventListener('click', () => {
  список.prepend(document.importNode(шаблон.content, true));
  список.querySelector('.card__image').src = инпут_с_ссылкой.value;
  список.querySelector('.card__title').textContent = инпут_с_подписью.value;
});