prof3ssorSt3v3/formdata.html

## formdata.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Using FormData to ParseForms</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;600&display=swap"
      rel="stylesheet"
    />
    <style>
      html {
        font-size: 20px;
        font-family: 'Monserrat', sans-serif;
        line-height: 1.7;
      }
      h1 {
        font-weight: 300;
      }
      form {
        padding: 0 2rem;
        margin: 1rem 0;
        font-weight: 100;
      }
      .formBox {
        display: flex;
        flex-direction: row;
        margin: 1rem;
      }
      .formBox label {
        flex-basis: 20ch;
        text-align: end;
        padding-right: 2rem;
        padding-inline-end: 2rem;
        font-size: 0.8rem;
        font-weight: 100;
        color: #444;
      }
      .formBox input {
        flex-basis: auto;
        font-size: 1rem;
        font-weight: 100;
        color: #333;
        position: relative;
        padding: 0.25rem 1rem;
      }
      .formBox button {
        background-color: #4caf50;
        border: none;
        color: #fff;
        padding: 0.25rem 2rem;
        text-align: center;
        font-size: 1rem;
        font-weight: 100;
        flex-basis: auto;
        margin-left: 20ch;
        margin-inline-start: 20ch;
      }
      legend {
        margin: 0 4rem;
        padding: 0 1rem;
        color: #4caf50;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Using FormData to Parse Forms</h1>
    </header>
    <main>
      <form action="#" id="myForm">
        <fieldset>
          <legend>Registration</legend>
          <div class="formBox">
            <label for="first">First Name</label
            ><input
              type="text"
              id="first"
              name="first"
              autocomplete="off"
              autocapitalize="on"
            />
          </div>
          <div class="formBox">
            <label for="last">Last Name</label
            ><input
              type="text"
              id="last"
              name="last"
              required
              autocomplete="off"
              autocapitalize="on"
            />
          </div>
          <div class="formBox">
            <label for="email">Email</label
            ><input
              type="email"
              id="email"
              name="email"
              required
              autocomplete="off"
            />
          </div>
          <div class="formBox">
            <label for="pass">Password</label
            ><input
              type="password"
              id="pass"
              name="pass"
              required
              autocomplete="off"
            />
          </div>
          <div class="formBox">
            <label for="spam">I love spam</label
            ><input type="checkbox" id="spam" name="spam" checked />
          </div>
          <div class="formBox">
            <button id="btnSubmit">Send</button>
          </div>
        </fieldset>
      </form>
    </main>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        document
          .getElementById('myForm')
          .addEventListener('submit', handleForm);
      });

      function handleForm(ev) {
        ev.preventDefault(); //stop the page reloading
        //console.dir(ev.target);
        let myForm = ev.target;
        let fd = new FormData(myForm);

        //add more things that were not in the form
        fd.append('api-key', 'myApiKey');

        //look at all the contents
        for (let key of fd.keys()) {
          console.log(key, fd.get(key));
        }
        let json = convertFD2JSON(fd);

        //send the request with the formdata
        let url = 'http://localhost:3000/';
        let h = new Headers();
        h.append('Content-type', 'application/json');

        let req = new Request(url, {
          headers: h,
          body: json,
          method: 'POST',
        });
        //console.log(req);
        fetch(req)
          .then((res) => res.json())
          .then((data) => {
            console.log('Response from server');
            console.log(data);
          })
          .catch(console.warn);
      }

      function convertFD2JSON(formData) {
        let obj = {};
        for (let key of formData.keys()) {
          obj[key] = formData.get(key);
        }
        return JSON.stringify(obj);
      }
    </script>
  </body>
</html>

## server.js
const http = require('http');

const server = http.createServer(function (req, res) {
  req.on('data', function (data) {
    //handle data as it is received... for POST requests
  });
  req.on('end', function () {
    res.setHeader('Content-Type', 'application/json');
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.writeHead(200, 'OK');

    res.end('{ "data": "just a plain old json reply" }');
  });
});

