Испытание: Список задач

TheCh0senPessim · 30.Январь.2020 06:06:03

Всем привет!
Прошу оценить код, проверки проходят, но мне кажется его можно “улучшить”

let list = document.querySelector(’.todo-list’);
let input = document.querySelector(’.todo-input’);
let form = document.querySelector(’.todo-form’);
let priority = document.querySelector(’.todo-priority’);

priority.onclick = function () {
if (priority.classList.contains(‘is-important’)) {
priority.textContent = ‘Обычная задача’;
} else {
priority.textContent = ‘Важная задача’;
}
priority.classList.toggle(‘is-important’);
};

form.onsubmit = function (evt) {
evt.preventDefault();

let newElement = document.createElement(‘li’);
if (priority.classList.contains(‘is-important’)) {
newElement.classList.add(‘is-important’)
};
newElement.textContent = input.value;
input.value = ‘’;
list.append(newElement);
};

IAleks94 · 03.Февраль.2020 11:38:25

У меня вот так, не проходило проверку пока не понял что надпись на кнопке важности тоже надо менять ХД

Спойлер !

`let list = document.querySelector(’.todo-list’);
let input = document.querySelector(’.todo-input’);
let form = document.querySelector(’.todo-form’);
let priority = document.querySelector(’.todo-priority’);

priority.onclick = function () {
priority.classList.toggle(‘is-important’);
if (priority.classList.contains(‘is-important’)) {
priority.textContent = ‘Важная задача’
} else {
priority.textContent = ‘Обычная задача’
}

};

form.onsubmit = function (evt) {
evt.preventDefault();
let task = document.createElement(‘li’);
task.textContent = input.value;
if (priority.classList.contains(‘is-important’)) {
task.classList.add(‘is-important’);
} else {
task.classList.remove(‘is-important’);
}

list.append(task);
input.value = ‘’;
};`

Stamielys · 05.Май.2020 16:07:58

Доброго времени суток!
Оцените, пожалуйста. Ручное тестирование проходит, автоматическое по нулям…

let list = document.querySelector('.todo-list');
let input = document.querySelector('.todo-input');
let form = document.querySelector('.todo-form');
let priority = document.querySelector('.todo-priority');
let flag = true; // = new Boolean();

priority.onclick = function () {
  priority.classList.toggle('is-important');
  if (priority.classList.contains('is-important')) {
    priority.textContent = 'Важная задача';
    flag = true;
  } else {
    priority.textContent = 'Обычная задача';
    flag = false;
  }
};

form.onsubmit = function (evt) {
  evt.preventDefault();
 //создаем новый элемент списка - новая задача
  let newTask = document.createElement('li');
  //Записываем в список текст из формы
  newTask.innerHTML = input.value;
  // вставить newTask в конец <ol> - переменная list
  list.append(newTask); 
    //Добавим класс is-important элементу списка
  if (flag==true) {
  newTask.classList.add('is-important');
  };
  
  //Записываем данные из поля ввода в текстовое содержимое переменной input
  input.textContent = input.value;
 //Очищаем поле ввода
  input.value = '';
 //Проверяем, что у нас там добавилось
//  console.log(list.textContent); //Элементы списка текстом
  console.log(list); //Элементы списка в формате тегов HTML
  console.log(flag);
};

Stamielys · 05.Май.2020 16:32:09

Спасибо, разобралась… Лишнее удалила и порядок строк поменяла. Автоматический тест пройден! ))

let list = document.querySelector('.todo-list');
let input = document.querySelector('.todo-input');
let form = document.querySelector('.todo-form');
let priority = document.querySelector('.todo-priority');
let flag = true; // = new Boolean();

priority.onclick = function () {
  priority.classList.toggle('is-important');
   if (priority.classList.contains('is-important')) {
    priority.textContent = 'Важная задача';
    flag = true;
  } else {
    priority.textContent = 'Обычная задача';
    flag = false;
  }
};

