<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">
   <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 name ="text" type="text" name="text" id="text"></label>
            <button 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="app.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.forms.form;
const btn = document.querySelector('#btn');
const box = document.querySelector('.form__box');
const check = document.querySelectorAll('.check');
const denger = document.querySelector('.denger');
const span = document.querySelector('.x');
const subTitle = document.querySelector('.subtitle');

btn.addEventListener('click', function goTo(params) {
   let task = form.text.value;

   if (!task) {
      denger.classList.remove('none');
      subTitle.innerHTML = 'Пусте поле не можна добавити';
      /*  check.classList.add('none'); */
   } else if (task) {
      box.insertAdjacentHTML('beforeend',
         `  <div class="form__item"><input class="check" type="checkbox" name="check" id=""><span class="html">${task}</span></div>`
      );
   }
//  form.reset();
  form.text.value = ""
});

box.addEventListener('click', (evt) => {

   if (evt.target.checked && box.childElementCount > 1) {
      evt.target.closest('.form__item').remove();

   }
   if (box.childElementCount <= 1) {
      denger.classList.remove('none');
      subTitle.innerHTML = 'Останній таск зі списку Ви не можете видалити';
   }
  
});
span.addEventListener('click', () => {
   denger.classList.toggle('none');
});




// box.addEventListener('click', (evt) => {
 
//    if (evt.target.classList.contains('check') && box.childElementCount > 1) {
//       evt.target.closest('.form__item').remove();
//    }
//    if (box.childElementCount <= 1) {
//       denger.classList.remove('none');
//       subTitle.innerHTML = 'Останній таск зі списку Ви не можете видалити';
    
//    }
// });



 // box.prepend('Обережно!!!');
// for(i = 0;i < box.children.length;i++){
//    if(evt.children){
//       children[i].remove();
//    }
//     if(box.lastElementChild <= 1){
//       denger.classList.remove('none');
//    }
// }
// const addTask = document.querySelector('.form__item');
// const all = box.querySelectorAll('.form__item');
// const element = document.querySelectorAll('input[type = checkbox]');
// const subTitle = document.querySelector('.subtitle');
/* box.addEventListener('change', function name(e) {
console.log(box);
}); */

/* box.addEventListener('change', function name(e) {
   // for (const item of all) {
   //    if (form.check) {
   //       item.remove();
   //    }
   // }
   // all.forEach(element => {
   //    if (form.check.checked) {
   //           element.remove();
   //    }
   // });
   // for(i = 0 ; i < element.length;i++){
   //    if(element.checked){
   //       addTask.remove();
   //    }
   // }
}); */

//     <div class="form__item">
//    <label for="check"><input class="check" type="checkbox" name="check" ><span class="html">${task}
//       </span></label>
// </div>


/* console.dir(box.children); */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.