09 Jan 2019 | 1 min
Objetivo: Fazer o Javascript alterar dinamicamente os inputs de CSS recebidos pelo browser.
Veja aqui como ficou minha versão do exercício.
Diferenças entre a solução do Wes Bos e a minha:
Definição de objetos <input> no Javascript.
Wes definiu uma constante ‘inputs’ que contém todos os inputs do HTML5 em um nodeList:
const inputs = document.querySelectorAll('.controls input');
Eu defini cada input como uma variável:
let spacing = document.getElementById('spacing');
let blur = document.getElementById('blur');
let base = document.getElementById('base');
Wes definiu uma constante com ‘suffix’ e fallback ‘nil’, eu escrevi os sufixos manualmente.
const suffix = this.dataset.sizing || '';
Número de Handlers nos event listeners.
Wes usou dois event handlers(change e mousemove) e iterou sobre o objeto ‘inputs’:
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
Eu usei apenas um handler(change) para cada variável:
spacing.addEventListener("change", updateSpacing);
blur.addEventListener("change", updateBlur);
base.addEventListener("change", updateBase);
(não sei porque ele utilizou o handler mousemove se o change já é o suficiente…)
Definição de fallback function(s).
Eu defini 3 fallback functions, uma para cada input:
function updateSpacing() {
image.style.marginTop = `${spacing.value}px`;
image.style.marginLeft = `${spacing.value}px`;
console.log(spacing.value);
}
function updateBlur() {
image.style.filter = `blur(${blur.value}px)`;
console.log(blur.value);
}
function updateBase() {
document.body.style.background = base.value;
console.log(base.value);
}
Wes definiu uma única função de fallback (handleUpdate) para todos os eventos, e usou um método de JS que não conhecia, o setProperty, segue função de atualização do wes:
function handleUpdate() {
const suffix = this.dataset.sizing || '';
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
Links dos repositórios no github: Meu Código, do Wes.