Основи програмування

Варіант

Завдання

1.01, 2.15

Додати програмно в код сторінки блок div з фрагментом текту (p) та маркованим списком. Задати внутрішні відступи блоку 15px та колір тексту червоний.

1.02, 2.16

Додати програмно в код сторінки блок div з повідомленням, оформленим жирним синім текстом, яке буде з’являтися через 10 секунд після завантаження сторінки, а ще через 5 секунд – зникати.

1.03, 2.17

Реалізувати можливість додавати користувачу нові пункти нумерованого списку з довільним вмістом та іншим кольором тексту.

1.04, 2.18

Написати код, який буде запитувати в користувача кількість нових абзаців (з довільним вмістом) та додавати їх на сторінку.

1.05, 2.19

Написати код, який буде запитувати в користувача ціле число N, та буде створювати список з N рядків, текст рядка – значення квадрату його номеру (i²).

1.06, 2.20

Додати програмно в код сторінки табличку множення чисел від 1 до 9. Перед таблицею розмістити заголовок третього рівня.

1.07, 2.21

Написати код, який буде запитувати в користувача його ім’я і рік народження та буде виводити на сторінку ім’я та вік користувача у вигляді заголовку 2 рівня.

1.08, 2.22

Написати код, який буде запитувати в користувача ціле число N та буде виводити на сторінку N посилань на сторінки page1.html, … pageN.html.

1.09, 2.23

Реалізувати можливість додавати користувачу посилання в документ. Текст посилання та саме посилання користувач вводить через діалогове вікно.

1.10, 2.24

Реалізувати можливість користувачу запускати таймер, який кожні 2 хвилини нагадуватиме, що він ще на сайті.

1.11, 2.25

Реалізувати можливість додавати користувачу нові рядки до вже існуючої таблиці з довільним вмістом.

1.12, 2.01

Додати програмно в код сторінки кілька абзаців довільного тексту, кожен з яких буде мати окремий заголовок різного рівня.

1.13, 2.02

Додати програмно в код сторінки таблицю, що міститиме перелік та опис 10 довільних мнемонік. Перед таблицею розмістити заголовок 2 рівня.

1.14, 2.03

Написати код, який буде запитувати в користувача два числа та виводитиме на сторінку результат їх множення у вигляді заголовку першого рівня.

1.15, 2.04

Додати програмно в код сторінки блок div з багаторівневим списком. Задати стилі оформлення для списку.

1.16, 2.05

Реалізувати можливість користувачу приховувати та показувати за бажанням повідомлення, виокремлене в блок div. Повідомлення повинно містити заголовок та зелений текст.

1.17, 2.06

Написати код, який буде запитувати в користувача сьогоднішню дату (у форматі dd.mm) та буде показувати скільки днів залишилось до кінця місяця (заголовок першого рівня). Визначення цілої частини числа – Math.trunc().

1.18, 2.07

Додати програмно в код сторінки блок div, що буде містити кілька абзаців довільного тексту з посиланнями та зображенням. Задати стилі для посилань.

1.19, 2.08

Реалізувати можливість видаляти користувачу елементи одного списку та додавати їх до іншого.

1.20, 2.09

Написати код, який буде запитувати в користувача два числа, порівнювати їх та виводити інформацію про їх рівність у вигляді заголовку другого рівня.

1.21, 2.10

Реалізувати можливість додавати користувачу заголовки різного рівня на сторінку. Кожен наступний заголовок повинен бути меншим за попередній. Після заголовку шостого рівня має йти заголовок першого рівня.

1.22, 2.11

Реалізувати можливість додавати користувачу текст різного розміру на сторінку. Текст та його розмір в пікселях вводиться користувачем.

1.23, 2.12

Написати код, який буде запитувати в користувача текст та ціле число N та виводитиме цей текст на сторінці N разів у вигляді заголовку третього рівня.

1.24, 2.13

Додати програмно в код сторінки таблицю табулювання функції cos(x), де x приймає значення від 1 до 10 з кроком 1. (Math.cos())

