Skip to content
Web app boilerplate and helper functions
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
bower_components
src
README.md
app-icon-196.png
apple-touch-icon-precomposed.png
bower.json
favicon.ico
index.html

README.md

A launch pad for your web app

An abstraction of commonalities i've discovered in web apps i've built. Includes DDS, FatUI, and DOM-Builder via Bower.

Simple helper functions

  • Easily loop through any collection with h.each() and h.map()
  • Get element(s) by css selector with h.qs() and h.qsa()
  • Add and remove event listeners with h.on() and h.off()
var taskList = h.qs('#tasks');
h.each(h.qsa('li', taskList), function(li) {
    var checkbox = h.qs('input[type=checkbox]', li);
    h.on(checkbox, 'click', function taskComplete() {
        h.off(checkbox, 'click', taskComplete);
        taskList.removeChild(li);
    });
});

Complete localStorage + JSON wrapper

Easily store data in the form of an object, array, boolean, string, or number. The storage object has the following available methods:

  • get
  • set
  • has
  • remove
  • clear

Set data:

storage.set('taskListTitle', 'My ToDos');
storage.set('taskList', tasks);

And later (even after browser refresh), retrieve the data:

var taskListTitle = storage.get('taskListTitle');
var tasks = storage.get('taskList') || [];

Easily render data to the DOM with DOM-Builder

First create an element renderer:

function renderTask(task) {
    return DOM.buildNode({ el: 'li', kid: task.title });
}

Then you can use the renderer to render elements to the DOM. For example, when the user adds a new entry via a form we can use the prependAInB() function to put it at the top of our task list:

on(qs('#newTaskForm'), submit, function newEntryHandler(event) {
    event.preventDefault();
    var taskData = {this.title, done: false};
    h.prependAInB(renderTask(taskData), taskList);
    tasks.push(taskData);
    h.storage.set('taskList', tasks);
});

Or, you can use the renderMultiple() function to render multiple elements to the DOM efficiently in one go. For example, on page load:

h.renderMultiple(tasks, renderTask, taskList);
Something went wrong with that request. Please try again.