From 0849f5d01adbfbf104ff9d6350c90c1ce7f7ee49 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 25 Apr 2019 16:21:59 -1000 Subject: [PATCH 01/39] started the layout --- index.html | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 102 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index a8a1aad9..c28a4964 100644 --- a/index.html +++ b/index.html @@ -3,16 +3,112 @@ - + + +
- Build Me! +
+

David Efhan

+
+ +
inbox
+ +
+
+

+

+

+

+
+ +
+

+

+

+

+
+ +
+

+

+

+

+
+ +
+

+

+

+

+
+ +
+

+

+

+

+
+ +
+

+

+

+

+
+ +
+

+

+

+

+
+ +
+

+

+

+

+
+ + +
+

+

+

+

+
+ +
+

+

+

+

+
+
\ No newline at end of file From 79941aebb9e74a8fae8c06f0cc99aed18c9a6281 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 25 Apr 2019 16:31:38 -1000 Subject: [PATCH 02/39] looping through messages to populate data --- css/style.css | 4 +++ index.html | 68 ++------------------------------------------------- 2 files changed, 6 insertions(+), 66 deletions(-) diff --git a/css/style.css b/css/style.css index e69de29b..a5c4f801 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,4 @@ +#message-grid{ + display: grid; + grid-template-columns: repeat(3, 1fr); +} \ No newline at end of file diff --git a/index.html b/index.html index c28a4964..b67f4df4 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ inboxNumber.innerHTML = window.geemails.length; messages.forEach(messages => { - const date = document.querySelector('.date'); + const date = document.querySelector('.date'); const subject = document.querySelector('.subject'); const sender = document.querySelector('.sender'); const body = document.querySelector('.body-copy'); @@ -38,71 +38,7 @@

David Efhan

inbox
-
-

-

-

-

-
- -
-

-

-

-

-
- -
-

-

-

-

-
- -
-

-

-

-

-
- -
-

-

-

-

-
- -
-

-

-

-

-
- -
-

-

-

-

-
- -
-

-

-

-

-
- - -
-

-

-

-

-
- -
+

From 5d044b4e8859f2ddba5041a8ec1267369e55a612 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 25 Apr 2019 19:25:50 -1000 Subject: [PATCH 03/39] moving everything into objects --- index.html | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index b67f4df4..440a6325 100644 --- a/index.html +++ b/index.html @@ -3,15 +3,24 @@ From fc1c434bc15132c166b8ad58aaa810aa5ad665bc Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 25 Apr 2019 19:41:20 -1000 Subject: [PATCH 04/39] creating a new message element in the message grid --- index.html | 47 +++++------------------------------------------ js/load.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 42 deletions(-) create mode 100644 js/load.js diff --git a/index.html b/index.html index 440a6325..14cecb18 100644 --- a/index.html +++ b/index.html @@ -2,49 +2,12 @@ - + diff --git a/js/load.js b/js/load.js new file mode 100644 index 00000000..a231a726 --- /dev/null +++ b/js/load.js @@ -0,0 +1,47 @@ + // Create a new message element for every item of geeMail + + + + const createMessage = () => { + const geeMail = window.geemails; + const messageGrid = document.querySelector('#message-grid'); + + for (var i in geeMail) { + const newMessage = document.createElement('div'); + const messageIndex = geeMail[i] + newMessage.id = messageIndex; + newMessage.className = "message"; + newMessage.innerHTML = messageIndex; + messageGrid.appendChild(newElement); + console.log(messageIndex); + } + } + + // Fill in data from the window.geemails + const populateData = () => { + const messages = document.querySelectorAll('.message'); + + messages.forEach(message => { + const date = document.querySelector('.date'); + const subject = document.querySelector('.subject'); + const sender = document.querySelector('.sender'); + const body = document.querySelector('.body-copy'); + + const mailNumber = window.geemails[1]; + + date.innerHTML = mailNumber.date; + subject.innerHTML = mailNumber.subject; + sender.innerHTML = mailNumber.sender; + body.innerHTML = mailNumber.body; + }) + } + + + window.onload = function(){ + // Show available messages in inbox + const inboxNumber = document.querySelector('.message-number'); + inboxNumber.innerHTML = window.geemails.length; + // Populate the data into the messages + createMessage(); + populateData(); + }; \ No newline at end of file From 6aa361ae520b25539d6c094ac5d054aab6c9c703 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 25 Apr 2019 20:31:12 -1000 Subject: [PATCH 05/39] working on connecting and popluating data --- index.html | 18 ++++++++++++------ js/load.js | 17 ++++++++--------- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 14cecb18..3c22d026 100644 --- a/index.html +++ b/index.html @@ -19,12 +19,18 @@

David Efhan

inbox
-
-

-

-

-

-
+
+

+

+

+

+
+
+

+

+

+

+
diff --git a/js/load.js b/js/load.js index a231a726..e75970de 100644 --- a/js/load.js +++ b/js/load.js @@ -1,31 +1,30 @@ // Create a new message element for every item of geeMail + const geeMail = window.geemails; - - const createMessage = () => { - const geeMail = window.geemails; + const messageGrid = document.querySelector('#message-grid'); - for (var i in geeMail) { + geeMail.forEach(i => { const newMessage = document.createElement('div'); const messageIndex = geeMail[i] newMessage.id = messageIndex; newMessage.className = "message"; newMessage.innerHTML = messageIndex; - messageGrid.appendChild(newElement); - console.log(messageIndex); - } + messageGrid.appendChild(newMessage); + // console.log(messageIndex); + } ) } // Fill in data from the window.geemails const populateData = () => { const messages = document.querySelectorAll('.message'); - messages.forEach(message => { + messages.forEach(i => { const date = document.querySelector('.date'); const subject = document.querySelector('.subject'); const sender = document.querySelector('.sender'); - const body = document.querySelector('.body-copy'); + const body = document.querySelector('.body-copy'); const mailNumber = window.geemails[1]; From 82f2f42e91d65d4c398668fc327454ee62e7d906 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Fri, 26 Apr 2019 21:00:25 -1000 Subject: [PATCH 06/39] got the correct amount of messages to appear --- index.html | 4 ++-- js/load.js | 17 +++++++++++------ 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 3c22d026..5557f32c 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@

