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);