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

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

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);
};

1 Симпатия

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

Спойлер !

`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 = ‘’;
};`

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

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);
};

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

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);
};
1 Симпатия

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

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);
};

1 Симпатия

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

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 = “”;
}

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

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 = ‘’;

};

Добрый день. Автоматическая проверка пишет, что мой результат 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’);
}
};

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

Добрый вечер!
Делюсь своим кодом, может кому-нибудь поможет: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’);
}
};

не могу понять в чем загвоздка ни как не работает код.
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’);}
/
}

/*

  1. Каждая задача в списке — это элемент li. При отправке формы (переменная form) новая задача добавляется в конец списка (переменная list).
  2. Текст задачи берётся из поля ввода (переменная input).
  3. Если у переключателя приоритета (переменная priority) есть класс is-important, то новой задаче также добавляется класс is-important.
  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 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');
  }

};

Добрый день!

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

1 Симпатия

Спасибо!

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

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 = '';
  
};

Добрый вечер. Подскажите , пожалуйста, почему
с таким условием проходит тест:
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’)
}

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