type-tester-tutorial-part1.js

// Declare and assign our main variables
let tt = document.querySelector('.tt_wrapper');
let sliders = {};
sliders.size = document.createElement('input');
let 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.dataset.units = 'px'; // dataset holds custom data-* attributes

// <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(samp);