JSFiddle

  • Weekly time table

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

    <table border="0" cellpadding="0" cellspacing="0" width="1139" style="border-collapse:
     collapse;table-layout:fixed;width:853pt">
      <colgroup>
        <col class="xl67" width="39" span="2" style="mso-width-source:userset;mso-width-alt:
     1426;width:29pt">
          <col class="xl67" width="137" style="mso-width-source:userset;mso-width-alt:5010;
     width:103pt">
            <col class="xl67" width="39" span="2" style="mso-width-source:userset;mso-width-alt:
     1426;width:29pt">
              <col class="xl67" width="51" span="2" style="mso-width-source:userset;mso-width-alt:
     1865;width:38pt">
                <col class="xl67" width="49" style="mso-width-source:userset;mso-width-alt:1792;
     width:37pt">
                  <col class="xl67" width="39" span="2" style="mso-width-source:userset;mso-width-alt:
     1426;width:29pt">
                    <col class="xl67" width="137" style="mso-width-source:userset;mso-width-alt:5010;
     width:103pt">
                      <col class="xl67" width="39" span="2" style="mso-width-source:userset;mso-width-alt:
     1426;width:29pt">
                        <col class="xl67" width="137" style="mso-width-source:userset;mso-width-alt:5010;
     width:103pt">
                          <col class="xl67" width="64" span="2" style="width:48pt">
                            <col class="xl67" width="137" style="mso-width-source:userset;mso-width-alt:5010;
     width:103pt">
      </colgroup>
      <tbody>
        <tr height="20" style="height:15.0pt">
          <td colspan="2" height="20" class="xl71" width="78" style="height:15.0pt;width:58pt">Time</td>
          <td class="xl72" width="137" style="border-left:none;width:103pt">Mon</td>
          <td colspan="2" class="xl71" width="78" style="border-left:none;width:58pt">Time</td>
          <td class="xl72" width="51" style="border-left:none;width:38pt">Tue</td>
          <td class="xl72" width="51" style="border-left:none;width:38pt">Wed</td>
          <td class="xl72" width="49" style="border-left:none;width:37pt">Thu</td>
          <td colspan="2" class="xl71" width="78" style="border-left:none;width:58pt">Time</td>
          <td class="xl72" width="137" style="border-left:none;width:103pt">Fri</td>
          <td colspan="2" class="xl71" width="78" style="border-left:none;width:58pt">Time</td>
          <td class="xl72" width="137" style="border-left:none;width:103pt">Sat</td>
          <td colspan="2" class="xl71" width="128" style="border-left:none;width:96pt">Time</td>
          <td class="xl72" width="137" style="border-left:none;width:103pt">Sun</td>
        </tr>
        <tr height="20" style="height:15.0pt">
          <td height="20" class="xl72" style="height:15.0pt;border-top:none">Start</td>
          <td class="xl72" style="border-top:none;border-left:none">End</td>
          <td class="xl72" style="border-top:none;border-left:none">Task</td>
          <td class="xl72" style="border-top:none;border-left:none">Start</td>
          <td class="xl72" style="border-top:none;border-left:none">End</td>
          <td colspan="3" class="xl71" style="border-left:none">Task</td>
          <td class="xl72" style="border-top:none;border-left:none">Start</td>
          <td class="xl72" style="border-top:none;border-left:none">End ...</td></tr></tbody></table>
  • JavaScript objects are stored as references

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

        var a = {
          a: 1,
          b: 2,
          c: 3
        };
        var b = a;
    
        //b.c is referencing to a.c value
        console ...
  • Creating custom elements with ShadowDOM and template by example

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

    var xElemProto = Object.create(HTMLElement.prototype);
    
    xElemProto.createdCallback = function() {
      var xElemTpl = document.querySelector('#xElem-tpl');
    
      var xElemHTMLClone = document.importNode(xElemTpl.content ...
  • Creating custom elements with ShadowDOM by example

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

    var xElemProto = Object.create(HTMLElement.prototype);
    
    xElemProto.createdCallback = function() {
      var shadow = this.createShadowRoot();
      shadow.innerHTML = '<p>This is X element</p>'
    }
    
    var ...
  • Creating custom elements by example

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

    var xElemProto = Object.create(HTMLElement.prototype);
    
    xElemProto.createdCallback = function() {
      this.innerHTML = '<p>This is X element</p>'
    }
    
    var xElem = document.registerElement('x-element ...
  • Draw.io POC

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

    var div1, div2,
      offset_data; //Global variable as Chrome doesn't allow access to event.dataTransfer in dragover
    
    function drag_start(event ...
  • Get X,Y position of the div

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

    var offset_data; //Global variable as Chrome doesn't allow access to event.dataTransfer in dragover
    
    function drag_start(event) {
      PrintXY('drag_start ...
  • Draw line with pure HTML

    http://stackoverflow.com/a/6928307/2404470

    linedraw(100, 10, 200, 350);
    
    function linedraw(ax, ay, bx, by) {
      if (ay > by) {
        bx = ax + bx;
        ax = bx - ax ...
  • Binary Sort In One Go

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

    var arr = [0, 1, 0, 1, 1, 1];
    console.log(arr);
    
    var newArr = binarySortInOneGo(arr);
    console.log(newArr);
    
    function binarySortInOneGo ...
  • Bubble Sort

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

    var numbers = [12, 10, 15, 11, 14, 13, 16];
    console.log(numbers);
    bubbleSort(numbers);
    console.log(numbers);
    
    function bubbleSort(array ...