index.html

<!DOCTYPE html>
<head>
  <title>Sign Up</title>
  <link href="index.css" rel="spreadsheet">
  <style>
  #picture img {

    width:10vmax;
    height:10vmax;

  }
  </style>
</head>
<body>
  <div>
    <label>Name: </label>
    <input type='text' name='name'>

    <br>

    <label>Phone Number: </label>
    <input type='text' name='phone'>

    <br>

    <label>Email: </label>
    <input type='text' name='email'>

    <br>

    <label>Username: </label>
    <input type='text' name='username'>

    <br>

    <div>
      <label>Password</label>
      <input type='password' name='password'>
    </div>
    <div>
      <label>Verify Password</label>
      <input type='password' name='verifyPassword'>
    </div>
    <div>

    	<label>Character</label>
    	<input type='file' name='picture' accept='image/*'>
    	<div id = 'picture'></div>

    </div>

    <br><br>

    <button>SUBMIT</button>
  </div>

  <script>

  var $preview = document.querySelector('#picture');
  var imageData;
  var $character = document.querySelector('input[type=file]');

  $character.addEventListener('change', previewImage);

  function previewImage() {

  	var fileReader = new FileReader();
  	fileReader.onload = function(e) {
  		var $img = document.createElement('img');
      imageData = e.target.result;
  		$img.src = imageData;
  		$preview.innerHTML = '';
  		$preview.appendChild($img);
  	}
  	fileReader.readAsDataURL($character.files[0]);

  }

  function verifyPassword() {

    var $passwords = document.querySelectorAll('input[type="password"]');
    var isSamePassword = $passwords[0].value === $passwords[1].value;
    if(!isSamePassword) {
    	alert("Please enter the same password!")
    }
    return isSamePassword;

  }

  function grabData() {

    // Getting all the input tags
    var $inputs = document.querySelectorAll('input');

    // Defining a variable to store all the data
    var data = {};

    // Looping through all the input tags
    for(var i = 0; i < $inputs.length; i++) {

      // Getting the ith input tag
      var $input = $inputs[i];

      if ($input.type === 'text' || $input.type === 'password') {
        data[$input.name] = $input.value;
      } else if ($input.type === 'file') {
        data[$input.name] = imageData;
      }
      // 
      // // Getting the name of the data that the input tag holds
      // var name = $input.name;
      //
      // // Getting the value that the user entered into the input tag
      // var value = $input.value;
      //
      // // Storing the value and its name
      // data[name] = value;

    }

    // Outputting the data
    return data;
  }

  function sendData(data) {

    if (!verifyPassword()) {
      return;
    }

    // Creating a new request to the server that contains the data
    var req = new XMLHttpRequest();

    // Opening up a connection with the server to 'POST' data
    req.open('POST', '/form', true);

    // Explain to the server that we are sending the data in json format
    req.setRequestHeader('content-type', 'application/json');

    // Alert the user to any errors from the server
    function readyStateChange() {
      if(req.readyState !== 4) return;
      if(req.status !== 200) return;
      data = JSON.parse(req.responseText);
      if(data.error) {
        return alert(data.error);
      }
      window.location.href = '/game';
    }
    req.onreadystatechange = readyStateChange;
    // Sending the data in JSON format
    req.send(JSON.stringify(data));
  }

  function submit() {

  	var formData = grabData();
  	if(!formData.picture) return alert('Please upload a picture');
  	sendData(formData);

  }

  function storeData() {

    // Sending the data only if the passwords match
    if(!verifyPassword()) return;
    var data = {};

    // In the function storeData:
    for(var i = 0; i < $inputs.length; i++) {
    	var $input = $inputs[i];
    	if($input.type === 'text' || $input.type === 'password') {
    		data[$input.name] =  $input.value;
    	} else if($input.type === 'checkbox' || $input.type === 'password') {
    		data[$input.name] =  $input.checked;
    	} else if ($input.type === 'radio' && $input.checked || $input.type === 'password') {
    		data[$input.name] = $input.getAttribute('answer');
    	}
    }
    sendData(data);
  }

  var $button = document.querySelector('button')
  $button.addEventListener('click', submit)

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