Js Cheat Sheet

JavaScript Cheat Sheet

JAVASCRIPT DOC READY

$(document).ready(function () {
  futureRoaming.init();
});

GRID ALIGNMENT

var grid = {

    row: [],
    perRow: 0,
    height: 0,
    small: 668,
    medium: 1025,
    buffer: 14,

    $grid: $('.grid'),
    $tile: $('.grid .tile'),

    init: function () {
        grid.resize();

        var id;

        $(window).resize(function () {
            window.clearTimeout(id);
            id = window.setTimeout(grid.doneResizing, 5);
        });
    },

    doneResizing: function () {
        grid.$tile.find('.title-tagline').height('auto');
        grid.height = 0;
        grid.row = [];
        grid.resize();
    },

    resize: function () {
        if ($(window).outerWidth() < grid.small) {
            grid.$tile.find('.title-tagline').height('auto');
        } else {
            grid.$tile.each(function () {

                grid.row.push(this);

                var siblingCount = $(grid.row[grid.row.length - 1]).siblings().size();

                if (siblingCount === 0 || siblingCount < grid.row.length) {
                    grid.setHeight();
                    grid.height = 0;
                    grid.row = [];
                } else {
                    if ($(this).find('.title-tagline').height() > grid.height) {
                        grid.height = $(this).find('.title-tagline').height();
                    }
                }
            });

            if (grid.row.length) {
                grid.setHeight();
            }
        }
    },

    setHeight: function () {
        for (var i in grid.row) {
            if ($(grid.row[i]).siblings().size() > 0) {
                if ($(window).outerWidth() < grid.small) {
                    $(grid.row[i]).find('.title-tagline').height('inherit');
                } else if (($(window).outerWidth() < grid.medium) && (parseInt(i) === $(grid.row[i]).siblings().size()) && (($(grid.row[i]).siblings().size() - 1) % 2 !== 0)) {
                    $(grid.row[i]).find('.title-tagline').height('auto');
                } else {
                    $(grid.row[i]).find('.title-tagline').height(grid.height + grid.buffer);
                }
            } else {
                $(grid.row[i]).find('.title-tagline').height('auto');
            }
        }
    },
};

module.exports = {
    init: grid.init,
};

CHECK IF LOCAL STORAGE IS IN PRIVATE BROWSING MODE

checkStorageSupport: function () {
    var testKey = 'test';
    var storage = window.sessionStorage;

    try {
        storage.setItem(testKey, '1');
        storage.removeItem(testKey);
        return true;
    }

    catch (error) {
        return false;
    }
}

JS Find Active Element

document.activeElement

JAVSCRIPT BASIC OBJECT

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

AJAX

// example one

<!DOCTYPE html>
<html>
<body>

<div id="demo"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>

// example database

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

<script>
function showCustomer(str) {
  var xhttp;
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("txtHint").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.asp?q="+str, true);
  xhttp.send();
}
</script>

</body>
</html>

LOCAL STORAGE

localStorage.getItem();
localStorage.setItem();
localStorage.removeItem();

JAVASCRIPT PROMISES

Updating an AJAX call to use promises

// BEFORE ADDING THE PROMISE

var xhr = new XMLHttpRequest();
xhr.open('GET', '../data/employees.json');
xhr.onreadystatechange = handleResponse;
xhr.send();

function handleResponse() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    var employees = JSON.parse(xhr.responseText);
    addEmployeesToPage(employees)
  }
};

function generatListItems(employees)  {
    var statusHTML = '';
    for (var i=0; i<employees.length; i += 1) {
        if (employees[i].inoffice === true) {
            statusHTML += '<li class="in">';
        } else {
            statusHTML += '<li class="out">';
        }
        statusHTML += employees[i].name;
        statusHTML += '</li>';
    }

    return statusHTML;
}

function generateUnorderedList(listItems) {
    return '<ul class="bulleted">' + listItems +  '</ul>';
}

function addEmployeesToPage(employees) {
    document.getElementById('employeeList').innerHTML = generateUnorderedList(generatListItems(employees));
}

// AFTER ADDING THE PROMISE

