<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link href="css/styles.css" rel="stylesheet">
<script type="text/javascript" src="js/hello-world.js"></script>
<!-- viewport tag for responsive web design (RWD) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id="fields">
<input id="helloWorldField" name="helloWorldField" type="text" readonly disabled/>
<input id="helloUniverseField" name="helloUniverseField" type="text" readonly disabled/>
<div class="buttonBar">
<button id="helloWorldButton" type="button">Hello World</button>
<button id="helloUniverseButton" type="button">Hello Universe</button>
<button id="clearButton" type="button">Clear</button>
<button id="hilightButton" type="button">Hilight</button>
</div>
</form>
</body>
</html>
//hello-world.js // --------------------------------------------------------------------- // Entry Point //"buildController" must be implemented in controller subclass file /** when document is ready (opened) we'll do some initization */ document.onreadystatechange = function () { if (document.readyState === 'complete') hookUpEvents(); } // --------------------------------------------------------------------- // Initialization //Hook events up to handler functions function hookUpEvents() { //event name, handler name getElem('helloWorldButton').addEventListener('click', clickedHelloWorld, false); getElem('helloUniverseButton').addEventListener('click', clickedHelloUniverse, false); getElem('clearButton').addEventListener('click', clickedClear, false); getElem('hilightButton').addEventListener('click', clickedHilight, false); } // --------------------------------------------------------------------- // Event Handlers function clickedHelloWorld() { getElem('helloWorldField').value = 'Hello World! I hope you are fine?'; } function clickedHelloUniverse() { getElem('helloUniverseField').value = 'Hello Universe! You are big!'; } function clickedClear() { getElem('helloWorldField').value = ''; getElem('helloUniverseField').value = ''; getElem('helloWorldField').classList.remove('hilight') getElem('helloUniverseField').classList.remove('hilight') } function clickedHilight() { getElem('helloWorldField').classList.add('hilight') getElem('helloUniverseField').classList.add('hilight') } // --------------------------------------------------------------------- // Helpers /** Returns element named <nm> */ function getElem(nm) { //Return field named 'nm' return document.getElementById(nm); }
form {
display: flex;
flex-direction: column;
padding: 1em;
background: #f9f9f9;
border: 1px solid #c1c1c1;
margin: 2rem auto 0 auto;
max-width: 600px;
padding: 1em;
}
form input {
margin: 15px;
}
form > div.buttonBar {
display: inline-flex;
padding: 2px;
flex-direction: row;
/* this centers the button bar */
margin: 0 auto;
}
form button {
background: lightgrey;
color: #347B98;
padding: 10px;
margin: 0px 10px 0px 2px;
border-radius: 12px;
outline: 0;
border: 2px solid #347B98;
width: 100%;
}
form button:hover {
background-color: #73AC2E;
}
form button:active, form button:focus {
background-color: #D4F7D4;
transform: translateY(4px);
}
.hilight {
background-color: yellow;
}