server.listen(3000, (err) => {
  if (err) {
    console.log('bad things');
    return;
  }
  console.log('listening on port 3000');
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Using FormData to ParseForms</title>
	<link
	href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;600&display=swap"
	rel="stylesheet"
	/>
	<style>
	html {
	font-size: 20px;
	font-family: 'Monserrat', sans-serif;
	line-height: 1.7;
	}
	h1 {
	font-weight: 300;
	}
	form {
	padding: 0 2rem;
	margin: 1rem 0;
	font-weight: 100;
	}
	.formBox {
	display: flex;
	flex-direction: row;
	margin: 1rem;
	}
	.formBox label {
	flex-basis: 20ch;
	text-align: end;
	padding-right: 2rem;
	padding-inline-end: 2rem;
	font-size: 0.8rem;
	font-weight: 100;
	color: #444;
	}
	.formBox input {
	flex-basis: auto;
	font-size: 1rem;
	font-weight: 100;
	color: #333;
	position: relative;
	padding: 0.25rem 1rem;
	}
	.formBox button {
	background-color: #4caf50;
	border: none;
	color: #fff;
	padding: 0.25rem 2rem;
	text-align: center;
	font-size: 1rem;
	font-weight: 100;
	flex-basis: auto;
	margin-left: 20ch;
	margin-inline-start: 20ch;
	}
	legend {
	margin: 0 4rem;
	padding: 0 1rem;
	color: #4caf50;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Using FormData to Parse Forms</h1>
	</header>
	<main>
	<form action="#" id="myForm">
	<fieldset>
	<legend>Registration</legend>
	<div class="formBox">
	<label for="first">First Name</label
	><input
	type="text"
	id="first"
	name="first"
	autocomplete="off"
	autocapitalize="on"
	/>
	</div>
	<div class="formBox">
	<label for="last">Last Name</label
	><input
	type="text"
	id="last"
	name="last"
	required
	autocomplete="off"
	autocapitalize="on"
	/>
	</div>
	<div class="formBox">
	<label for="email">Email</label
	><input
	type="email"
	id="email"
	name="email"
	required
	autocomplete="off"
	/>
	</div>
	<div class="formBox">
	<label for="pass">Password</label
	><input
	type="password"
	id="pass"
	name="pass"
	required
	autocomplete="off"
	/>
	</div>
	<div class="formBox">
	<label for="spam">I love spam</label
	><input type="checkbox" id="spam" name="spam" checked />
	</div>
	<div class="formBox">
	<button id="btnSubmit">Send</button>
	</div>
	</fieldset>
	</form>
	</main>
	<script>
	document.addEventListener('DOMContentLoaded', () => {
	document
	.getElementById('myForm')
	.addEventListener('submit', handleForm);
	});

	function handleForm(ev) {
	ev.preventDefault(); //stop the page reloading
	//console.dir(ev.target);
	let myForm = ev.target;
	let fd = new FormData(myForm);

	//add more things that were not in the form
	fd.append('api-key', 'myApiKey');

	//look at all the contents
	for (let key of fd.keys()) {
	console.log(key, fd.get(key));
	}
	let json = convertFD2JSON(fd);

	//send the request with the formdata
	let url = 'http://localhost:3000/';
	let h = new Headers();
	h.append('Content-type', 'application/json');

	let req = new Request(url, {
	headers: h,
	body: json,
	method: 'POST',
	});
	//console.log(req);
	fetch(req)
	.then((res) => res.json())
	.then((data) => {
	console.log('Response from server');
	console.log(data);
	})
	.catch(console.warn);
	}

	function convertFD2JSON(formData) {
	let obj = {};
	for (let key of formData.keys()) {
	obj[key] = formData.get(key);
	}
	return JSON.stringify(obj);
	}
	</script>
	</body>
	</html>
	const http = require('http');

	const server = http.createServer(function (req, res) {
	req.on('data', function (data) {
	//handle data as it is received... for POST requests
	});
	req.on('end', function () {
	res.setHeader('Content-Type', 'application/json');
	res.setHeader('Access-Control-Allow-Origin', '*');
	res.writeHead(200, 'OK');

	res.end('{ "data": "just a plain old json reply" }');
	});
	});

	server.listen(3000, (err) => {
	if (err) {
	console.log('bad things');
	return;
	}
	console.log('listening on port 3000');
	});