grawk/kraken-nemo-moq.html

## kraken-nemo-moq.html
<html>
    <head>
        <title>Login, add card, add bank account</title>
        <style>
        .visible {
        display:block;
        }
        .hidden {
        display:none;
        }

        .bad {
            color:red;
        }
        .good {
            color:green;
        }
        </style>
    </head>
    <body>
        <div style="font-weight: bold; padding: 5px" id="result"></div>
        <div id="nav" class="hidden">
            <a id="addcclink" href="#">Add Card</a> | <a id="addbalink" href="#">Add Bank</a> | <a id="logoutlink" href="/">Logout</a>
        </div>
        <form id="loginform" class="visible">
            <fieldset><legend>Login</legend>
            <p>
            <label for="email">Email Address</label>
            <input type="text" name="email" id="email" value=""/>
            </p>
            <p>
            <label for="password">Password</label>
            <input type="password" name="password" id="password" value=""/>
            </p>
            <p>
            <input type="button" id="loginbutton" value="Login"/>
            </p>
        </fieldset>
    </form>
    <form id="addccform" class="hidden">
        <fieldset><legend>Add Card</legend>
        <p><label for="cc">Credit Card #</label>
        <input type="text" name="cc" id="cc" value=""/>
        </p>
        <p><label for="type">Type</label>
        <select name="type" id="type">
            <option>Select One</option>
            <option>Misa</option>
            <option>Vaster Card</option>
        </select>
        </p>
        <p>
        <input type="button" id="ccbutton" value="Add Card"/>
        </p>
    </fieldset>
</form>
<form id="addbaform" class="hidden">
        <fieldset><legend>Add Bank Account</legend>
        <p><label for="ban">Bank Account #</label>
        <input type="text" name="ban" id="ban" value=""/>
        </p>
        <p><label for="brn">Routing #</label>
        <input type="text" name="brn" id="brn" value=""/>
        </p>
        <p>
        <input type="button" id="babutton" value="Add Bank Account"/>
        </p>
    </fieldset>
