input[type=text] {
width: 40%;
display: table-cell;
- margin: 2.5%;
+ margin-left: 5%;
text-align: center;
}
</style>
<script type="text/javascript" src="string-lerp.js"></script>
<script>
- function update (p) {
+ function update () {
+ var p = +document.getElementById("slider").value;
var a = document.getElementById("a");
var b = document.getElementById("b");
var e = document.getElementById("text");
}
</script>
</head>
- <body onload="update(0.5)">
- <div style="width: 70%; margin: 3em auto; column-spacing: 10%;">
+ <body onload="update()">
+ <div style="text-align: center; margin: 1em">
+ Enter source and target text, and drag the slider to interpolate
+ between the two.
+ </div>
+ <div style="width: 70%; margin: auto; column-spacing: 10%;">
<input type="text" id="a" value="Do you like green eggs and ham?">
<input type="text" id="b" value="I do not like them, Sam-I-am.">
</div>
- <div id="text" style="font-size: 3em; text-align: center;"></div>
- <input type="range" value=0.5 max=1.00 step=0.00390625 oninput="update(this.value);"
- style="width: 80%; margin: 3em auto; display: block;">
+ <input id="slider" type="range" value=0.5 max=1.00 step=0.00390625
+ oninput="update();"
+ style="width: 80%; margin: 2em auto; display: block;">
+ <div id="text" style="width: 75%; margin: auto; font-size: 2em; text-align: center">
+ </div>
</body>
</html>
projects / string-lerp.git / commitdiff