<html lang="en" {IF CLASSES}class="classes" {/IF}> <head>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Core9-2</title>

</head>

<body>
  <form id="form" name="form">
    <div class="list">


      <div class="form__box">
        <div class="form__item">
          <input type="checkbox" class="check" name="check" id=""><span class="html">HTML</span>
        </div>
        <div class="form__item">
          <input type="checkbox" class="check" name="check" id=""><span class="html">CSS</span>
        </div>


      </div>


      <label> <input type="text" name="text" id="text"></label>
      <button class='btn' id="btn" name="btn" type="button">Добавить</button>

    </div>
    <div class="denger none">
      <h2 class="title">Предупреждение!</h2>
      <p class="subtitle">Пусте поле нельзя добавить</p>
      <span class="x">X</span>
    </div>
  </form>


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

</html>
/*
 {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }

      body {
         background: rgb(255, 255, 255);
         background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
         background-size: cover;
         background-repeat: no-repeat;
         width: 100%;

      }

    

      img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }

      .left,
      .right {
         position: absolute;
         top: 15%;
         left: 32%;
         transform: translate(-40%, -50%);
         color: rgb(232, 63, 63);
      }

      .right {
         left: 67%;
      }

         .lbch {
         position: absolute;
         width: 15px;
         height: 15px;
         top: 19%;
         left: 25%;
      } 
*/

 .html {
         margin-left: 5px;
      }
 

      #btn {
         position: absolute;
         top: 33%;
         left: 65%;
         padding: 8px 15px;
         background-color: #000;
         color: white;
         outline: none;
         border: none;
         border-radius: 5px;
         /* margin-top: 20px; */
      }

      #text {
         width: 100%;
         outline: none;
         border: none;
         width: 200px;
         border-bottom: 2px solid black;
         position: absolute;
         top: 18%;
         left: 61%;
      }

      .form__box {
         width: 300px;
         position: absolute;
         top: 19%;
         left: 24%;
         height: 200px;
         padding: 10px;
      }

      .none {
         display: none;
      }
      .yes{
         display: block;
         opacity: 1;
      }

      .denger {
         position: absolute;
         top: 32%;
         left: 24%;
         background-color: #f6d7da;
         width: 740px;
         height: 100px;
         padding: 20px;
         border-radius: 4px;
         color: #74353f;
      }

      .subtitle {
         padding: 5px;
         letter-spacing: 1px;
         font-size: 18px;
      }

      .x {
         position: relative;
         left: 93%;
         bottom: 110%;
         font-size: 22px;
      }

        .right::before {
         content: '';
         left: -75px;
         top: -40px;
         height: 500px;
         width: 8px;
         background-color: #141414;
         position: absolute;

      } */
 
const form = document.querySelector(`#form`);
const subTitle = document.querySelector('.subtitle');
const denger = document.querySelector('.denger');
const box = document.querySelector('.form__box');

form.addEventListener('click', (evt) => {
  let target = evt.target;

  // Добавляет поле
  if (target.classList.contains('btn')) {
    let task = form.text.value;
    if (!task) {
      subTitle.innerHTML = 'Пусте поле нельзя добавить';
      denger.classList.remove('none');
    } else if (task) {
      box.insertAdjacentHTML('beforeend',
        `  <div class="form__item"><input type="checkbox" class="check"  name="check" id=""><span>${task}</span>  </div>`
      );
    }
    form.text.value = '';
    return;
  }

  // закрывает окно
  if (target.classList.contains('x')) {
    denger.classList.toggle('none');
    return;
  }

  // Удаление эл
  if (target.classList.contains('check') && box.childElementCount <= 1) {
    denger.classList.remove('none');
    subTitle.innerHTML = 'Вы не можете удалить последний пункт!';
    return;
  }
  if (target.classList.contains('check') && box.childElementCount > 1) {
    target.closest('.form__item').remove();
    return;
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.