</form>
<script>
document.body.onload = function() {
    var bt = document.querySelectorAll('#ccbutton');
    var lbt = document.querySelectorAll('#loginbutton');
    var bbt = document.querySelectorAll('#babutton');
    var linkaddcc = document.querySelectorAll('#addcclink')[0];
    var linkaddba = document.querySelectorAll('#addbalink')[0];
    var loginform = document.querySelectorAll('#loginform')[0];
    var ccform = document.querySelectorAll('#addccform')[0];
    var baform = document.querySelectorAll('#addbaform')[0];
    var navi = document.querySelectorAll('#nav')[0];
    var ccn;
    var em;
    var result = document.querySelectorAll('#result');
    bt[0].addEventListener('click', function() {
        ccn = document.querySelectorAll('#cc')[0].value;
        console.log("ccn is", ccn);
        result[0].innerHTML = "Please wait";
        setTimeout(function() {
            result[0].innerHTML = (ccn === "1001001") ? "<p class='result bad'>Unable to add your card</p>" : "<p class='result good'>Successfully added your card</p>";
        }, 4000);
    });
    bbt[0].addEventListener('click', function() {
        result[0].innerHTML = "Please wait";
        setTimeout(function() {
            result[0].innerHTML = "<p class='result good'>Successfully added your bank account</p>";
        }, 4000);
    });
    lbt[0].addEventListener('click', function() {
        em = document.querySelectorAll('#email')[0].value;
        console.log("email is", em);
        result[0].innerHTML = "Please wait";
        setTimeout(function() {
            if (em === "fail@fail.com") {
                result[0].innerHTML = "<p class='result bad'>Unable to login</p>";
            } else {
                result[0].innerHTML = "<p class='result good'>Logged in as " + em + "</p>";
                loginform.setAttribute('class', 'hidden');
                ccform.setAttribute('class', 'visible');
                navi.setAttribute('class', 'visible');
            }
        }, 4000);
    });
    linkaddcc.addEventListener('click', function() {
        result[0].innerHTML = "Please wait";
        setTimeout(function() {
            result[0].innerHTML = "";
            ccform.setAttribute('class', 'visible');
            baform.setAttribute('class', 'hidden');
        }, 2000);
    });
    linkaddba.addEventListener('click', function() {
        result[0].innerHTML = "Please wait";
        setTimeout(function() {
            result[0].innerHTML = "";
            ccform.setAttribute('class', 'hidden');
            baform.setAttribute('class', 'visible');
        }, 2000);
    });
}
</script>
</body>
</html>
	<html>
	<head>
	<title>Login, add card, add bank account</title>
	<style>
	.visible {
	display:block;
	}
	.hidden {
	display:none;
	}

	.bad {
	color:red;
	}
	.good {
	color:green;
	}
	</style>
	</head>
	<body>
	<div style="font-weight: bold; padding: 5px" id="result"></div>
	<div id="nav" class="hidden">
	<a id="addcclink" href="#">Add Card</a> \| <a id="addbalink" href="#">Add Bank</a> \| <a id="logoutlink" href="/">Logout</a>
	</div>
	<form id="loginform" class="visible">
	<fieldset><legend>Login</legend>
	<p>
	<label for="email">Email Address</label>
	<input type="text" name="email" id="email" value=""/>
	</p>
	<p>
	<label for="password">Password</label>
	<input type="password" name="password" id="password" value=""/>
	</p>
	<p>
	<input type="button" id="loginbutton" value="Login"/>
	</p>
	</fieldset>
	</form>
	<form id="addccform" class="hidden">
	<fieldset><legend>Add Card</legend>
	<p><label for="cc">Credit Card #</label>
	<input type="text" name="cc" id="cc" value=""/>
	</p>
	<p><label for="type">Type</label>
	<select name="type" id="type">
	<option>Select One</option>
	<option>Misa</option>
	<option>Vaster Card</option>
	</select>
	</p>
	<p>
	<input type="button" id="ccbutton" value="Add Card"/>
	</p>
	</fieldset>
	</form>
	<form id="addbaform" class="hidden">
	<fieldset><legend>Add Bank Account</legend>
	<p><label for="ban">Bank Account #</label>
	<input type="text" name="ban" id="ban" value=""/>
	</p>
	<p><label for="brn">Routing #</label>
	<input type="text" name="brn" id="brn" value=""/>
	</p>
	<p>
	<input type="button" id="babutton" value="Add Bank Account"/>
	</p>
	</fieldset>
	</form>
	<script>
	document.body.onload = function() {
	var bt = document.querySelectorAll('#ccbutton');
	var lbt = document.querySelectorAll('#loginbutton');
	var bbt = document.querySelectorAll('#babutton');
	var linkaddcc = document.querySelectorAll('#addcclink')[0];
	var linkaddba = document.querySelectorAll('#addbalink')[0];
	var loginform = document.querySelectorAll('#loginform')[0];
	var ccform = document.querySelectorAll('#addccform')[0];
	var baform = document.querySelectorAll('#addbaform')[0];
	var navi = document.querySelectorAll('#nav')[0];
	var ccn;
	var em;
	var result = document.querySelectorAll('#result');
	bt[0].addEventListener('click', function() {
	ccn = document.querySelectorAll('#cc')[0].value;
	console.log("ccn is", ccn);
	result[0].innerHTML = "Please wait";
	setTimeout(function() {
	result[0].innerHTML = (ccn === "1001001") ? "<p class='result bad'>Unable to add your card</p>" : "<p class='result good'>Successfully added your card</p>";
	}, 4000);
	});
	bbt[0].addEventListener('click', function() {
	result[0].innerHTML = "Please wait";
	setTimeout(function() {
	result[0].innerHTML = "<p class='result good'>Successfully added your bank account</p>";
	}, 4000);
	});
	lbt[0].addEventListener('click', function() {
	em = document.querySelectorAll('#email')[0].value;
	console.log("email is", em);
	result[0].innerHTML = "Please wait";
	setTimeout(function() {
	if (em === "fail@fail.com") {
	result[0].innerHTML = "<p class='result bad'>Unable to login</p>";
	} else {
	result[0].innerHTML = "<p class='result good'>Logged in as " + em + "</p>";
	loginform.setAttribute('class', 'hidden');
	ccform.setAttribute('class', 'visible');
	navi.setAttribute('class', 'visible');
	}
	}, 4000);
	});
	linkaddcc.addEventListener('click', function() {
	result[0].innerHTML = "Please wait";
	setTimeout(function() {
	result[0].innerHTML = "";
	ccform.setAttribute('class', 'visible');
	baform.setAttribute('class', 'hidden');
	}, 2000);
	});
	linkaddba.addEventListener('click', function() {
	result[0].innerHTML = "Please wait";
	setTimeout(function() {
	result[0].innerHTML = "";
	ccform.setAttribute('class', 'hidden');
	baform.setAttribute('class', 'visible');
	}, 2000);
	});
	}
	</script>
	</body>
	</html>