JSFiddle

  • Nav-As-A-Service

    Navbar gets loaded from remote source. This is so a common navbar can be used for different sites.

    <nav id="omni-nav" class="pre-build" data-target="js-fiddle"></nav>
    
    <header>
      <h1>OmniNav</h1>
      <h4>as a Service</h4>
    </header>
    
    <div class="content">
      <p>Navbar will be updated using script below.</p>
      <p>See also console log.</p>
    </div>
    
    <script src="https://cdn.rawgit.com/chapmanu/omni-nav/development/build/omni-nav.bundle.min.js"></script>
    
  • Javascript Classes

    Based on: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

    'use strict';
    
    class Circle {
      constructor(radius) {
        this.radius = radius;
      }
      
      diameter() {
        return (2 * this.radius) * Math.PI;
      }
      
      area() {
        return Math.PI ...
  • Dynamic Event Handling #2 is the latest revision

    Catch event on DOM element after added page ready.

    <h2>
    Dynamic Event Test
    </h2>
    <div class="button-parent">
      <h3>
        Button Parent
      </h3>
    </div>
  • SVG Icons

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

    /*
     * Some SVG Files
     */
    
  • Sumobo Dev

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

    <header>
      <h1>Sumobo</h1>
    </header>
    <div class="content">
      <div id="sumobo"></div>
    </div>
    <script src="https://rawgit.com/klenwell/sumobo/dev/build/bundle.js"></script>
    
  • Moment Live Timestamp

    Live timestamp using moment.js.

    var activateTimestamps = function() {
      var updateLiveTimestamp = function($timestamp, format) {
        var timestamp = moment().utc().format(format);
        $timestamp.html(timestamp);
      };
    
      $('.livestamp').each(function ...
  • FizzBizz Test Challenge

    Simple coding challenge for applicants.

    function testFizzBizz() {
      // TODO: Write a test here that returns 'pass' if fizzBizz function below
      // behaves as required, 'fail' if it ...
  • FizzBizz Coding Challenge

    Simple coding challenge for applicants.

    function fizzBizz(number) {
    	// TODO: number is an integer. Return 'fizz', 'bizz', 'fizzbizz', or 'not'
      // according to rules above.
      var result ...
  • Coding Challenge

    Simple coding challenge for applicants.

    function sortNumberList(numberList) {
    	// TODO: numberList will be an array of integers. Sort in ascending order
      // and return as an array ...
  • DOM URL Builder

    Build a url dynamically using dom.

    var params = {
      url: 'http://feed.com/feed/',
      service: 'foo'
    };
    
    var domUrlBuilder = document.createElement('a');
    domUrlBuilder.href = 'http://example.com';
    domUrlBuilder ...