1

Этап 1

JavaScript Drum Kit

2

Этап 2

CSS + JS Clock

3

Этап 3

Playing with CSS Variables and JS

4

Этап 4

Array Cardio Day 1

1

Этап 1

JavaScript Drum Kit

2

Этап 2

CSS + JS Clock

3

Этап 3

Playing with CSS Variables and JS

4

Этап 4

Array Cardio Day 1

21 марта 2017 01 июня 2017
Цель завершена 15 мая 2017
Карьера и работа

Пройти курс Javascript 30

Страница курса — https://javascript30.com

  • пройти путь от junior к middle
  • писать js без библиотек
  • изучить ES6
  • вести конспект

 Критерий завершения

Все уроки пройдены и разобраны

 Личные ресурсы

Время

 Экологичность цели

Могу самостоятельно повторить задания из курса.

  1. JavaScript Drum Kit

  2. CSS + JS Clock

  3. Playing with CSS Variables and JS

  4. Array Cardio Day 1

  • 1072
  • 21 марта 2017, 12:22

Дневник цели

1день
Светлана21 мар. 2017, 14:37

Научилась изменять CSS переменные с помощью JS.

Пример кода (частично):

СSS:

<style>

:root {

--base: #ffc600;

--spacing: 10px;

--blur: 10px;

}

img {

padding: var(--spacing);

background: var(--base);

filter: blur(var(--blur));

}

</style>

HTML:

<div>

<label for="spacing">Spacing:</label>

<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

<label for="blur">Blur:</label>

<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

<label for="base">Base Color</label>

<input id="base" type="color" name="base" value="#ffc600">

</div>

<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

JS:

const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {

const suffix = this.dataset.sizing || '';

document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);

}

inputs.forEach(input => input.addEventListener('change', handleUpdate));

inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

Начала знакомиться с методами для массивов.

Вы тоже можете
опубликовать свою
цель здесь

Мы поможем вам ее достичь!

309 000

единомышленников

инструменты

для увлекательного достижения

Присоединиться
Регистрация

Регистрация

Уже зарегистрированы?
Быстрая регистрация через соцсети
Вход на сайт

Входите.
Открыто.

Еще не зарегистрированы?
 
Войти через соцсети
Забыли пароль?
Егор
Andreйка