Oshawk/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <p>Encrypt:</p>
    <input id="text">
    <input id="key">
    <button id="button">Submit</button>
    <p id="output"></p>
    <hr>
    <p>Decrypt (not implemented):</p>
    <input id="dtext">
    <input id="dkey">
    <button id="dbutton">Submit</button>
    <p id="doutput"></p>
    <script src="script.js"></script>
  </body>
</html>

## script.js
document.getElementById('button').addEventListener('click', function() {
  text = document.getElementById('text').value
  key = parseInt(document.getElementById('key').value)

  var binText = ''
  text.split('').forEach(function(character) {
    binText += character.charCodeAt().toString(2).padStart(8, '0')
  })

  document.getElementById('output').innerHTML = xor(key, binText)
});

document.getElementById('dbutton').addEventListener('click', function() {
  binDtext = document.getElementById('dtext').value
  key = parseInt(document.getElementById('dkey').value)

  binText = xor(key, binDtext)
  document.getElementById('doutput').innerHTML = binText
});

function xor(key, binText) {
  looper = stringLooper(key.toString(2))

  final = ''
  binText.split('').forEach(function(bit) {
    if (looper.next().value == bit) {
      final += '0'
    } else {
      final += '1'
    }
  })

  return final
}

function* stringLooper(str) {
  var i = 0
  while (true) {
    yield str[i]
    i++
    if (i == str.length) {
      i = 0
    }
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<p>Encrypt:</p>
	<input id="text">
	<input id="key">
	<button id="button">Submit</button>
	<p id="output"></p>
	<hr>
	<p>Decrypt (not implemented):</p>
	<input id="dtext">
	<input id="dkey">
	<button id="dbutton">Submit</button>
	<p id="doutput"></p>
	<script src="script.js"></script>
	</body>
	</html>
	document.getElementById('button').addEventListener('click', function() {
	text = document.getElementById('text').value
	key = parseInt(document.getElementById('key').value)

	var binText = ''
	text.split('').forEach(function(character) {
	binText += character.charCodeAt().toString(2).padStart(8, '0')
	})

	document.getElementById('output').innerHTML = xor(key, binText)
	});

	document.getElementById('dbutton').addEventListener('click', function() {
	binDtext = document.getElementById('dtext').value
	key = parseInt(document.getElementById('dkey').value)

	binText = xor(key, binDtext)
	document.getElementById('doutput').innerHTML = binText
	});

	function xor(key, binText) {
	looper = stringLooper(key.toString(2))

	final = ''
	binText.split('').forEach(function(bit) {
	if (looper.next().value == bit) {
	final += '0'
	} else {
	final += '1'
	}
	})

	return final
	}

	function* stringLooper(str) {
	var i = 0
	while (true) {
	yield str[i]
	i++
	if (i == str.length) {
	i = 0
	}
	}
	}