Изучаем JavaScript

Демо: https://js3032.github.io/ Код: https://github.com/js3032/js3032.github.io Мне кажется важным подводить итог сделанному, чтобы иметь возможность показать себе и другим чем занимался, чему научился, на что потратил время. И для самого себя делать такие отчёты важнее, чем для других. Сайт мне нравится. Несколько слов о задачах, которые возникали и их решениях. 1) В качестве прототипа взяла это портфолио https://chippd.github.io/ Мне оно понравилось.  В целом заметила, что wow-эффекты на сайтах привлекают внимание только при первом просмотре, а потом начинают утомлять. Поэтому современные сайты делают максимально спокойными Цветовую гамму подбирала здесь https://www.pantone.com/color-of-the-year-2017 и здесь https://colorganize.com/ В итоге остановилась на цветах, выбранных в исходном сайте. Но сайты с сочетаниями цветов заслуживают внимания и могут быть полезными в будущем. 2) Переключение языков на сайте реализовала в html , где для каждого абзаца делала две...

Это был замечательный опыт, я узнала много интересного, научилась делать забавные вещи, попробовала использовать ES6. Курс позволил прикоснуться ко многим новым возможностям  JavaScript и применить их в проектах. Очень важно, что это был не теоретический курс, что он включал в себя практические задания Автор любит  JavaScript и передаёт свою любовь тем, кто у него учится. Автор оптимист и своим оптимизмом заражает других. Автор профессионал. У него хороший, красивый, лаконичный, новый современный код. Это крайне важно учиться у профессионалов, чтобы сразу прививать вкус и любовь к хорошему и красивому коду Ура, что проект завершён. И очень хочется, чтобы он был не последним, чтобы были и другие подобные курсы

Демо: https://js3030.github.io/ Код: https://github.com/js3030/js3030.github.io Это последнее задание курса и в нём мы поиграем в классическую игру Whack-A-Mole wiki . Но вначале её напишем, потому что играть в свою собственную игру в разы забавнее. Разметка <span class="score">0</span></h1> <button onClick="startGame()">Start!</button> <div class="hole hole1">     <div class="mole"></div> </div> Элемент span , в котором будут показаны набранные баллы, кнопка начала игры и шесть div с классом hole , внутри каждого из них div с классом mole Стили В CSS есть класс «.up», который изменяет верхнюю позицию мола от 100% до 0%. .hole.up .mole {     top: 0; } Добавление этого класса приводит к тому, что цель становится видимой Код Находим элементы разметки var holes = document.querySelectorAll(".hole"); var scoreBoard = document.querySelector(".sc...

Демо: https://js30291.github.io/ Код: https://github.com/js30291/js30291.github.io Задание сделать таймер обратного отсчета. Какие-то значения времени пользователь может выбирать, а также есть поле ввода, чтобы ввести другое количество времени в минутах. Таймер также выводит время окончания заданного временного промежутка. Разметка <div class="timer">     <div class="timer__controls">         <button data-time="20" class="timer__button">20 Secs</button>         <button data-time="300" class="timer__button">Work 5</button>         <button data-time="900" class="timer__button">Quick 15</button>         <button data-time="1200" class="timer__button">Snack 20</button>         <button data-time="3600" class="timer__button">Lunch ...

Демо: https://js3028.github.io/ Код: https://github.com/js3028/js3028.github.io В этом проекте мы создаем инструмент, который изменяет скорость воспроизведения видео. Разметка:         <div class="wrapper">             <video class="flex" width="765" height="430" src="video.mp4" loop controls></video>             <div class="speed">                 <div class="speed-bar">1×</div>             </div>         </div> В HTML у нас есть элемент видео, div для регулятора скорости, и контейнер div. Ничего нового в CSS Код Javascript. var speed = document.querySelector(".speed"); var bar = speed.querySelector(".speed-bar");...

Демо: https://js3027.github.io/ Код: https://github.com/js3027/js3027.github.io В результате должен получиться горизонтальный слайдер, который можно передвигать мышкой. Пример эффекта, там, где его увидел автор,  можно посмотреть здесь: http://hoverstat.es/features/maxime-guyon , а здесь он же изменённый в соответствии с инструкциями данного задания: http://murphscode.getforge.io/ вкладка Projects Код слайдера предусматривает наличие нескольких слушателей событий и получение позиции слайдов на странице. Разметка HTML -код включает в себя контейнер div и несколько div внутри, которые представляют слайды. <div class="items">     <div class="item item1">01</div>     <div class="item item2">02</div>     <div class="item item3">03</div>     ...     <div class="item item25">25</div>   </div> Стили В CSS есть несколько св...

Демо: https://js3026.github.io/ Код: https://github.com/js3026/js3026.github.io Этот проект основывается на том, что мы узнали в задании " Follow Along Links ", и применяет его к выпадающему меню. Мы пытаемся имитировать меню навигации на веб-сайте Stripe . Нам необходимо получить размеры каждого раскрывающегося элемента и применить эти измерения к раскрывающемуся фону. Разметка В HTML-файле у нас есть элемент навигации, содержащий элементы div для раскрывающегося меню и неупорядоченный список. Стили CSS содержит два свойства, которые были для меня новыми. Первое свойство - perspective . nav {     position: relative;     perspective: 600px; } Перспектива позволяет изменить перспективу просмотра 3D-элементов подробнее . Другое свойство называется will-change  .dropdown {     ...     transition: all 0.5s;     transform: translateY(100px);     will-change: trans...

В основном теоретический пост о слушателях событий, о погружении и всплытии событий, о методе "stopPropagation" и о новом методе, позволяющем запустить какое-то событие только один раз. Разметка это три вложенных div -а.   <div class="one">     <div class="two">       <div class="three">       </div>     </div>   </div> В Javascript мы выбираем все div var divs = document.querySelectorAll("div"); и добавляем им слушатель событий " click " , который вызывает функцию " logText " .  function logText(e) {     console.log(this.classList.value); } divs.forEach(div => div.addEventListener("click", logText)); Когда щелкают div , в консоль выводится значение: this.classList.value. Оно показывает нам, что вызывает событие.  Клик по самому внутреннему диву вызывает событие на всех, в которые он вложен. Происходит ...

Демо: https://js3024.github.io/ Код: https://github.com/js3024/js3024.github.io Цель - создать на js навигационную панель, прилипающую к верхней части окна Навигационная панель расположена ниже шапки сайта. При прокрутке вниз, когда навигационная панель попадет в верхней части экрана, он должен переход на фиксированное положение в верхней части браузера. Теперь, когда мы знаем, что мы хотим достичь, можем приступить к работе. Для начала нам нужно будет выбрать навигационную панель. Также необходимо добавить функцию, которая будет выполняться при каждом событии прокрутки: var nav = document.querySelector("#nav"); function fixNav() {    console.log("The window was scrolled") } window.addEventListener("scroll", fixNav); Теперь нам нужно определить расстояние навигационной панели от верха страницы: var topOfNav = nav.offsetTop; Свойство .offsetTop показывает расстояние в пикселях от верха выбраного элемента до верхней части родительского ...

Демо https://js30232.github.io/ Код https://github.com/js30232/js30232.github.io Оригинальное авторское задание было в одном из предыдущих постов , здесь - вариация на его тему: сайт, меняющий цвет фона по голосовой команде. Разметка         <div class="voiceinator">             <h1>Magic Site</h1>             <p>Этот сайт управляется голосом.<br>             Назовите любой из цветов радуги,<br>             или выберите его из списка ниже<br><br>             Работает в Хроме</p>             <select id="text">         ...