Испытание: DOM (часть 1)
AnyGoals
Организуй график работы, ставь задачи, цели и оставайся эффективным каждый день
Задание №1
Выборка элементов (1 часть)

  1. Выберите все input с типом checkbox, и назначьте их переменной.
  2. Пройдитесь циклом forEach по каждому элемент и выведите его в консоль.
Задание №2
Выборка элементов (2 часть)

  1. Выберите элемент .input-add-task-js и сохраните его ссылку в переменную.
  2. Выберите элемент .add-btn-js и сохраните его ссылку в переменную.
  3. По нажатии на кнопку, выведите в консоль значение инпута.
  4. Ожидаемый результат:
// Текст инпута...
Задание №3
Добавление класса

  1. Выберите все элементы с классом .item и назначьте их в переменную.
  2. С помощью цикла пройдитесь по каждому элементу и добавьте ему класс .checked (в этом вам поможет свойство classList)
  3. Ожидаемый результат в index.html:
<label class="item checked">
    <div class="content">
        <div class="ui checked checkbox">
            <input type="checkbox" checked>
            <div class="box">Покормить кота</div>
        </div>
    </div>
</label>

<!-- И так далее... -->
Задание №4
Удаление класса

  1. Выберите все элементы с классом .item и сохраните ссылку в переменную
  2. С помощью цикла пройдитесь по каждому элементу и удалите класс .checked (в этом вам поможет свойство classList)
  3. Ожидаемый результат в index.html:
<label class="item">
    <div class="content">
        <div class="ui checked checkbox">
            <input type="checkbox" checked>
            <div class="box">Покормить кота</div>
        </div>
    </div>
</label>

<!-- И так далее... -->
Задание №5
Валидация формы

  1. Создайте функцию которая будет проверять, является ли строка .input-add-task-js пустой.
  2. Если по нажатию на кнопку .add-btn-js поле инпута пустое, оповестите пользователя ошибкой "Поле не может быть пустым.".
  3. Ожидаемый результат в index.html:
// Поле не может быть пустым.
Критерии написания оптимальных циклов
  1. ✅ Своевременный выход из цикла: цикл не работает дольше чем нужно
  2. ✅ Количество вызовов циклов минимизировано
  3. ✅ Множественные DOM-операции производятся на элементах, которые не добавлены в DOM
Критерии написания избыточного кода
  1. ✅ В проекте не должно быть избыточных проверок
  2. ✅ Там где возможно, в присвоении значения вместо if используется тернарный оператор
  3. ✅ Условия упрощены
  4. ✅ Отсутствуют лишние приведения и проверки типов
  5. ✅ Отсутствует дублирование кода: повторяющиеся части кода переписаны как функции
Критерии написания единообразного кода
  1. ✅ Все функции объявлены единообразно
  2. ✅ Используется единый стиль именования переменных
  3. ✅ При использовании встроенного API, который поддерживает несколько вариантов использования, используется один способ
Перед завершением задания убедитесь:
  1. ✅ Каждое выполненное задание соответствует требованиям.
  2. ✅ В консоли браузера нет ошибок.
  3. ✅ Выполнены все рекомендации из критериев.
Made on
Tilda