2.25, 2.14

Реалізувати можливість додавати по черзі нові рядки тексту перед та після (по черзі) існуючого списку в документі.

Варіант

Завдання

1.10, 2.01

Галерея LightZoom

Підключення – https://u.to/gjf5Fw

Плагін – https://u.to/6Df5Fw

1.11, 2.02

Приховування об’ємного тексту Readmore

Підключення – https://u.to/Njj5Fw

Плагін – https://u.to/dTj5Fw

1.12, 2.03

Слайдер Slick slider

Підключення – https://u.to/vTj5Fw

Плагін – https://u.to/FDn5Fw

1.13, 2.04

Галерея Lightbox

Підключення – https://u.to/Sjn5Fw

Плагін – https://u.to/fTn5Fw

1.14, 2.05

Анімація елементів при прокрутці WOW

Підключення – https://u.to/Fjr5Fw

Плагін – https://u.to/Lzr5Fw

1.15, 2.06

Плаваюча кнопка «Вгору»

Підключення – https://u.to/Vjr5Fw

1.16, 2.07

Модальне вікно arcticModal

Підключення – https://u.to/azr5Fw  (jQuery брати не з Яндекса)

Плагін – https://u.to/gzr5Fw

1.17, 2.08

Слайдер Owl Carousel

Підключення – https://u.to/pTr5Fw

Плагін – https://u.to/9Dr5Fw

1.18, 2.09

Модальне вікно для вибору дати flatpickr

Підключення – https://u.to/Ezv5Fw

1.19, 2.10

Поле для вибору дати DataDropper

Підключення – https://u.to/MDv5Fw

Плагін – https://u.to/PTv5Fw

1.20, 2.11

Реалізація зміни картинок TwentyTwenty

Підключення – https://u.to/ZTv5Fw

Плагін – https://u.to/hjv5Fw

1.21, 2.12

Перевірка складності паролю Entropizer

Підключення – https://u.to/qjv5Fw

Плагін – https://u.to/wzv5Fw

1.22, 2.13

Обрізка об’ємного тексту Succint

Підключення – https://u.to/4jv5Fw

Плагін – https://u.to/_zv5Fw

1.23, 2.14

Збільшення зображення (лупа) ZBox

Підключення – https://u.to/GDz5Fw

Плагін – https://u.to/Lzz5Fw

1.24, 2.15

Галерея зображень ImageGrid

Підключення – https://u.to/2zz5Fw

Плагін – https://u.to/8zz5Fw

1.25, 2.16

Фоновий слайдер Carousel

Підключення – https://u.to/KT-5Fw

Плагін – https://u.to/Vj-5Fw

1.01, 2.17

Адаптивне меню okayNav

Підключення – https://u.to/TEH5Fw

Плагін – https://u.to/bUH5Fw

1.02 2.18

Стилізовані перемикачі jquery-on-off-switch

Підключення – https://u.to/K0b5Fw

Плагін – https://u.to/XEb5Fw

1.03, 2.19

Спливаючі підказки Tooltipster

Підключення – https://u.to/2Tv6Fw

Плагін – https://u.to/DDz6Fw

1.04, 2.20

Слайдер-меню Slinky

Підключення – https://u.to/6D76Fw (замінити jquery.slinky на slinky.min)

Плагін – https://u.to/Yj-6Fw

1.05, 2.21

Слайдер Nivo Slider

Підключення – https://u.to/BkL6Fw

Плагін – https://u.to/PkL6Fw

1.06, 2.22

Слайдер Flickity JS

Підключення – https://u.to/Dkn6Fw

1.07, 2.23

Анімація чисел Jquery knob

Підключення – https://u.to/9VD6Fw

Плагін – https://u.to/kVH6Fw

1.08, 2.24

Слайдер Owl Carousel

Підключення – https://u.to/pTr5Fw

Плагін – https://u.to/9Dr5Fw

1.09, 2.25

Галерея Lightbox

Підключення – https://u.to/Sjn5Fw

Плагін – https://u.to/fTn5Fw