form.onsubmit = function (evt) {
  evt.preventDefault();
  //создаем новый элемент списка - новая задача
  let newTask = document.createElement('li');
 //Добавим класс is-important элементу списка
  if (flag==true) {
    newTask.classList.add('is-important');
  };
 //Записываем в список текст из формы
 newTask.textContent = input.value;
 //Очищаем поле ввода
 input.value = '';
 // вставить newTask в конец <ol> - переменная list
 list.append(newTask); 
 //Проверяем, что у нас там добавилось
console.log(list); //Элементы списка в формате тегов HTML
console.log(flag);
};

Olga6 · 19.Июнь.2020 14:01:17

Здравствуйте!
Не работает вот такой код. На ручном тестировании все срабатывает, на автоматическом - по нулям.
Что с ним не так?

let list = document.querySelector(’.todo-list’);
let input = document.querySelector(’.todo-input’);
let form = document.querySelector(’.todo-form’);
let priority = document.querySelector(’.todo-priority’);

priority.onclick = function () {
priority.classList.toggle(‘is-important’);
if (priority.classList.contains(‘is-important’)) {
priority.textContent = ‘Важная задача’;
} else {
priority.textContent = ‘Обычная задача’;
}
};

form.onsubmit = function (evt) {
evt.preventDefault();
let newList = document.createElement(‘li’);
newList.textContent = input.value;

if (priority.classList.contains(‘is-important’))
newList.classList.add(‘is-important’);
else
newList.classList.remove(‘is-important’);
input.value = ‘’;
list.append (newList);
};

Eleven · 22.Июнь.2020 09:15:29

Добрый день!
Были небольшие неполадки с проверкой испытаний. Сейчас всё работает в штатном режиме, ваш код успешно проходит проверку.

Inna7 · 26.Июль.2020 06:04:46

let list = document.querySelector(’.todo-list’);
let input = document.querySelector(’.todo-input’);
let form = document.querySelector(’.todo-form’);
let priority = document.querySelector(’.todo-priority’);

priority.onclick = function () {
priority.classList.toggle(‘is-important’);
if (priority.classList.contains(‘is-important’)) {
priority.textContent = ‘Важная задача’;
}
else {
priority.textContent = ‘Обычная задача’;
}
};

form.onsubmit = function (evt) {
evt.preventDefault();
let new_list = document.createElement(‘li’);
list.append(new_list);

new_list.textContent = input.value;
if (priority.classList.contains(‘is-important’)) {
new_list.classList.add(‘is-important’);
}
input.value = “”;
}

Darkel87 · 01.Сентябрь.2020 10:42:18

Всем привет! Проблема - новая задача добавляется только один раз, потом перезаписывает предыдущую. То-ли лыжи не едут, то-ли… со мной что-то не так=(
Посмотрите мой код:

let list = document.querySelector(’.todo-list’);
let input = document.querySelector(’.todo-input’);
let form = document.querySelector(’.todo-form’);
let priority = document.querySelector(’.todo-priority’);
/задать переменную для элемента новой задачи/
let newZad = document.createElement(‘li’);

priority.onclick = function () {
priority.classList.toggle(‘is-important’);
if (priority.classList.contains(‘is-important’)) {
priority.textContent = ‘Важная задача’;
} else {
priority.textContent = ‘Обычная задача’;
}
};

form.onsubmit = function (evt) {
evt.preventDefault();

/Условная констр.: проверяет наличие класса .is-important у кнопки, если есть , то добавляет его же новому элементу li, если нет - то дальше/
if (priority.classList.contains(‘is-important’)) {
newZad.classList.add(‘is-important’);
} else {
newZad.classList.remove(‘is-important’);
}
/он субмит добавляет элемент li новой задачи в список .todo-list (переменная list)/
list.append(newZad);

/добавляет value поля ввода в кач textcontent нового элемента/
newZad.textContent = input.value;
/очистить поле ввода/
input.value = ‘’;

};

Oogarchenko · 03.Сентябрь.2020 12:55:56

Добрый день. Автоматическая проверка пишет, что мой результат 100%, но все 4 теста провалены) Причем на образце и на результате идентичная картина! Скажите, что не так?

let list = document.querySelector(’.todo-list’);
let input = document.querySelector(’.todo-input’);
let form = document.querySelector(’.todo-form’);
let priority = document.querySelector(’.todo-priority’);

