Skip to content

Instantly share code, notes, and snippets.

@justinpenner

justinpenner/type-tester-tutorial-part1.js

Last active March 27, 2022 02:02
Download ZIP

Revisions

  1. justinpenner revised this gist Mar 27, 2022. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions type-tester-tutorial-part1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,16 +14,18 @@ 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 = 16;
    numboxes.size.max = 256;
    numboxes.size.step = 1;
    numboxes.size.dataset.units = '{}px'; // dataset holds custom data-* attributes
    numboxes.size.dataset.prop = 'fontSize';
    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!';
  2. justinpenner revised this gist Mar 27, 2022. 1 changed file with 19 additions and 7 deletions.
    26 changes: 19 additions & 7 deletions type-tester-tutorial-part1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,23 +1,35 @@
    // Declare and assign our main variables
    let tt = document.querySelector('.tt_wrapper');
    let sliders = {};
    // Find the wrapper and create some elements to put in it
    const tt = document.querySelector('.tt_wrapper');
    const sliders = {};
    sliders.size = document.createElement('input');
    let samp = document.createElement('samp');
    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>
    // 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
    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 = 16;
    numboxes.size.max = 256;
    numboxes.size.step = 1;
    numboxes.size.dataset.units = '{}px'; // dataset holds custom data-* attributes
    numboxes.size.dataset.prop = 'fontSize';

    // <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);
    tt.appendChild(numboxes.size);
    tt.appendChild(samp);
  3. justinpenner created this gist Mar 27, 2022.
    23 changes: 23 additions & 0 deletions type-tester-tutorial-part1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    // 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);