feat: form markup progress

nikhilkuyya · Dec 29, 2023 · ef5ad61 · ef5ad61
1 parent ceb69ea
commit ef5ad61
Show file tree

Hide file tree

Showing 5 changed files with 238 additions and 0 deletions.
diff --git a/apps/frontend-masters-bootcamp/src/lessons/forms/css/forms.css b/apps/frontend-masters-bootcamp/src/lessons/forms/css/forms.css
@@ -0,0 +1,37 @@
+html {
+	box-sizing: border-box;
+}
+
+*, *:before, *:after {
+	box-sizing: inherit;
+}
+
+body {
+	font-family: Arial, Helvetica, sans-serif;
+	margin: 0;
+	padding: 0;
+	background-image: url('../img/galaxy.jpg');
+	color: white;
+}
+
+.wrapper {
+	width: 80%;
+	margin: 0 auto;
+	padding: 1em;
+	display: flex;
+	flex-flow: row nowrap;
+}
+
+p {
+	margin-bottom: 0;
+	margin-top: 2rem;
+}
+
+section {
+	flex-basis: 57%;
+	margin-right: 10%;
+}
+
+aside {
+	flex-basis: 33%;
+}
diff --git a/apps/frontend-masters-bootcamp/src/lessons/forms/forms.html b/apps/frontend-masters-bootcamp/src/lessons/forms/forms.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<title>Alien Abduction Order Form</title>
+	<link href="css/forms.css" rel="stylesheet">
+	<script type="module" src="js/forms.js">
+	</script>
+</head>
+
+<body>
+	<div class="wrapper">
+		<section>
+			<h1>Alien Abduction Order Form</h1>
+			<p>Fill out the form below to place an order for an alien abduction by one of our fine UFOs.</p>
+			<form id="abduction-order-form" action="https://e3vwdl4bpd.execute-api.us-west-2.amazonaws.com/default/API2SES"
+				method="POST">
+				<input type="hidden" name="send_to" value="nikhilkuyya@gmail.com" />
+				<fieldset name="contact">
+					<legend>Your contact information</legend>
+					<label for="name">Your name <input type="text" id="name" name="name" /></label>
+					<label for="phone">Phone number <input type="tel" id="phone" name="phone" placeholder="include area code" />
+					</label>
+					<label for="email">Email
+						<input type="email" id="email" name="email" />
+					</label>
+				</fieldset>
+				<fieldset name="abduction">
+					<legend>About your abduction </legend>
+					<label for="requesteddate">Requested date
+						<input type="date" name="requestedDate" id="requesteddate" />
+					</label>
+					<label>How many people would you like abducted?
+						<input type="number" name="people" id="people" min="1" max="10" step="1" />
+					</label>
+
+					<fieldset>
+						<legend>What type of UFO do you prefer?</legend>
+						<label>
+							<input type="radio" name="ufoType" value="classic" />Classic oval UFO
+						</label>
+						<label>
+							<input type="radio" name="ufoType" value="start-wars" />Star Wars-style Imperial cruiser
+						</label>
+						<label>
+							<input type="radio" name="ufoType" value="battle-start" />
+							Battlestar Galactica-style Viper</label>
+
+						<label><input type="radio" name="ufoType" value="borg-style" /> Borg-style cube</label>
+
+					</fieldset>
+
+					<label for="experience">What type of abduction experience do you want?
+						<select id="experience" name="experience">
+							<option selected>select experience</option>
+							<option value="solar-system">Tour of the solar system</option>
+							<option value="alien-dinner">Alien dinner and discussion</option>
+							<option value="alien-dance">Alien dance lessons</option>
+							<option value="whale-watching">Whale watching</option>
+						</select>
+					</label>
+
+					<label for="requests">Special requests:
+						<textarea name="requests" id="requests"></textarea>
+					</label>
+
+					<label for="subscribe">
+						<input type="checkbox" name="subscribe" value="subscribe" checked id="subscribe" />Add me to your email list
+					</label>
+				</fieldset>
+				<button type="submit">submit</button>
+			</form>
+		</section>
+		<aside>
+			<h3>Our Location</h3>
+			<address>
+				Frontend Masters &middot;
+				60 South 6th Street &middot;
+				Suite 3625 &middot;
+				Minneapolis, MN 55402
+			</address>
+		</aside>
+	</div>
+</body>
+
+</html>
diff --git a/apps/frontend-masters-bootcamp/src/lessons/forms/img/galaxy.jpg b/apps/frontend-masters-bootcamp/src/lessons/forms/img/galaxy.jpg
diff --git a/apps/frontend-masters-bootcamp/src/lessons/forms/img/image credit.rtf b/apps/frontend-masters-bootcamp/src/lessons/forms/img/image credit.rtf
@@ -0,0 +1,10 @@
+{\rtf1\ansi\ansicpg1252\cocoartf1561\cocoasubrtf600
+{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+{\*\expandedcolortbl;;}
+\margl1440\margr1440\vieww10800\viewh8400\viewkind0
+\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardirnatural\partightenfactor0
+
+\f0\fs24 \cf0 https://images.nasa.gov/details-GSFC_20171208_Archive_e000056.html\
+\
+Photo caption: Galaxy cluster Abell 370 contains several hundred galaxies tied together by the mutual pull of gravity. Photographed in a combination of visible and near-infrared light, the brightest and largest galaxies are the yellow-white, massive, elliptical galaxies containing many hundreds of billions of stars each. Spiral galaxies have younger populations of stars and are bluish. Mysterious-looking arcs of blue light are distorted images of remote galaxies behind the cluster. The cluster acts as a huge lens in space that magnifies and stretches images of background galaxies like a funhouse mirror. Photo Credit: NASA, ESA, and J. Lotz and the HFF Team (STScI).}
diff --git a/apps/frontend-masters-bootcamp/src/lessons/forms/js/forms.js b/apps/frontend-masters-bootcamp/src/lessons/forms/js/forms.js
@@ -0,0 +1,104 @@
+var form = document.getElementsByTagName("form")[0];
+
+form.addEventListener("submit", function(e) {
+  console.log('hello')
+  console.log({ form: new FormData(e.target)});
+  e.preventDefault();
+  sendData(e);
+});
+
+// https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
+function sendData(e) {
+  var XHR = new XMLHttpRequest();
+  const formData = new FormData(e.target)
+  var urlEncodedDataPairs = Array.from(formData.entries()).map(d => d.join('='));
+
+  // urlEncodedDataPairs.push(
+  //   encodeURIComponent("name") +
+  //     "=" +
+  //     encodeURIComponent(form.querySelector("[name='name']").value)
+  // );
+  // urlEncodedDataPairs.push(
+  //   encodeURIComponent("send_to") +
+  //     "=" +
+  //     encodeURIComponent(form.querySelector("[name='send_to']").value)
+  // );
+  // urlEncodedDataPairs.push(
+  //   encodeURIComponent("email") +
+  //     "=" +
+  //     encodeURIComponent(form.querySelector("[name='email']").value)
+  // );
+  // urlEncodedDataPairs.push(
+  //   encodeURIComponent("phone") +
+  //     "=" +
+  //     encodeURIComponent(form.querySelector("[name='phone']").value)
+  // );
+  // urlEncodedDataPairs.push(
+  //   encodeURIComponent("date") +
+  //     "=" +
+  //     encodeURIComponent(form.querySelector("[name='date']").value)
+  // );
+  // urlEncodedDataPairs.push(
+  //   encodeURIComponent("qty") +
+  //     "=" +
+  //     encodeURIComponent(form.querySelector("[name='qty']").value)
+  // );
+
+  // // radio buttons
+  // let radio = document.getElementsByName("ufotype");
+  // for (var i = 0, length = radio.length; i < length; i++) {
+  //   if (radio[i].checked) {
+  //     urlEncodedDataPairs.push(
+  //       encodeURIComponent("ufotype") + "=" + encodeURIComponent(radio[i].value)
+  //     );
+  //   }
+  // }
+
+  // // dropdown menu
+  // var dropdown = form.querySelector("[name='abtype']");
+  // urlEncodedDataPairs.push(
+  //   encodeURIComponent("abtype") +
+  //     "=" +
+  //     encodeURIComponent(dropdown.options[dropdown.selectedIndex].text)
+  // );
+  // urlEncodedDataPairs.push(
+  //   encodeURIComponent("comments") +
+  //     "=" +
+  //     encodeURIComponent(form.querySelector("[name='comments']").value)
+  // );
+  // urlEncodedDataPairs.push(
+  //   encodeURIComponent("subscribe") +
+  //     "=" +
+  //     encodeURIComponent(form.querySelector("[name='subscribe']").checked)
+  // );
+
+  // Combine the pairs into a single string and replace all %-encoded spaces to
+  // the '+' character; matches the behaviour of browser form submissions.
+  const urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+");
+
+  // Define what happens on successful data submission
+  XHR.addEventListener("load", function(event) {
+    if (XHR.readyState === XHR.DONE) {
+      if (XHR.status === 200) {
+        alert("Your order has been received! Check your email.");
+      } else {
+        alert("Oh oh! We have a problem! " + XHR.responseText + ".");
+      }
+    }
+  });
+
+  // Define what happens in case of error
+  XHR.addEventListener("error", function(event) {
+    // This is normally a timeout or connection error.
+    alert("Oops! Something went wrong.");
+  });
+
+  // Set up our request
+  XHR.open(form.getAttribute("method"), form.getAttribute("action"));
+
+  // Add the required HTTP header for form data POST requests
+  XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+  // Finally, send our data.
+  XHR.send(urlEncodedData);
+}