devleague · bflores88 · Feb 2, 2019 · Feb 2, 2019 · Feb 3, 2019 · Feb 3, 2019
diff --git a/assets/carcurse.png b/assets/carcurse.png
diff --git a/assets/favicon.ico b/assets/favicon.ico
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,116 @@
+
+
+body{
+    margin: 0px;
+    font-family: 'Quicksand', sans-serif;
+    cursor: crosshair;
+    background-color: #fcf5ee;
+}
+
+header{
+    background-color: #65c6c4;
+    font-family: 'Fahkwang', sans-serif;
+    width: 100vw;
+    height: 80px;
+    text-align: center;
+    position: fixed;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: column;
+}
+
+header:hover{
+    font-size: 50px;
+    color: white;
+
+}
+
+p{
+    font-size: 12px;
+}
+
+#main{
+    top: 120px;
+    margin-left: 200px;
+    margin-top: 0px;
+    margin: 10px 10px 50px 0px;
+    width: 78vw;
+    height: 525px;
+    position: absolute;
+    overflow-y: scroll;
+    right: 10px;
+}
+
+#sidecount{
+    margin-top: 70px;
+    margin-left: 10px;
+    width: 15vw;
+    padding-top: 50px;
+    position: fixed;
+}
+
+.message{
+    margin: 0px 0px 10px 0px;
+    border-radius: 5px 0px 25px 0px; 
+    overflow: hidden;
+    z-index: 1;
+    border: 1px solid lightslategray;
+    font-weight: 900;
+}
+
+.fromDate{
+    font-family: 'Quicksand', sans-serif;
+    background-color: #65c6c4;
+    color: #112d4e;
+    padding: 5px 5px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.mailBody{
+    font-weight: normal;
+    display: none;
+    padding: 10px 10px;
+}
+
+.mailBody:hover{
+    background-color: aquamarine;
+}
+
+.markReadDiv{
+    display: inline;
+    padding-top: 5px;
+    padding-right: 20px;
+}
+
+.readStatus{
+    display: none;
+}
+
+.statbox{
+    display: flex;
+    justify-content: space-between;
+}
+
+.subjectBodyBox{
+    display: flex;
+    justify-content: space-between;
+}
+
+.subjectBodyBox:hover{
+    background-color: hotpink;
+}
+
+.subject{
+    padding: 5 5 5 5;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+
+.countstat{
+    display: flex;
+    justify-content: space-between;
+}
diff --git a/index.html b/index.html
@@ -1,18 +1,223 @@
 <html>
-	<head>
-		<script src="js/mail-generator.js"></script>
-		<link href="css/style.css" rel="stylesheet" media="screen">
-    <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
-
-      };
-    </script>
-	</head>
-	<body>
-		<div class="container" id="main">
-			Build Me!
+
+<head>
+	<script src="js/mail-generator.js"></script>
+	<link href="css/style.css" rel="stylesheet" media="screen">
+	<link rel="icon" href="assets/favicon.ico">
+	<title>Gee-mail!</title>
+	<link href="https://fonts.googleapis.com/css?family=Fahkwang|Quicksand" rel="stylesheet">
+	<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
+
+			//Declare variable for mails
+
+			var mailArray = window.geemails
+			var newMailArray = mailArray;
+
+			var unreadCount = 0;
+			var totalMessages = 0;
+			var readCount = 0;
+
+			//content for sidecounter
+
+			function initializeCounter(messageCount) {
+				totalMessages = messageCount
+				ttlmess.innerHTML = totalMessages;
+
+				unreadCount = messageCount;
+				unread.innerHTML = unreadCount;
+			}
+
+			function messageReceived() {
+				totalMessages++;
+				ttlmess.innerHTML = totalMessages;
+
+				unreadCount++;
+				unread.innerHTML = unreadCount;
+			}
+
+			function messageRead() {
+				unreadCount--;
+				unread.innerHTML = unreadCount;
+
+				readCount++;
+				read.innerHTML = readCount;
+			}
+
+			function messageUnread() {
+				unreadCount++;
+				unread.innerHTML = unreadCount;
+
+				readCount--;
+				read.innerHTML = readCount;
+			}
+
+			function totalMessagesUpdate(messageCount) {
+				totalMessages = messageCount;
+				ttlmess.innerHTML = totalMessages
+			}
+
+			//function to add messages
+
+			function createMessageBox(messageObject) {
+
+				var messageBox = document.createElement('div');
+				messageBox.className = 'message';
+				main.prepend(messageBox);
+
+				var fromDate = document.createElement('div');
+				fromDate.className = 'fromDate';
+				messageBox.appendChild(fromDate);
+
+				var mailFrom = document.createElement('div');
+				mailFrom.className = 'sender';
+				mailFrom.innerHTML = 'From: ' + messageObject.sender;
+				fromDate.appendChild(mailFrom);
+
+				var mailDate = document.createElement('div');
+				mailDate.className = 'date';
+				mailDate.innerHTML = messageObject.date;
+				fromDate.appendChild(mailDate);
+
+				var subBody = document.createElement('div');
+				subBody.className = 'subjectBodyBox';
+				messageBox.appendChild(subBody);
+
+				var mailSubject = document.createElement('div');
+				mailSubject.className = 'subject';
+				mailSubject.innerHTML = 'Subject: ' + messageObject.subject;
+				subBody.appendChild(mailSubject);
+
+				var markAsRead = document.createElement('div');
+				markAsRead.className = 'markReadDiv';
+				subBody.appendChild(markAsRead);
+
+				var readCheckbox = document.createElement('input');
+				readCheckbox.className = 'readBox';
+				readCheckbox.type = 'checkbox';
+				markAsRead.appendChild(readCheckbox);
+
+				var markRead = document.createElement('span');
+				markRead.className = 'markReadText';
+				markRead.innerHTML = 'Mark as read';
+				markAsRead.appendChild(markRead);
+
+				var mailBody = document.createElement('div');
+				mailBody.className = 'mailBody';
+				mailBody.innerHTML = messageObject.body;
+				messageBox.appendChild(mailBody);
+
+
+				setClickListener(messageBox);
+
+				setCheckboxListener(readCheckbox);
+			}
+
+			//function to set click listener to show message upon clicking messageBox
+
+			function setClickListener(message) {
+
+				message.addEventListener('click', showMessage);
+			}
+
+			function showMessage() {
+
+				var showMess = this.querySelectorAll('.mailBody')[0];
+				if (showMess.style.display === 'none') {
+					showMess.style.display = 'block';
+					this.style.fontWeight = 'normal';
+				} else {
+					showMess.style.display = 'none';
+				}
+
+
+			}
+
+			//function to set click listener on check box to update read count
+
+			function setCheckboxListener(checkbox) {
+				checkbox.addEventListener('change', readStatUpdate);
+			}
+
+			function readStatUpdate() {
+				if (this.checked) {
+					messageRead();
+				} else {
+					messageUnread();
+				}
+			}
+
+
+			//Sort the contents in the mail array by date from newest to oldest			
+
+			newMailArray.sort(function (a, b) {
+				return a.date - b.date;
+			});
+
+			//For loop to consume data and such... initialize counter (orignal number)
+			for (var i = 0; i < newMailArray.length; i++) {
+				createMessageBox(newMailArray[i]);
+			}
+
+			initializeCounter(newMailArray.length);
+
+
+			//Set interval for mail to add more messages
+			setInterval(addMessage, 10000);
+
+			function addMessage() {
+
+				var newMessage = getNewMessage();
+
+				//push to check messages appearing correctly
+				newMailArray.push(newMessage);
+
+				//create new message box
+				createMessageBox(newMessage);
+
+				//Update sidecount container
+				messageReceived();
+			}
+
+			//Console log mail array to check messages are correct
+			console.log(newMailArray);
+
+		};
+	</script>
+</head>
+
+<body>
+	<header id="header">
+		<h1 id='geeMail'>Gee-mail!!!</h1>
+	</header>
+
+
+	<div class="container" id="sidecount">
+		<img src="assets/carcurse.png" alt="" title="Quack!!">
+		<h2 id="inboxttl">INBOX</h2>
+		<p>Note: Click on From/Subject to Show Message</p>
+
+		<div class="statbox">
+			<p class="status">Total Messages</p>
+			<p class="statcount" id="ttlmess">0</p>
 		</div>
-	</body>
+
+		<div class="countstat">
+			<p class="status">Unread</p>
+			<p class="statcount" id="unread">0</p>
+		</div>
+
+		<div class="countstat">
+			<p class="status">Read</p>
+			<p class="statcount" id="read">0</p>
+		</div>
+	</div>
+
+	<div class="container" id="main"></div>
+
+
+</body>
+
 </html>