From b730e75a3942953b28cf42b40e7527563ecd3820 Mon Sep 17 00:00:00 2001 From: Rian Mueller Date: Fri, 31 May 2019 14:20:39 -1000 Subject: [PATCH 1/9] display message list --- index.html | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 65 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index a8a1aad9..c6b4a447 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,75 @@ 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 + +//console.log('Does this work?'); +//console.log(window.geemails); + +for(i = 0; i < window.geemails.length; i++){ + //console.log(window.geemails[i]) + + var messageBox = document.createElement('div'); + messageBox.className = 'message'; + messageBox.innerHTML = window.geemails[i].date + window.geemails[i].sender + window.geemails[i].subject; + main.appendChild(messageBox); +} + +//first I must create child divs for the message bodies, hidden by default (using CSS) + + + + + +// var missing = "1 Big ol' beet"; + +// recipe.addEventListener('click', addBeet); + +// function addBeet(){ +// var fooBeet = document.createElement('li'); +// fooBeet.className = 'mix'; +// fooBeet.innerHTML = missing; +// ingredient.appendChild(fooBeet); + +// trying to show/hide the message body + +for(i = 0; i < window.geemails.length; i++){ + messageBox[i].addEventListener('click', showHideBody); +} + +function showHideBody(){ + var messageClick = this.querySelector('.message'); + if(messageClick.style.display == 'inline'){ + messageClick.style.display = 'none' + } +} + + + +// var navBox = document.getElementsByClassName('navi'); + +// for(i = 0; i < navBox.length; i++){ +// navBox[i].addEventListener('click', showHideContents) +// } + +// function showHideContents(){ +// var navElem = this.querySelector('.inner') +// if(navElem.style.display == 'inline'){ +// navElem.style.display = 'none' +// }else{ +// navElem.style.display = 'inline' +// } +// } + + }; +
+ +
Build Me!
From 6c802eb7424a568d4a2da512650dbbbb0e8934f7 Mon Sep 17 00:00:00 2001 From: Rian Mueller Date: Fri, 31 May 2019 15:04:34 -1000 Subject: [PATCH 2/9] display message bodies --- index.html | 49 +++++++++++++++++++++++++++++++++++++------------ 1 file changed, 37 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index c6b4a447..13952dcb 100644 --- a/index.html +++ b/index.html @@ -13,19 +13,41 @@ //console.log(window.geemails); for(i = 0; i < window.geemails.length; i++){ - //console.log(window.geemails[i]) - var messageBox = document.createElement('div'); - messageBox.className = 'message'; + messageBox.className = 'messageHeaders'; messageBox.innerHTML = window.geemails[i].date + window.geemails[i].sender + window.geemails[i].subject; main.appendChild(messageBox); + + var messageBody = document.createElement('div'); + messageBody.className = 'messageBodies'; + messageBody.innerHTML = window.geemails[i].body; + main.appendChild(messageBody); } //first I must create child divs for the message bodies, hidden by default (using CSS) +// var messageHeaders = document.getElementsByClassName(messageHeaders); + +// for(i = 0; i < window.geemails.length; i++){ + +// } + +// message.addEventListener('click', showHideBody); + +// var messages + + +// var classname = document.getElementsByClassName("classname"); +// var myFunction = function() { +// var attribute = this.getAttribute("data-myattribute"); +// alert(attribute); +// }; +// for (var i = 0; i < classname.length; i++) { +// classname[i].addEventListener('click', myFunction, false); +// } // var missing = "1 Big ol' beet"; @@ -37,18 +59,21 @@ // fooBeet.innerHTML = missing; // ingredient.appendChild(fooBeet); + + + // trying to show/hide the message body -for(i = 0; i < window.geemails.length; i++){ - messageBox[i].addEventListener('click', showHideBody); -} +// for(i = 0; i < window.geemails.length; i++){ +// messageBox[i].addEventListener('click', showHideBody); +// } -function showHideBody(){ - var messageClick = this.querySelector('.message'); - if(messageClick.style.display == 'inline'){ - messageClick.style.display = 'none' - } -} +// function showHideBody(){ +// var messageClick = this.querySelector('.message'); +// if(messageClick.style.display == 'inline'){ +// messageClick.style.display = 'none' +// } +// } From 272de5ac3c73d15447f83d68dfff16f110438a58 Mon Sep 17 00:00:00 2001 From: Rian Mueller Date: Fri, 31 May 2019 15:09:50 -1000 Subject: [PATCH 3/9] hidden message bodies --- css/style.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/css/style.css b/css/style.css index e69de29b..d2bb6490 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,3 @@ +.messageBodies{ + display: none +} \ No newline at end of file From 42f5ea99ae1c97218b6ddea8a6b45d2841f5ba6d Mon Sep 17 00:00:00 2001 From: Rian Mueller Date: Fri, 31 May 2019 16:46:13 -1000 Subject: [PATCH 4/9] click to show and hide message bodies --- css/style.css | 4 ++-- index.html | 38 +++++++++++++++++--------------------- 2 files changed, 19 insertions(+), 23 deletions(-) diff --git a/css/style.css b/css/style.css index d2bb6490..0c4cf3e2 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,3 @@ -.messageBodies{ +/* .messageBodies{ display: none -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/index.html b/index.html index 13952dcb..5a3333ae 100644 --- a/index.html +++ b/index.html @@ -9,34 +9,30 @@ //display date, subject, sender from window.geemails variable, create a div for each message -//console.log('Does this work?'); -//console.log(window.geemails); - for(i = 0; i < window.geemails.length; i++){ - var messageBox = document.createElement('div'); - messageBox.className = 'messageHeaders'; - messageBox.innerHTML = window.geemails[i].date + window.geemails[i].sender + window.geemails[i].subject; - main.appendChild(messageBox); + var messageHeader = document.createElement('div'); + messageHeader.className = 'messageHeaders'; + messageHeader.innerHTML = window.geemails[i].date + window.geemails[i].sender + window.geemails[i].subject; + main.appendChild(messageHeader); + + messageHeader.addEventListener('click', showHideBody); var messageBody = document.createElement('div'); messageBody.className = 'messageBodies'; messageBody.innerHTML = window.geemails[i].body; - main.appendChild(messageBody); + messageBody.style.display = 'none'; + //Why doesn't the CSS work instead? + messageHeader.appendChild(messageBody); } -//first I must create child divs for the message bodies, hidden by default (using CSS) - -// var messageHeaders = document.getElementsByClassName(messageHeaders); - -// for(i = 0; i < window.geemails.length; i++){ - -// } - -// message.addEventListener('click', showHideBody); - -// var messages - - +function showHideBody(){ + var messageClick = this.querySelector('.messageBodies'); + if(messageClick.style.display === 'block'){ + messageClick.style.display = 'none'; + }else{ + messageClick.style.display = 'block'; + } +} // var classname = document.getElementsByClassName("classname"); From 89db6635c516b413e8441c184bd83b026019d51c Mon Sep 17 00:00:00 2001 From: Rian Mueller Date: Fri, 31 May 2019 18:21:19 -1000 Subject: [PATCH 5/9] counter --- css/style.css | 16 ++++++++++++-- index.html | 60 +++++---------------------------------------------- 2 files changed, 19 insertions(+), 57 deletions(-) diff --git a/css/style.css b/css/style.css index 0c4cf3e2..21484045 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,15 @@ -/* .messageBodies{ +.messageBodies{ display: none -} */ \ No newline at end of file +} + +#logo{ + align: left; + display: inline-block; + width: 50% +} + +#counter{ + align: right; + display: inline-block; + width: 50% +} \ No newline at end of file diff --git a/index.html b/index.html index 5a3333ae..145feb03 100644 --- a/index.html +++ b/index.html @@ -34,67 +34,17 @@ } } -// var classname = document.getElementsByClassName("classname"); - -// var myFunction = function() { -// var attribute = this.getAttribute("data-myattribute"); -// alert(attribute); -// }; - -// for (var i = 0; i < classname.length; i++) { -// classname[i].addEventListener('click', myFunction, false); -// } - -// var missing = "1 Big ol' beet"; - -// recipe.addEventListener('click', addBeet); - -// function addBeet(){ -// var fooBeet = document.createElement('li'); -// fooBeet.className = 'mix'; -// fooBeet.innerHTML = missing; -// ingredient.appendChild(fooBeet); - - - - -// trying to show/hide the message body - -// for(i = 0; i < window.geemails.length; i++){ -// messageBox[i].addEventListener('click', showHideBody); -// } - -// function showHideBody(){ -// var messageClick = this.querySelector('.message'); -// if(messageClick.style.display == 'inline'){ -// messageClick.style.display = 'none' -// } -// } - - - -// var navBox = document.getElementsByClassName('navi'); - -// for(i = 0; i < navBox.length; i++){ -// navBox[i].addEventListener('click', showHideContents) -// } - -// function showHideContents(){ -// var navElem = this.querySelector('.inner') -// if(navElem.style.display == 'inline'){ -// navElem.style.display = 'none' -// }else{ -// navElem.style.display = 'inline' -// } -// } - +counter.innerHTML = window.geemails.length; };
- +
Build Me! From c618fd98dcb8113214c52dbc473516b3d0c5fb80 Mon Sep 17 00:00:00 2001 From: Rian Mueller Date: Fri, 31 May 2019 20:08:01 -1000 Subject: [PATCH 6/9] gets and displays new message every 15 seconds --- index.html | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 145feb03..6cc82aeb 100644 --- a/index.html +++ b/index.html @@ -36,14 +36,42 @@ counter.innerHTML = window.geemails.length; +console.log(window.geemails); +function addNewMessage(){ + var newMessage = { + date: getNewMessage().date, + sender: getNewMessage().sender, + subject: getNewMessage().subject, + body: getNewMessage().body + }; + window.geemails.push(newMessage); + + var messageHeader = document.createElement('div'); + messageHeader.className = 'messageHeaders'; + messageHeader.innerHTML = getNewMessage().date + getNewMessage().sender + getNewMessage().subject; + main.appendChild(messageHeader); + + messageHeader.addEventListener('click', showHideBody); + + var messageBody = document.createElement('div'); + messageBody.className = 'messageBodies'; + messageBody.innerHTML = getNewMessage().body; + messageBody.style.display = 'none'; + //Why doesn't the CSS work instead? + messageHeader.appendChild(messageBody); +} + +setInterval(addNewMessage, 15000) + + };
From 3ab9a1398a4f679025873a613bbc7305efcacdd4 Mon Sep 17 00:00:00 2001 From: Rian Mueller Date: Fri, 31 May 2019 20:14:07 -1000 Subject: [PATCH 7/9] counter updates with each new message --- css/style.css | 4 ++++ index.html | 5 +++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 21484045..69fbf99f 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,7 @@ +body{ + background-color: coral; +} + .messageBodies{ display: none } diff --git a/index.html b/index.html index 6cc82aeb..5105f981 100644 --- a/index.html +++ b/index.html @@ -59,10 +59,11 @@ messageBody.style.display = 'none'; //Why doesn't the CSS work instead? messageHeader.appendChild(messageBody); + counter.innerHTML = window.geemails.length; } +//function contains a lot of duplicate code - is there a good way to simplify and avoid duplicaton? -setInterval(addNewMessage, 15000) - +setInterval(addNewMessage, 1000) }; From 4ab9041b03591c36ea89581da79de16f972a51a5 Mon Sep 17 00:00:00 2001 From: Rian Mueller Date: Fri, 31 May 2019 22:13:20 -1000 Subject: [PATCH 8/9] improved css --- css/style.css | 29 ++++++++++++++++++++++++----- index.html | 41 ++++++++++++++++++----------------------- 2 files changed, 42 insertions(+), 28 deletions(-) diff --git a/css/style.css b/css/style.css index 69fbf99f..03749620 100644 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,38 @@ body{ - background-color: coral; + background-color: cornflowerblue; } -.messageBodies{ - display: none +.header{ + background-color: lightblue; +} + +.container{ + background-color: lightgoldenrodyellow } #logo{ + background-color: grey; align: left; display: inline-block; - width: 50% + width: 50%; + font-family: Arial; } #counter{ + background-color: pink; align: right; display: inline-block; - width: 50% + 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 5105f981..5c8e8e1a 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,9 @@ for(i = 0; i < window.geemails.length; i++){ var messageHeader = document.createElement('div'); + var messageDate = window.geemails[i].date messageHeader.className = 'messageHeaders'; - messageHeader.innerHTML = window.geemails[i].date + window.geemails[i].sender + window.geemails[i].subject; + messageHeader.innerHTML = window.geemails[i].sender + ' ' + window.geemails[i].subject + ' ' + messageDate; main.appendChild(messageHeader); messageHeader.addEventListener('click', showHideBody); @@ -20,23 +21,11 @@ var messageBody = document.createElement('div'); messageBody.className = 'messageBodies'; messageBody.innerHTML = window.geemails[i].body; - messageBody.style.display = 'none'; - //Why doesn't the CSS work instead? messageHeader.appendChild(messageBody); -} -function showHideBody(){ - var messageClick = this.querySelector('.messageBodies'); - if(messageClick.style.display === 'block'){ - messageClick.style.display = 'none'; - }else{ - messageClick.style.display = 'block'; - } + counter.innerHTML = 'Messages: ' + window.geemails.length; } -counter.innerHTML = window.geemails.length; - -console.log(window.geemails); function addNewMessage(){ var newMessage = { date: getNewMessage().date, @@ -47,8 +36,9 @@ window.geemails.push(newMessage); var messageHeader = document.createElement('div'); + var messageDate = getNewMessage().date messageHeader.className = 'messageHeaders'; - messageHeader.innerHTML = getNewMessage().date + getNewMessage().sender + getNewMessage().subject; + messageHeader.innerHTML = getNewMessage().sender + ' ' + getNewMessage().subject + ' ' + messageDate; main.appendChild(messageHeader); messageHeader.addEventListener('click', showHideBody); @@ -56,27 +46,32 @@ var messageBody = document.createElement('div'); messageBody.className = 'messageBodies'; messageBody.innerHTML = getNewMessage().body; - messageBody.style.display = 'none'; - //Why doesn't the CSS work instead? messageHeader.appendChild(messageBody); - counter.innerHTML = window.geemails.length; + 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! -
+
\ No newline at end of file From ac4a06ab22139e6d772d022f3072f2f0418a8900 Mon Sep 17 00:00:00 2001 From: Rian Mueller Date: Sun, 2 Jun 2019 07:14:38 -1000 Subject: [PATCH 9/9] removed duplicate getNewMessage function calls --- index.html | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 5c8e8e1a..29fcb09b 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,8 @@ for(i = 0; i < window.geemails.length; i++){ var messageHeader = document.createElement('div'); - var messageDate = window.geemails[i].date messageHeader.className = 'messageHeaders'; - messageHeader.innerHTML = window.geemails[i].sender + ' ' + window.geemails[i].subject + ' ' + messageDate; + messageHeader.innerHTML = window.geemails[i].sender + ' ' + window.geemails[i].subject + ' ' + window.geemails[i].date; main.appendChild(messageHeader); messageHeader.addEventListener('click', showHideBody); @@ -27,25 +26,19 @@ } function addNewMessage(){ - var newMessage = { - date: getNewMessage().date, - sender: getNewMessage().sender, - subject: getNewMessage().subject, - body: getNewMessage().body - }; + var newMessage = getNewMessage(); window.geemails.push(newMessage); var messageHeader = document.createElement('div'); - var messageDate = getNewMessage().date messageHeader.className = 'messageHeaders'; - messageHeader.innerHTML = getNewMessage().sender + ' ' + getNewMessage().subject + ' ' + messageDate; + 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 = getNewMessage().body; + messageBody.innerHTML = newMessage.body; messageHeader.appendChild(messageBody); counter.innerHTML = 'Messages: ' + window.geemails.length; }