y1n0/index.html

## index.html
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Contact manager</title>
    <style type="text/css">
		body {
			display: flex;
			height: 100vh;
			overflow-y: hidden;
			font-family: ubuntu, tahoma,sans-serif;
			font-size: small;
		}

		#container {
			margin: auto;
			padding: 5px;
			box-sizing: border-box;
			width: 500px;
			height: 300px;
			display: flex;
			flex-direction: column-reverse;
			background: lightgrey;
			overflow: auto;
		}

		#log {
			order: 2;
		}

		#input {
			order: 1;
			width: 460px;
			border: none;
			border-top: 2px solid black;
			outline: none;
			background: inherit;
			font-family: inherit;
		}

		p {
			margin: 5px 0px;
		}
	</style>
</head>

<body>
    <div id='container'>
	    <div id="log">
	    	<p>Welcome to Contacts Manager!</p>
	    	<p><b>h</b>: Print this menu<br/><b>1</b>: List all contacts.<br/><b>2</b>: Add a contact<br/><b>3:</b> About<br/><b>0</b>: Quit</p>
	    </div>
	    <form id='form'><label>&gt; <input type="text" id="input" autocomplete="off" autofocus /></label></form>
    </div>
    <script src="js.js"></script>
</body>

</html>

## js.js
/*
Activity: Contact manager
*/

var contact = {first: '', last: ''};
var contactsList = [{first: 'John', last: 'Smith'},
				{first: 'Jane', last: 'Doe'}];

// log output
function write(t) {
    var log = document.getElementById("log");
    var inner = log.innerHTML;
    log.innerHTML = inner+"<p>"+t+"</p>";
}

// get input
function getInput(){
	var input = document.getElementById('input').value;
	if (input === '')
		return;
	document.getElementById('input').value = '';
	write('> '+input);
	return input;
}

// add contact
function addContact(e) {
	e.preventDefault();
	var input = getInput();
	var nameCap = input[0].toUpperCase()+input.slice(1);
	if (!contact.first) {
		contact.first = nameCap;
		write('enter last name');
		return;
	} else {
		contact.last = nameCap;
	}
	contactsList.push(contact);
	write('Added!')
	contact = {first: '', last: ''};
	onsubmit = home;
}

// list contacts
function showContacts() {
	write("here's the list of your contacts:");
	for (var x = 0; x < contactsList.length; x++) {
		write("<b>#"+x+"</b> Last name: "+contactsList[x].last+", first name: "+contactsList[x].first);
	}
}

// quit
function quit() {

	var div = document.getElementById("container");
	div.innerHTML = "RELOAD TO RUN AGAIN";
	div.style.textAlign = "center";
}

// manage the "home" interface
function home(e){
	e.preventDefault(); // prevent the page to reload when submit form
	var input = getInput();
	switch (input) {
		case "h":
		case "H":
		case "help":
			write('<b>h</b>: Print this menu<br/><b>1</b>: List all contacts.<br/><b>2</b>: Add a contact<br/><b>0</b>: Quit');
			break;

		case "1":
		case "l":
		case "list":
			showContacts();
			break;

		case "2":
		case "add":
			write('enter first name');
			onsubmit = addContact; 	// change the form submit handler to addContact cuz the input
									// is (multiple) contact entry. Not an option from the home menu.
			break;

		case "0":
		case "q":
		case "quit":
			write('See you soon!');
			setTimeout(quit, 3000);
			break;

		case "3":
		    write("wrote by Ader (github.com/y1n0)");
		    break;

		default:
			write('Please select one of the options above.');
			break;
	}
};

// put the form submit handler to home manager
var onsubmit = document.getElementById('form').onsubmit;
onsubmit = home;

// prevent focus lose for input field
document.getElementById("input").onblur = function(){
	this.focus();
};
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Contact manager</title>
	<style type="text/css">
	body {
	display: flex;
	height: 100vh;
	overflow-y: hidden;
	font-family: ubuntu, tahoma,sans-serif;
	font-size: small;
	}

	#container {
	margin: auto;
	padding: 5px;
	box-sizing: border-box;
	width: 500px;
	height: 300px;
	display: flex;
	flex-direction: column-reverse;
	background: lightgrey;
	overflow: auto;
	}

	#log {
	order: 2;
	}

	#input {
	order: 1;
	width: 460px;
	border: none;
	border-top: 2px solid black;
	outline: none;
	background: inherit;
	font-family: inherit;
	}

	p {
	margin: 5px 0px;
	}
	</style>
	</head>

	<body>
	<div id='container'>
	<div id="log">
	<p>Welcome to Contacts Manager!</p>
	<p><b>h</b>: Print this menu<br/><b>1</b>: List all contacts.<br/><b>2</b>: Add a contact<br/><b>3:</b> About<br/><b>0</b>: Quit</p>
	</div>
	<form id='form'><label>> <input type="text" id="input" autocomplete="off" autofocus /></label></form>
	</div>
	<script src="js.js"></script>
	</body>

	</html>
	/*
	Activity: Contact manager
	*/

	var contact = {first: '', last: ''};
	var contactsList = [{first: 'John', last: 'Smith'},
	{first: 'Jane', last: 'Doe'}];

	// log output
	function write(t) {
	var log = document.getElementById("log");
	var inner = log.innerHTML;
	log.innerHTML = inner+"<p>"+t+"</p>";
	}

	// get input
	function getInput(){
	var input = document.getElementById('input').value;
	if (input === '')
	return;
	document.getElementById('input').value = '';
	write('> '+input);
	return input;
	}

	// add contact
	function addContact(e) {
	e.preventDefault();
	var input = getInput();
	var nameCap = input[0].toUpperCase()+input.slice(1);
	if (!contact.first) {
	contact.first = nameCap;
	write('enter last name');
	return;
	} else {
	contact.last = nameCap;
	}
	contactsList.push(contact);
	write('Added!')
	contact = {first: '', last: ''};
	onsubmit = home;
	}

	// list contacts
	function showContacts() {
	write("here's the list of your contacts:");
	for (var x = 0; x < contactsList.length; x++) {
	write("<b>#"+x+"</b> Last name: "+contactsList[x].last+", first name: "+contactsList[x].first);
	}
	}

	// quit
	function quit() {

	var div = document.getElementById("container");
	div.innerHTML = "RELOAD TO RUN AGAIN";
	div.style.textAlign = "center";
	}

	// manage the "home" interface
	function home(e){
	e.preventDefault(); // prevent the page to reload when submit form
	var input = getInput();
	switch (input) {
	case "h":
	case "H":
	case "help":
	write('<b>h</b>: Print this menu<br/><b>1</b>: List all contacts.<br/><b>2</b>: Add a contact<br/><b>0</b>: Quit');
	break;

	case "1":
	case "l":
	case "list":
	showContacts();
	break;

	case "2":
	case "add":
	write('enter first name');
	onsubmit = addContact; // change the form submit handler to addContact cuz the input
	// is (multiple) contact entry. Not an option from the home menu.
	break;

	case "0":
	case "q":
	case "quit":
	write('See you soon!');
	setTimeout(quit, 3000);
	break;

	case "3":
	write("wrote by Ader (github.com/y1n0)");
	break;

	default:
	write('Please select one of the options above.');
	break;
	}
	};

	// put the form submit handler to home manager
	var onsubmit = document.getElementById('form').onsubmit;
	onsubmit = home;

	// prevent focus lose for input field
	document.getElementById("input").onblur = function(){
	this.focus();
	};