Skip to content

Instantly share code, notes, and snippets.

@luisSanchezCruz

luisSanchezCruz/cookiemonster.txt

Last active May 21, 2018 16:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save luisSanchezCruz/a662193a98b2f417b85c23fd09ce7c8a to your computer and use it in GitHub Desktop.
Save luisSanchezCruz/a662193a98b2f417b85c23fd09ce7c8a to your computer and use it in GitHub Desktop.
Download ZIP
luisSanchez-surefoot-application.md
Raw
cookiemonster.txt
<!--
/* Cookie Monster Code */
You can save it as .html to check the page!
features:
*check if the user was here and disabled the form
*show a popup with a gif
description:
prevent span. if the user return to the page a message appear.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Surefoot</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style>
#wrapper {padding: 60px 100px;}
/*dialogs*/
.close {
float: right;
background-color: transparent;
border: none;
outline: none;
color: #522fae;
font-size: 30px;
transition: all 0.5s ease;
}
.close:hover {
color: mediumvioletred;
text-shadow: 2px 2px 8px #522fae;
}
.close:active {
color: rgba(253,191,45, 1);
}
.modal{
position: fixed;
width: 300px;
top: 20%;
left: 40%;
background-color: white;
box-shadow: 2px 2px 5px #522fae;
border: 1px solid #522fae;
border-radius: 3px;
font-size: 22px;
color: #522fae;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-weight: bolder;
padding: 5px;
transition: all 1s ease;
}
.modal img {
height: auto;
width: 100%;
}
/*header section*/
header {
text-align: left;
}
header h1 {
color: #522fae;
font-size: 35px;
line-height: 1;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
margin-bottom: 0;
}
header p {
font-size: 20px;
max-width: 700px;
line-height: 2;
color: #2C3539;
}
/*form section*/
#formContainer {
width: 45%;
display: block;
float: right;
margin: 0;
}
#formContainer h1 {
color: #522fae;
font-size: 35px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 10px;
}
#formContainer label, span {
display: block;
font-size: 20px;
color: #2C3539;
}
#formContainer span {
margin-bottom: 30px;
}
#emailForm input[type='text'], input[type='email'], textarea{
background-color: #f4f4f4;
border: 1px solid #e5e5e5;
border-radius: 3px;
font-size: 20px;
width: 100%;
padding: 5px;
}
#btnSubmit {
color: white;
width: 100%;
font-size: 20px;
border: none;
background-color: #522fae;
padding: 15px;
font-weight: bolder;
border-radius: 3px;
transition: all 0.5s ease;
}
#btnSubmit:hover {
background-color: rgba(253,191,45, 1);
border-radius: 0;
}
/*schedule section*/
#scheduleContainer {
width: 45%;
float: left;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
#scheduleContainer h1 {
color:#522fae;
font-size: 35px;
font-weight: bold;
}
#scheduleContainer p {
color: #522fae;
font-size: 16px;
font-weight: bold;
line-height: 2;
}
#btn-link {
color: white;
font-size: 20px;
border: none;
background-color: #522fae;
padding: 15px;
font-weight: bolder;
border-radius: 3px;
transition: all 0.5s ease;
text-decoration: none;
text-align: center;
margin: auto;
width: 300px;
display: block;
}
#btn-link:hover {
background-color: rgba(253,191,45, 1);
border-radius: 0;
}
.fas {
display:none;
transition: all 0.5s ease;
}
#btn-link:hover .fas {
display: inline;
}
#errorMessage {
margin-top: 20px;
}
</style>
</head>
<body>
<!--
message dialogs!!
-->
<div id="visitedMessage" class="modal" style="display:none">
<button class="close">&times;</button>
<p>Hmm, you look familiar. While you're waiting for our reply, here's a GIF we think you should see.</p>
<img src="https://media1.tenor.com/images/6b9a8f6e786326838f8f8a4a65a0ddd2/tenor.gif?itemid=4740643" alt="dialog">
</div>
<div id="succcessMessage" class="modal" style="display: none">
<button class="close">&times;</button>
<p>Thank you, see you soon!</p>
<img src="https://memeguy.com/photos/thumbs/mrw-as-a-college-student-i-get-my-first-weekly-paying-job-63938.gif" alt="success">
</div>
<!--site wrapper-->
<section id="wrapper">
<header>
<h1>You have arrived, welcome!</h1>
<p>
Thanks for your interest in our available engineering role! If you have any questions, please refer to the original application page or email us - hello@surefoot.me.
</p>
</header>
<section id="mainContent">
<div id="formContainer">
<h1>shoot us an email</h1>
<form id="emailForm">
<label for="txtName">Your Name *</label>
<span>
<input type="text" autocomplete="name" name="txtName" id="txtName">
<span id="errortxtName"></span>
</span>
<label for="txtEmail">Your Email *</label>
<span>
<input type="email" autocomplete="email" name="txtEmail" id="txtEmail">
<span id="errortxtEmail"></span>
</span>
<label for="txtMessage">Your Message *</label>
<span>
<textarea name="txtName" id="txtMessage" rows="8"></textarea>
<span id="errortxtMessage"></span>
</span>
<input type="submit" id="btnSubmit"value="send">
<span id="errorMessage"></span>
</form>
</div>
<div id="scheduleContainer">
<h1>or schedule a call</h1>
<p>
once scheduled, you'll receive a calendar invitation and follow-up email confirming call details
</p>
<a id="btn-link" href="https://cal.mixmax.com/surefoot/30-minute-intro">
shedule your call now
<i class="fas fa-phone"></i>
</a>
</div>
</section>
</section>
<script type="text/javascript">
window.onload = function() {
/* using the DOM all together for performance*/
var btnSubmit = document.getElementById('btnSubmit');
var emailForm = document.getElementById('emailForm');
var errorMessage = document.getElementById('errorMessage');
//check for cooies
mosterCookies(emailForm);
btnSubmit.onclick = function(e) {
e.preventDefault();
//clean all the error messasges and reset input borders
cleanForm(emailForm);
errorMessage.innerHTML = "";
if(validateForm(emailForm)) {
//send(emailForm); //implement AJAX
fakeSend(emailForm) //fake send for test purpose
}else {
errorMessage.innerHTML = "One or more fields have an error. Please check and try again.";
}
};
//close dialog event handler
var dialogs = document.getElementsByClassName('close');
setCloseEvents(dialogs);
}
//all the functions
//validate from inputs
function validateForm(form) {
var result = true;
var value;
//check all elements
for (const elem in form) {
if (form.hasOwnProperty(elem)) {
//filter elements
if(form[elem].type === "text" ||
form[elem].type === "email" ||
form[elem].type === "textarea")
{
value = form[elem].value;
//check if fields are empty
if(value.trim() === "") {
result = false;
showError(form[elem],"The field is required.");
}else if(form[elem].type === "email") { //check email
if(!validateEmail(value)) {
result = false;
showError(form[elem], 'Enter a valid email sample@sample.com.');
}
}
}
}
}
return result;
}
/*change style in case of error*/
function showError(element, message) {
/*show span error*/
document.getElementById('error' + element.id)
.innerHTML = "<span style='color:red'>" + message + "</span>";
/*add red box shadow*/
element.style.boxShadow ="1px 1px 3px red";
}
/*reset all error styles and clean spans*/
function cleanForm(form) {
for (const elem in form) {
if (form.hasOwnProperty(elem)) {
form[elem].style.boxShadow = "0px 0px 0px transparent";
if(form[elem].type === "text" ||
form[elem].type === "email" ||
form[elem].type === "textarea")
{
document.getElementById('error' + form[elem].id).innerHTML = "";
}
}
}
}
//check if the emails is valid
function validateEmail(email) {
//this just check anystring@anystring.anystring you can just change the Regular expression as you like
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
/*send email usgin ajax dont use it
its just to see how it should work
instead use fakeSend()
*/
function send(form) {
//this is raw AJAX for sample purpose
var xhttp = new XMLHttpRequest();
//getting the data
var name = document.getElementById('txtName').value.trim();
var email = document.getElementById('txtEmail').value.trim();
var message = document.getElementById('txtMessage').value.trim();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200){
//then check fakeSend() function
}
}
var queryString = "name=" + name;
queryString += "&email=" + email;
queryString += "&message=" + message;
xhttp.open('POST','emails.php',true);
xhttp.send(queryString);
}
/*all this happens after you send the messsage*/
function fakeSend(emailForm) {
/*set cookies that expires in 24 hours*/
var name = document.getElementById('txtName').value.trim();
var date = new Date();
date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
var expires = ";expires=" + date.toUTCString();
document.cookie = "visitor=" + name + expires + "; path=/";
showSuccessDialog();
disabledForm(emailForm);
}
function showVisitedDialog() {
var dialog = document.getElementById('visitedMessage');
dialog.style.display = "block";
}
function showSuccessDialog() {
var dialog = document.getElementById('succcessMessage');
dialog.style.display = "block";
}
function disabledForm(form) {
for(const elem in form) {
if(form.hasOwnProperty(elem)) {
if(form[elem].type === "text" ||
form[elem].type === "email" ||
form[elem].type === "textarea" ||
form[elem].type =="submit")
{
form[elem].disabled = true;
form[elem].style.cursor = "not-allowed";
form[elem].style.backgroundColor = "darkgrey";
}
}
}
}
//setting dialog close events
function setCloseEvents(dialogs) {
for(let i = 0; i < dialogs.length; i++) {
dialogs[i].onclick = function() {
this.parentElement.style.display = "none";
};
}
}
//monster cookies
function mosterCookies(emailForm) {
var cookie = document.cookie;
/* is true just for test
in production use this condition > (cookie.indexOf('visitor') != -1)*/
if(true) {
disabledForm(emailForm);
showVisitedDialog();
}
}
</script>
</body>
</html>
Raw
formrestyling.txt
<!--
/* Form Restyling Code */
You can save it as .html to check the page!
features:
*schedule Container float left
*form float right.
description:
new style! now we have the email form on the right.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Surefoot</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style>
#wrapper {padding: 60px 100px;}
/*dialogs*/
.close {
float: right;
background-color: transparent;
border: none;
outline: none;
color: #522fae;
font-size: 30px;
transition: all 0.5s ease;
}
.close:hover {
color: mediumvioletred;
text-shadow: 2px 2px 8px #522fae;
}
.close:active {
color: rgba(253,191,45, 1);
}
.modal{
position: fixed;
width: 300px;
top: 20%;
left: 40%;
background-color: white;
box-shadow: 2px 2px 5px #522fae;
border: 1px solid #522fae;
border-radius: 3px;
font-size: 22px;
color: #522fae;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-weight: bolder;
padding: 5px;
transition: all 1s ease;
}
.modal img {
height: auto;
width: 100%;
}
/*header section*/
header {
text-align: left;
}
header h1 {
color: #522fae;
font-size: 35px;
line-height: 1;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
margin-bottom: 0;
}
header p {
font-size: 20px;
max-width: 700px;
line-height: 2;
color: #2C3539;
}
/*form section*/
#formContainer {
width: 45%;
display: block;
float: right;
margin: 0;
}
#formContainer h1 {
color: #522fae;
font-size: 35px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 10px;
}
#formContainer label, span {
display: block;
font-size: 20px;
color: #2C3539;
}
#formContainer span {
margin-bottom: 30px;
}
#emailForm input[type='text'], input[type='email'], textarea{
background-color: #f4f4f4;
border: 1px solid #e5e5e5;
border-radius: 3px;
font-size: 20px;
width: 100%;
padding: 5px;
}
#btnSubmit {
color: white;
width: 100%;
font-size: 20px;
border: none;
background-color: #522fae;
padding: 15px;
font-weight: bolder;
border-radius: 3px;
transition: all 0.5s ease;
}
#btnSubmit:hover {
background-color: rgba(253,191,45, 1);
border-radius: 0;
}
/*schedule section*/
#scheduleContainer {
width: 45%;
float: left;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
#scheduleContainer h1 {
color:#522fae;
font-size: 35px;
font-weight: bold;
}
#scheduleContainer p {
color: #522fae;
font-size: 16px;
font-weight: bold;
line-height: 2;
}
#btn-link {
color: white;
font-size: 20px;
border: none;
background-color: #522fae;
padding: 15px;
font-weight: bolder;
border-radius: 3px;
transition: all 0.5s ease;
text-decoration: none;
text-align: center;
margin: auto;
width: 300px;
display: block;
}
#btn-link:hover {
background-color: rgba(253,191,45, 1);
border-radius: 0;
}
.fas {
display:none;
transition: all 0.5s ease;
}
#btn-link:hover .fas {
display: inline;
}
#errorMessage {
margin-top: 20px;
}
</style>
</head>
<body>
<!--
message dialogs!!
-->
<div id="visitedMessage" class="modal" style="display:none">
<button class="close">&times;</button>
<p>Hmm, you look familiar. While you're waiting for our reply, here's a GIF we think you should see.</p>
<img src="https://media1.tenor.com/images/6b9a8f6e786326838f8f8a4a65a0ddd2/tenor.gif?itemid=4740643" alt="dialog">
</div>
<div id="succcessMessage" class="modal" style="display: none">
<button class="close">&times;</button>
<p>Thank you, see you soon!</p>
<img src="https://memeguy.com/photos/thumbs/mrw-as-a-college-student-i-get-my-first-weekly-paying-job-63938.gif" alt="success">
</div>
<!--site wrapper-->
<section id="wrapper">
<header>
<h1>You have arrived, welcome!</h1>
<p>
Thanks for your interest in our available engineering role! If you have any questions, please refer to the original application page or email us - hello@surefoot.me.
</p>
</header>
<section id="mainContent">
<div id="formContainer">
<h1>shoot us an email</h1>
<form id="emailForm">
<label for="txtName">Your Name *</label>
<span>
<input type="text" autocomplete="name" name="txtName" id="txtName">
<span id="errortxtName"></span>
</span>
<label for="txtEmail">Your Email *</label>
<span>
<input type="email" autocomplete="email" name="txtEmail" id="txtEmail">
<span id="errortxtEmail"></span>
</span>
<label for="txtMessage">Your Message *</label>
<span>
<textarea name="txtName" id="txtMessage" rows="8"></textarea>
<span id="errortxtMessage"></span>
</span>
<input type="submit" id="btnSubmit"value="send">
<span id="errorMessage"></span>
</form>
</div>
<div id="scheduleContainer">
<h1>or schedule a call</h1>
<p>
once scheduled, you'll receive a calendar invitation and follow-up email confirming call details
</p>
<a id="btn-link" href="https://cal.mixmax.com/surefoot/30-minute-intro">
shedule your call now
<i class="fas fa-phone"></i>
</a>
</div>
</section>
</section>
<script type="text/javascript">
window.onload = function() {
/* using the DOM all together for performance*/
var btnSubmit = document.getElementById('btnSubmit');
var emailForm = document.getElementById('emailForm');
var errorMessage = document.getElementById('errorMessage');
btnSubmit.onclick = function(e) {
e.preventDefault();
//clean all the error messasges and reset input borders
cleanForm(emailForm);
errorMessage.innerHTML = "";
if(validateForm(emailForm)) {
//send(emailForm); //implement AJAX
fakeSend(emailForm) //fake send for test purpose
}else {
errorMessage.innerHTML = "One or more fields have an error. Please check and try again.";
}
};
//close dialog event handler
var dialogs = document.getElementsByClassName('close');
setCloseEvents(dialogs);
}
//all the functions
//validate from inputs
function validateForm(form) {
var result = true;
var value;
//check all elements
for (const elem in form) {
if (form.hasOwnProperty(elem)) {
//filter elements
if(form[elem].type === "text" ||
form[elem].type === "email" ||
form[elem].type === "textarea")
{
value = form[elem].value;
//check if fields are empty
if(value.trim() === "") {
result = false;
showError(form[elem],"The field is required.");
}else if(form[elem].type === "email") { //check email
if(!validateEmail(value)) {
result = false;
showError(form[elem], 'Enter a valid email sample@sample.com.');
}
}
}
}
}
return result;
}
/*change style in case of error*/
function showError(element, message) {
/*show span error*/
document.getElementById('error' + element.id)
.innerHTML = "<span style='color:red'>" + message + "</span>";
/*add red box shadow*/
element.style.boxShadow ="1px 1px 3px red";
}
/*reset all error styles and clean spans*/
function cleanForm(form) {
for (const elem in form) {
if (form.hasOwnProperty(elem)) {
form[elem].style.boxShadow = "0px 0px 0px transparent";
if(form[elem].type === "text" ||
form[elem].type === "email" ||
form[elem].type === "textarea")
{
document.getElementById('error' + form[elem].id).innerHTML = "";
}
}
}
}
//check if the emails is valid
function validateEmail(email) {
//this just check anystring@anystring.anystring you can just change the Regular expression as you like
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
/*send email usgin ajax dont use it
its just to see how it should work
instead use fakeSend()
*/
function send(form) {
//this is raw AJAX for sample purpose
var xhttp = new XMLHttpRequest();
//getting the data
var name = document.getElementById('txtName').value.trim();
var email = document.getElementById('txtEmail').value.trim();
var message = document.getElementById('txtMessage').value.trim();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200){
//then check fakeSend() function
}
}
var queryString = "name=" + name;
queryString += "&email=" + email;
queryString += "&message=" + message;
xhttp.open('POST','emails.php',true);
xhttp.send(queryString);
}
/*all this happens after you send the messsage*/
function fakeSend(emailForm) {
/*set cookies that expires in 24 hours*/
var name = document.getElementById('txtName').value.trim();
var date = new Date();
date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
var expires = ";expires=" + date.toUTCString();
document.cookie = "visitor=" + name + expires + "; path=/";
showSuccessDialog();
disabledForm(emailForm);
}
function showVisitedDialog() {
var dialog = document.getElementById('visitedMessage');
dialog.style.display = "block";
}
function showSuccessDialog() {
var dialog = document.getElementById('succcessMessage');
dialog.style.display = "block";
}
function disabledForm(form) {
for(const elem in form) {
if(form.hasOwnProperty(elem)) {
if(form[elem].type === "text" ||
form[elem].type === "email" ||
form[elem].type === "textarea" ||
form[elem].type =="submit")
{
form[elem].disabled = true;
form[elem].style.cursor = "not-allowed";
form[elem].style.backgroundColor = "darkgrey";
}
}
}
}
//setting dialog close events
function setCloseEvents(dialogs) {
for(let i = 0; i < dialogs.length; i++) {
dialogs[i].onclick = function() {
this.parentElement.style.display = "none";
};
}
}
</script>
</body>
</html>
Raw
formvalidation.txt
<!--
/* Form Validation Code */
You can save it as .html to check the page!
features:
*check empty fields
*valid email as sample@sample.sample
*success popup after send the message
*disable fields to avoid span
description:
this form check name, email and message field, so the user has to fill them all;
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Surefoot</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style>
#wrapper {padding: 60px 100px;}
/*dialogs*/
.close {
float: right;
background-color: transparent;
border: none;
outline: none;
color: #522fae;
font-size: 30px;
transition: all 0.5s ease;
}
.close:hover {
color: mediumvioletred;
text-shadow: 2px 2px 8px #522fae;
}
.close:active {
color: rgba(253,191,45, 1);
}
.modal{
position: fixed;
width: 300px;
top: 20%;
left: 40%;
background-color: white;
box-shadow: 2px 2px 5px #522fae;
border: 1px solid #522fae;
border-radius: 3px;
font-size: 22px;
color: #522fae;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-weight: bolder;
padding: 5px;
transition: all 1s ease;
}
.modal img {
height: auto;
width: 100%;
}
/*header section*/
header {
text-align: left;
}
header h1 {
color: #522fae;
font-size: 35px;
line-height: 1;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
margin-bottom: 0;
}
header p {
font-size: 20px;
max-width: 700px;
line-height: 2;
color: #2C3539;
}
/*form section*/
#formContainer {
width: 45%;
display: inline-block;
margin: 0;
}
#formContainer h1 {
color: #522fae;
font-size: 35px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 10px;
}
#formContainer label, span {
display: block;
font-size: 20px;
color: #2C3539;
}
#formContainer span {
margin-bottom: 30px;
}
#emailForm input[type='text'], input[type='email'], textarea{
background-color: #f4f4f4;
border: 1px solid #e5e5e5;
border-radius: 3px;
font-size: 20px;
width: 100%;
padding: 5px;
}
#btnSubmit {
color: white;
width: 100%;
font-size: 20px;
border: none;
background-color: #522fae;
padding: 15px;
font-weight: bolder;
border-radius: 3px;
transition: all 0.5s ease;
}
#btnSubmit:hover {
background-color: rgba(253,191,45, 1);
border-radius: 0;
}
/*schedule section*/
#scheduleContainer {
width: 45%;
float: right;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
#scheduleContainer h1 {
color:#522fae;
font-size: 35px;
font-weight: bold;
}
#scheduleContainer p {
color: #522fae;
font-size: 16px;
font-weight: bold;
line-height: 2;
}
#btn-link {
color: white;
font-size: 20px;
border: none;
background-color: #522fae;
padding: 15px;
font-weight: bolder;
border-radius: 3px;
transition: all 0.5s ease;
text-decoration: none;
text-align: center;
margin: auto;
width: 300px;
display: block;
}
#btn-link:hover {
background-color: rgba(253,191,45, 1);
border-radius: 0;
}
.fas {
display:none;
transition: all 0.5s ease;
}
#btn-link:hover .fas {
display: inline;
}
#errorMessage {
margin-top: 20px;
}
</style>
</head>
<body>
<!--
message dialogs!!
-->
<div id="visitedMessage" class="modal" style="display: none">
<button class="close">&times;</button>
<p>Hmm, you look familiar. While you're waiting for our reply, here's a GIF we think you should see.</p>
<img src="https://media1.tenor.com/images/6b9a8f6e786326838f8f8a4a65a0ddd2/tenor.gif?itemid=4740643" alt="dialog">
</div>
<div id="succcessMessage" class="modal" style="display: none">
<button class="close">&times;</button>
<p>Thank you, see you soon!</p>
<img src="https://memeguy.com/photos/thumbs/mrw-as-a-college-student-i-get-my-first-weekly-paying-job-63938.gif" alt="success">
</div>
<!--site wrapper-->
<section id="wrapper">
<header>
<h1>You have arrived, welcome!</h1>
<p>
Thanks for your interest in our available engineering role! If you have any questions, please refer to the original application page or email us - hello@surefoot.me.
</p>
</header>
<section id="mainContent">
<div id="formContainer">
<h1>shoot us an email</h1>
<form id="emailForm">
<label for="txtName">Your Name *</label>
<span>
<input type="text" autocomplete="name" name="txtName" id="txtName">
<span id="errortxtName"></span>
</span>
<label for="txtEmail">Your Email *</label>
<span>
<input type="email" autocomplete="email" name="txtEmail" id="txtEmail">
<span id="errortxtEmail"></span>
</span>
<label for="txtMessage">Your Message *</label>
<span>
<textarea name="txtName" id="txtMessage" rows="8"></textarea>
<span id="errortxtMessage"></span>
</span>
<input type="submit" id="btnSubmit"value="send">
<span id="errorMessage"></span>
</form>
</div>
<div id="scheduleContainer">
<h1>or schedule a call</h1>
<p>
once scheduled, you'll receive a calendar invitation and follow-up email confirming call details
</p>
<a id="btn-link" href="https://cal.mixmax.com/surefoot/30-minute-intro">
shedule your call now
<i class="fas fa-phone"></i>
</a>
</div>
</section>
</section>
<script type="text/javascript">
window.onload = function() {
/* using the DOM all together for performance*/
var btnSubmit = document.getElementById('btnSubmit');
var emailForm = document.getElementById('emailForm');
var errorMessage = document.getElementById('errorMessage');
btnSubmit.onclick = function(e) {
e.preventDefault();
//clean all the error messasges and reset input borders
cleanForm(emailForm);
errorMessage.innerHTML = "";
if(validateForm(emailForm)) {
//send(emailForm); //implement AJAX
fakeSend(emailForm) //fake send for test purpose
}else {
errorMessage.innerHTML = "One or more fields have an error. Please check and try again.";
}
};
//close dialog event handler
var dialogs = document.getElementsByClassName('close');
setCloseEvents(dialogs);
}
//all the functions
//validate from inputs
function validateForm(form) {
var result = true;
var value;
//check all elements
for (const elem in form) {
if (form.hasOwnProperty(elem)) {
//filter elements
if(form[elem].type === "text" ||
form[elem].type === "email" ||
form[elem].type === "textarea")
{
value = form[elem].value;
//check if fields are empty
if(value.trim() === "") {
result = false;
showError(form[elem],"The field is required.");
}else if(form[elem].type === "email") { //check email
if(!validateEmail(value)) {
result = false;
showError(form[elem], 'Enter a valid email sample@sample.com.');
}
}
}
}
}
return result;
}
/*change style in case of error*/
function showError(element, message) {
/*show span error*/
document.getElementById('error' + element.id)
.innerHTML = "<span style='color:red'>" + message + "</span>";
/*add red box shadow*/
element.style.boxShadow ="1px 1px 3px red";
}
/*reset all error styles and clean spans*/
function cleanForm(form) {
for (const elem in form) {
if (form.hasOwnProperty(elem)) {
form[elem].style.boxShadow = "0px 0px 0px transparent";
if(form[elem].type === "text" ||
form[elem].type === "email" ||
form[elem].type === "textarea")
{
document.getElementById('error' + form[elem].id).innerHTML = "";
}
}
}
}
//check if the emails is valid
function validateEmail(email) {
//this just check anystring@anystring.anystring you can just change the Regular expression as you like
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
/*send email usgin ajax dont use it
its just to see how it should work
instead use fakeSend()
*/
function send(form) {
//this is raw AJAX for sample purpose
var xhttp = new XMLHttpRequest();
//getting the data
var name = document.getElementById('txtName').value.trim();
var email = document.getElementById('txtEmail').value.trim();
var message = document.getElementById('txtMessage').value.trim();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200){
//then check fakeSend() function
}
}
var queryString = "name=" + name;
queryString += "&email=" + email;
queryString += "&message=" + message;
xhttp.open('POST','emails.php',true);
xhttp.send(queryString);
}
/*all this happens after you send the messsage*/
function fakeSend(emailForm) {
/*set cookies that expires in 24 hours*/
var name = document.getElementById('txtName').value.trim();
var date = new Date();
date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
var expires = ";expires=" + date.toUTCString();
document.cookie = "visitor=" + name + expires + "; path=/";
showSuccessDialog();
disabledForm(emailForm);
}
function showVisitedDialog() {
var dialog = document.getElementById('visitedMessage');
dialog.style.display = "block";
}
function showSuccessDialog() {
var dialog = document.getElementById('succcessMessage');
dialog.style.display = "block";
}
function disabledForm(form) {
for(const elem in form) {
if(form.hasOwnProperty(elem)) {
if(form[elem].type === "text" ||
form[elem].type === "email" ||
form[elem].type === "textarea" ||
form[elem].type =="submit")
{
form[elem].disabled = true;
form[elem].style.cursor = "not-allowed";
form[elem].style.backgroundColor = "darkgrey";
}
}
}
}
//setting dialog close events
function setCloseEvents(dialogs) {
for(let i = 0; i < dialogs.length; i++) {
dialogs[i].onclick = function() {
this.parentElement.style.display = "none";
};
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment