z------------- · August 29, 2015 14:04
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
    <head>
        <title>WDMNM?</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>WDMNM?</h1>
        </header>
        
        <div id="container">
            <form>
                <label>
                    Name <input type="text" placeholder="Jimmy" id="name">
                </label>
                <button>Go</button>
            </form>
            
            <output>
                <ul></ul>
            </output>
        </div>
        
        <script src="wdmnm.js"></script>
    </body>
 </html>
diff --git a/style.css b/style.css
 *, :before, :after {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
 }

 html, body {
    height: 100%;
    width: 100%;
    color: white;
 }

 body {
    background-color: cornflowerblue;
 }

 header {
    font-size: 30px;
    text-align: center;
 }
diff --git a/wdmnm.js b/wdmnm.js
 /* setup */
 var doc = document;

 HTMLElement.prototype.qs = document.qs = function(selector){
    return this.querySelector(selector);
 };

 String.prototype.subs = function(map) {
 	var str = this;
 	
 	var targets = Object.keys(map);
 	var i;
 	
 	for (i=0; i<targets.length; i++) {
 		while (str.indexOf("%" + targets[i] + "%") !== -1) {
 			str = str.split("%" + targets[i] + "%").join(map[targets[i]]);
 		}
 	}
 	
 	return str;
 };

 /* actual script */
 var form = doc.qs("#container form");
 var nameInput = doc.qs("#name");
 var goBtn = form.qs("button");
 var list = doc.qs("output ul");

 form.onsubmit = function(e) {
    e.preventDefault();
    
    getNameMeaning(nameInput.value);
 };

 function getNameMeaning(name) {
    var adjectives = {
        a: ["amusing", "awful", "awesome", "adorable", "angry"],
        b: ["beryllium", "big", "beautiful", "brave"],
        c: ["careful", "clever", "clumsy", "calm"],
        d: ["delightful", "dangerous", "dark", "decisive"],
        e: ["energetic", "egocentric", "elegant", "eager"],
        f: ["fabulous", "fancy", "fierce", "faithful", "funny"],
        g: ["glamorous", "gifted", "grumpy", "gentle"],
        h: ["handsome", "helpful", "happy", "handy"],
        i: ["intelligent", "idiotic", "ignorant", "impolite"],
        j: ["jealous", "jolly", "jazzy", "joyous"],
        k: ["kind", "kindhearted", "knowledgeable", "keen"],
        l: ["lazy", "lively", "loud", "lame"],
        m: ["majestic", "mysterious", "magical", "maniacal"],
        n: ["nervous", "nice", "noisy", "naive"],
        o: ["odd", "old-fashioned", "obnoxious", "observant"],
        p: ["powerful", "proud", "pathetic", "pointless"],
        q: ["quizzical", "questionable", "quick", "quiet"],
        r: ["repulsive", "round", "rabid", "resolute"],
        s: ["shy", "scary", "silly", "scrub"],
        t: ["thoughtless", "talented", "terrible", "tremendous"],
        u: ["uptight", "unfunny", "ugh", "unknown", "undefined"],
        v: ["victorious", "vague", "vulgar", "violent"],
        w: ["wrong", "warm", "witty", "wasteful"],
        x: ["xenophobic"],
        y: ["yellow?", "yielding"],
        z: ["zachary"]
    };
    
    var template = "<span>%letter%</span>%meaning%";
    
    var letters = name.split("");
    var meanings = new Array(letters.length);
    
    for (i=0; i<letters.length; i++) {
        var letter = letters[i].toLowerCase();
        var chosenMeaning = adjectives[letter][Math.round(Math.random()*(adjectives[letter].length-1))] || "";
        
        var li = doc.createElement("li");
        li.innerHTML = template.subs({
            letter: letter.toUpperCase(),
            meaning: chosenMeaning.substring(1)
        });
        list.appendChild(li);
    }
 }
	<!doctype html>
	<html>
	<head>
	<title>WDMNM?</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<header>
	<h1>WDMNM?</h1>
	</header>

	<div id="container">
	<form>
	<label>
	Name <input type="text" placeholder="Jimmy" id="name">
	</label>
	<button>Go</button>
	</form>

	<output>
	<ul></ul>
	</output>
	</div>

	<script src="wdmnm.js"></script>
	</body>
	</html>
	*, :before, :after {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	}

	html, body {
	height: 100%;
	width: 100%;
	color: white;
	}

	body {
	background-color: cornflowerblue;
	}

	header {
	font-size: 30px;
	text-align: center;
	}
	/* setup */
	var doc = document;

	HTMLElement.prototype.qs = document.qs = function(selector){
	return this.querySelector(selector);
	};

	String.prototype.subs = function(map) {
	var str = this;

	var targets = Object.keys(map);
	var i;

	for (i=0; i<targets.length; i++) {
	while (str.indexOf("%" + targets[i] + "%") !== -1) {
	str = str.split("%" + targets[i] + "%").join(map[targets[i]]);
	}
	}

	return str;
	};

	/* actual script */
	var form = doc.qs("#container form");
	var nameInput = doc.qs("#name");
	var goBtn = form.qs("button");
	var list = doc.qs("output ul");

	form.onsubmit = function(e) {
	e.preventDefault();

	getNameMeaning(nameInput.value);
	};

	function getNameMeaning(name) {
	var adjectives = {
	a: ["amusing", "awful", "awesome", "adorable", "angry"],
	b: ["beryllium", "big", "beautiful", "brave"],
	c: ["careful", "clever", "clumsy", "calm"],
	d: ["delightful", "dangerous", "dark", "decisive"],
	e: ["energetic", "egocentric", "elegant", "eager"],
	f: ["fabulous", "fancy", "fierce", "faithful", "funny"],
	g: ["glamorous", "gifted", "grumpy", "gentle"],
	h: ["handsome", "helpful", "happy", "handy"],
	i: ["intelligent", "idiotic", "ignorant", "impolite"],
	j: ["jealous", "jolly", "jazzy", "joyous"],
	k: ["kind", "kindhearted", "knowledgeable", "keen"],
	l: ["lazy", "lively", "loud", "lame"],
	m: ["majestic", "mysterious", "magical", "maniacal"],
	n: ["nervous", "nice", "noisy", "naive"],
	o: ["odd", "old-fashioned", "obnoxious", "observant"],
	p: ["powerful", "proud", "pathetic", "pointless"],
	q: ["quizzical", "questionable", "quick", "quiet"],
	r: ["repulsive", "round", "rabid", "resolute"],
	s: ["shy", "scary", "silly", "scrub"],
	t: ["thoughtless", "talented", "terrible", "tremendous"],
	u: ["uptight", "unfunny", "ugh", "unknown", "undefined"],
	v: ["victorious", "vague", "vulgar", "violent"],
	w: ["wrong", "warm", "witty", "wasteful"],
	x: ["xenophobic"],
	y: ["yellow?", "yielding"],
	z: ["zachary"]
	};

	var template = "<span>%letter%</span>%meaning%";

	var letters = name.split("");
	var meanings = new Array(letters.length);

	for (i=0; i<letters.length; i++) {
	var letter = letters[i].toLowerCase();
	var chosenMeaning = adjectives[letter][Math.round(Math.random()*(adjectives[letter].length-1))] \|\| "";

	var li = doc.createElement("li");
	li.innerHTML = template.subs({
	letter: letter.toUpperCase(),
	meaning: chosenMeaning.substring(1)
	});
	list.appendChild(li);
	}
	}