Как вывести на страницу карточки с картинкой, ссылка на которую указываю в модальном окне input?

Если это как то влияет, код который автоматически создает карточки, которые в данный момент уже есть на странице

export function addCard(link, alt, name, removeCard) {
    const cardTemplate = document.querySelector('#card-template').content
    const cardContent = cardTemplate.querySelector('.card').cloneNode(true)
  
    cardContent.querySelector('.card__image').src = link;
    cardContent.querySelector('.card__image').alt = alt;
    cardContent.querySelector('.card__title').textContent = name;
  
    function removeCard(evt) {
      const evtTarget = evt.target;
      const card = evtTarget.closest('.card')
      card.remove()
    }
  
    const deleteButton = cardContent.querySelector('.card__delete-button');
    deleteButton.addEventListener('click', removeCard)
  
    return cardContent
  } 

  initialCards.forEach(card => {
    const placeItem = addCard(card.link, card.alt, card.name);
    const placeList = document.querySelector('.places__list')
    placeList.append(placeItem)
  })

Как вывести на страницу карточки с картинкой, ссылка на которую указываю в модальном окне input?

Использовал первый вариант, но почему то у меня вместо вставки новой карточки дублируется самая первая.



Также добавил в код очистку полей прежде чем вводить новые имя и ссылки, но к сожалению не помогло

const popupButtonAdd = popupAddCard.querySelector('.popup__button')
const inputAddName = document.querySelector('.popup__input_type_card-name').value
const inputAddUrl = document.querySelector('.popup__input_type_url').value

popupButtonAdd.addEventListener('click', (evt) => {
    evt.preventDefault()
    document.querySelector('.popup__input_type_card-name').value = '';
    document.querySelector('.popup__input_type_url').value = '';
    const placesList = document.querySelector('.places__list')
    const cardContentNewCard = document.querySelector('.card').cloneNode(true)
    cardContentNewCard.querySelector('.card__image').textContent = inputAddName
    cardContentNewCard.querySelector('.card__title').src = inputAddUrl
    placesList.prepend(cardContentNewCard);
})

Почему срабатывает ошибка подключения после npm run build при подключении CSS к сборке?

Сергей delphinpro, понял, спасибо, но к сожалению файл .css в папке dist так и не появляется, хотя вроде как все указал как нужно

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    publicPath: '',
  },
  mode: 'development',
  devServer: {
    static: path.resolve(__dirname, './dist'),
    open: true,
    compress: true,
    port: 8081
  },
  module: {
    rules: [{
        test: /\.js$/,
        use: 'babel-loader',
        exclude: '/node_modules/'
      },
      {
        test: /\.(png|svg|jpg|gif|woff(2)?|eot|ttf|otf)$/,
        type: 'asset/resource',
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader'
        ]
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin(),

  ]
}

Почему срабатывает ошибка подключения после npm run build при подключении CSS к сборке?

Папку node_modules я вообще не трогал, потому что вроде эта папка сама устанавливается

Почему срабатывает ошибка подключения после npm run build при подключении CSS к сборке?

Пробовал. Выходит ошибка о неизвестном токене "." Я искал, но не понял где именно эта ошибка

Почему срабатывает ошибка подключения после npm run build при подключении CSS к сборке?

Если чего-то не хватает могу также скинуть показать

Как задать разный скролл для мышки и тачпада?

RelShine, щас попробовал и сижу счастливый, спасибо!

Почему не удается задать поверх картинки полупрозрачный черный фон?

но теперь текста не видно у карточек)

Почему фоновая картинка то пропадает, то появляется?

Ankhena, как выяснилось, путь к файлу был указан не совсем правильно, не хватало одной точки, в любом случае спасибо)

Почему фоновая картинка то пропадает, то появляется?

Спасибо!

Как изменить размер под родителя для картинки, вставленной через CSS?

а нет, работает! спасибо!

Как изменить размер под родителя для картинки, вставленной через CSS?

это не работает) вставляется только часть картинки в блок