JSFiddle

  • Native two way data binding #1 is the latest revision

    Simple demonstration of two way data binding using vanilla js.

    var myApp = {};
    myApp.data = {
    	data1: null,
    };
    
    document
    	.querySelector(".js-form.js-data1")
      .addEventListener("keyup", function(){
        myApp.updateValues("data1", this.value);
      });
    
    myApp.updateValues ...
  • Accessibility Modal Practices Demo #4 is the latest revision

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

    <input type="text">
    <button 
      aria-controls="two" 
      aria-owns="true" 
      aria-haspopup="true"
      aria-flowto="two"
      onclick="toggleTwo();">
      TOGGLE DIV #2
    </button>
    <input type="text"><button>button</button>
    <div class="one">
      <h2>hello, i'm div 1</h2><input type="text"><button>button</button><input type="text">  <button>button</button>
    </div>
    <div class="two" id="two" aria-hidden="true">
      <span class="inner">
        <button 
          class="close"
          onclick="toggleTwo(this);">
          CLOSE POPUP
        </button>
        <h2>hello, I'm div 2.</h2>
        <input type="text"><button>button</button><input type="text"><button>button ...</button></span></div>
  • Chat system frontend #2 is the latest revision

    a markdown chatter

    console.clear();
    var MarkdownIt = window.markdownit({
      breaks:       true,
      langPrefix:   'language-',
      linkify:      true,
      typographer:  false
    });
    var Showdown = new showdown.Converter();
    
    
    $(function ...
  • Chat system frontend

    a markdown chatter

    console.clear();
    //var md = window.markdownit();
    /* {
      breaks:       true,
      langPrefix:   'language-',
      linkify:      true,
      typographer:  false
    }
    */
    //var result = md.render('# markdown-it rulezz ...
  • Chat system frontend

    a markdown chatter

    console.clear();
    var md = window.markdownit();
    /* {
      breaks:       true,
      langPrefix:   'language-',
      linkify:      true,
      typographer:  false
    }
    */
    var result = md.render('# markdown-it rulezz ...
  • Chat system frontend #6 is the latest revision

    a markdown chatter

    var md = window.markdownit({
      breaks:       true,
      langPrefix:   'language-',
      linkify:      true,
      typographer:  false
    });
    var result = md.render('# markdown-it rulezz!');
    
    
    $(function(){
    
    $(".chat ...
  • Fun with Functions #23 is the latest revision

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

    function log(arg) {
        document.getElementById("writeln").innerHTML += arg + "<br>";
    }
    function identity(x) {
        return x;
    }
  • Angular right-click directive #4 is the latest revision

    Directive to bind action to right click

    var app = angular.module('myApp', []);
    function MyCtrl($scope) {
        $scope.value = 10;
        $scope.increment = function() {
          $scope.value = $scope.value + 1;   
        };
        $scope ...
  • Interview JS Test

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

    console.log("Test 1 -----");
    // Create a function that accepts one object parameter.  
    // If the object has the property ‘selected’ set ...
  • Dynamic DataTable #24 is the latest revision

    Dynamically loaded DataTable with some CSS to make it look pretty.

    init = function() {
        // Do any initializations.
    
        // Get the data.
        requestData();
    };
    
    drawGrid = function(data) {
        $('#grid').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="dataTable"><caption>My Sales for Current Month</caption></table>' );
        $('#dataTable ...