priority.onclick = function () {
priority.classList.toggle(‘is-important’);
if (priority.classList.contains(‘is-important’)) {
priority.textContent = ‘Важная задача’;
} else {
priority.textContent = ‘Обычная задача’;
}
};

form.onsubmit = function (evt) {
evt.preventDefault();
let newTask = document.createElement(‘li’);

newTask.classList.add(‘user-task’);
newTask.textContent = input.value;
input.value = ‘’;
list.append(newTask);

if (priority.classList.contains(‘is-important’)) {
newTask.classList.add(‘is-important’);
} else {
newTask.classList.remove(‘is-important’);
}
};

Eleven · 14.Сентябрь.2020 14:22:22

Перенесите создание нового пункта списка внутрь form.onsubmit = function (evt)

lena_aaa · 24.Сентябрь.2020 18:21:37

Добрый вечер!
Делюсь своим кодом, может кому-нибудь поможет:slight_smile:

let list = document.querySelector(’.todo-list’);
let input = document.querySelector(’.todo-input’);
let form = document.querySelector(’.todo-form’);
let priority = document.querySelector(’.todo-priority’);

priority.onclick = function () {

priority.classList.toggle(‘is-important’);
if (priority.classList.contains(‘is-important’)) {
priority.textContent = ‘Важная задача’;

} else {
priority.textContent = 'Обычная задача';

}
};

form.onsubmit = function (evt) {
evt.preventDefault();
let task=document.createElement(‘li’);
list.append(task);
task.textContent=input.value;
input.value=’’;

if(priority.classList.contains(‘is-important’)){
task.classList.add(‘is-important’);
}
};

qwert1 · 30.Сентябрь.2020 17:07:08

не могу понять в чем загвоздка ни как не работает код.
let list = document.querySelector(’.todo-list’);
let input = document.querySelector(’.todo-input’);
let form = document.querySelector(’.todo-form’);
let priority = document.querySelector(’.todo-priority’);

priority.onclick = function () {
priority.classList.toggle(‘is-important’);
if (priority.classList.contains(‘is-important’)) {
priority.textContent = ‘Важная задача’;}
else {
priority.textContent = ‘Обычная задача’;
}
};

form.onsubmit = function (evt) {
evt.preventDefault();
let newComent=document.createElement(‘li’);
list.append(newComent);
newComent.textContent=input.value;
/if (priority.classList.contains(‘is-important’)) {
newComent.classList.add(‘is-important’);}/
}

/*

Каждая задача в списке — это элемент li. При отправке формы (переменная form) новая задача добавляется в конец списка (переменная list).
Текст задачи берётся из поля ввода (переменная input).
Если у переключателя приоритета (переменная priority) есть класс is-important, то новой задаче также добавляется класс is-important.
Бонус: после того, как задача добавится в список, поле ввода можно очистить. Но можно не очищать. Подходят оба варианта.
*/

Aigo · 05.Ноябрь.2020 13:02:51

Проблема та же: код тот же, визуально всё срабатывает, но тест не пройден. В чём проблема?

let list = document.querySelector('.todo-list');
let input = document.querySelector('.todo-input');
let form = document.querySelector('.todo-form');
let priority = document.querySelector('.todo-priority');

priority.onclick = function () {
  priority.classList.toggle('is-important');
  if (priority.classList.contains('is-important')) {
    priority.textContent = 'Важная задача';
  } else {
    priority.textContent = 'Обычная задача';
  }
};

form.onsubmit = function (evt) {
  evt.preventDefault();
  let newComment = document.createElement('li');
  newComment.classList.add('new-comment');
  newComment.textContent = input.value;
  input.value = '';
  list.append(newComment);
  

  if (priority.classList.contains('is-important')) 
      {newComment.classList.add('is-important');   
  }
  else {
      newComment.classList.remove('is-important');
  }

};

Eleven · 05.Ноябрь.2020 13:33:44

Добрый день!

Уберите добавление класса new-comment. Без него проверки срабатывают.

Aigo · 06.Ноябрь.2020 12:23:30

Спасибо!

IgorChesalin · 09.Ноябрь.2020 14:40:16

Подскажите, пожалуйста!
Верна ли “логика” скрипта, проверку проходит. Как улучшить. Спасибо!

