devleague · rinatoyo · Mar 28, 2019 · Apr 1, 2019 · Apr 1, 2019 · Apr 1, 2019
diff --git a/assets/iconfinder_16_3319628.png b/assets/iconfinder_16_3319628.png
diff --git a/assets/iconfinder_mail_1164530.png b/assets/iconfinder_mail_1164530.png
diff --git a/assets/pixel-heart-in-an-envelope-vector-21513809.jpg b/assets/pixel-heart-in-an-envelope-vector-21513809.jpg
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,117 @@
+#bigBox {
+    width: 100%;
+    height: 100%;
+    min-width: 500px;
+    min-height: 500px;
+}
+
+header{
+    font-size: 60px;
+    color: whitesmoke;
+    font-family: 'Press Start 2P', cursive;
+    text-shadow: 15px 15px 15px #2a292e;
+}
+
+#geemailHeader{
+    background-color: #3a55cc;
+    height: 95px;
+    padding: 20px;
+}
+
+header{
+    display: inline;
+}
+
+#sidebar{
+    background-color: #da506b;
+    font-family: 'VT323', monospace;
+    font-size: 25px;
+    float: left;
+    width: 19%;
+    height: 100%;
+    overflow-x: auto;
+    padding-right: 4%;
+    padding-left: 0%;
+    padding-top: 0%;
+    border: 5px solid #2a292e;
+
+}
+
+.navigation{ 
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+}
+
+#count #withCount {
+    display: inline;
+}
+
+a {
+    text-decoration: none;
+}
+a:link {
+    color:limegreen;
+}
+
+a:visited {
+    color: whitesmoke;
+}
+
+a:hover {
+    color: yellow;
+}
+
+a:active {
+    color: blue;
+}
+
+#note {
+    color: currentColor;
+    cursor: not-allowed;
+
+}
+#emails{
+    background-color: whitesmoke;
+    background-repeat: no-repeat;
+    border-color: rgb(42, 41, 46);
+    border-style: dashed;
+    border-width: 5px;
+    float: right;
+    overflow: auto;
+    width: 75.5%;
+    height: 100%;
+    padding-top: 0px;
+}
+
+
+#msgArea{
+    font-family: 'Jura', sans-serif;
+    font-size: 20px;
+    display: inline;
+}
+
+.showDate{
+    float: right;
+    font-family: 'VT323', monospace;
+    font-size: 90%;
+}
+
+.showNewDate{
+    float: right;
+    font-family: 'VT323', monospace;
+    font-size: 90%;
+}
+
+.showSubject{
+    border-bottom-style: dashed;
+    border-color: #3a55cc;
+    border-width: 2px;
+}
+
+.showNewSubject{
+    border-bottom-style: dashed;
+    border-color: #3a55cc;
+    border-width: 2px;
+}
diff --git a/index.html b/index.html
@@ -2,17 +2,188 @@
 	<head>
 		<script src="js/mail-generator.js"></script>
 		<link href="css/style.css" rel="stylesheet" media="screen">
