Skip to content

Instantly share code, notes, and snippets.

@pkbanks
Created July 28, 2017 17:34
Show Gist options
  • Save pkbanks/8a41955f61a8f07fa79ec023a0046f30 to your computer and use it in GitHub Desktop.
Save pkbanks/8a41955f61a8f07fa79ec023a0046f30 to your computer and use it in GitHub Desktop.
<!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>
// 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?");
}
};
})
});
});
// 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;
}
@pkbanks
Copy link
Author

pkbanks commented Jul 28, 2017

code from our Gmail Attachment live-coding session.
assumes our home directory is 'public'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment