diff options
| -rw-r--r-- | src/html/index.html | 16 | ||||
| -rw-r--r-- | src/js/index.js | 50 | ||||
| -rw-r--r-- | src/scss/index.scss | 6 |
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; |