<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 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 addTask = document.querySelector('.form__item');
const box = document.querySelector('.form__box');
const check = document.querySelectorAll('.check');
const denger = document.querySelector('.denger');
const span = document.querySelector('.x');
const all = box.querySelectorAll('.form__item');
const element = document.querySelectorAll('input[type = checkbox]');

btn.addEventListener('click', function name(params) {
   let task = form.text.value;
   if (!task) {
      denger.classList.remove('none');
   }
  else if (task) {
      box.insertAdjacentHTML('beforeend',
         `  <div class="form__item"><input type="checkbox" class="check"  name="check" id=""><span class="html">${task}</span>  </div>`
      );
   }
   form.reset();

});

form.addEventListener(`click`, (evt) => {
                      
  if (evt.target.classList.contains(`html`)) {
    evt.target.closest(`.form__item`).remove();
    
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.