JSFiddle

  • CSS object-fit Test

    object-fit css

    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    for (i = 0; i < getRandomInt(30, 80); i++) {
      $('#wrapper').append('<div class="image-container"><img src="https://placekitten.com/g/' + getRandomInt(250, 450) + '/' + getRandomInt(250, 450) + '" /></div>');
    }
    
  • Basic CSS3 Rotating Cube

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

    <ul class='cube'>
      <li class='face'>1</li>
      <li class='face'>2</li>
      <li class='face'>3</li>
      <li class='face'>4</li>
      <li class='face'>5</li>
      <li class='face'>6</li>
    </ul>
    
  • Make Links to Certain Points in an Audio Element with JS

    jQuery 2.1.4, HTML, CSS, JavaScript

    function playAudioAtPoint(audioId, position) {
        //console.log(audioId);
        //console.log(position);
        audioElement = document.getElementById(audioId);
        minutes_position = position.substr(0, position.indexOf ...
  • Get Browser Coords

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

    var viewport = document.createElement("meta");
    viewport.setAttribute('name', 'viewport');
    viewport.setAttribute('content', 'width=device-width, initial-scale=1');
    document.getElementsByTagName('head')[0 ...
  • Google Maps: Display InfoWindow on click

    With google maps API

    var triangleCoords = [{
      lat: 47.78945,
      lng: -121.29127
    }, {
      lat: 47.98469,
      lng: -121.13747
    }, {
      lat: 47.96998,
      lng: -120.67741 ...
  • CSS radiobuttons bigger 'n' stuff

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

    <h1>Custom Checkboxes</h1>
    <div class=".container">
      <div>
        <input id="box1" type="checkbox" class="with-font" />
        <label for="box1">Checkbox 1</label>
      </div>
      <div>
        <input id="box2" type="checkbox" class="with-font" />
        <label for="box2">Checkbox 2</label>
        <div>
          <div>
            <input id="box3" type="checkbox" class="with-font" />
            <label for="box3">Checkbox 3</label>
          </div>
        </div>
    
        <h1>Custom Radio Buttons</h1>
        <div class=".container">
          <div>
            <input id="question1" name="question" type="radio" class="with-font" value="sel" />
            <label for="question1">Radio 1</label>
          </div>
          <div>
            <input id="question2" name="question" type="radio" class="with-font" value="sel" />
            <label for="question2">Radio 2</label>
            <div>
              <div>
                <input id="question3" name="question" type="radio" class="with-font" value="sel" />
                <label for="question3">Radio 3</label>
              </div>
            </div>
    
  • Get Elevation with Given Angle and Distance

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

    // http://stackoverflow.com/a/4715311/1171790
    function getTanDeg(deg) {
      var rad = deg * Math.PI / 180;
      return Math.tan(rad)
    }
    
    /**
     * adjacent ...
  • Example JavaScript Module #10 is the latest revision

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

    var d = {};
    d.x = 5;
    
    (function (ex) {
        console.log(ex)
        var DEFAULTS = {
            say: 'hello', // default
            food: 'grindage'
        };
        return {
            speak: function ...
  • Attempt to learn OOJS

    lolzzzz..

    var Dog = function() {
        var name, breed;
    }
    
    var speak = function(saywhat) {
        console.log(saywhat);
    }
    
    // expand the speak method to the Dog ...
  • Learn Canvas

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

    window.onresize = function () {
        console.log(window.innerWidth)
        init.size.x = window.innerWidth;
        init.size.y = window.innerHeight;
        init.canvas.width ...