JSFiddle

  • 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 ...
  • Checkout button with stars

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

    <div style="width: 210px; height: 3.7em; border: solid #000 2px;" class="btn">
      <div style="width: 210px; height: 3.5em; border: solid #fff 2px; " class="btn">
        <div style="width: 200px; height: 3em;" class="btn">
          <span style="font-size: 25px; font-weight:bold; text-align:center; width:200px; padding: 0.5em; color:#555555;"> <i style="float:left; color:#888888;" class="fa fa-star"></i> CHECKOUT <i style="float:right; color:#888888;" class="fa fa-star"></i> </span>
        </div>
      </div>
    </div>
    
  • Reusable line graph component with d3.js and jQuery

    jQuery 3.1.1, HTML, CSS, JavaScript

    /* implementation heavily influenced by http://bl.ocks.org/1166403 */
    		
        var lineGraph = $("lineGraph");
        
    		// define dimensions of graph
    		var m = [80, 80 ...
  • ractiveJS with FETCH HTML5 API

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

    <div id='container'></div>
    
    <!--Use the full power of Ractive.js-->
    <script id='template' type='text/ractive'>
      <div class="row">
        <div class='col-md-6 col-sm-12'>
          <label for='location'>
            Enter city
          </label>
          <input type='text' id='location' placeholder='e.g. Helsinki,FI' />
          <button on-click='getWeatherData'>Get Weather Data</button>
          <!-- Ractive events looks a little different than pure HTML events, e.g. on-click -->
    
          <hr/>
          <!-- Keep weather data div hidden, because without data it looks ugly -->
          <div id='WeatherData' style='visibility:hidden;'>
            Showing weather for: {{location}}
            <ul>
    
              <li>
                <label for='description'>The weather is/have {{main}} </label> <span id='description'> with {{description}}</span>
              </li>
    
              <li>
                <label for='temp'>Temprature : </label>
                <label id='temp'>{{temp}}</label>
              </li>
    
              <li>
                <label for='pressure'>Pressure : </label>
                <label id='pressure'>{{pressure ...</label></li></ul></div></!--></hr/></!--></div></div></script></!--use>
  • Hybrid fontawesome visiting card

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

    <div class='row'>
      <div class='col-sm-12 col-md-4'>
    
      </div>
      <div class='col-sm-12 col-md-4 card'>
        <img src="http://www.appscrawler.com/application/ThumbnailAction.do?appId=30783" />
        <!--http://xapk.online/Planet-Runner-Game-dlink--download-com.maf.planetrunner-2016/-->
        <h1> Zameer Ansari </h1>
        <hr/>
        <h4> Software Engineer | Corporate Trainer | Consultant </h4>
        <hr/>
        <div class='row'>
          <div class='col-xs-6'>
            <a href='http://xameeramir.github.io'> <i class="fa fa-rss" aria-hidden="true"></i> xameeramir.github.io </a>
          </div>
          <div class='col-xs-6'>
            <a href=''> <i class="fa fa-map-marker" aria-hidden="true"></i> Internet </a>
          </div>
        </div>
        <div class='row'>
          <div class='col-xs-6'>
            <a href='mailto:zameeramir@gmail.com'> <i class="fa fa-envelope-o" aria-hidden="true"></i> zameeramir@gmail.com </a>
          </div>
          <div class='col-xs-6'>
            <a href='tel:+919773207706'> <i class="fa fa-phone" aria-hidden="true"></i> +91 977 320 7706 </a>
          </div>
        </div>
        <div class='row'>
          <div class='col-xs-6'>
            <a href='http://google.com/search?q=xameeramir'> <i class="fa fa-google" aria-hidden="true"></i> xameeramir </a>
          </div>
          <div class='col-xs-6'>
            <a href='skype:xameeramir'> <i class="fa fa-skype" aria-hidden="true"></i> xameeramir </a>
          </div>
        </div>
    
      </div>
      <div class='col-sm-12 col-md-4'>
    
      </div>
    </div>
    
  • JSON to CSV/Excel Convert

    Convert JSON data with the help of JAVASCRIPT to generate CSV/Excel file fork: JXrwM

    $(document).ready(function(){
        $('button').click(function(){
            var data = $('#txt').val();
            if(data == '')
                return;
            
            JSONToCSVConvertor(data, "Vehicle Report", true);
        });
    });
    
    function JSONToCSVConvertor ...