Task 1.
Створіть дві змінні y1 = 6, y2 = 3. Створіть div, клас присвойте самостійно, виведіть в нього суму y1 та y2.
Task 2.
Створіть div з текстом 'Hello' і класом .out-2. За допомогою innerHTML допишіть всередину текст "Master". В підсумку у вас повинно вийти: Hello Master. (Використовуйте скорочений запис)
Task 3.
Створіть input і кнопку. По натисканню на кнопку виконується функція, яка виводить на сторінку число, яке ввів користувач, помножене на 10.
Task 4.
Створіть input, кнопку і пустий div з класом .out-4. По натисканню на кнопку виконується функція, яка виводить на сторінку в div новий тег <h1> з текстом, який ввів користувач (<h1>Text Input</h1>). Для розв'язання вам потрібно буде використовувати склеювання рядків ('<h1>' + ...).
Task 5.
Створіть два input з type="number", в які користувач може ввести числа. При натисканні на кнопку повинна виконуватися функція, яка виводить на сторінку суму введених чисел.
Task 6.
Створіть input, кнопку і пустий div з класом .out-6. Користувач вводить текст в input. При натисканні на кнопку виконується функція, яка додає в div новий тег <p> з введеним текстом (<p>Text Input</p>). Для розв'язання використовуйте склеювання рядків ('<p>' + ...) і скорочений запис. Важливо: текст повинен саме додаватися. Якщо натиснути на кнопку кілька разів, кожного разу повинен додаватися новий текст.
Task 7.
Створіть input і кнопку. По натисканню на кнопку виконується функція, яка виводить на сторінку в div число, яке ввів користувач, і до нього додане число 10.
Підказка, зверніть увагу на тип даних
Task 8.
Створіть input, кнопку і пустий список <ul> з класом .out-8. Користувач вводить текст в input. При натисканні на кнопку виконується функція, яка створює новий тег <li> з введеним текстом і додає його в список. Для розв'язання використовуйте склеювання рядків ('<li>' + ...) і скорочений запис. Важливо: кожний новий клік додає новий елемент в список.
Task 9.
Створіть input з type="number" і кнопку з текстом 1. По натисканню на кнопку виконується функція, яка додає до тексту кнопки цифру, введену користувачем. Якщо натиснути на кнопку кілька разів, кожного разу до вже зміненого значення повинна додаватися нова цифра.
Підказка, зверніть увагу на тип даних
Task 10.
Отримайте за допомогою querySelector тег body (querySelector('body')). За допомогою innerHTML присвойте йому пустий рядок (...innerHTML = ''). Вивчіть, що сталося.