Изучаем JavaScript

     1. Метод поиска querySelector   JavaScript отвечает за динамику веб-страниц, позволяет им реагировать на действия пользователя. Но для того, чтобы JavaScript мог изменить состояние элемента на странице, вначале ему необходимо этот элемент найти. Метод поиска элементов в JavaScript  называется querySelector . Его синтаксис: document.querySelector(".logo img"); Здесь: document – где ищем (по всему документу); querySelector – метод поиска элементов; .logo img – css-селектор Метод querySelector позволяет найти любой элемент веб-страницы, отображенный в html-разметке: тег, класс, псевдокласс, id и их сочетания. Пример. Используя метод querySelector найдём в документе элемент с классом peter document.querySelector(".peter"); Пример.  Найдём изображение внутри элемента с классом peter, document.querySelector(".peter img"); 2. Метод поиска querySelectorAll Метод querySelector ищет первый элемент на странице. Если н...

При нажатии на клавишу на клавиатуре появляется звук, соответствующий данной клавише, и небольшая анимация, прописанная в css-правиле: .playing {   transform: scale(1.1);   border-color: #ffc600;   box-shadow: 0 0 1rem #ffc600; } Добавлению элементу key класса playing соответствует строка в js: key.classList.add('playing'); Нам нужно связать нажатие клавиши клавиатуры с нашим html-кодом и проигрыванием определённого звука. Коды клавиш можно увидеть на этом сайте: http://keycod.es/ Нажмите любую клавишу, и увидите её код. Например, для буквы "А" (лат.) код клавиши 65. Прописываем в html код: I часть: <div data-key="65" class="key">  A       <span class="sound">clap</span>  </div> II часть: <audio data-key="65" src="sounds/clap.wav"></audio> В первой части кода ключ key="65" связал клавишу "А" с html кодом, во второй - привязал к ней звук,...

Автор предлагает идею проекта, готовую вёрстку и вспомогательные материалы, видеоинструкцию. Всё, что осталось сделать - написать скрипт. а если это не удастся сделать самостоятельно, - разобраться как работает предложенный автором скрипт. Сайт проекта: https://javascript30.com/ Ссылка на репозиторий на гитхабе: https://github.com/wesbos/JavaScript30 Плейлист на ю тубе: https://www.youtube.com/