type-tester-tutorial-part1.js

// Find the wrapper and create some elements to put in it
const tt = document.querySelector('.tt_wrapper');
const sliders = {};
sliders.size = document.createElement('input');
const numboxes = {};
numboxes.size = document.createElement('input');
const samp = document.createElement('samp');

// Clear the contents of .tt_wrapper
tt.innerHTML = '';

// Add attributes to the slider input
sliders.size.type = 'range';
sliders.size.min = 16;
sliders.size.max = 256;
sliders.size.step = 1;
sliders.size.value = 32;
sliders.size.dataset.units = '{}px'; // dataset holds custom data-* attributes
sliders.size.dataset.prop = 'fontSize';

// Add attributes to the number input
numboxes.size.type = 'number';
numboxes.size.min = sliders.size.min;
numboxes.size.max = sliders.size.max;
numboxes.size.step = sliders.size.step;
numboxes.size.value = sliders.size.value;
numboxes.size.dataset.units = sliders.size.dataset.units;
numboxes.size.dataset.prop = sliders.size.dataset.prop;

// <samp> needs some attributes too
samp.innerText = 'The swift red fox leaps over the proud dachshund!';
samp.contentEditable = true;

// Attach our elements to the wrapper!
tt.appendChild(sliders.size);
tt.appendChild(numboxes.size);
tt.appendChild(samp);