<!DOCTYPE html>
<html>

  <head>
    <script data-require="knockout@3.0.0" data-semver="3.0.0" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <title>KnockoutJS Observables</title>
  </head>

  <body>
    <input type="text" data-bind="value:name,valueUpdate:'input'" placeholder="start typing a name here"/>
    Hello, <span data-bind="text:name"></span>
  </body>

</html>
function NameViewModel() {
  this.name = ko.observable('');
}

document.addEventListener('DOMContentLoaded', function() {
  ko.applyBindings(new NameViewModel());
});
/* Styles go here */