Цей проєкт є частиною лабораторної роботи №5 з дисципліни «Основи Front-end технологій», виконаної студентом Національного технічного університету України «Київський політехнічний інститут імені Ігоря Сікорського».
Метою роботи було навчитися використовувати наявні в моделі документа події для внесення змін в сторінку.
Проєкт складається з двох завдань. Варіанти для завдань розраховувалися за формулою: my_variant = (my_num - 1) % total_variants + 1, де my_num = 49 (мій номер у переліку студентів), total_variants — загальна кількість варіантів для відповідного завдання.
-
Форма з перевіркою валідності
- Для цього завдання total_variants = 15, розрахунок: my_variant = (49 - 1) % 15 + 1 = 4. Отже, використано варіант №4, що відповідає рядкам 1, 5, 6, 7, 8 з Таблиці 2 (поля: ПІБ, ID-card, Факультет, Дата народж., Адреса).
- Реалізовано HTML-форму з цими полями вводу. За допомогою JavaScript та регулярних виразів виконується перевірка валідності даних згідно з заданими форматами.
- Якщо дані валідні — інформація виводиться в новому вікні. Якщо є помилки — поля з помилками виділяються червоною рамкою.
- Події обробляються через onclick на кнопці "Перевірити".
-
Інтерактивна таблиця 6x6
- Для цього завдання total_variants = 10, розрахунок: my_variant = (49 - 1) % 10 + 1 = 9. Отже, використано варіант №9: при подвійному кліку змінюється колір клітинок в обраному стовпці таблиці, починаючи з обраної, через одну.
- Таблиця заповнена числами від 1 до 36 по рядках.
- При наведенні на клітинку з номером варіанта (9) колір змінюється на випадковий.
- При кліку — колір змінюється на обраний з палітри.
- При подвійному кліку — реалізується зміна згідно з варіантом №9.
- Події додаються через addEventListener().
- HTML5 – структура сторінки.
- CSS3 – стилізація елементів та оформлення макету (вбудовано в HTML).
- JavaScript – робота з подіями, регулярними виразами, доступ до DOM, зміна властивостей і методів елементів, інтерактивність.
- WebStorm – середовище розробки.
- Git / GitHub – система контролю версій та хостинг проєкту.
- GitHub Pages – публікація веб-сторінки онлайн.
- JavaScript addEventListener: https://developer.mozilla.org/uk/docs/Web/API/EventTarget/addEventListener
- Регулярні вирази в JavaScript: https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Regular_expressions
- DOM стилі: https://developer.mozilla.org/uk/docs/Web/API/HTMLElement/style
- Window.open(): https://developer.mozilla.org/uk/docs/Web/API/Window/open
Проєкт розміщено на GitHub Pages і доступний за посиланням:
👉 https://randomiv.github.io/lab5-frontend/
Щоб переглянути проєкт локально:
- Клонуйте репозиторій з GitHub:
git clone https://github.com/RandomIv/lab5-frontend- Перейдіть до папки проєкту:
cd lab5-frontend- Відкрийте файл index.html у веб-браузері (Chrome, Firefox, Safari тощо).
- Ім'я: Іванишин Олександр Олександрович
- Група: ІМ-32
- Варіант: 49