demo.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>String Linear Interpolation Example</title>
   5     <meta charset="utf-8" />
   6     <style>
   7       input[type=text] {
   8       width: 40%;
   9       display: table-cell;
  10       margin: 2.5%;
  11       text-align: center;
  12       }
  13     </style>
  14     <script type="text/javascript" src="string-lerp.js"></script>
  15     <script>
  16       function update (p) {
  17           var a = document.getElementById("a");
  18           var b = document.getElementById("b");
  19           var e = document.getElementById("text");
  20           e.textContent = stringLerp.lerp(a.value, b.value, p);
  21       }
  22     </script>
  23   </head>
  24   <body onload="update(0.5)">
  25     <div style="width: 70%; margin: 3em auto; column-spacing: 10%;">
  26       <input type="text" id="a" value="Do you like green eggs and ham?">
  27       <input type="text" id="b" value="I do not like them, Sam-I-am.">
  28     </div>
  29     <div id="text" style="font-size: 3em; text-align: center;"></div>
  30     <input type="range" value=0.5 max=1.00 step=0.00390625 oninput="update(this.value);"
  31            style="width: 80%; margin: 3em auto; display: block;">
  32   </body>
  33 </html>