Skip to content

Latest commit

 

History

History
76 lines (60 loc) · 5.73 KB

Task JavaScript30.md

File metadata and controls

76 lines (60 loc) · 5.73 KB
Raw

Task JavaScript30

JavaScript30 это челлендж, который состоит из тридцати небольших проектов. К каждому проекту предлагаются файлы с разметкой и стилями, с готовым js-кодом, с видео, поясняющим ход решения. Автор этого курса - Wes Bos считается одним из лучших преподавателей JavaScript. Ваша задача разобраться в чужом коде и на его основе создать свой, дополнив авторские проекты собственными функциями.

Файлы проекта на github: https://github.com/wesbos/JavaScript30
Видео (англ): https://www.youtube.com/watch?v=VuN8qwZoego&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH

Задания:

  1. Day 1: Drum Kit
  • Музыкальное приложение, в котором нажимая на клавиши на клавиатуре, можно проигрывать звуки. Каждой клавише соответствует свой звук.
  • Дополните приложение возможностью проигрывать звуки не только при нажатии клавиш на клавиатуре, но и при кликах мышкой.
  • Пример: https://js3001.github.io/
  1. Day 2: JS and CSS Clock
  • Механические часы на JavaScript.
  • Дополните приложение электронными часами, которые показывают точное время, день недели, дату, год.
  • Пример: https://js3002.github.io/
  1. Day 3: CSS Variables and JS
  • Фоторедактор, позволяющий редактировать изображение, применяя к ним различные свойства и фильтры.
  • Добавьте в приложение свои собственные возможности для редактирования, не предусмотренные автором
  • Пример: https://js3003.github.io/
  1. Day 5: Flex Panel Gallery
  • Слайдер изображений на JavaScriptю
  • Внесите в слайдер любые изменения, которые считаете нужным: например, сделайте его вертикальным, или по клику оставляйте только одно изображение, скрывая все остальные.
  • Пример: https://js3005.github.io/
  1. Day 8: Fun with HTML5 Canvas
  • Канвас, на котором можно рисовать линии, толщина и цвет которых изменяются в процессе рисования.
  • Добавьте приложению палитру, в которой можно будет выбрать цвет, а в идеале, и толщину линии.
  • Пример исходного проекта: https://canvas30.github.io/
  • Проект, с внесёнными изменениями: https://canvas302.github.io/
  1. Day 11: Custom Video Player
  • Создание собственно видеоплеера с возможностью добавления пользовательских настроек
  • Дополнительное задание - внесите любые изменения в предложенный автором внешний вид плеера
  • Пример: https://js3011.github.io/
  1. Day 15: LocalStorage
  • Сохранение введённых пользователем данных в локальном хранилище браузера - LocalStorage.
  • Дополните задание сохранением в LocalStorage не только списка всех заказанных блюд, но и изображения последнего заказанного блюда.
  • Пример: https://js3015.github.io/
  1. Day 27: Click and Drag to Scroll
  • Горизонтальный слайдер, который можно перетаскивать мышкой.
  • Попробуйте изменить характер движения слайдера, например, сделайте его вертикальным или добавьте движению инерцию.
  • Пример: https://js3027.github.io/
  1. Day 28: Video Speed Controller
  • Регулятор скорости воспроизведения видео. Перемещая ползунок, который находится справа от плеера, можно ускорять или замедлять скорость воспроизведение видео.
  • Изменение предложенного автором функционала на ваше усмотрение.
  • Пример: https://js3028.github.io/
  1. Day 30: Whack-A-Mole
  • Игра на скорость реакции в которой нужно кликать по целям и зарабатывать баллы.
  • Дополните игру постепенно усложняющимися уровнями, сохранением результата текущей игры в LocalStorage.
  • Пример: https://js3030.github.io/

Критерии оценивания

  1. Каждое выполненное задание в которое внесены собственные дополнительные возможности - 10 баллов.
  2. Код задания переписан в ООП стиле - дополнительно 5 баллов.

Максимум: 150 баллов.