Створення BINGO

Серія вимог 2 (24 лютого 2025 року)

1. Якщо я вставляю в зону бінго текст більший довжиною за 50 символів, то цю <textarea> треба підсвітити червоною як помилкову шляхом додавання до <textarea> класу error
   • Коли ми виходимо з редагування то клас error набуває вся комірка
2. Реалізувати автоматичне масштабування тексту так, щоб він не змінював розмір клітинки бінго
   • Врахувати що зміна розміру тексту може відбуватися не тільки за події редагування, але й ще при зміні розміру вікна браузера
3. Коли я знаходжуся в режимі автора, я маю додаткову кнопку "Поділитися" яка дозволяє скопіювати посилання на сторінку в буфер обміну
4. Якщо відкрити сторінку за посиланням де завгодно (на іншому комп'ютері, в анонімній вкладці, у тому самому браузері) - відкривається бінго, яке було поширене на попередньому кроці
5. Різні посилання зберігають різний стан бінго (дивись вимогу 10 у 1 серії)
   • Тобто я можу мати дві відкриті вкладки з заповненням двох різних бінго одночасно і оновлення обох працюватиме коректно
6. Змінити зберігання стану поточного бінго що редагується з localStorage (вимога 10 у 1 серії) на хеш URL (не зберігати нічого в localStorage)
   • URL має оновлюватися коли ми виходимо з редагування клітинки якщо в нас немає помилок (вимога 8 у 1 серії, вимога 1 у цій серії)
7. Реалізувати логіку: якщо вмістом клітинки є текст "*" - то вона завжди обрана (її не можна вимкнути)
8. Реалізувати "фавіконку": коли бінго в процесі - жовтий квадрат, коли бінго завершено - зелений квадрат, коли бінго має помилки - червоний квадрат

Матеріали до серії вимог:

• offsetWidth та аналогічно offsetHeight
  • додаткове питання: чим відрізняється offsetWidth від clientWidth від scrollWidth?
• resize
• Location.hash
• Favicon

Серія вимог 1 (17 лютого 2025 року)

1. Якщо перемикач "режим автора" не активовано, то клік по комірці приводить до її вибору (клас selected)
2. Виділення будь-яких 5 елементів по горизонталі, вертикалі або диагоналі повинно приводити до відображення повідомлення "BINGO!" внизу і кнопки "почати знову" (зверніть увагу, кнопка і сама панель вже є в HTML)
3. Натискання кнопки "почати знову" має приховувати панель з відображенням "BINGO!" і очищати таблицю
4. Активація перемикача "режим автора" має прибирати виділення елементів та виграша
5. В режимі автора клік по комірці не має призводити до її виділення
6. В режимі автора клік по комірці має приводити до її перетворення в <textarea> з текстом, що на даний момент присутній в комірці
7. Клік поза <textarea> яку ми редагуємо, має перетворити її назад в текст, що на даний момент присутній в <textarea>
8. Якщо на сторінці в режимі автора знаходяться дві комірки з однаковим текстом, то вони мають бути підсвічені червоним (клас error в CSS)
9. При спробі оновлення сторінки, якщо ми знаходимося в режимі автора і редагуємо комірку ми маємо вивести попередження про незбережені дані
10. При оновленні сторінки всі внесені вами зміни мають бути збережені (шляхом збереження їх в localStorage)

Матеріали до серії вимог:

• createElement
• addEventListener
• submit
• beforeunload
• confirm
• localStorage
• JSON.stringify
• JSON.parse