function generatListItems(employees)  {
    var statusHTML = '';
    for (var i=0; i<employees.length; i += 1) {
        if (employees[i].inoffice === true) {
            statusHTML += '<li class="in">';
        } else {
            statusHTML += '<li class="out">';
        }
        statusHTML += employees[i].name;
        statusHTML += '</li>';
    }

    return statusHTML;
}

function generateUnorderedList(listItems) {
    return '<ul class="bulleted">' + listItems +  '</ul>';
}

function addEmployeesToPage(ul) {
    document.getElementById('employeeList').innerHTML = ul;
}

function getJSON(url) {
        return new Promise(function(resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.onreadystatechange = handleResponse;
            xhr.onerror = function(error) { reject(error); };
            xhr.send();

            function handleResponse() {
                if(this.readyState === this.DONE)
                    if(this.status === 200) {
                        resolve(JSON.parse(this.responseText));
                    } else {
                        reject(this.statusText);
                    }
            }
        });
}


var p = getJSON('../data/employees.json').then(generatListItems)
                                         .then(generateUnorderedList)
                                         .then(addEmployeesToPage).catch(function(e){
                                            console.log(e);
                                         });

JAVASCRIPT OBJECT BEFORE ES6

var futureRoaming = {
  themeUrl: $('meta[name=theme_url]').attr('content'),

  init: function () {
    $.ajax({
      url: futureRoaming.themeUrl + '/feature-modules/future-roaming-map/data/data.json',
      type: 'GET',
      dataType: 'json',
      success: function(data) {
        futureRoaming.createDomElement();
        futureRoaming.data = data;
        futureRoaming.loadMap();
        futureRoaming.handleForm();
        futureRoaming.handleChange();
      }
    });
  },

  setDropdownStyling: function(component, divId) {
      if (component.localeCompare("Select") != 0) {
        $(divId).css('opacity', '1');
        $(divId).css('text-decoration', 'none');
      } else {
        console.log("Arrived");
        $(divId).css('opacity', '0.8');
        $(divId).css('text-decoration', 'underline');
      }
  },

  handleChange: function() {
    futureRoaming.$form.change(function() {
      var year = $(this).find('#future-roaming-module-year').val();
      var age = $(this).find('#future-roaming-module-age').val();
      var season = $(this).find('#future-roaming-module-season').val();
      var reason = $(this).find('#future-roaming-module-reason').val();

      futureRoaming.setDropdownStyling(year, "#future-roaming-module-year");
      futureRoaming.setDropdownStyling(age, "#future-roaming-module-age");
      futureRoaming.setDropdownStyling(season, "#future-roaming-module-season");
      futureRoaming.setDropdownStyling(reason, "#future-roaming-module-reason");

      if (year.localeCompare("Select") != 0 && age.localeCompare("Select") != 0 && season.localeCompare("Select") != 0 && reason.localeCompare("Select") != 0) {
        futureRoaming.showResult(year,age,season,reason);
      } else {
        console.log("Not there");
      }

    });
  },

  handleForm: function () {
    futureRoaming.$form.submit(function (e) {
      e.preventDefault();
      var year = $(this).find('#future-roaming-module-year').val();
      var age = $(this).find('#future-roaming-module-age').val();
      var season = $(this).find('#future-roaming-module-season').val();
      var reason = $(this).find('#future-roaming-module-reason').val();

      futureRoaming.showResult(year,age,season,reason);

      return false;
    });
  },

  showResult: function(year,age,season,reason) {
    var result = futureRoaming.data[year][age][season][reason];

    // Update map
    if(futureRoaming.$mapCurrent) {
      futureRoaming.$mapCurrent.attr('class','jvectormap-region jvectormap-element');
    }
    if(result.country.code) {
      futureRoaming.$mapCurrent = futureRoaming.$map.find('path[data-code="' + result.country.code + '"]');
      futureRoaming.$mapCurrent.attr('class', 'jvectormap-region jvectormap-element active');
      futureRoaming.vectorMap.setFocus({
        region: result.country.code,
        animate: true
      });
    }

    // Update copy
    futureRoaming.$country.text(result.country.name);
    futureRoaming.$text.text(result.text);
  },

  loadMap: function () {
    $(futureRoaming.$map[0]).vectorMap({
      map: 'world_mill',
      zoomOnScroll: false
    });
    futureRoaming.vectorMap = futureRoaming.$map.vectorMap('get', 'mapObject');
  },

  createDomElement: function () {
    futureRoaming.$elem = $('<div/>').addClass('future-roaming-module').attr('id','future-roaming-module');

    futureRoaming.$form = $('<form/>').append(
      // futureRoaming.$elem = $('<div/>').addClass('future-roaming-module-year-div').attr('id','future-roaming-module-year-div');
      $('<div/>').addClass('future-roaming-module-year-div').attr('id','future-roaming-module-year-div').append(
        $('<div/>').addClass('year-div-label').attr('id','year-div-label').append(
          $('<label/>').attr('for','future-roaming-module-year-label').addClass('future-roaming-module-year-label').text('Year travelling')
        ),
        $('<div/>').addClass('year-div-option').attr('id','year-div-option').append(
          $('<select/>').attr('id','future-roaming-module-year').addClass('future-roaming-module-year').append(
            $('<option/>').text('Select'),
            $('<option/>').text('2017'),
            $('<option/>').text('2018'),
            $('<option/>').text('2019'),
            $('<option/>').text('2020')
          )
        )
      ),
      $('<div/>').addClass('future-roaming-module-age-div').attr('id','future-roaming-module-age-div').append(
        $('<div/>').addClass('age-div-label').attr('id','age-div-label').append(
          $('<label/>').attr('for','future-roaming-module-age-label').addClass('future-roaming-module-age-label').text('Age')
        ),
        $('<div/>').addClass('age-div-option').attr('id','age-div-option').append(
          $('<select/>').attr('id','future-roaming-module-age').addClass('future-roaming-module-age').append(
            $('<option/>').text('Select'),
            $('<option/>').text('18-29'),
            $('<option/>').text('30-45'),
            $('<option/>').text('45-60'),
            $('<option/>').text('60+')
          )
        )
      ),
      $('<div/>').addClass('future-roaming-module-season-div').attr('id','future-roaming-module-season-div').append(
        $('<div/>').addClass('season-div-label').attr('id','season-div-label').append(
            $('<label/>').attr('for','future-roaming-module-season-label').addClass('future-roaming-module-season-label').text('Season')
        ),
        $('<div/>').addClass('season-div-option').attr('id','season-div-option').append(
          $('<select/>').attr('id','future-roaming-module-season').addClass('future-roaming-module-season').append(
            $('<option/>').text('Select'),
            $('<option/>').text('Summer'),
            $('<option/>').text('Winter')
          )
        )
      ),
      $('<div/>').addClass('future-roaming-module-reason-div').attr('id','future-roaming-module-reason-div').append(
        $('<div/>').addClass('reason-div-label').attr('id','reason-div-label').append(
          $('<label/>').attr('for','future-roaming-module-reason-label').addClass('future-roaming-module-reason-label').text('Reason for travel')
        ),
        $('<div/>').addClass('reason-div-option').attr('id','reason-div-option').append(
          $('<select/>').attr('id','future-roaming-module-reason').addClass('future-roaming-module-reason').append(
            $('<option/>').text('Select'),
            $('<option/>').text('Culture Shock'),
            $('<option/>').text('Relaxation'),
            $('<option/>').text('Family Time'),
            $('<option/>').text('Exploration')
          )
        )
      )
    );

    futureRoaming.$map = $('<div/>').addClass('map');

    futureRoaming.$country = $('<div/>').addClass('country');

    futureRoaming.$text = $('<div/>').addClass('text');

    futureRoaming.$elem.append(futureRoaming.$form,futureRoaming.$map,futureRoaming.$country,futureRoaming.$text);
    $('.post-content .post-body p').first().after(futureRoaming.$elem);
  }
};

JavaScript Cheat Sheet

JAVASCRIPT DOC READY

GRID ALIGNMENT

CHECK IF LOCAL STORAGE IS IN PRIVATE BROWSING MODE

JS Find Active Element

JAVSCRIPT BASIC OBJECT

AJAX

LOCAL STORAGE

JAVASCRIPT PROMISES

JAVASCRIPT OBJECT BEFORE ES6

Repository

Sections

Related