UnforeseenOcean/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Swipe Keyboard</title>
  <style>
    body {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .letter {
      padding: 10px;
      border: 1px solid slateblue;
      margin: 20px;
      line-height: 70px;
      background-color: aquamarine;
    }

    .letter.disabled {
      background-color: gray;
    }

    .letter:hover {
      background-color: slateblue;
    }

    .u1 {
      padding-left: 10px;
      padding-right: 10px;
    }

    .u6 {
      margin-left: 300px;
      /*yeah I'm not good at CSS*/
      padding-left: 60px;
      padding-right: 60px;
    }
  </style>
</head>

<body>
  <div id="container">
    <h1>Swipe keyboard!</h1>
    <p>Click and drag to type, no need to let go!</p>
    <p>(Actually, input will be cleared on mousedown)</p>
    <textarea disabled name="text" id="text" cols="30" rows="10">

    </textarea> <br>
  </div>

  <script>
    // You can modify your keyboard layout by changing this string
    let letters = Array.from("QWERTYUIOP\nASDFGHJKL<\nZXCVBNM,.!\n ");
    let container = document.getElementById('container');
    let write = false; // Keyboard enabled or not
    function toggleKeyboard() {
      let keys = document.getElementsByClassName("letter");
      keys = [].slice.call(keys);
      keys.forEach(letter => {
        letter.className = write ? letter.className.replace("disabled", "") : letter.className + " disabled";
      });
    }
    const startInput = (element) => {
      write = true;
      text.value = "";
      toggleKeyboard();
    };
    const endInput = () => {
      write = false;
      toggleKeyboard();
    };
    const addLetter = (element) => {
      let char = element.srcElement.innerHTML;
      if (write)
        if (char != "&lt;") // Ah yes this is the backspace key
          text.value = text.value + char;
        else
          text.value = text.value.substring(0, text.value.length - 1);
    }
    document.onmousedown = startInput;
    document.onmouseup = endInput;
    letters.forEach(letter => {
      if (letter === '\n') {
        container.appendChild(document.createElement('br')); //lmao
      } else {
        let node = document.createElement('span');
        node.className = "letter " + (letter == " " ? "u6" : "u1");
        node.onmouseenter = addLetter;
        node.appendChild(document.createTextNode(letter));
        container.appendChild(node);
      }
    });
    let text = document.getElementById('text');
  </script>
</body>

</html>

## yzpgpqz.markdown

      
    Raw
  

              yzpgpqz.markdown
            
          
    YzPgpqZ

A Pen by Torbjorn Lindholm on CodePen.
License.
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Swipe Keyboard</title>
	<style>
	body {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	.letter {
	padding: 10px;
	border: 1px solid slateblue;
	margin: 20px;
	line-height: 70px;
	background-color: aquamarine;
	}

	.letter.disabled {
	background-color: gray;
	}

	.letter:hover {
	background-color: slateblue;
	}

	.u1 {
	padding-left: 10px;
	padding-right: 10px;
	}

	.u6 {
	margin-left: 300px;
	/yeah I'm not good at CSS/
	padding-left: 60px;
	padding-right: 60px;
	}
	</style>
	</head>

	<body>
	<div id="container">
	<h1>Swipe keyboard!</h1>
	<p>Click and drag to type, no need to let go!</p>
	<p>(Actually, input will be cleared on mousedown)</p>
	<textarea disabled name="text" id="text" cols="30" rows="10">

	</textarea> <br>
	</div>

	<script>
	// You can modify your keyboard layout by changing this string
	let letters = Array.from("QWERTYUIOP\nASDFGHJKL<\nZXCVBNM,.!\n ");
	let container = document.getElementById('container');
	let write = false; // Keyboard enabled or not
	function toggleKeyboard() {
	let keys = document.getElementsByClassName("letter");
	keys = [].slice.call(keys);
	keys.forEach(letter => {
	letter.className = write ? letter.className.replace("disabled", "") : letter.className + " disabled";
	});
	}
	const startInput = (element) => {
	write = true;
	text.value = "";
	toggleKeyboard();
	};
	const endInput = () => {
	write = false;
	toggleKeyboard();
	};
	const addLetter = (element) => {
	let char = element.srcElement.innerHTML;
	if (write)
	if (char != "<") // Ah yes this is the backspace key
	text.value = text.value + char;
	else
	text.value = text.value.substring(0, text.value.length - 1);
	}
	document.onmousedown = startInput;
	document.onmouseup = endInput;
	letters.forEach(letter => {
	if (letter === '\n') {
	container.appendChild(document.createElement('br')); //lmao
	} else {
	let node = document.createElement('span');
	node.className = "letter " + (letter == " " ? "u6" : "u1");
	node.onmouseenter = addLetter;
	node.appendChild(document.createTextNode(letter));
	container.appendChild(node);
	}
	});
	let text = document.getElementById('text');
	</script>
	</body>

	</html>