console.log( 'Hello world' );


/*
* События
*
* Event Loop - цикл событий. Бесконечный цикл, единственной задачей
* которого является отслеживание изменния состояния страницы/окна
* с целью вызова соответствующего события
*
*
* Event (class)
*
* let e = new Event()
*
* e.target - цель события (активный элемент)
* e.type -  тип события
* e.timeStamp - время, когда произошло событие
*
* e.preventDefault() - отменить стандартное поведение
* e.stopPropagation() - отменить выполнение следующих
*                       event listeners
*
*
* Event Listener - [слушатель события] - триггер/обработчик
*       функция, принимающая в качестве аргумента события,
*       имеющая контекст события и определяющая последовательность
*       действий при возникновении события
*
*
* Зарегистрировать обработчик
* [element].addEventListener('event', f1, [f2, ...]) - добавить
*                                           обработчик
*           event - название события для обработки
*              -> click     - клик (css - :focus)
*              -> scroll    - прокрутка экрана
*              -> mouseover - наведение курсора мыши (css - :hover)
*              -> load      - загрузка (завершена)
*              -> DOMContentLoaded - завершена загрузка всего
*                               контента из DOM
*              -> mouseup   - отпустили кнопку мыши
*              -> keydown   - нажата клавиша на клавиатуре
*              -> keypress  - нажата и не отпущена
*              -> keyup     - отпущена клавиша на клавиатуре
*              -> change    - изменение полей формы
*           f - функция-обработчик (может быть несколько функций
*                                       в одном listener)
*
*/

// document.addEventListener('DOMContentLoaded', function () {
//     button.addEventListener('click', showBox1, showBox2);
//     box1.addEventListener('mouseover', function (e) {
//         console.log( 'Moved' );
//     });
// });

// window.addEventListener('load', function () {
//     button.addEventListener('click', showBox1, showBox2);
//     box1.addEventListener('mouseover', function (e) {
//         console.log( 'Moved' );
//     });
// });

// contact
function showBox1(e) {
    e.stopPropagation();
    box1.style.display = 'block';
}

function showBox2(e) {
    box2.style.display = 'block';
}

/**
 * Домашнее задание. Адаптировать крестики-нолики для работы
 * с событиями. Добавить ход по клику, возможность очистки поля,
 * возможность выбора первого хода (первые нолики / первые крестики)
 *
 * На кристал:
 * Добавить форму настроек для игры и кнопку для отображения формы
 */