Gee-mail Coding Challenge

css/style.css

@@ -0,0 +1,55 @@
+#title{
+    font-size: 36px;
+    text-align: center;
+    font-family: 'Righteous', cursive;
+}
+header{
+    background-color: aqua;
+}
+body{
+    background-color: whitesmoke;
+
+}
+#main{
+    font-size: 25px;
+    font-family: 'Ropa Sans', sans-serif;
+}
+#inbox{
+    font-size: 18px;
+}
+#counter{
+    display: inline
+}
+.messages{
+    display: flex;
+    justify-content: space-between;
+
+}
+.sender{
+    display: inline;
+    font-family: 'Ropa Sans', sans-serif;
+    font-size: 16px;
+}
+.subject{
+    display: inline;
+    text-align: center;
+    font-family: 'Ropa Sans', sans-serif;
+}
+
+.messages{
+    color: black;
+}
+.outerBox{
+    border-style: solid;
+    border-color: black;
+    padding: 2px;
+}
+
+.newOuterBox{
+    border-style: solid;
+    border-color: black;
+    padding: 2px;
+}
+.body{
+    display: none;
+}

index.html

@@ -5,14 +5,131 @@
     <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
+				setInterval(checkCounter, 1)
+				function checkCounter(){
+				counter.innerHTML ='(' + window.geemails.length + ')';
+				}
+
+				for (var i=0; i<window.geemails.length; i++){
+					var outerBox = document.createElement('div');
+					outerBox.className = 'outerBox';
+					inbox.appendChild(outerBox);
+					var findOuterBox = document.getElementsByClassName('outerBox')[i];
+
+					var messageBox = document.createElement('div');
+
+					messageBox.className = 'messages';
+
+					outerBox.appendChild(messageBox);
+					var findMessageBox = document.getElementsByClassName('messages')[i];
+					console.log(findMessageBox)
+
+					var messageContentsSender = document.createElement('div');
+					messageContentsSender.className = 'sender';
+					messageContentsSender.innerHTML = window.geemails[i].sender;
+					findMessageBox.appendChild(messageContentsSender);
+
+					var messageContentsSubject = document.createElement('div');
+					messageContentsSubject.className = 'subject'
+					messageContentsSubject.innerHTML = window.geemails[i].subject;
+					findMessageBox.appendChild(messageContentsSubject);
+
+					var messageContentsDate = document.createElement('div');
+					messageContentsDate.className = 'date';
+					messageContentsDate.innerHTML = window.geemails[i].date;
+					findMessageBox.appendChild(messageContentsDate);
+
+					var messageContentsBody = document.createElement('div');
+					messageContentsBody.className = 'body';
+					messageContentsBody.innerHTML = window.geemails[i].body;
+					findOuterBox.appendChild(messageContentsBody);
+
+					findOuterBox.addEventListener('click', showMess);
+
+
+					function showMess(){
+						var findBody = this.querySelector('.body')
+						if(findBody.style.display === 'block'){
+							findBody.style.display = 'none';
+						}else{
+							findBody.style.display = 'block';
+						}
+					}
+
+
+				}
+
+				setInterval(makeMessage, 5000)
+				function makeMessage(){
+					var newMessage = getNewMessage();
+
+					var newOuterBox = document.createElement('div');
+					newOuterBox.className = 'newOuterBox'
+					inbox.appendChild(newOuterBox);
+					var newMessageBox = document.createElement('div');
+					newMessageBox.className = 'messages';
+					newOuterBox.appendChild(newMessageBox);
+
+					var newMessageContentsSender = document.createElement('div');
+					newMessageContentsSender.className = 'sender';
+					newMessageContentsSender.innerHTML = newMessage.sender;
+					newMessageBox.appendChild(newMessageContentsSender);
+
+					var newMessageContentsSubject = document.createElement('div');
+					newMessageContentsSubject.className = 'subject';
+					newMessageContentsSubject.innerHTML = newMessage.subject;
+					newMessageBox.appendChild(newMessageContentsSubject);
+
+					var newMessageContentsDate = document.createElement('div');
+					newMessageContentsDate.className = 'date';
+					newMessageContentsDate.innerHTML = newMessage.date;
+					newMessageBox.appendChild(newMessageContentsDate);
+
+					var newMessageContentsBody = document.createElement('div');
+					newMessageContentsBody.className = 'body';
+					newMessageContentsBody.innerHTML = newMessage.body;
+					newOuterBox.appendChild(newMessageContentsBody);
+
+
+					newOuterBox.addEventListener('click', showBody)
+
+					function showBody(){
+						var findNewBody = this.querySelector('.body')
+						if (findNewBody.style.display === 'block'){
+							findNewBody.style.display = 'none'
+						} else{
+							findNewBody.style.display = 'block';
+						}
+
+					}
+
+
+
+					window.geemails.push(newMessage);
+				}
+
+
       };
-    </script>
+		</script>
+		<link href="https://fonts.googleapis.com/css?family=Righteous|Ropa+Sans" rel="stylesheet">
 	</head>
 	<body>
-		<div class="container" id="main">
-			Build Me!
+		<header>
+			<h1 id='title'>Gee-Mail</h1>
+		</header>
+		<div id='content'>
+				<div class="container" id="main">
+						Inbox
+						<div id='counter'></div>
+					</div>
+					<div id='inbox'>
+
+					</div>
+
 		</div>
+
 	</body>
-</html>
+</html>
+
+