Skip to content

Latest commit

 

History

History
147 lines (133 loc) · 4.66 KB

07. TODO app.md

File metadata and controls

147 lines (133 loc) · 4.66 KB

https://learn.javascript.ru/es-string#poleznye-metody
https://learn.javascript.ru/array-iteration
https://learn.javascript.ru/array-methods \

ЗАДАНИЕ-ПОВТОРЕНИЕ
Реализовать функцию push, которая принимает массив и второй параметр.
Функция должна добавлять к массиву этот второй параметр.
Не использовать встроенную функцию push \

function push(array, element) {
  array[array.length] = element;
}

let ar = [1,2,3];
push(ar, 4);
console.log(ar);
ar.push(5);
console.log(ar);

ЗАДАНИЕ-ПОВТОРЕНИЕ
Написать функцию, которая принимает строку из одного символа и строку из нескольких символов
Функция проверяет, есть ли этот один символ в многосимвольной строке.
Функция возвращает true или false \

function isCharacterInString(character, string) {
  for (let char of string) {
    if (character === char) {
      return true;
    }
  }
  return false;
}
isCharacterInString('a', 'cbad');
isCharacterInString('a', 'cbd');

'cbd'.includes('a');
'cbad'.includes('a');

ЗАДАНИЕ-ПОВТОРЕНИЕ
Написать функцию startsWith, которая принимает 2 строки и проверяет, начинается ли первая строка с символов второй строки.
Функция возвращает true или false.
Пример:

startsWith('abcde', 'abc'); //=> true
startsWith('abcde', 'acb'); //=> false
function startsWith(string, subString) {
  for (let i in subString) {
    if (subString[i] !== string[i]) {
      return false;
    }
  }
  return true;
}
startsWith('abcde', 'abc'); //=> true
startsWith('abcde', 'acb'); //=> false
'abcde'.startsWith('abc'); //=> true
'abcde'.startsWith('acb'); //=> false

https://learn.javascript.ru/function-expressions#funktsii-kolbeki
Функции можно передавать в другие функции.
ЗАДАНИЕ-ПОВТОРЕНИЕ из lesson_3
Реализовать функцию map, которая принимает массив и функцию.
Возвращает массив из результатов выполнения передаваемой функции
на элементах исходного массива \

map = function(array, func) {
  let result = [];
  for (let element of array) {
    result.push(func(element));
  }
  return result;
}
function square(x) {
  return x ** 2
}
map([2,3,4], square) //=> [4, 9, 16]
[2,3,4].map(square);
[2,3,4].map(x => x ** 2);

ЗАДАНИЕ
TODO app
В самом простом виде это будет инпут для ввода задач и список задач с чекбоксами для маркировки задач как сделанных.
Дальше можно добавлять: \

  1. Перечеркивание задачи при маркировке как сделанной
  2. Удаление задач
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDo app</title>
    <script src="script.js"></script> \
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function() {
        let textInput = document.querySelector('input');
        let form = document.querySelector('form');
        form.addEventListener("submit", function(event) {
          event.preventDefault();
          let ul = document.querySelector('ul');
          let li = document.createElement('li');
          li.textContent = textInput.value;
          textInput.value = '';
          ul.appendChild(li);


          let inputCheckbox = document.createElement('input');
          inputCheckbox.setAttribute('type', 'checkbox');
          li.appendChild(inputCheckbox);

          inputCheckbox.addEventListener('change', function(event) {
            if (inputCheckbox.checked) {
              li.style.textDecoration = 'line-through';
            } else {
              li.style.textDecoration = '';
            }
          })


          let inputDelete = document.createElement('input');
          inputDelete.setAttribute('type', 'submit');
          inputDelete.value = 'Удалить';
          li.appendChild(inputDelete);

          inputDelete.addEventListener('click', function(event){
            li.remove();
          })
        })
      })
    </script>
</head>
<body>
  <form>
    <input type="text">
    <input type="submit">
  </form>
  <ul>
  </ul>
</body>
</html>