blah blah

www
Idarayo · Apr 1, 2024 · bc10280 · bc10280
1 parent 9f4c0e3
commit bc10280
Show file tree

Hide file tree

Showing 5 changed files with 284 additions and 0 deletions.
diff --git a/css/forms.css b/css/forms.css
@@ -0,0 +1,86 @@
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+body {
+	background-image: url(../img/galaxy.jpg);
+	font-family: Arial, Helvetica, sans-serif;
+	margin: 0;
+	padding: 0;
+}
+.wrapper {
+	width: 80%;
+	margin: 0 auto;
+	padding: 1em;
+	display: flex;
+	flex-flow: row nowrap;
+	background-color:orange;
+}
+p, [for="abtype"], [for="select"] {
+	margin-bottom: 0.3rem;
+	margin-top: 2rem;
+}
+section {
+	flex-basis: 57%;
+	margin-right: 10%;
+}
+aside {
+	flex-basis: 33%;
+}
+fieldset {
+	border: 1px solid black;
+	border-radius: 10px;
+	margin-bottom: 2rem;
+}
+legend {
+	font-weight: bold;
+	font-size: 1.3rem;
+	margin-top: 1.5rem;
+	margin-bottom: 1rem;
+}
+label {
+	display:block;
+	padding-bottom: 0.3rem;
+}
+textarea {
+	height: 10rem;
+	padding: 1rem;
+}
+select {
+	font-size: 1rem;
+}
+button {
+	font-size:1rem;
+	margin:2rem 0;
+    background-color:blue;
+	color:white;
+	border-radius: 10px;
+	border:none;
+	padding:0.5rem 1rem;
+}
+button:hover {
+	background-color: white;
+	color:red;
+}
+input:not([type="radio"]):not([type="checkbox"]), textarea,select {
+	display:block;
+	margin-bottom: 2rem;
+	width:20rem;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 1rem;
+	padding: 0 1rem;
+	border: none;
+	border-radius: 10px;
+}
+
+
+
+
+
+
+
+
+
+
diff --git a/forms.html b/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">
+</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
+			action="https://e3vwdl4bpd.execute-api.us-west-2.amazonaws.com/default/API2SES" method="POST">
+			<input type="hidden" name="send_to" value="umehsophia2@gmail.com">
+				<fieldset>
+			<legend>Your contact information</legend>
+			<label for="blah">Your name </label>
+				<input type="text" id="blah" name="name">
+
+			<label for="yes">Phone number</label>
+			<input type="tel" id="yes" name="phone" placeholder="Start with your country code">
+
+			<label for="boom">Email</label>
+			<input type="text" id="boom" name="email">
+			</fieldset>
+
+			<fieldset>
+
+			<legend>About your abduction </legend>
+			<label for="blur">Requested  date</label>
+			<input type="date" id="blur" name="date">
+			<label for="soup">How many people would you like abducted?</label>
+			<input type="number" id="soup" name="qty" min="1" max="10">
+
+			<p>What type of UFO do you prefer?</p>
+			<label>
+				<input type="radio" name="ufotype" value="classic" checked>Classic oval UFO
+			</label>
+			<label>
+			<input type="radio" name="ufotype" value="starwars">Star Wars-style Imperial cruiser
+			</label>
+			<label>
+				<input type="radio" name="ufotype" value="galactica">Battlestar Galactica-style Viper
+			</label>
+			<label>
+				<input type="radio" name="ufotype" value="startrek">Borg-style cube
+			</label>
+
+			<label for="abtype">What type of abduction experience do you want?</label>
+				<select id="abtype" name="abtype">
+					<option value="tour">Tour of the solar system</option>
+					<option value="dinner">Alien dinner and discussion</option>
+					<option value="dance">Alien dance lessons</option>
+					<option selected>Select one</option>
+					<option value="whales">Whale watching</option>
+				</select>
+
+			<label for="comments">Special requests:</label>
+			<textarea id="comments" name="comments" placeholder="anything extra?"></textarea>
+
+			<label>
+			<input type="checkbox" value="subscribe" name="subscribe" checked>Add me to your email list
+			</label>
+			</fieldset>
+			<button
+			type="submit">Place Order</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>
+	<script src="js/forms.js"></script>
+</body>
+</html>
+
+
+
+
+
diff --git a/img/galaxy.jpg b/img/galaxy.jpg
diff --git a/img/image credit.rtf b/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/js/forms.js b/js/forms.js
@@ -0,0 +1,101 @@
+var form = document.getElementsByTagName("form")[0];
+form.addEventListener("submit", function(e) {
+  e.preventDefault();
+  sendData();
+});
+
+// https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
+function sendData() {
+  var XHR = new XMLHttpRequest();
+  var urlEncodedData = "";
+  var urlEncodedDataPairs = [];
+
+  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.
+  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);
+}