let searchBox = document.getElementById('search');
let myForm = document.getElementById('my-form');
let newItem = document.getElementById('items');
let msgBox = document.querySelector('.msg');
let bgEffect = document.querySelector('body');

bgEffect.addEventListener('mousemove', mouseColor);
searchBox.addEventListener('keyup', searchList);
myForm.addEventListener('submit', addTask);
newItem.addEventListener('click', delItem);
//newItem.addEventListener('click', editItem);

function mouseColor (e) {
   bgEffect.style.background = rgb(${e.clientX}, ${e.clientY}, 40);
}

let todos =[];

function addTask (e) {
   e.preventDefault();
   let textArea = document.getElementById('inpVal').value;
   
   if (textArea === '') {

       msgBox.classList.add('msg')
       msgBox.innerHTML = 'Add task please';
   }
   else{
       msgBox.classList.add('msg')
       msgBox.innerHTML = 'Successfuly Added';

       let newTask = document.createElement('li');
       newTask.classList.add('liStyle');
       newTask.appendChild(document.createTextNode(textArea));
       newItem.appendChild(newTask);

       let delBtn = document.createElement('button');
       delBtn.className = 'btnStyle delete';
       delBtn.appendChild(document.createTextNode('X'));
       newTask.appendChild(delBtn);

       let editBtn = document.createElement('button');
       editBtn.className = 'editStyle editBtn';
       editBtn.appendChild(document.createTextNode('Edit'));
       newTask.appendChild(editBtn);

       todos.push(textArea);
       console.log(todos);
       myForm.reset();
   }  
   // saving to local storage
   localStorage.setItem('My Todo List', JSON.stringify(todos));
   sessionStorage.setItem('My Todo List', JSON.stringify(todos));

   setTimeout(() => msgBox.remove(), 3000);
}

function delItem (e) {
   if (e.target.classList.contains('delete')) {
       let newTask = e.target.parentElement;
       newItem.removeChild(newTask);
   }
}

function searchList (e) {
   // convert to lower case
   let text = e.target.value.toLowerCase();
   // get the list
   let itemList = newItem.getElementsByTagName('li');
   // convert to array
   Array.from(itemList).forEach(function (list) {
       let itemName = list.firstChild.textContent;
       if (itemName.toLocaleLowerCase().indexOf(text) != -1) {
           list.style.display = 'block';
       }
       else {
           list.style.display = 'none';
       }
   });
}

то что я смог созадть за месяц

Ха, я проверил
@piterden и правда, ведёт себя как одна область видимости

То есть переменные из второго блока протекают в первый.

Да я в ченжлоге читал

Не совсем так, блоки создают блоки. В JS всего две области видимости. Блоки относятся к локальной, но у каждого блока эта локальная область своя собственная.

Ща вспомнил

Все, я поняла

Ну мы о лете говорим.

Но нет, это не ведёт себя как разные блоки. Тогда бы переменные не протекали между разными командами

Пацаны, расходимся

В каком смысле "Протекают между разными командами"?

Это даже не ведёт себя как вложенные блоки.

Он пробрасывает леты

Только леты

Ну если в одном куске кода в консоли определить переменную через лет, она доступна в следующем

Если бы они вели себя как отдельные блоки, это было бы не так

Конст же тоже

И дает перелетывать #новослово

Без ошибки

А вот конст нельзя переопределять

Переконстывать не дает #новослово