let list = document.querySelector('.todo-list');
let input = document.querySelector('.todo-input');
let form = document.querySelector('.todo-form');
let priority = document.querySelector('.todo-priority');

priority.onclick = function () {
  priority.classList.toggle('is-important');
  if (priority.classList.contains('is-important')) {
    priority.textContent = 'Важная задача';
  } else {
    priority.textContent = 'Обычная задача';
  }
};



form.onsubmit = function (evt) {
  evt.preventDefault();
  
  let newlist = document.createElement('li');
  newlist.textContent = input.value;
  
  if (priority.classList.contains('is-important')) {
    newlist.classList.add('is-important')
    list.append(newlist);
  } else {
    list.append(newlist);
    }
  
  form.value = '';
  
};

Pavel_Kruglik · 19.Ноябрь.2020 16:20:11

Добрый вечер. Подскажите , пожалуйста, почему
с таким условием проходит тест:
if (priority.classList.contains(‘is-important’)) {
newList.classList.add(‘is-important’)
} else {
newList.classList.remove(‘is-important’)
}
А с таким нет:
if (priority.classList.contains(‘is-important’)) {
newList.classList.add(‘is-important’)
} else {
newList.classList.add(‘todo-list’)
}

И в чем существенное отличие. В остальном все идентично.

dizhoykin · 10.Январь.2021 18:02:32

Добрый вечер!

Подскажите, пожалуйста, почему не проходит автоматический тест, вроде на картинках все аналогично, вручную тоже не вижу проблем

let list = document.querySelector(’.todo-list’);
let input = document.querySelector(’.todo-input’);
let form = document.querySelector(’.todo-form’);
let priority = document.querySelector(’.todo-priority’);

priority.onclick = function () {
priority.classList.toggle(‘is-important’);
if (priority.classList.contains(‘is-important’)) {
priority.textContent = ‘Важная задача’;
} else {
priority.textContent = ‘Обычная задача’;
}
};

form.onsubmit = function (evt) {
evt.preventDefault();

let newTask = document.createElement(‘li’);
list.append(newTask);
newTask.textContent = input.value;

if (priority.classList.contains(‘is-important’)) {
newTask.classList.add(‘is-important’);
}
else {
newTask.classList.remove(‘is-important’);
}

};
input.value = ‘’;

vitalya · 13.Январь.2021 21:17:12

Имеем такую, судя по всему, кривую конструкцию обработчика (но я художник, мне так виднее :D):

form.onsubmit = function (evt) {
evt.preventDefault();

let valuev = document.createElement(‘li’); //// Объявил валуева и научил толкать новый li в

if (priority.classList.contains(‘is-important’)) { ///////// Если в класс-листе приоритета есть ‘is-important’
valuev.classList.add(‘is-important’); //////// до задаю валуеву этот класс
} else {//////// в противном случае
valuev.classList.add(‘li’);//////// валуев появляется с обычным HTML ‘li’ без класса.
}

valuev.textContent = input.value; //// закидываю в текст валуева значение инпут
list.append(valuev); ////добавляю в переменную list получившегося валуева в конце списка
console.log(valuev); /// Выводим в консоль получившихся валуевых
///// На момент проверка убрал опустошение строки
};

Вот что получается:
1 случай:

2 случай:

3 случай:

4 случай:

Не хочу брать рабочий код других ребят, принципиально хочется разобраться в этом.
Визуальное отображение новых строк верно, по логам тоже видно, что когда обычный приоритет, когда важный, всё работает.

Помогите подточить руки.

Вот исходник, если нужен:

vitalya · 13.Январь.2021 21:28:34

Рано я сюда обратился, нужно было изучить логику других пользователей.
В общем, тут ошибка
} else {//////// в противном случае
valuev.classList.add(‘li’);//////// валуев появляется с обычным HTML ‘li’ без класса.
}

Я создавал валуева с классом ли:

Нужно было не задавать никакой класс, HTMLElement рисуется “li” без класса.
Для проверки на 100% в консоли должно в двух случаях быть:

Если приоритет “Важный”:
Если приоритет обычный, то класса не должно быть:

А у меня как раз таки при обычном приоритете был класс li:

Всем спасибо за внимание!
Надеюсь мой случай кому-то даст подсказку)