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

  1. Выберите все input с типом checkbox, и назначьте их переменной.
  2. Пройдитесь циклом forEach по каждому элементу добавьте атрибут checked=true.
  3. Ожидаемый результат:
<input type="checkbox" checked="true">
Задание №2
Удаление атрибута

  1. Выберите все input с типом checkbox, и назначьте их переменной.
  2. Пройдитесь циклом forEach по каждому элементу и удалите атрибут checked.
  3. Ожидаемый результат:
<input type="checkbox">
Задание №3
Добавление элемента в DOM

  1. Дан массив "Задание 1", "Задание 2", "Задание 3", "Задание 4", "Задание 5". Добавьте в #list элемент <div class="item"> с каждым значением из массива.
  2. Ожидаемый результат:
<div class="item">Задание 1</div>
<div class="item">Задание 2</div>
<div class="item">Задание 3</div>
<div class="item">Задание 4</div>
<div class="item">Задание 5</div>

<!-- И так далее... -->
Задание №4
Удаление элемента из DOM

  1. Удалите в #list все .item элементы.
  2. Ожидаемый результат:
<div id="list" class="ui middle aligned divided list">
  <!-- Пусто -->
</div>
Задание №5 (не обязательно)
Добавление элемента в DOM

  1. Добавьте обработчик клика для .add-btn-js.
  2. По нажатию на кнопку, если в .input-add-task-js строка не пустая - возьмите ее значение и создайте элементы по примеру из готовой структуры.
  3. Созданную структуру добавьте в #list (можно использовать innerHTML)
  4. После успешного добавления структуры, строку в элементе .input-add-task-js необходимо очистить.
  5. Ожидаемый результат:
<div id="list" class="ui middle aligned divided list">
    <label class="item">
        <div class="content">
            <div class="ui checkbox">
                <input type="checkbox">
                <div class="box">ЗНАЧЕНИЕ ИЗ ИНПУТА</div>
            </div>
        </div>
    </label>

    <!-- И так далее... -->
</div>
Задание №6 (не обязательно)
Обработчик событий переключение состояний.

  1. Прежде чем делать это задание, выполните предыдущее задание.
  2. Добавьте обработчик onchange для каждого input с типом checkbox.
  3. Если чекбокс активен, добавляйте родительским элементам .item и .checkbox класс .checked.
  4. Если чекбокс не активен, удаляйте с родительских элементов класс .checked.
  5. Ожидаемый результат:
<!-- Активный чекбокс -->

<label class="item checked">
    <div class="content">
        <div class="ui checkbox checked">
            <input type="checkbox" checked>
            <div class="box">ЗНАЧЕНИЕ ИЗ ИНПУТА</div>
        </div>
    </div>
</label>

<!-- Выключенный чекбокс -->

<label class="item">
    <div class="content">
        <div class="ui checkbox">
            <input type="checkbox">
            <div class="box">ЗНАЧЕНИЕ ИЗ ИНПУТА</div>
        </div>
    </div>
</label>
Критерии написания оптимальных циклов
  1. ✅ Своевременный выход из цикла: цикл не работает дольше чем нужно
  2. ✅ Количество вызовов циклов минимизировано
  3. ✅ Множественные DOM-операции производятся на элементах, которые не добавлены в DOM
Критерии написания избыточного кода
  1. ✅ В проекте не должно быть избыточных проверок
  2. ✅ Там где возможно, в присвоении значения вместо if используется тернарный оператор
  3. ✅ Условия упрощены
  4. ✅ Отсутствуют лишние приведения и проверки типов
  5. ✅ Отсутствует дублирование кода: повторяющиеся части кода переписаны как функции
Критерии написания единообразного кода
  1. ✅ Все функции объявлены единообразно
  2. ✅ Используется единый стиль именования переменных
  3. ✅ При использовании встроенного API, который поддерживает несколько вариантов использования, используется один способ
Перед завершением задания убедитесь:
  1. ✅ Каждое выполненное задание соответствует требованиям.
  2. ✅ В консоли браузера нет ошибок.
  3. ✅ Выполнены все рекомендации из критериев.
Made on
Tilda