Created
July 28, 2017 17:34
-
-
Save pkbanks/8a41955f61a8f07fa79ec023a0046f30 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Gmail</title> | |
<link rel="stylesheet" type="text/css" href="css/style.css"> | |
<script type="text/javascript" src="js/script.js"></script> | |
</head> | |
<body> | |
<main> | |
<form> | |
<section> | |
<!-- buttons --> | |
<input type="submit" name="send-btn" value="Send" id="send" class="send-btn"> | |
<input type="submit" name="" value="Save As Draft"> | |
<input type="submit" name="" value="Discard"> | |
</section> | |
<div class="grid-container"> | |
<!-- main email section --> | |
<label>To:</label> | |
<input type="text" name=""> | |
<label>Cc:</label> | |
<input type="text" name=""> | |
<label>Bcc:</label> | |
<input type="text" name=""> | |
<label>Subject:</label> | |
<input type="text" name=""> | |
<label>Attachments:</label> | |
<input type="file" name="" id="attachments"> | |
<textarea id="msg"></textarea> | |
</div> | |
<section> | |
<!-- buttons --> | |
<input type="submit" name="send-btn" value="Send" class="send-btn"> | |
<input type="submit" name="" value="Save As Draft"> | |
<input type="submit" name="" value="Discard"> | |
</section> | |
</form> | |
</main> | |
</body> | |
</html> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// be sure to nest this file in a folder called 'js' | |
var name = "PK" | |
var sample = `hello, my name is ${name}. attached is my resume. it was great to meet you. thank you.` | |
// this is eden | |
window.addEventListener("load", function(){ | |
console.log("document ready"); | |
var msg = document.getElementById('msg') | |
msg.value = sample; | |
var btn = document.getElementById('send'); | |
var btns = document.getElementsByName('send-btn') | |
btns.forEach(function(btn){ | |
btn.addEventListener("click", function(evt){ | |
evt.preventDefault(); // prevent form from transmitting data and refreshing our console | |
// var msg = document.getElementById('msg') | |
console.log(msg.value); | |
// is 'attach' in msg.value? | |
if(msg.value.toLowerCase().indexOf('attach') !== -1){ | |
// if 'attach' *is* in msg.value | |
var att = document.getElementById('attachments'); | |
if(att.value === ""){ | |
// if(att.files.length === 0) // just as valid test | |
// no attachments found AND 'attach is in the message body' | |
// alert the user | |
alert("would you like to add an attachment?"); | |
} | |
}; | |
}) | |
}); | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// be sure to next this file in a folder called 'css' | |
body{ | |
} | |
section{ | |
background-color: rgb(69, 224, 207); | |
} | |
section input{ | |
margin: 10px; | |
} | |
.grid-container{ | |
display: grid; | |
grid-template-columns: 1fr 7fr; | |
background-color: rgb(173, 215, 226); | |
background-color: #9cd9e5; | |
/* grid-row-gap: 10px; | |
padding: 5px;*/ | |
} | |
.grid-container > * { | |
margin: 5px; | |
} | |
textarea{ | |
grid-column-start: 1; | |
grid-column-end: 3; | |
height: 100px; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
code from our Gmail Attachment live-coding session.
assumes our home directory is 'public'