David Efhan

inbox
-
+
diff --git a/js/load.js b/js/load.js index e75970de..548d2890 100644 --- a/js/load.js +++ b/js/load.js @@ -5,27 +5,32 @@ const messageGrid = document.querySelector('#message-grid'); - geeMail.forEach(i => { + geeMail.forEach(mail => { const newMessage = document.createElement('div'); - const messageIndex = geeMail[i] + const messageIndex = geeMail[mail] newMessage.id = messageIndex; newMessage.className = "message"; newMessage.innerHTML = messageIndex; messageGrid.appendChild(newMessage); - // console.log(messageIndex); + console.log(mail); + console.log(geeMail) } ) } - // Fill in data from the window.geemails + // Fill in data from the window.geemails const populateData = () => { const messages = document.querySelectorAll('.message'); - messages.forEach(i => { + messages.forEach(message => { const date = document.querySelector('.date'); const subject = document.querySelector('.subject'); const sender = document.querySelector('.sender'); const body = document.querySelector('.body-copy'); + createMessage(); + + console.log(message) + const mailNumber = window.geemails[1]; date.innerHTML = mailNumber.date; @@ -42,5 +47,5 @@ inboxNumber.innerHTML = window.geemails.length; // Populate the data into the messages createMessage(); - populateData(); + // populateData(); }; \ No newline at end of file From 2dee54e65a43cc7fe8a31c9bfe9b8caa02502adc Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Fri, 26 Apr 2019 21:19:45 -1000 Subject: [PATCH 07/39] started using data-index to render out geeMail --- index.html | 54 ++++++++++++++++++++++++++++++++++++++++--- js/load.js | 68 +++++++++++++++++++++++++++++++----------------------- 2 files changed, 90 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 5557f32c..093f869a 100644 --- a/index.html +++ b/index.html @@ -19,18 +19,66 @@

David Efhan

inbox
- +
+
+

+

+

+

+
+
+

+

+

+

+
+
+

+

+

+

+
+
+

+

+

+

+
+
+

+

+

+

+
+
+

+

+

+

+
+
+

+

+

+

+
+
+

+

+

+

+
diff --git a/js/load.js b/js/load.js index 548d2890..f66856fb 100644 --- a/js/load.js +++ b/js/load.js @@ -1,44 +1,54 @@ - // Create a new message element for every item of geeMail - const geeMail = window.geemails; - - const createMessage = () => { - - const messageGrid = document.querySelector('#message-grid'); - - geeMail.forEach(mail => { - const newMessage = document.createElement('div'); - const messageIndex = geeMail[mail] - newMessage.id = messageIndex; - newMessage.className = "message"; - newMessage.innerHTML = messageIndex; - messageGrid.appendChild(newMessage); - console.log(mail); - console.log(geeMail) - } ) - } + // Fill in data from the window.geemails + const populateData = () => { const messages = document.querySelectorAll('.message'); messages.forEach(message => { + // for the index select the data-index for the specific message + const index = message.getAttribute('data-index'); + // console.log(index); + const date = document.querySelector('.date'); const subject = document.querySelector('.subject'); const sender = document.querySelector('.sender'); const body = document.querySelector('.body-copy'); - createMessage(); + // console.log(message) - console.log(message) + const mailNumber = window.geemails.index; + + console.log(`mail number: ${mailNumber}`) - const mailNumber = window.geemails[1]; - - date.innerHTML = mailNumber.date; - subject.innerHTML = mailNumber.subject; - sender.innerHTML = mailNumber.sender; - body.innerHTML = mailNumber.body; + // date.innerHTML = mailNumber.date; + // subject.innerHTML = mailNumber.subject; + // sender.innerHTML = mailNumber.sender; + // body.innerHTML = mailNumber.body; }) - } + } + + // Create a new message element for every item of geeMail + // const geeMail = window.geemails; + + // const createMessage = () => { + + // const messageGrid = document.querySelector('#message-grid'); + + // geeMail.forEach(mail => { + // const newMessage = document.createElement('div'); + // const messageIndex = `${geeMail.length}` + // newMessage.id = messageIndex; + // newMessage.className = "message"; + // newMessage.innerHTML = messageIndex; + // const message = messageGrid.appendChild(newMessage); + // console.log(message); + // console.log(geeMail) + + //! After you get it working create new div classes and append it to the NewMessage + //! Match the innerhtml to the geemail[i] of the current item that you are on + // } ) + // } window.onload = function(){ @@ -46,6 +56,6 @@ const inboxNumber = document.querySelector('.message-number'); inboxNumber.innerHTML = window.geemails.length; // Populate the data into the messages - createMessage(); - // populateData(); + // createMessage(); + populateData(); }; \ No newline at end of file From 2b19eec64f5a3b30004a8dbbae45f682a443940f Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Fri, 26 Apr 2019 21:37:28 -1000 Subject: [PATCH 08/39] tryin to acess index of geeMails --- js/load.js | 34 +++++++--------------------------- 1 file changed, 7 insertions(+), 27 deletions(-) diff --git a/js/load.js b/js/load.js index f66856fb..5aec7d2f 100644 --- a/js/load.js +++ b/js/load.js @@ -8,47 +8,28 @@ messages.forEach(message => { // for the index select the data-index for the specific message const index = message.getAttribute('data-index'); - // console.log(index); + console.log(index); const date = document.querySelector('.date'); const subject = document.querySelector('.subject'); const sender = document.querySelector('.sender'); const body = document.querySelector('.body-copy'); + // Take the data from index message and input it into the fields + //todo need to find a way to acces the geemails[index] - not working rn + // console.log(message) - const mailNumber = window.geemails.index; + // const mailNumber = window.geemails[index]; - console.log(`mail number: ${mailNumber}`) + // console.log(`mail number: ${mailNumber}`) // date.innerHTML = mailNumber.date; - // subject.innerHTML = mailNumber.subject; + // subject.innerHTML = mailNumber.subject; // sender.innerHTML = mailNumber.sender; // body.innerHTML = mailNumber.body; }) } - - // Create a new message element for every item of geeMail - // const geeMail = window.geemails; - - // const createMessage = () => { - - // const messageGrid = document.querySelector('#message-grid'); - - // geeMail.forEach(mail => { - // const newMessage = document.createElement('div'); - // const messageIndex = `${geeMail.length}` - // newMessage.id = messageIndex; - // newMessage.className = "message"; - // newMessage.innerHTML = messageIndex; - // const message = messageGrid.appendChild(newMessage); - // console.log(message); - // console.log(geeMail) - - //! After you get it working create new div classes and append it to the NewMessage - //! Match the innerhtml to the geemail[i] of the current item that you are on - // } ) - // } window.onload = function(){ @@ -56,6 +37,5 @@ const inboxNumber = document.querySelector('.message-number'); inboxNumber.innerHTML = window.geemails.length; // Populate the data into the messages - // createMessage(); populateData(); }; \ No newline at end of file From 5312b3f56d51d188129324d0d75beb8c83f092bc Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Sat, 27 Apr 2019 15:25:41 -1000 Subject: [PATCH 09/39] found index of geemail --- index.html | 15 ++++++++------- js/load.js | 6 +++--- js/message.js | 26 ++++++++++++++++++++++++++ 3 files changed, 37 insertions(+), 10 deletions(-) create mode 100644 js/message.js diff --git a/index.html b/index.html index 093f869a..a4b1bb8a 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,8 @@ - + + diff --git a/js/message.js b/js/message.js index 111f8bff..df05f54d 100644 --- a/js/message.js +++ b/js/message.js @@ -1,88 +1,50 @@ // Find find indexOf window.geemail const geeMails = window.geemails; -const messageChange = () => { +//! POPULATE THE DATA INTO THE MESSAGES +populateData = () => { const messageGrid = document.querySelector('#message-grid'); - const messages = document.querySelectorAll('.message'); - const inboxNumber = document.querySelector('.message-number'); - //! Create a message element with its children for the length of geeMails - // This is how much messages we will have - const numberOfMessages = geeMails.length; - // Create the message element - const div = document.createElement("DIV"); - div.classList.add('message'); - // messageGrid.append(div); - - //! Update the #of messages in inbox - inboxNumber.innerHTML = numberOfMessages; - - messages.forEach(message => { - const dateContent = message.children[0]; - const subjectContent = message.children[1]; - const senderContent = message.children[2]; - const bodyContent = message.children[3]; - - //? Open and close content by clicking button - // const toggleBtn = document.querySelectorAll('.toggle-btn'); - - // toggleBtn.forEach(button => { - // button.addEventListener('click', () => { - // bodyContent.classList.toggle('active'); - // }) - // }) - - //todo Get index of messages from message grid - const gridChildren = Array.from(messageGrid.children); - const gridIndex = gridChildren.indexOf(message); - // console.log(gridIndex) + //For each geeMail find the index and create a message for each + geeMails.forEach((mail, index) => { + // console.log(`this is the ${mail} and ${index}`); - geeMails.forEach(mail => { - //! Use geeMails[gridIndex] as the key - const date = geeMails[gridIndex].date; - const subject = geeMails[gridIndex].subject; - const sender = geeMails[gridIndex].sender; - const body = geeMails[gridIndex].body; - - // Make data-index = to the gridIndex - dateContent.innerHTML = date; - subjectContent.innerHTML = subject; - senderContent.innerHTML = sender; - bodyContent.innerHTML = body; - - const createNewMessage = () => { - getNewMessage(); - const newMessage = messageGrid.appendChild(message) - - const newDateContent = newMessage.children[0]; - const newSubjectContent = newMessage.children[1]; - const newSenderContent = newMessage.children[2]; - const newBodyContent = newMessage.children[3]; - - const newDate = getNewMessage().date; - const newSubject = getNewMessage().subject; - const newSender = getNewMessage().sender; - const newBody = getNewMessage().body; - - newDateContent.innerHTML = newDate; - newSubjectContent.innerHTML = newSubject; - newSenderContent.innerHTML = newSender; - newBodyContent.innerHTML = newBody; - } - - // Get new messages every 10 seconds - // setInterval(function(){ - // console.log(getNewMessage()) - // //? Can't get function to work - // createNewMessage(); - // }, 10000); - }) - }) + const message = document.createElement('DIV'); + message.classList.add('message'); + //Create the children of message; + const date = document.createElement('DIV'); + const subject = document.createElement('DIV'); + const sender = document.createElement('DIV'); + const bodyCopy = document.createElement('P'); + const toggleBtn = document.createElement('BUTTON'); + + date.classList.add('date'); + subject.classList.add('subject'); + sender.classList.add('sender'); + bodyCopy.classList.add('body-copy'); + toggleBtn.classList.add('toggle-btn'); + + //Populate the data from geemail into the children + date.innerHTML = mail.date; + subject.innerHTML = mail.subject; + sender.innerHTML = mail.sender; + bodyCopy.innerHTML = mail.body; + toggleBtn.innerHTML = 'view more'; + + //Append to the HTML + messageGrid.appendChild(message); + message.appendChild(date); + message.appendChild(subject); + message.appendChild(sender); + message.appendChild(bodyCopy); + message.appendChild(toggleBtn); + }) } + window.onload = () => { // Show available messages in inbox - messageChange(); + populateData() } // As we scroll the page give the header a shadow @@ -95,15 +57,3 @@ const headerShadow = () => { headerShadow(); -//! Bugs -// view more button opens and closes all -// can't get getNewMessage() to work - -//todo -/* - -New message is creating but it's putting all new messages in place of the old ones -instead it should be one new message that has new data and the others don't change -the inbox number should also be inboxNumber = inboxNumber++ - -*/ From cdd90eba9b00bacffc7866cbb58c000bfaa54986 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Tue, 30 Apr 2019 16:39:03 -1000 Subject: [PATCH 17/39] need to work on inbox number next --- index.html | 7 ------- 1 file changed, 7 deletions(-) diff --git a/index.html b/index.html index eecfbea4..4e6cb5cc 100644 --- a/index.html +++ b/index.html @@ -21,13 +21,6 @@

David Efhan

-
From 2142ba4dc0db2e25297283f8d26e86bc192bf153 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Tue, 30 Apr 2019 17:37:58 -1000 Subject: [PATCH 18/39] inbox number working --- js/message.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/message.js b/js/message.js index df05f54d..229ae0ff 100644 --- a/js/message.js +++ b/js/message.js @@ -41,10 +41,17 @@ populateData = () => { }) } +const updateInbox = () => { + console.log('yooooo') + const inboxNumber = document.querySelector('.message-number'); + inboxNumber.innerHTML = geeMails.length; +} + window.onload = () => { // Show available messages in inbox populateData() + updateInbox() } // As we scroll the page give the header a shadow From 4622368aa0ed65ec82ea479480163ee88674ed03 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Tue, 30 Apr 2019 17:49:12 -1000 Subject: [PATCH 19/39] got view more button working --- js/message.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/js/message.js b/js/message.js index 229ae0ff..2042102f 100644 --- a/js/message.js +++ b/js/message.js @@ -41,6 +41,20 @@ populateData = () => { }) } +const toggleBodyCopy = () => { + //Toggle body-copy active on and off + const messageBlock = document.querySelectorAll('.message'); + + messageBlock.forEach(message => { + const viewBtn = message.querySelector('.toggle-btn'); + const bodyCopy = message.querySelector('.body-copy'); + + viewBtn.addEventListener('click', () => { + bodyCopy.classList.toggle('active'); + }) + }) +} + const updateInbox = () => { console.log('yooooo') const inboxNumber = document.querySelector('.message-number'); @@ -51,7 +65,8 @@ const updateInbox = () => { window.onload = () => { // Show available messages in inbox populateData() - updateInbox() + updateInbox(); + toggleBodyCopy(); } // As we scroll the page give the header a shadow From 60392cb14ca5f651f4242a5509d4cc7fe06d0318 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Tue, 30 Apr 2019 17:58:31 -1000 Subject: [PATCH 20/39] have set interval working but getNewMessage() not --- js/message.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/js/message.js b/js/message.js index 2042102f..2eb04443 100644 --- a/js/message.js +++ b/js/message.js @@ -1,6 +1,8 @@ // Find find indexOf window.geemail const geeMails = window.geemails; +const messageGrid = document.querySelector('#message-grid'); + //! POPULATE THE DATA INTO THE MESSAGES populateData = () => { const messageGrid = document.querySelector('#message-grid'); @@ -62,11 +64,21 @@ const updateInbox = () => { } +const newIntervalMessage = () => { + // Use the setInterval method to create a new message every 10 seconds + console.log('this is the new message generator using set interval'); + setInterval(() => { + console.log('getting a new message'); + getNewMessage() + }, 5000); +} + window.onload = () => { // Show available messages in inbox populateData() updateInbox(); toggleBodyCopy(); + newIntervalMessage(); } // As we scroll the page give the header a shadow From e3e030a52684f8df92b352226d4ac540ee27953c Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Wed, 1 May 2019 00:38:32 -1000 Subject: [PATCH 21/39] got set interval working --- js/message.js | 50 +++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 39 insertions(+), 11 deletions(-) diff --git a/js/message.js b/js/message.js index 2eb04443..118abaf9 100644 --- a/js/message.js +++ b/js/message.js @@ -57,26 +57,54 @@ const toggleBodyCopy = () => { }) } -const updateInbox = () => { - console.log('yooooo') - const inboxNumber = document.querySelector('.message-number'); - inboxNumber.innerHTML = geeMails.length; -} - const newIntervalMessage = () => { // Use the setInterval method to create a new message every 10 seconds - console.log('this is the new message generator using set interval'); + console.log(getNewMessage().date); + + setInterval(() => { - console.log('getting a new message'); - getNewMessage() - }, 5000); + const messageGrid = document.querySelector('#message-grid'); + const message = document.createElement('DIV'); + message.classList.add('message'); + //Create the children of message; + const date = document.createElement('DIV'); + const subject = document.createElement('DIV'); + const sender = document.createElement('DIV'); + const bodyCopy = document.createElement('P'); + const toggleBtn = document.createElement('BUTTON'); + + date.classList.add('date'); + subject.classList.add('subject'); + sender.classList.add('sender'); + bodyCopy.classList.add('body-copy'); + toggleBtn.classList.add('toggle-btn'); + + //Populate the data from geemail into the children + date.innerHTML = getNewMessage().date; + subject.innerHTML = getNewMessage().subject; + sender.innerHTML = getNewMessage().sender; + bodyCopy.innerHTML = getNewMessage().body; + toggleBtn.innerHTML = 'view more'; + + //Append to the HTML + messageGrid.appendChild(message); + message.appendChild(date); + message.appendChild(subject); + message.appendChild(sender); + message.appendChild(bodyCopy); + message.appendChild(toggleBtn); + + const inboxNumber = document.querySelector('.message-number'); + const numberOfMessages = messageGrid.children.length; + inboxNumber.innerHTML = numberOfMessages; + }, 10000); } window.onload = () => { // Show available messages in inbox populateData() - updateInbox(); + // updateInbox(); toggleBodyCopy(); newIntervalMessage(); } From dbda9d8bba5d04a3266b7b5a158393d7f335dca6 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Wed, 1 May 2019 00:46:25 -1000 Subject: [PATCH 22/39] added functions into head --- index.html | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 4e6cb5cc..a3f65948 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,14 @@ - + @@ -17,7 +20,7 @@

David Efhan

-

You have

unread messages
+

You have

10 unread messages
From 5d24f1f7fa14c69172246ff553214033d17e41a4 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Wed, 1 May 2019 00:46:41 -1000 Subject: [PATCH 23/39] got rid of console logs --- js/message.js | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/js/message.js b/js/message.js index 118abaf9..f61f9486 100644 --- a/js/message.js +++ b/js/message.js @@ -59,10 +59,7 @@ const toggleBodyCopy = () => { const newIntervalMessage = () => { - // Use the setInterval method to create a new message every 10 seconds - console.log(getNewMessage().date); - - + // Use the setInterval method to create a new message every 10 seconds setInterval(() => { const messageGrid = document.querySelector('#message-grid'); const message = document.createElement('DIV'); @@ -94,19 +91,13 @@ const newIntervalMessage = () => { message.appendChild(sender); message.appendChild(bodyCopy); message.appendChild(toggleBtn); + + // Update the inbox according to the amount of children in the message grid const inboxNumber = document.querySelector('.message-number'); const numberOfMessages = messageGrid.children.length; inboxNumber.innerHTML = numberOfMessages; - }, 10000); -} - -window.onload = () => { - // Show available messages in inbox - populateData() - // updateInbox(); - toggleBodyCopy(); - newIntervalMessage(); + }, 5000); } // As we scroll the page give the header a shadow From 071fa353e96e81b259fba6b5203658c35b9d93d7 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Wed, 1 May 2019 00:53:18 -1000 Subject: [PATCH 24/39] trying to make the create message more dynamic --- js/message.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/message.js b/js/message.js index f61f9486..7572e15b 100644 --- a/js/message.js +++ b/js/message.js @@ -1,6 +1,5 @@ // Find find indexOf window.geemail const geeMails = window.geemails; - const messageGrid = document.querySelector('#message-grid'); //! POPULATE THE DATA INTO THE MESSAGES @@ -92,6 +91,7 @@ const newIntervalMessage = () => { message.appendChild(bodyCopy); message.appendChild(toggleBtn); + console.log('created new message') // Update the inbox according to the amount of children in the message grid const inboxNumber = document.querySelector('.message-number'); From 97296f2651ae70b60da428c4648030945ed69efd Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Wed, 1 May 2019 00:56:05 -1000 Subject: [PATCH 25/39] fixed spacing --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index a3f65948..d9465f5b 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,6 @@ newIntervalMessage(); } -
From 3c6a6decbcef5e5758f7fdb6943eea719e7fcb8a Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Wed, 1 May 2019 00:57:33 -1000 Subject: [PATCH 26/39] made setInterval longer --- js/message.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/message.js b/js/message.js index 7572e15b..c9f10850 100644 --- a/js/message.js +++ b/js/message.js @@ -97,7 +97,7 @@ const newIntervalMessage = () => { const inboxNumber = document.querySelector('.message-number'); const numberOfMessages = messageGrid.children.length; inboxNumber.innerHTML = numberOfMessages; - }, 5000); + }, 10000); } // As we scroll the page give the header a shadow From 1d5c9c5840d7c53ddae2e0f5ecfadefdb6ce9b41 Mon Sep 17 00:00:00 2001 From: David Efhan <34640555+frzrbox@users.noreply.github.com> Date: Wed, 1 May 2019 01:01:37 -1000 Subject: [PATCH 27/39] Update README.md --- README.md | 51 ++------------------------------------------------- 1 file changed, 2 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index f57a5950..a1e79b80 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,3 @@ -# GeeMail +# This is my Gee Mail clone -GeeMail is a coding exercise meant to simulate an e-mail web application inbox. - -## Description - -With this coding challenge you will be creating a simulation of a little known current e-mail web application you may or may not have heard of. - -We have created a basic mail generator script for you that will load a handful of pre-populated messages when your application loads and you will be requried to consume that data and build out UI elements to display that data along with populating new messages and some other basic functionality. - -## Pre-Requisites -You will need the following tools to complete this challenge - -* A personal GitHub account -* [Sublime Text 3 ](http://www.sublimetext.com/3) -* [Git](https://help.github.com/articles/set-up-git#platform-all) - -## Objectives - -1. Fork this repository to your own GitHub profile and clone to your local machine. - * [How to Fork A Repository](https://help.github.com/articles/fork-a-repo/) - -2. Create a basic page layout via HTML/CSS with a top header section with the name of the application and a content section where you will display the messages. - -3. When your page loads, via JavaScript access our prepopulated data stored in the `window.geemails` variable. Each object in the array has the following properties: - * date - The date message was sent - * subject - The subject of the message - * sender - The sender of the message - * body - The GeeMail message content - -4. With this data you must make a visual list of mail messages on the page with the following minimum requirements. - * Each message should have it's own row showing: - * Date - * Sender - * Subject - * When clicking on a message you must provide some method of showing the message for that row. - -5. You must show an inbox count somewhere on the page to show the current number of messages in your inbox. - -6. Set a recurring function to via the JavaScript `setInterval` function that will call our existing `getNewMessage` function that we have created for you that will return a newly created message with the same properties as your previous messages. - -6. All CSS styles should be created in the `css\style.css` file included in the project. - -7. All JavaScript should be created in the `` element in your included `index.html` file inside of the window.onload function already created in the `` section. - -8. Commit your code often and when you are completed send us a pull request from your repository so that we may review your code. - -Bonus: You may add any images or any extra functionality that you wish to your application and use any other JavaScript frameworks if you like. - -## Most Importanly....Have Fun! +The branch that is working currently is iss53 From 24139f41434db1a3f65079dcf8cc9207abb294bd Mon Sep 17 00:00:00 2001 From: David Efhan <34640555+frzrbox@users.noreply.github.com> Date: Wed, 1 May 2019 01:04:25 -1000 Subject: [PATCH 28/39] Update README.md --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a1e79b80..e7a7c5a3 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,8 @@ # This is my Gee Mail clone -The branch that is working currently is iss53 +## The branch that is working currently is iss53 + +Need to refactor +- There is a lot of repeated code for creating the message element for each geemail +and for creating a new message for the setInterval, make a createNewMessageElement() +that I can use in both From b59cc13fda0c916ad700a6eb1d18748390191ef0 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 2 May 2019 00:14:45 -1000 Subject: [PATCH 29/39] got rid of toggle btn --- js/message.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/js/message.js b/js/message.js index c9f10850..df25dfbf 100644 --- a/js/message.js +++ b/js/message.js @@ -17,20 +17,17 @@ populateData = () => { const subject = document.createElement('DIV'); const sender = document.createElement('DIV'); const bodyCopy = document.createElement('P'); - const toggleBtn = document.createElement('BUTTON'); date.classList.add('date'); subject.classList.add('subject'); sender.classList.add('sender'); bodyCopy.classList.add('body-copy'); - toggleBtn.classList.add('toggle-btn'); //Populate the data from geemail into the children date.innerHTML = mail.date; subject.innerHTML = mail.subject; sender.innerHTML = mail.sender; bodyCopy.innerHTML = mail.body; - toggleBtn.innerHTML = 'view more'; //Append to the HTML messageGrid.appendChild(message); @@ -38,7 +35,6 @@ populateData = () => { message.appendChild(subject); message.appendChild(sender); message.appendChild(bodyCopy); - message.appendChild(toggleBtn); }) } @@ -47,10 +43,9 @@ const toggleBodyCopy = () => { const messageBlock = document.querySelectorAll('.message'); messageBlock.forEach(message => { - const viewBtn = message.querySelector('.toggle-btn'); const bodyCopy = message.querySelector('.body-copy'); - viewBtn.addEventListener('click', () => { + message.addEventListener('click', () => { bodyCopy.classList.toggle('active'); }) }) @@ -68,20 +63,17 @@ const newIntervalMessage = () => { const subject = document.createElement('DIV'); const sender = document.createElement('DIV'); const bodyCopy = document.createElement('P'); - const toggleBtn = document.createElement('BUTTON'); date.classList.add('date'); subject.classList.add('subject'); sender.classList.add('sender'); bodyCopy.classList.add('body-copy'); - toggleBtn.classList.add('toggle-btn'); //Populate the data from geemail into the children date.innerHTML = getNewMessage().date; subject.innerHTML = getNewMessage().subject; sender.innerHTML = getNewMessage().sender; bodyCopy.innerHTML = getNewMessage().body; - toggleBtn.innerHTML = 'view more'; //Append to the HTML messageGrid.appendChild(message); @@ -89,7 +81,6 @@ const newIntervalMessage = () => { message.appendChild(subject); message.appendChild(sender); message.appendChild(bodyCopy); - message.appendChild(toggleBtn); console.log('created new message') From 44d5ceb9f28e71dfe0eeb6984b051508e8334a0e Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 2 May 2019 00:19:50 -1000 Subject: [PATCH 30/39] refactored create new message to object --- index.html | 2 +- js/message.js | 58 ++++++++++++++++++++++++++------------------------- 2 files changed, 31 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index d9465f5b..4adb39f9 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ // Show available messages in inbox populateData() toggleBodyCopy(); - newIntervalMessage(); + // newIntervalMessage(); } diff --git a/js/message.js b/js/message.js index df25dfbf..09a7fcc1 100644 --- a/js/message.js +++ b/js/message.js @@ -2,39 +2,41 @@ const geeMails = window.geemails; const messageGrid = document.querySelector('#message-grid'); -//! POPULATE THE DATA INTO THE MESSAGES -populateData = () => { +//! CREATE THE MESSAGE ELEMENT +const createNewMessage = (event) => { const messageGrid = document.querySelector('#message-grid'); + const message = document.createElement('DIV'); + message.classList.add('message'); + //Create the children of message; + const date = document.createElement('DIV'); + const subject = document.createElement('DIV'); + const sender = document.createElement('DIV'); + const bodyCopy = document.createElement('P'); + + date.classList.add('date'); + subject.classList.add('subject'); + sender.classList.add('sender'); + bodyCopy.classList.add('body-copy'); + + date.innerHTML = event.date; + subject.innerHTML = event.subject; + sender.innerHTML = event.sender; + bodyCopy.innerHTML = event.body; + + messageGrid.appendChild(message); + message.appendChild(date); + message.appendChild(subject); + message.appendChild(sender); + message.appendChild(bodyCopy); +} + +//! POPULATE THE DATA INTO THE MESSAGES +populateData = () => { //For each geeMail find the index and create a message for each geeMails.forEach((mail, index) => { // console.log(`this is the ${mail} and ${index}`); - - const message = document.createElement('DIV'); - message.classList.add('message'); - //Create the children of message; - const date = document.createElement('DIV'); - const subject = document.createElement('DIV'); - const sender = document.createElement('DIV'); - const bodyCopy = document.createElement('P'); - - date.classList.add('date'); - subject.classList.add('subject'); - sender.classList.add('sender'); - bodyCopy.classList.add('body-copy'); - - //Populate the data from geemail into the children - date.innerHTML = mail.date; - subject.innerHTML = mail.subject; - sender.innerHTML = mail.sender; - bodyCopy.innerHTML = mail.body; - - //Append to the HTML - messageGrid.appendChild(message); - message.appendChild(date); - message.appendChild(subject); - message.appendChild(sender); - message.appendChild(bodyCopy); + createNewMessage(mail); }) } From 29f0fba7c6e883f7f65b3e088a6e067e4b228762 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 2 May 2019 00:24:09 -1000 Subject: [PATCH 31/39] refactored to call createNewMessage() --- index.html | 2 +- js/message.js | 50 ++++++++------------------------------------------ 2 files changed, 9 insertions(+), 43 deletions(-) diff --git a/index.html b/index.html index 4adb39f9..d9465f5b 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ // Show available messages in inbox populateData() toggleBodyCopy(); - // newIntervalMessage(); + newIntervalMessage(); } diff --git a/js/message.js b/js/message.js index 09a7fcc1..fd525c74 100644 --- a/js/message.js +++ b/js/message.js @@ -1,6 +1,5 @@ // Find find indexOf window.geemail const geeMails = window.geemails; -const messageGrid = document.querySelector('#message-grid'); //! CREATE THE MESSAGE ELEMENT const createNewMessage = (event) => { @@ -35,11 +34,18 @@ const createNewMessage = (event) => { populateData = () => { //For each geeMail find the index and create a message for each geeMails.forEach((mail, index) => { - // console.log(`this is the ${mail} and ${index}`); createNewMessage(mail); }) } +const newIntervalMessage = () => { + // Use the setInterval method to create a new message every 10 seconds + setInterval(() => { + createNewMessage(getNewMessage()); + // console.log('created new message') + }, 10000); +} + const toggleBodyCopy = () => { //Toggle body-copy active on and off const messageBlock = document.querySelectorAll('.message'); @@ -53,46 +59,6 @@ const toggleBodyCopy = () => { }) } - -const newIntervalMessage = () => { - // Use the setInterval method to create a new message every 10 seconds - setInterval(() => { - const messageGrid = document.querySelector('#message-grid'); - const message = document.createElement('DIV'); - message.classList.add('message'); - //Create the children of message; - const date = document.createElement('DIV'); - const subject = document.createElement('DIV'); - const sender = document.createElement('DIV'); - const bodyCopy = document.createElement('P'); - - date.classList.add('date'); - subject.classList.add('subject'); - sender.classList.add('sender'); - bodyCopy.classList.add('body-copy'); - - //Populate the data from geemail into the children - date.innerHTML = getNewMessage().date; - subject.innerHTML = getNewMessage().subject; - sender.innerHTML = getNewMessage().sender; - bodyCopy.innerHTML = getNewMessage().body; - - //Append to the HTML - messageGrid.appendChild(message); - message.appendChild(date); - message.appendChild(subject); - message.appendChild(sender); - message.appendChild(bodyCopy); - - console.log('created new message') - - // Update the inbox according to the amount of children in the message grid - const inboxNumber = document.querySelector('.message-number'); - const numberOfMessages = messageGrid.children.length; - inboxNumber.innerHTML = numberOfMessages; - }, 10000); -} - // As we scroll the page give the header a shadow const headerShadow = () => { window.addEventListener('scroll', () => { From 70439b509ca0b18c3be80e03334219ff1d91add7 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 2 May 2019 00:39:22 -1000 Subject: [PATCH 32/39] trying to add in bodyCopy toggle --- index.html | 2 +- js/message.js | 15 +-------------- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index d9465f5b..8a33371e 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ window.onload = () => { // Show available messages in inbox populateData() - toggleBodyCopy(); + // toggleBodyCopy(); newIntervalMessage(); } diff --git a/js/message.js b/js/message.js index fd525c74..a923ee29 100644 --- a/js/message.js +++ b/js/message.js @@ -33,7 +33,7 @@ const createNewMessage = (event) => { //! POPULATE THE DATA INTO THE MESSAGES populateData = () => { //For each geeMail find the index and create a message for each - geeMails.forEach((mail, index) => { + geeMails.forEach(mail => { createNewMessage(mail); }) } @@ -42,22 +42,9 @@ const newIntervalMessage = () => { // Use the setInterval method to create a new message every 10 seconds setInterval(() => { createNewMessage(getNewMessage()); - // console.log('created new message') }, 10000); } -const toggleBodyCopy = () => { - //Toggle body-copy active on and off - const messageBlock = document.querySelectorAll('.message'); - - messageBlock.forEach(message => { - const bodyCopy = message.querySelector('.body-copy'); - - message.addEventListener('click', () => { - bodyCopy.classList.toggle('active'); - }) - }) -} // As we scroll the page give the header a shadow const headerShadow = () => { From 0f6c9b6630b3bd6d75dd200d5217abdfd0ccf971 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 2 May 2019 00:50:14 -1000 Subject: [PATCH 33/39] bodyCopy toggle working on some only --- index.html | 1 - js/message.js | 14 +++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 8a33371e..32a5a425 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ window.onload = () => { // Show available messages in inbox populateData() - // toggleBodyCopy(); newIntervalMessage(); } diff --git a/js/message.js b/js/message.js index a923ee29..52239382 100644 --- a/js/message.js +++ b/js/message.js @@ -21,13 +21,25 @@ const createNewMessage = (event) => { date.innerHTML = event.date; subject.innerHTML = event.subject; sender.innerHTML = event.sender; - bodyCopy.innerHTML = event.body; + bodyCopy.innerHTML = event.body; messageGrid.appendChild(message); message.appendChild(date); message.appendChild(subject); message.appendChild(sender); message.appendChild(bodyCopy); + + //If the message is clicked give the body-copy a class of active + + const messageElement = messageGrid.querySelectorAll('.message'); + + messageElement.forEach(event => { + const hiddenBodyCopy = event.querySelector('.body-copy'); + + event.addEventListener('click', () => { + hiddenBodyCopy.classList.toggle('active'); + }) + }) } //! POPULATE THE DATA INTO THE MESSAGES From 4853333e3fe2f504b2a53e09a7ecc4b90b7987d4 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 2 May 2019 01:50:52 -1000 Subject: [PATCH 34/39] inbox working dynamic --- index.html | 8 ++++++-- js/message.js | 20 ++++++++++++++++++-- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 32a5a425..aaba4b7f 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ window.onload = () => { // Show available messages in inbox populateData() - newIntervalMessage(); } @@ -18,11 +17,16 @@

David Efhan

-

You have

10 unread messages
+

You have

unread messages
+ + \ No newline at end of file diff --git a/js/message.js b/js/message.js index 52239382..f05433e7 100644 --- a/js/message.js +++ b/js/message.js @@ -1,10 +1,11 @@ // Find find indexOf window.geemail const geeMails = window.geemails; + //! CREATE THE MESSAGE ELEMENT const createNewMessage = (event) => { - const messageGrid = document.querySelector('#message-grid'); + const messageGrid = document.querySelector('#message-grid'); const message = document.createElement('DIV'); message.classList.add('message'); //Create the children of message; @@ -53,6 +54,7 @@ populateData = () => { const newIntervalMessage = () => { // Use the setInterval method to create a new message every 10 seconds setInterval(() => { + inboxIncrease() createNewMessage(getNewMessage()); }, 10000); } @@ -66,5 +68,19 @@ const headerShadow = () => { }) } -headerShadow(); +//! INBOX + + +let startingValue = geeMails.length; +const inboxStarting = () => { + const inboxNumber = document.querySelector('.message-number'); + inboxNumber.innerHTML = startingValue; +} + +const inboxIncrease = () => { + const inboxNumber = document.querySelector('.message-number'); + inboxNumber.innerHTML = startingValue++; +} + +headerShadow(); From be89bafa1a8c3f885067364ff3acf7925aad044e Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 2 May 2019 01:51:50 -1000 Subject: [PATCH 35/39] inbox skipping first change --- js/message.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/js/message.js b/js/message.js index f05433e7..dd78a429 100644 --- a/js/message.js +++ b/js/message.js @@ -69,8 +69,6 @@ const headerShadow = () => { } //! INBOX - - let startingValue = geeMails.length; const inboxStarting = () => { From ec612a6e0aa23d7c2dd1f049f47c1640cc189b39 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 2 May 2019 16:51:58 -1000 Subject: [PATCH 36/39] pointer when message is hovered --- css/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css/style.css b/css/style.css index e52a78e2..603f8cc4 100644 --- a/css/style.css +++ b/css/style.css @@ -44,6 +44,7 @@ h1{ grid-row-gap: 20px; } + .message{ padding: 10px 15px; margin: 0 auto; @@ -59,6 +60,7 @@ h1{ -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25); border: none; + cursor: pointer; } .date{ From 19989a4b2cd2920edf2d5e46c56c9b6cb1a878cf Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 2 May 2019 16:52:40 -1000 Subject: [PATCH 37/39] message toggle works not when setInterval running --- index.html | 3 ++- js/message.js | 18 ++++++++++-------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index aaba4b7f..014cef21 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ window.onload = () => { // Show available messages in inbox populateData() + toggleMessageBody(); } @@ -25,8 +26,8 @@

David Efhan

\ No newline at end of file diff --git a/js/message.js b/js/message.js index dd78a429..28a4019e 100644 --- a/js/message.js +++ b/js/message.js @@ -1,7 +1,6 @@ // Find find indexOf window.geemail const geeMails = window.geemails; - //! CREATE THE MESSAGE ELEMENT const createNewMessage = (event) => { @@ -29,17 +28,18 @@ const createNewMessage = (event) => { message.appendChild(subject); message.appendChild(sender); message.appendChild(bodyCopy); +} - //If the message is clicked give the body-copy a class of active - - const messageElement = messageGrid.querySelectorAll('.message'); +//! TOGGLE MESSAGE BODY +const toggleMessageBody = () => { + const messageElement = document.querySelectorAll('.message'); messageElement.forEach(event => { - const hiddenBodyCopy = event.querySelector('.body-copy'); + const hiddenBodyCopy = event.querySelector('.body-copy'); - event.addEventListener('click', () => { + event.addEventListener('click', () => { hiddenBodyCopy.classList.toggle('active'); - }) + }) }) } @@ -56,7 +56,8 @@ const newIntervalMessage = () => { setInterval(() => { inboxIncrease() createNewMessage(getNewMessage()); - }, 10000); + toggleMessageBody(); + }, 1000); } @@ -81,4 +82,5 @@ const inboxIncrease = () => { inboxNumber.innerHTML = startingValue++; } + headerShadow(); From a2bbc20615c25c1be3b1cec3a0b3e778dde175fd Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Thu, 9 May 2019 20:59:00 -1000 Subject: [PATCH 38/39] commented out toggle message body in set interval --- js/message.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/message.js b/js/message.js index 28a4019e..ad5aed8a 100644 --- a/js/message.js +++ b/js/message.js @@ -56,7 +56,7 @@ const newIntervalMessage = () => { setInterval(() => { inboxIncrease() createNewMessage(getNewMessage()); - toggleMessageBody(); + // toggleMessageBody(); }, 1000); } From 557f68d30861e3d4dcff439238b2fc7d8420aaa6 Mon Sep 17 00:00:00 2001 From: freezerboxdesigns Date: Fri, 10 May 2019 16:35:22 -1000 Subject: [PATCH 39/39] toggle body in createNewMessage --- index.html | 1 - js/message.js | 19 ++++++------------- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 014cef21..e76ba9e5 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ window.onload = () => { // Show available messages in inbox populateData() - toggleMessageBody(); } diff --git a/js/message.js b/js/message.js index ad5aed8a..04ef3d51 100644 --- a/js/message.js +++ b/js/message.js @@ -28,21 +28,14 @@ const createNewMessage = (event) => { message.appendChild(subject); message.appendChild(sender); message.appendChild(bodyCopy); -} - -//! TOGGLE MESSAGE BODY -const toggleMessageBody = () => { - const messageElement = document.querySelectorAll('.message'); - - messageElement.forEach(event => { - const hiddenBodyCopy = event.querySelector('.body-copy'); - event.addEventListener('click', () => { - hiddenBodyCopy.classList.toggle('active'); - }) + message.addEventListener('click', () => { + bodyCopy.classList.toggle('active'); }) + } + //! POPULATE THE DATA INTO THE MESSAGES populateData = () => { //For each geeMail find the index and create a message for each @@ -56,8 +49,7 @@ const newIntervalMessage = () => { setInterval(() => { inboxIncrease() createNewMessage(getNewMessage()); - // toggleMessageBody(); - }, 1000); + }, 5000); } @@ -84,3 +76,4 @@ const inboxIncrease = () => { headerShadow(); +