cleaned up js

3 files changed, 45 insertions, 27 deletions

diff --git a/src/html/index.html b/src/html/index.html
index d1c102c..fcd16fa 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -298,25 +298,31 @@
 						<div class="box">
 							<form name="inquiry">
 								<div class="field">
-									<div class="control">
+									<div class="control has-icons-left">
+										<span class="icon">
+											<i class="iconify" data-icon="mdi-account"></i>
+										</span>
 										<input name="name" class="input is-rounded" type="text" placeholder="name"></input>
 									</div>
 								</div>
 								<div class="field">
-									<div class="control">
+									<div class="control has-icons-left">
+										<span class="icon">
+											<i class="iconify" data-icon="mdi-email"></i>
+										</span>
 										<input name="from" class="input is-rounded" type="text" placeholder="email address"></input>
 									</div>
 								</div>
 								<div class="field">
 									<div class="control">
-										<textarea name="body" class="textarea" placeholder="question/comment"></textarea>
+										<textarea name="body" class="textarea" placeholder="question/comment" spellcheck="true"></textarea>
 									</div>
 								</div>
-								<div class="field">
+								<div class="field is-grouped is-grouped-right">
 									<div class="control">
 										<button class="button is-rounded is-primary" type="submit">
 											<span class="icon">
-												<i class="iconify" data-icon="mdi-email-send"></i>
+												<i class="iconify" data-icon="mdi-check"></i>
 											</span>
 											<span>
 												Submit
diff --git a/src/js/index.js b/src/js/index.js
index 21adad5..0697b51 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1,12 +1,9 @@
-
 /*
  * Adds an event listener to all burgers to toggle navbar menu on click.
  */
 document.addEventListener('DOMContentLoaded', function () {
-	// get all navbar-burger elements
 	const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
 
-	// check if there are any navbar burgers
 	if ($navbarBurgers.length > 0) {
 		// add a click event on each of them
 		$navbarBurgers.forEach(function(el) {
@@ -23,11 +20,34 @@ document.addEventListener('DOMContentLoaded', function () {
 	}
 });
 
-document.forms.inquiry.onsubmit = function() {
+const disableErrorBox = function() {
+	document.getElementById("errorBox").style.display = "none";
+}
+
+const disableSuccessBox = function() {
+	document.getElementById("successBox").style.display = "none";
+}
+
+const enableErrorBox = function(message) {
 	let errorBox = document.getElementById("errorBox");
-	let successBox = document.getElementById("successBox");
-	errorBox.style.display = "none";
-	successBox.style.display = "none";
+	let aTag = document.createElement('a');
+	aTag.setAttribute("href", "mailto:amy@carpentertutoring.com");
+	aTag.innerText = message + " Click here to send through your mail client.";
+	while (errorBox.hasChildNodes()) { errorBox.removeChild(errorBox.lastChild); }
+	errorBox.appendChild(aTag);
+	errorBox.style.display = "block";
+}
+
+const enableSuccessBox = function() {
+	document.getElementById("successBox").style.display = "block";
+}
+
+/*
+ * Adds mail sender to form submit.
+ */
+document.forms.inquiry.onsubmit = function() {
+	disableErrorBox();
+	disableSuccessBox();
 	let form = document.forms.inquiry;
 	let name = form.elements.name.value;
 	let fromEmail = form.elements.from.value;
@@ -40,20 +60,12 @@ document.forms.inquiry.onsubmit = function() {
 		Subject : "Inquiry: " + name,
 		Body : body,
 	}).then( message => {
-		if (message != "OK") {
-			let link = "<a href=mailto:amy@carpentertutoring> Click here to send through your mail client.</a>"
-			let aTag = document.createElement('a');
-			aTag.setAttribute("href", "mailto:amy@carpentertutoring.com");
-			aTag.innerText = message + " Click here to send through your mail client.";
-			while (errorBox.hasChildNodes()) {
-				errorBox.removeChild(errorBox.lastChild);
-			}
-			errorBox.appendChild(aTag);
-			errorBox.style.display = "block";
+		if (message == "OK") {
+			form.reset();
+			enableSuccessBox();
 		}
 		else {
-			form.reset();
-			successBox.style.display = "block";
+			enableErrorBox(message);
 		}
 	}
 	);
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 0701a25..55cd938 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -22,10 +22,10 @@ $darkgreen: rgb(59, 136, 114);
 $yellow: rgb(186, 214, 187);
 
 // Update Bulma's global variables
-// $primary: $pine-green;
+$primary: $teal;
 // $link: $midnight-green;
 // $info: $cyan
-// $success: $eton-blue;
+$success: $green;
 // $warning: $yellow
 // $danger: $red
 // $dark: $grey-darker
@@ -34,7 +34,6 @@ $family-sans-serif: "PT Sans", sans-serif;
 // $hr-background-color: $primary;
 $title-color: white;
 //$subtitle-color: white;
-
 // $body-background-color: $isabelline;
 
 // Import only what you need from Bulma
@@ -46,6 +45,7 @@ $title-color: white;
 @import "../../node_modules/bulma/sass/layout/_all.sass";
 @import "../../node_modules/bulma/sass/grid/_all.sass";
 
+// Palette
 .darkteal {
 	background-color: $darkteal;
 	color: white;