Untitled

<!doctype html>
<html>
<head>


<meta name = "viewport"
content = "user-scalable = no, maximum-scale=1.0, initial-scale = 1.0, width = device-width, height = device-height">
   <script>
lt="qwertyuiopasdfghjklzxcvbnm          "
lt+="1234567890"
lt+="[]{}<>()?!"
lt+="+-*/='\":."
lt+="$&@'#%^~|•"
</script>
<style>
*{
  margin: 0;
  padding: 0
}

#t {
 font-size: 30px;
 overflow: hidden;
}

#t div {
 width: 700px;
}

#l, #r {
 opacity: .45;

}
.pannel {
  position: absolute;
  border: 1px solid orange;
}

.key{
 width:  9%;
  display:  block;
  float: left;
  height:    30px;
  font-size:  30px;
  border: 1px solid black;
   text-align: center;
   font-family: helvetica;
   text-transform: capitalize;
}


</style>
<script>
var w = screen.width
var h = screen.height
</script>

</head>
<body>

<div id=t class="pannel"></div>
<div id=l class="pannel board">
</div>
<div id=r class="pannel board" >
</div>

<script>
 var lines = [[]]
var line = lines[0];

var pos = 0
var ox = 0
var oy = 0


function redraw() {
  rows = []
 for (var  i = oy; i < lines.length;i++ ){
     line2 = lines[i]
    rows.push(line2.slice(ox, ox+80).join(""))
 }
rows = "<div>" + rows.join("</div><div>")
+  "</div>"

   t.innerHTML = rows
 }


keyboard = true
function keytype(that) {
 // e.preventDefault()
    var k = that.innerHTML
    if (k == "") {
       var keys =   clss("key")
       if (keyboard == true) {
            for (var i=0; i<keys.length;i++) {
             keys[i].style.display = "none"
            }
             that.style.display=""
             keyboard = false
            return;
       } else {

             for (var i=0;i<keys.length;i++) {
                 k[i].style.display =""
             }
        }
    }

    if (k == "") {
         line = []
         pos = 0
         lines.push(line)
        return
    }

     if (k == "") {
        pos = pos -1
        if (pos < 0) {

        }
         line.splice(pos,1)
          console. log("delete")
          redraw()
         return;
      }


    line.splice(pos,0,k)
    pos ++
    redraw()
   return false;

}
function gid(x) {
  return document.getElementById(x)
}

function clss(x) {
   var ts = document.
        getElementsByClassName(x);
    return ts;
}


t = gid("t")
l = gid("l")

document.body.width = w +"px"
t.style.height = "100%"
l.style.height = "100%"
l.style.width = "100%"
t.style.width = "100%"
l.style.left = 0;
t.style.left="0%"
l.style.top = 0
t. style.top= 0


lt = lt.split("")
h = []
for (var i in lt) {
     h .push( '<div class="key"' +
         'ontouchstart="keytype(this)">' +
           lt[i] + '</div> ')
}

l.innerHTML = h.join("")


</script>
</body>
</html>