+		<link href="https://fonts.googleapis.com/css?family=Jura|Press+Start+2P|VT323" rel="stylesheet">
+		<title>Your Gee-Mail</title>
     <script>
       window.onload = function(){
         // ALL OF YOUR JAVASCRIPT CODE SHOULD GO HERE. 
-        // We have to use window.onload so your JavaScript doesn't execute until the page has loaded and all HTML has been downloaded to your browser
-
-      };
+				// We have to use window.onload so your JavaScript doesn't execute until the page has loaded and all HTML has been downloaded to your browser
+
+
+				//add messages
+
+				// console.log(geemails)
+				// var msgArea = document.getElementById('msgArea');
+
+		  	function makeBox(elem, label, obj){
+			  	var makeElem = document.createElement(elem)
+				 	makeElem.className = label;
+					makeElem.innerHTML = obj;
+					return makeElem;
+				}
+
+				for (var i = 0; i < geemails.length; i++){
+
+				var msgDate = makeBox('div', 'showDate', geemails[i].date);
+				msgDate.innerHTML = 'Date: ' + geemails[i].date;
+				msgArea.appendChild(msgDate);
+
+				var person = makeBox('div', 'showSender', geemails[i].sender);
+				person.innerHTML = 'From: ' + geemails[i].sender;
+				msgArea.appendChild(person);
+
+				var msgSubject = makeBox('div', 'showSubject', geemails[i].subject);
+				msgSubject.innerHTML = 'Subject: ' + geemails[i].subject;
+				msgArea.appendChild(msgSubject);
+
+				var msg = makeBox('div', 'showMessage', geemails[i].body);
+				msg.innerHTML = 'Message: ' + geemails[i].body;
+				msgSubject.appendChild(msg);
+
+				}
+
+
+				// hide message 
+
+				var getMsg = document.getElementsByClassName('showMessage');
+
+				for (var i = 0; i < getMsg.length; i++){
+					getMsg[i].style.display = 'none'
+				}
+
+
+				// show and hide message using event listener
+
+				var getSubj = document.getElementsByClassName('showSubject');
+
+				for (var i = 0; i < getSubj.length; i++){
+					getSubj[i].addEventListener('click', whatsUp)
+				}
+
+
+				function whatsUp(){
+					// console.log(this);
+					var bodyMsg = this.querySelector('.showMessage');
+					if(bodyMsg.style.display === 'none'){
+						bodyMsg.style.display = 'block';
+					}else{
+						bodyMsg.style.display = 'none';
+					}
+				}
+
+
+				// set counter for messages
+
+				var msgCount = document.getElementById('count');
+				var mailNum = 10;
+				msgCount.textContent = "[" + mailNum + "]";
+
+
+				// set interval for new message
+				setInterval(addNew, 10000);
+
+				function addNew(){
+					// console.log(getNewMessage())
+					var newMessage = getNewMessage();
+					// console.log(newMessage);
+					msgCount.textContent =  "[" + ++mailNum + "]";
+
+
+					function makeNewMsgBox(newElem, newLabel, newObj){
+				  	var makeNewElem = document.createElement(newElem)
+					 	makeNewElem.className = newLabel;
+						makeNewElem.innerHTML = newObj;
+						return makeNewElem;
+					}
+
+					var newMsgSubject = makeNewMsgBox('div', 'showNewSubject', newMessage.subject);
+					newMsgSubject.innerHTML = 'Subject: ' + newMessage.subject;
+					msgArea.prepend(newMsgSubject);
+
+					var newPerson = makeNewMsgBox('div', 'showNewSender', newMessage.sender);
+					newPerson.innerHTML = 'From: ' + newMessage.sender;
+					msgArea.prepend(newPerson);
+
+					var newMsgDate = makeNewMsgBox('div', 'showNewDate', newMessage.date);
+					newMsgDate.innerHTML = 'Date: ' + newMessage.date;
+					msgArea.prepend(newMsgDate);
+
+					var newMsg = makeNewMsgBox('div', 'showNewMessage', newMessage.body);
+					newMsg.innerHTML = 'Message: ' + newMessage.body;
+					newMsgSubject.appendChild(newMsg);
+
+					// hide new message [working]
+
+					var getNewMsg = document.getElementsByClassName('showNewMessage');
+					// console.log(getNewMsg);
+					for (var i = 0; i < getNewMsg.length; i++){
+					getNewMsg[i].style.display = 'none'
+					}
+
+
+
+				// show and hide new message using event listener
+
+				var getNewSubj = document.getElementsByClassName('showNewSubject');
+
+				for (var i = 0; i < getNewSubj.length; i++){
+					getNewSubj[0].addEventListener('click', hello)
+				}
+
+				function hello(){
+					var newBodyMsg = this.querySelectorAll('.showNewMessage')[0];
+					if(newBodyMsg.style.display === 'none'){
+						newBodyMsg.style.display = 'block';
+					}else{
+						newBodyMsg.style.display = 'none';
+					}
+				}
+			}
+
+
+
+		}
     </script>
 	</head>
 	<body>
-		<div class="container" id="main">
-			Build Me!
+
+		<div class="container" id="bigBox">
+
+			<div class="container" id="geemailHeader">
+
+				<img src="assets\pixel-heart-in-an-envelope-vector-21513809.jpg" alt="" title="You've got mail!" height="100" width="100">
+				<header>Gee-Mail</header>
+
+			</div>
+
+			<div class="container" id="sidebar">
+
+
+
+				<ul class="navigation">
+					<a href="http://127.0.0.1:8080/" id="withCount" target="_self">Inbox 
+						<span id="count"></span>
+					</a>
+					<a href="#">Drafts</a>
+					<a href="#">Sent</a>
+					<a href="https://www.pritchettcartoons.com/spam.htm" target="_blank">Spam</a>
+					<a href="https://www.youtube.com/watch?v=Z1SiSUrvUnk" target="_blank">Trash</a>
+					<a id="note">[Click on subject to see message!]</a>
+				</ul>
+
+			</div>
+
+			<div class="container" id="emails">
+
+				<div id="msgArea">
+
+				</div>
+
+			</div>
+
+
+
 		</div>
+
 	</body>
 </html>