Інтернет-програмування

Лабораторна робота №6.

Об’єктна модель документу.

Обробка подій.

Завдання для груп ПЛ5, ПЛ6

Завдання для груп КН, ІСТ

Виконайте серед запропонованих завдань будь-яких 5 на ваш вибір

​

Виконайте серед запропонованих завдань будь-яких 7 на ваш вибір

​

Project. Gallery

• Створіть галерею зображень, кожне з яких неактивне. При клацанні по зображенню, воно стає активним. При наступному клацанні по ньому, воно знову стає неактивним. Для двох станів задайте наступні стилі:
• Активний стан: фільтр відтінки сірого(0%); непрозорість 1.
• Неактивний стан: фільтр відтінки сірого(100%); непрозорість 0.5.

​

Project. Runaway Button

• Реалізуйте «утікаючу» кнопку. В div-елементі знаходиться кнопка. Проте при наведенні на неї курсора миші, вона змінює своє положення так, що унеможливлює натиснення на неї

Project. List

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

Project. Piramid

• Потрібно побудувати піраміду з n блоків. Реалізація складається з 2 етапів.
• Перший етап. Генерація блоків або Доставка будівельного матеріалу. Кількість блоків n вибираємо із списку select. Блоки створюються після натискання кнопки Доставити. Ширина кожного блоку – випадкове число від 10px до 300px. Висота кожного блоку 50px.
• Другий етап. Будівництво. Піраміду будуємо за інструкціями:
• Для використання блоку, потрібно клацнути по ньому – і блок розміщується зверху по центру піраміди.
• Використані блоки стають неактивними.
• Піраміда вважається побудованою, якщо використані всі блоки, і починаючи з основи вони розташовані у порядку спадання за шириною. При цьому виведіть повідомлення: «Можна заселяти!»
• Якщо всі блоки використані, але піраміду не вдалось побудувати, вивести повідомлення: «Невдача!»

Project. Палітра

• Вибрати потрібні кольори з палітри кольорів та залити ними даний прямокутник (блок).
• Кольори в палітрі повинні вибиратись клацанням. Повторне клацання повинно відміняти вибір. Заливка прямокутника відбувається одночасно з вибором кольорів. Якщо вибрано декілька кольорів, то заливка градієнтна.

Project. Editor

• Є декілька блоків з текстом. В кожному з блоків є кнопки Видалити та Редагувати
• При натисканні на кнопку Видалити, даний блок зникає. При натисканні на Редагувати блок переходить в стан редагування (наприклад, з допомогою textarea). При знятті фокуса з textarea, блок повертається в звичайний стан.

Project. Graphic Editor

• Задати можливість заливати квадратики вибраним кольором.
• Є палітра кольорів, в якій клацанням можна вибрати лише один колір. І є прямокутне полотно (контейнер, блок), яке заповнене маленькими блоками-квадратиками. При клацанні курсором на ці квадратики, вони повинні заливатись вибраним кольором.

​

Project. Scene

• В елемент textarea вводяться нулі та одиниці і з них потрібно сформувати квадратики чорного і білого кольору.

Project. Animate Block

• Реалізувати можливість змінювати розмір блока, а також його кут повороту

Project. Rotate Cards

• Є ряд гральних карт, повернутих до нас «сорочкою». При клацанні на карту, вона повертається до нас лицевою стороною протягом 1-2 секунд (повинен бути саме поворот). При повторному клацанні, карта знову повертається «сорочкою».

Project. Cart

• Є список товарів з кнопками Замовити. При натисканні на неї, одиниця даного товару заноситься в кошик.

Project. Draggable

• Надати квадратикам можливість перетягування (draggable) в межах контейнера. При переміщенні курсора, наведеному на даний блок-квадратик, та утриманні кнопки миші даний елемент повинен перетягуватись. Квадратики не повинні заходити навіть частково за межі контейнера.

Project. Satellite Label

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

Project. Slider

• Реалізувати в контейнері можливість переглядати світлини одна за одною при клацанні курсора. Світлини змінюють одна одну з ефектом слайдингу.

Project. Circles

• Реалізувати кнопку, при натисканні на яку в контейнері будуються n кругів. Центр круга – випадкові координати в межах контейнера, радіус – випадкова величина від 10px до 50px. Значення n вводиться в текстовому полі. При натисканні на круг, він повинен зникати.

Project. Garland

• Послідовність з n блоків є лампочками гірлянди. При послідовному натисканні кнопок реалізуйте наступний алгоритм загоряння лампочок:
• Перше натискання – загоряється перша лампочка;
• Кожне наступне натискання – лампочки, які горять, затухають, загоряються їх сусідні лампочки.

Project. Rating

• Реалізуйте лічильник лайків та шкалу рейтингу для кінофільму за зразком. Рейтинг фільму вимірюється у відсотках і дорівнює відношенню кількості лайків до загальної кількості голосів (лайки + дизлайки). Спочатку рейтинг дорівнює 0%.

Project. Figures

• Є набір фігур: квадрат, коло і трикутник. З набору можна вибирати лише одну фігуру одночасно. Реалізуйте можливість клацанням миші в даному контейнері розміщувати в ньому вибрану фігуру. Координати клацання повинні бути центром фігури:

Project. Slider Carousel

• Блок з синьою рамкою – контейнер слайдера
• Блок з оранжевою рамкою – рядок стрічки
• Блоки з червоною рамкою – елементи стрічки
• Кнопки «Рух вліво» та «Рух вправо»

Завдання

При натисканні кнопки «Рух вліво»:

• перший елемент рядка зникає
• всі інші роблять переміщення вліво на відстань, рівну ширині елемента
• в кінці рядка з’являється новий елемент