summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/html/index.html16
-rw-r--r--src/js/index.js50
-rw-r--r--src/scss/index.scss6
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;