waldothedeveloper/index.html

## index.html
<!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>


## script.js
// 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?");
					}
			};
		})

	});

});


## style.css
// 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;
}
	<!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;
	}