JSFiddle

  • Promises example #2 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    function doThis() {
      return Promise.resolve();
    }
    
    function another() {
      console.log('another');
      return Promise.resolve();
    }
    
    function andAnother() {
      console.log('and another');
      return ...
  • WYSIWYG editor

    No-Library (pure JS), HTML, CSS, JavaScript

    let editor = document.getElementById('editor');
    let display = document.getElementById('display');
    editor.addEventListener('input', function () {
    	display.innerHTML = event.target.value
    });
    
  • matrix multiplication

    No-Library (pure JS), HTML, CSS, JavaScript

    var m1 = [[1, 6],
              [-3, 5]];
              
    var m2 = [[4, 2], 
              [0, -1]];
              
    function multiplyMatrix(m1, m2) {
    
    	var result = [];
      
      for(var ...
  • ifthenelseifthenthen

    No-Library (pure JS), HTML, CSS, JavaScript

    var alpha = false;
    var gamma = false;
    function beta() {
    	console.log('beta');
    }
    function delta() {
    	console.log('delta');
    }
    function omega() {
    	console.log ...
  • Jquery event delegation article #42 is the latest revision

    An issue I have with the implementation of event delegation in Jquery

    $('#alpha').on('click', '#gamma', function (event) {
    
    	console.log('event target id', event.target.id);
      console.log('event currentTarget id', event ...
  • google autocomplete service test #3 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <script>
        function initMap() {
            var service = new google.maps.places.AutocompleteService();
            service.getQueryPredictions({
                input: 'Lo',
                location: new google.maps.LatLng(51.508742 ...</script>
  • Using classlist with array argument

    No-Library (pure JS), HTML, CSS, JavaScript

    var args = ['dark', 'green'];
    
    var bar = document.getElementById('bar');
    var goo = document.getElementById('goo');
    
    
    bar.classList.add('dark', 'green');
    goo ...
  • drop down menu #8 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <ul class='menu'>
        <li class='menu-item'>
            <h2>alpha</h2>
            <ul class='sub-menu'>
                <li class='sub-menu-item'>
                    <h3>one</h3>
                    <ul class='sub-menu-popout'>
                        <li>apple</li>
                        <li>banana</li>
                    </ul>
                </li>
                <li class='sub-menu-item'>
                    <h3>two</h3>
                    <ul class='sub-menu-popout'>
                        <li>apple</li>
                        <li>banana</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class='menu-item'>
            <h2>beta</h2>
            <ul class='sub-menu'>
                <li class='sub-menu-item'>
                    <h3>one</h3>
                    <ul class='sub-menu-popout'>
                        <li>apple</li>
                        <li>banana</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
  • Malebranche test1 #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class='foo-div'></div>
    <div class='bar-div'></div>
    <svg height="0" width="0">
        <defs>
            <clipPath id="foo-path" clipPathUnits="">
                <polygon points="0,0 30,280 36,320 90,240 120,120 150,40" />
            </clipPath>
            <clipPath id="bar-path" clipPathUnits="objectBoundingBox">
                <polygon points="0,0 0.1,0.7   0.12,0.8   0.3,0.6 0.4,0.3    0.5,0.1" />
            </clipPath>
        </defs>
    </svg>
    
    <h1>Algorithm</h1>
    
    <ol>
        <li>extract clip path from src svg</li>
        <li>increment through components of clip path
            <br><i>For each element</i>
            <ol>
                <li>extract 'path'</li>
                <li>convert coords ...</li></ol></li></ol>
  • line height experiment

    No-Library (pure JS), HTML, SCSS, JavaScript

    <div class='container'>
        x
        <span class='alpha'>alpha</span><!--
        --><span class='beta'>betH</span><!--
        --><span class='gamma'>Hhy</span>
    </div>
    <div class='container notext'>
        x
        <span class='alpha'></span><!--
        --><span class='beta'></span><!--
        --><span class='gamma'></span>
    </div>