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-left: 5%;
  11       text-align: center;
  12       }
  13     </style>
  14     <script type="text/javascript" src="string-lerp.js"></script>
  15     <script>
  16       function update () {
  17           var p = +document.getElementById("slider").value;
  18           var a = document.getElementById("a");
  19           var b = document.getElementById("b");
  20           var e = document.getElementById("text");
  21           e.textContent = stringLerp.lerp(a.value, b.value, p);
  22       }
  23     </script>
  24   </head>
  25   <body onload="update()">
  26     <div style="text-align: center; margin: 1em">
  27       Enter source and target text, and drag the slider to interpolate
  28       between the two.
  29     </div>
  30     <div style="width: 70%; margin: auto; column-spacing: 10%;">
  31       <input type="text" id="a" value="Do you like green eggs and ham?">
  32       <input type="text" id="b" value="I do not like them, Sam-I-am.">
  33     </div>
  34     <input id="slider" type="range" value=0.5 max=1.00 step=0.00390625
  35            oninput="update();"
  36            style="width: 80%; margin: 2em auto; display: block;">
  37     <div id="text" style="width: 75%; margin: auto; font-size: 2em; text-align: center">
  38     </div>
  39   </body>
  40 </html>