Лабораторна робота №4: Доступ до об'єктів і сценаріїв. Доступ до властивостей і методів об'єктів

Цей проєкт є частиною лабораторної роботи №4 з дисципліни «Основи Front-end технологій», виконаної студентом Національного технічного університету України «Київський політехнічний інститут імені Ігоря Сікорського».

Метою роботи було навчитися використовувати різні способи доступу до властивостей і методів об'єктів DOM для внесення змін в HTML-документ та реалізувати інтерактивність елементів сторінки за допомогою JavaScript.

---

Опис проєкту

Проєкт складається з двох завдань:

1. Зміна кольору елементів

   • Перший елемент, номер якого визначається за формулою (n mod 10) + 1, змінює колір фону та тексту при кліку за допомогою методу getElementById().
   • Наступний елемент змінює колір при кліку за допомогою методу querySelector().
   • При повторному кліку кольори повертаються до початкових значень.
   • Стилі змінюються через inline JavaScript та зовнішній файл styles.css.

2. Кнопки для роботи з зображенням

   • Під зображенням додано чотири кнопки: додати, збільшити, зменшити, видалити зображення.
   • Дії реалізовано через JavaScript, зміни застосовуються до властивостей елементів DOM.

---

Використані технології

• HTML5 – структура сторінки.
• CSS3 – стилізація елементів та оформлення макету.
• JavaScript – доступ до DOM, зміна властивостей і методів елементів, інтерактивність.
• WebStorm – середовище розробки.
• Git / GitHub – система контролю версій та хостинг проєкту.
• GitHub Pages – публікація веб-сторінки онлайн.

---

Документація

• JavaScript getElementById: https://developer.mozilla.org/uk/docs/Web/API/Document/getElementById
• JavaScript querySelector: https://developer.mozilla.org/uk/docs/Web/API/Document/querySelector
• DOM стилі: https://developer.mozilla.org/uk/docs/Web/API/HTMLElement/style

---

Переглянути сторінку

Проєкт розміщено на GitHub Pages і доступний за посиланням:
👉 https://randomiv.github.io/lab4-frontend/

---

Локальний запуск

Щоб переглянути проєкт локально:

1. Клонуйте репозиторій з GitHub:

git clone https://github.com/RandomIv/lab4-frontend

2. Перейдіть до папки проєкту:

cd lab4-frontend

3. Відкрийте файл index.html у веб-браузері (Chrome, Firefox, Safari тощо).

---

Автор

• Ім'я: Іванишин Олександр Олександрович
• Група: ІМ-32
• Варіант: 49