diff --git a/css/style.css b/css/style.css
index e69de29b..03749620 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,38 @@
+body{
+ background-color: cornflowerblue;
+}
+
+.header{
+ background-color: lightblue;
+}
+
+.container{
+ background-color: lightgoldenrodyellow
+}
+
+#logo{
+ background-color: grey;
+ align: left;
+ display: inline-block;
+ width: 50%;
+ font-family: Arial;
+}
+
+#counter{
+ background-color: pink;
+ align: right;
+ display: inline-block;
+ width: 50%;
+ font-family: comic-sans;
+}
+
+.messageHeaders{
+ background-color: lightgreen;
+ padding: 10px
+}
+
+.messageBodies{
+ background-color: yellow;
+ padding: 10px;
+ display: none
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a8a1aad9..29fcb09b 100644
--- a/index.html
+++ b/index.html
@@ -6,13 +6,65 @@
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
-
+
+ //display date, subject, sender from window.geemails variable, create a div for each message
+
+for(i = 0; i < window.geemails.length; i++){
+ var messageHeader = document.createElement('div');
+ messageHeader.className = 'messageHeaders';
+ messageHeader.innerHTML = window.geemails[i].sender + ' ' + window.geemails[i].subject + ' ' + window.geemails[i].date;
+ main.appendChild(messageHeader);
+
+ messageHeader.addEventListener('click', showHideBody);
+
+ var messageBody = document.createElement('div');
+ messageBody.className = 'messageBodies';
+ messageBody.innerHTML = window.geemails[i].body;
+ messageHeader.appendChild(messageBody);
+
+ counter.innerHTML = 'Messages: ' + window.geemails.length;
+}
+
+function addNewMessage(){
+ var newMessage = getNewMessage();
+ window.geemails.push(newMessage);
+
+ var messageHeader = document.createElement('div');
+ messageHeader.className = 'messageHeaders';
+ messageHeader.innerHTML = newMessage.sender + ' ' + newMessage.subject + ' ' + newMessage.date;
+ main.appendChild(messageHeader);
+
+ messageHeader.addEventListener('click', showHideBody);
+
+ var messageBody = document.createElement('div');
+ messageBody.className = 'messageBodies';
+ messageBody.innerHTML = newMessage.body;
+ messageHeader.appendChild(messageBody);
+ counter.innerHTML = 'Messages: ' + window.geemails.length;
+}
+//function contains a lot of duplicate code - is there a good way to simplify and avoid duplicaton?
+
+setInterval(addNewMessage, 1000)
+
+function showHideBody(){
+ var messageClick = this.querySelector('.messageBodies');
+ if(messageClick.style.display === 'block'){
+ messageClick.style.display = 'none';
+ }else{
+ messageClick.style.display = 'block';
+ }
+}
+
};
-
- Build Me!
-
+
+