Instantly share code, notes, and snippets.

View 03_ugly_form_result.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="theme-color" content="#ffffff">
<title>My beautiful form</title>
<!-- MDL references -->
View 03_ugly_form_buttons.js
function materializeButtons() {
document.querySelectorAll('button').forEach(function(control) {
control.classList.add('mdl-button', 'mdl-js-button', 'mdl-button--raised', 'mdl-js-ripple-effect', 'mdl-button--colored');
});
}
function materializeControls() {
materializeTextInputs();
materializeSelects();
materializeRadioButtons();
View 03_ugly_form_lists.js
function materializeLists() {
document.querySelectorAll('ul').forEach(function(ulEl) {
ulEl.classList.add('mdl-list');
ulEl.querySelectorAll('li').forEach(function(liEl) {
liEl.classList.add('mdl-list__item');
liEl.innerHTML = "<span class='mdl-list__item-primary-content'>" +
"<i class='material-icons mdl-list__item-icon'>home</i>" +
liEl.innerText + "</span>";
});
});
View 03_ugly_form_tables.js
function materializeTables() {
document.querySelectorAll('table').forEach(function(table) {
table.classList.add('mdl-data-table', 'mdl-js-data-table');
table.querySelectorAll('th,td').forEach(function(cell) {
cell.classList.add('mdl-data-table__cell--non-numeric');
});
});
}
function materializeControls() {
View 03_ugly_form_checkbox.js
function materializeCheckboxes() {
var parentEl;
document.querySelectorAll('input[type="checkbox"]').forEach(function(control) {
parentEl = control.parentElement;
control.classList.add('mdl-checkbox__input');
if (parentEl.tagName == "LABEL") {
parentEl.setAttribute('for', control.id || control.name)
parentEl.classList.add('mdl-checkbox', 'mdl-js-checkbox', 'mdl-js-ripple-effect');
}
});
View 03_ugly_form_radio.js
function materializeRadioButtons() {
var parentEl;
document.querySelectorAll('input[type="radio"]').forEach(function(control) {
parentEl = control.parentElement;
control.classList.add('mdl-radio__button');
if (parentEl.tagName == "LABEL") {
parentEl.setAttribute('for', control.id || control.name)
parentEl.classList.add('mdl-radio', 'mdl-js-radio', 'mdl-js-ripple-effect');
}
});
View 03_ugly_form_selects.js
function materializeSelects() {
var label, parentEl;
document.querySelectorAll('select').forEach(function(control) {
parentEl = control.parentElement;
control.classList.add('mdl-selectfield__select');
if (parentEl.tagName !== 'DIV') {
return;
}
parentEl.classList.add('mdl-selectfield', 'mdl-js-selectfield');
label = parentEl.querySelector('label');
View 03_ugly_form_text_inputs.js
<script type="application/javascript">
window.onload = function() {
materializeControls();
}
function materializeControls() {
materializeTextInputs();
}
function materializeTextInputs() {
View 03_ugly_form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="theme-color" content="#ffffff">
<title>My ugly form</title>
<style>
View 02_avenger_after.js
class Avenger {
// Initialization and constructor
isMale: function() {
return this.sex ==M”;
}
canFly: function() {
return this.canFly;
}