From ed882190d962f0758217c4b7642ec922a8789af8 Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Wed, 12 Dec 2018 16:23:44 +0200 Subject: [PATCH 01/15] Created basic layout --- css/style.css | 30 ++++++++++++++++++++++++++++++ index.html | 36 ++++++++++++++++++++++++++++++------ 2 files changed, 60 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index e69de29b..255470fb 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,30 @@ +body{ + margin: 0; + background: #dddddd; +} + +.header{ + background: rgba(1, 250, 255, 1.0); + background: -webkit-radial-gradient(bottom, rgba(1, 250, 255, 1.0), rgba(1, 73, 255, 1.0)); + background: -moz-radial-gradient(bottom, rgba(1, 250, 255, 1.0), rgba(1, 73, 255, 1.0)); + background: radial-gradient(to top, rgba(1, 250, 255, 1.0), rgba(1, 73, 255, 1.0)); + width: 100%; + height: 250px; +} + +.header h1{ + font-size: 50px; + color: #07f733; + margin: auto; + width: 50%; + text-align: center; + padding-top: 100px; + padding-bottom: 100px; + font-family: 'Shadows Into Light', cursive; +} + +table{ + width: 100%; + margin: 50px; + margin-left: 50px; +} \ No newline at end of file diff --git a/index.html b/index.html index a8a1aad9..1feb0369 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,38 @@ - -
- Build Me! + + +
+

Gee! Mail...

- + + + + + + + + +
SenderDateSubjectMessage
+ + \ No newline at end of file From a41c0f2111a52ae6939c92d366650580f214ad0c Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Wed, 12 Dec 2018 21:42:43 +0200 Subject: [PATCH 02/15] Add email bar --- css/style.css | 48 ++++++++++++++++++++++++++++++++++++++++++++---- index.html | 49 ++++++++++++++++++++++++++++--------------------- 2 files changed, 72 insertions(+), 25 deletions(-) diff --git a/css/style.css b/css/style.css index 255470fb..0607f07c 100644 --- a/css/style.css +++ b/css/style.css @@ -10,21 +10,61 @@ body{ background: radial-gradient(to top, rgba(1, 250, 255, 1.0), rgba(1, 73, 255, 1.0)); width: 100%; height: 250px; + margin-bottom: 50px; } .header h1{ font-size: 50px; color: #07f733; margin: auto; - width: 50%; + width: 60%; text-align: center; padding-top: 100px; padding-bottom: 100px; font-family: 'Shadows Into Light', cursive; } -table{ - width: 100%; - margin: 50px; +.email-bars{ + width: 50%; + height: 50px; + background-color: white; margin-left: 50px; + margin-bottom: 5px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding-left: 25px; + padding-right: 25px; +} + +.email-bars:hover{ + border: 1px solid gray; + box-shadow: 2px 3px gray; +} + +.email-bar-content{ + height: 100%; + margin: 0; + text-align: center; + padding-top: 25px; + font-weight: small; +} + +#name{ + flex-grow: 2; + flex-shrink: 2; + font-weight: bold; +} + +#subject{ + flex-grow: 2; + flex-shrink: 2; +} + +#date{ + flex-grow: 1; + flex-shrink: 1; + font-size: smaller; + font-style: oblique; } \ No newline at end of file diff --git a/index.html b/index.html index 1feb0369..e8d03521 100644 --- a/index.html +++ b/index.html @@ -9,18 +9,34 @@ var table = document.querySelector("table"); var message = getNewMessage(); - var row = table.insertRow(1); - cell0 = row.insertCell(0); - cell1 = row.insertCell(1); - cell2 = row.insertCell(2); - cell3 = row.insertCell(3); - - cell0.innerText = message.sender; - cell1.innerText = message.date.toDateString(); - cell2.innerText = message.subject; - cell3.innerText = message.body.substring(0, 50) + "..."; - cell3.style.wordWrap = "break-word"; - }; + addNewMessage(); + + function addNewMessage(){ + var newBar = document.createElement("div"); + document.body.appendChild(newBar); + newBar.className = "email-bars"; + + var name = document.createElement("p"); + var date = document.createElement("p"); + var subject = document.createElement("p"); + + name.innerText = message.sender; + subject.innerText = message.subject; + date.innerText = message.date.toDateString(); + + name.id = "name"; + subject.id = "subject"; + date.id = "date"; + + name.className += "email-bar-content"; + subject.className += "email-bar-content"; + date.className += "email-bar-content"; + + newBar.appendChild(name); + newBar.appendChild(subject); + newBar.appendChild(date); + } + }; @@ -29,14 +45,5 @@

Gee! Mail...

- - - - - - - -
SenderDateSubjectMessage
- \ No newline at end of file From 52eb20912c768847155a27afd130c2d1474340cb Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Wed, 12 Dec 2018 21:47:31 +0200 Subject: [PATCH 03/15] Add setInterval function for methods --- index.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index e8d03521..7c5b8117 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,17 @@ 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 - var table = document.querySelector("table"); - var message = getNewMessage(); + var intervalTime = 30000; addNewMessage(); + + setInterval(function(){ + addNewMessage(); + }, intervalTime); function addNewMessage(){ + var message = getNewMessage(); + var newBar = document.createElement("div"); document.body.appendChild(newBar); newBar.className = "email-bars"; From 3ac079816b6ff2f7620778094223d656a4171cbd Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Wed, 12 Dec 2018 22:28:48 +0200 Subject: [PATCH 04/15] Add message counter --- css/style.css | 5 +++++ index.html | 18 +++++++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 0607f07c..cd73e885 100644 --- a/css/style.css +++ b/css/style.css @@ -67,4 +67,9 @@ body{ flex-shrink: 1; font-size: smaller; font-style: oblique; +} + +.message-counter{ + float: right; + margin-right: 100px; } \ No newline at end of file diff --git a/index.html b/index.html index 7c5b8117..60a22386 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,18 @@ + + Gee! Mail... -
-

Gee! Mail...

+

Gee! Mail...

+
+ +
+

From 9a79e53ecf63e885198a63a800834fee91d0312f Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Wed, 12 Dec 2018 22:57:35 +0200 Subject: [PATCH 05/15] Display message on click. Poorly... --- css/style.css | 10 +++++++++- index.html | 27 +++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index cd73e885..7a666d57 100644 --- a/css/style.css +++ b/css/style.css @@ -70,6 +70,14 @@ body{ } .message-counter{ + width: 100%; + margin: auto; +} + +#counter{ + text-align: center; +} + +.message{ float: right; - margin-right: 100px; } \ No newline at end of file diff --git a/index.html b/index.html index 60a22386..a584e9a0 100644 --- a/index.html +++ b/index.html @@ -47,9 +47,36 @@ newBar.appendChild(subject); newBar.appendChild(date); + newBar.addEventListener("click", function(){ + displayMessage(message); + }); + numMessages++; counter.innerText = "Messages: " + numMessages; } + + function displayMessage(message){ + console.log("CLICK!!!") + var newMessage = document.createElement("div"); + + var name = document.createElement("p"); + var date = document.createElement("p"); + var subject = document.createElement("p"); + var content = document.createElement("p"); + + name.innerText = message.name; + date.innerText = message.date.toDateString(); + subject.innerText = message.subject; + content.innerText = message.body; + + + + newMessage.className += "message"; + + newMessage.appendChild(content); + + document.body.appendChild(newMessage); + } }; From 4fa90a69b841516d3b13464729620d6b76cd5a2b Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Thu, 13 Dec 2018 22:58:17 +0200 Subject: [PATCH 06/15] Add working message display --- css/style.css | 25 ++++++++++++++++++++++--- index.html | 27 +++++++++++++++++++++------ 2 files changed, 43 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index 7a666d57..56e3a124 100644 --- a/css/style.css +++ b/css/style.css @@ -25,10 +25,10 @@ body{ } .email-bars{ - width: 50%; height: 50px; background-color: white; - margin-left: 50px; + margin-left: 20px; + margin-right: 20px; margin-bottom: 5px; display: flex; flex-direction: row; @@ -41,6 +41,7 @@ body{ .email-bars:hover{ border: 1px solid gray; box-shadow: 2px 3px gray; + cursor: pointer; } .email-bar-content{ @@ -78,6 +79,24 @@ body{ text-align: center; } +.container{ + display: flex; + flex-direction: row; +} + +.inbox{ + display: flex; + flex-direction: column; + flex: 1 1 0; +} + +.message-box{ + flex: 1 1 0; + margin: 10px; +} + .message{ - float: right; + width: 100%; + border: 5px solid black; + padding: 10px; } \ No newline at end of file diff --git a/index.html b/index.html index a584e9a0..b1b4b39c 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ var counter = document.querySelector("#counter"); var intervalTime = 60000; var numMessages = 0; + var currentMessage; counter.innerText = "Messages: " + numMessages; @@ -18,13 +19,15 @@ setInterval(function(){ addNewMessage(); + }, intervalTime); function addNewMessage(){ var message = getNewMessage(); + var mailContainer = document.querySelector(".inbox"); var newBar = document.createElement("div"); - document.body.appendChild(newBar); + mailContainer.appendChild(newBar); newBar.className = "email-bars"; var name = document.createElement("p"); @@ -48,6 +51,9 @@ newBar.appendChild(date); newBar.addEventListener("click", function(){ + if(currentMessage){ + currentMessage.parentElement.removeChild(currentMessage); + } displayMessage(message); }); @@ -56,7 +62,7 @@ } function displayMessage(message){ - console.log("CLICK!!!") + var messageBox = document.querySelector(".message-box") var newMessage = document.createElement("div"); var name = document.createElement("p"); @@ -69,25 +75,34 @@ subject.innerText = message.subject; content.innerText = message.body; - - newMessage.className += "message"; newMessage.appendChild(content); - document.body.appendChild(newMessage); + messageBox.appendChild(newMessage); + + currentMessage = newMessage; } };
-

Gee! Mail...

+

Gee! Mail...

+

+
+
+ +
+
+
+
+ \ No newline at end of file From 8d79d788583f2af575d1b8183878854fcc7aa603 Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Thu, 13 Dec 2018 23:20:05 +0200 Subject: [PATCH 07/15] Refactor and add comments --- css/style.css | 46 +++++++++++++++++++++++++--------------------- index.html | 35 ++++++++++++++++++++++++----------- 2 files changed, 49 insertions(+), 32 deletions(-) diff --git a/css/style.css b/css/style.css index 56e3a124..ffdbb17f 100644 --- a/css/style.css +++ b/css/style.css @@ -24,6 +24,27 @@ body{ font-family: 'Shadows Into Light', cursive; } +.message-counter{ + width: 100%; + margin: auto; +} + +#counter{ + text-align: center; +} +/* FLEX BOXES*/ +.container{ + display: flex; + flex-direction: row; +} + +/* Inbox items */ +.inbox{ + display: flex; + flex-direction: column; + flex: 1 1 0; +} + .email-bars{ height: 50px; background-color: white; @@ -69,27 +90,9 @@ body{ font-size: smaller; font-style: oblique; } +/* End Inbox items */ -.message-counter{ - width: 100%; - margin: auto; -} - -#counter{ - text-align: center; -} - -.container{ - display: flex; - flex-direction: row; -} - -.inbox{ - display: flex; - flex-direction: column; - flex: 1 1 0; -} - +/* Message box items */ .message-box{ flex: 1 1 0; margin: 10px; @@ -99,4 +102,5 @@ body{ width: 100%; border: 5px solid black; padding: 10px; -} \ No newline at end of file +} +/* End Message box items*/ \ No newline at end of file diff --git a/index.html b/index.html index b1b4b39c..0fc87743 100644 --- a/index.html +++ b/index.html @@ -14,71 +14,81 @@ var currentMessage; counter.innerText = "Messages: " + numMessages; - addNewMessage(); setInterval(function(){ addNewMessage(); - }, intervalTime); function addNewMessage(){ var message = getNewMessage(); var mailContainer = document.querySelector(".inbox"); + //Create a new bar for email and add to the inbox var newBar = document.createElement("div"); mailContainer.appendChild(newBar); newBar.className = "email-bars"; + //Create the elements of the email bar var name = document.createElement("p"); var date = document.createElement("p"); var subject = document.createElement("p"); + //Add content to elements of email bar name.innerText = message.sender; subject.innerText = message.subject; date.innerText = message.date.toDateString(); + //Add id's and class for each element of email bar name.id = "name"; - subject.id = "subject"; - date.id = "date"; - name.className += "email-bar-content"; + subject.id = "subject"; subject.className += "email-bar-content"; + date.id = "date"; date.className += "email-bar-content"; + //Add elements to the new email bar newBar.appendChild(name); newBar.appendChild(subject); newBar.appendChild(date); + //On click remove old message(if it exists) and add message newBar.addEventListener("click", function(){ if(currentMessage){ currentMessage.parentElement.removeChild(currentMessage); } - displayMessage(message); + displayEmail(message); }); + //Adjust inbox counter numMessages++; counter.innerText = "Messages: " + numMessages; } - function displayMessage(message){ + function displayEmail(message){ var messageBox = document.querySelector(".message-box") var newMessage = document.createElement("div"); + newMessage.className += "message"; + //Create elements of the email var name = document.createElement("p"); var date = document.createElement("p"); var subject = document.createElement("p"); var content = document.createElement("p"); - name.innerText = message.name; + //Add content to elements of the email + name.innerText = message.sender; date.innerText = message.date.toDateString(); subject.innerText = message.subject; content.innerText = message.body; - newMessage.className += "message"; - + //Add elements of email to message box + newMessage.appendChild(date); + newMessage.appendChild(name); + newMessage.appendChild(subject); newMessage.appendChild(content); + //Add the message to the box made for it messageBox.appendChild(newMessage); currentMessage = newMessage; @@ -91,15 +101,18 @@

Gee! Mail...

-

+
+
+ +
From cb9e60c68a218e9b2938f9ea7cbcdaa169d71f3e Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Thu, 13 Dec 2018 23:37:22 +0200 Subject: [PATCH 08/15] Add box shadow effect to email bars --- css/style.css | 3 ++- index.html | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index ffdbb17f..f4af5afa 100644 --- a/css/style.css +++ b/css/style.css @@ -50,13 +50,14 @@ body{ background-color: white; margin-left: 20px; margin-right: 20px; - margin-bottom: 5px; + margin-bottom: 15px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding-left: 25px; padding-right: 25px; + box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.6); } .email-bars:hover{ diff --git a/index.html b/index.html index 0fc87743..68b1e52c 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ // 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 var counter = document.querySelector("#counter"); - var intervalTime = 60000; + var intervalTime = 10000; var numMessages = 0; var currentMessage; From f13be293650b64e40c6227938d48aa0dd9f6289d Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Fri, 14 Dec 2018 01:55:59 +0200 Subject: [PATCH 09/15] Stylize message box --- css/style.css | 35 ++++++++++++++++++++++++++++------- index.html | 16 +++++++++++----- 2 files changed, 39 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index f4af5afa..cdacfab8 100644 --- a/css/style.css +++ b/css/style.css @@ -74,18 +74,18 @@ body{ font-weight: small; } -#name{ +#inbox-name{ flex-grow: 2; flex-shrink: 2; font-weight: bold; } -#subject{ +#inbox-subject{ flex-grow: 2; flex-shrink: 2; } -#date{ +#inbox-date{ flex-grow: 1; flex-shrink: 1; font-size: smaller; @@ -96,12 +96,33 @@ body{ /* Message box items */ .message-box{ flex: 1 1 0; - margin: 10px; + margin-left: 20px; + width: 100%; } .message{ - width: 100%; - border: 5px solid black; - padding: 10px; + padding: 15px; + background-color: white; + margin-right: 20px; + box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.3) inset; +} + +#message-date{ + font-weight: small; + font-style: oblique; + float: right; +} + +#message-name{ + font-weight: bold; +} + +#message-subject{ + font-weight: bolder; + text-align: center; +} + +#message-content{ + font-size: 20px; } /* End Message box items*/ \ No newline at end of file diff --git a/index.html b/index.html index 68b1e52c..40a90648 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ // 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 var counter = document.querySelector("#counter"); - var intervalTime = 10000; + var intervalTime = 60000; var numMessages = 0; var currentMessage; @@ -40,11 +40,11 @@ date.innerText = message.date.toDateString(); //Add id's and class for each element of email bar - name.id = "name"; + name.id = "inbox-name"; name.className += "email-bar-content"; - subject.id = "subject"; + subject.id = "inbox-subject"; subject.className += "email-bar-content"; - date.id = "date"; + date.id = "inbox-date"; date.className += "email-bar-content"; //Add elements to the new email bar @@ -76,10 +76,16 @@ var subject = document.createElement("p"); var content = document.createElement("p"); + //Add id to each element of the email + name.id = "message-name"; + date.id = "message-date"; + subject.id = "message-subject"; + content.id = "message-content"; + //Add content to elements of the email name.innerText = message.sender; date.innerText = message.date.toDateString(); - subject.innerText = message.subject; + subject.innerText = "Subject: " + message.subject; content.innerText = message.body; //Add elements of email to message box From 996de5295252e38ef876b80540ec7596fb5dd322 Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Fri, 14 Dec 2018 02:15:15 +0200 Subject: [PATCH 10/15] Add style to email bars --- css/style.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index cdacfab8..13872d92 100644 --- a/css/style.css +++ b/css/style.css @@ -57,12 +57,16 @@ body{ align-items: center; padding-left: 25px; padding-right: 25px; - box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.6); + border: 1px solid gray; + box-shadow: 2px 3px gray; + border-radius: 10px; + transition-property: border box-shadow; + transition-duration: 0.3s; } .email-bars:hover{ - border: 1px solid gray; - box-shadow: 2px 3px gray; + box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.6); + border: 1px solid transparent; cursor: pointer; } @@ -105,6 +109,7 @@ body{ background-color: white; margin-right: 20px; box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.3) inset; + border-radius: 5px; } #message-date{ From ec506090e8279016b7c3c2606b852bb8f447ecd3 Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Fri, 14 Dec 2018 02:29:58 +0200 Subject: [PATCH 11/15] Reformat to populate with window.geemails array at start --- index.html | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 40a90648..d1cdd358 100644 --- a/index.html +++ b/index.html @@ -14,14 +14,19 @@ var currentMessage; counter.innerText = "Messages: " + numMessages; - addNewMessage(); + //Populate emails + window.geemails.forEach(function(message){ + addNewMessage(message); + }); + + //Create new emails every x seconds setInterval(function(){ addNewMessage(); }, intervalTime); - function addNewMessage(){ - var message = getNewMessage(); + function addNewMessage(message){ + //var message = getNewMessage(); var mailContainer = document.querySelector(".inbox"); //Create a new bar for email and add to the inbox From 7a70551557f7b47467fc2dc86398e601aee9b896 Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Fri, 14 Dec 2018 03:00:53 +0200 Subject: [PATCH 12/15] Fix setInterval not creating new message --- css/style.css | 7 +++---- index.html | 5 ++--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 13872d92..28c19e85 100644 --- a/css/style.css +++ b/css/style.css @@ -14,14 +14,13 @@ body{ } .header h1{ - font-size: 50px; + font-size: 80px; color: #07f733; margin: auto; width: 60%; text-align: center; - padding-top: 100px; - padding-bottom: 100px; - font-family: 'Shadows Into Light', cursive; + padding-top: 75px; + padding-bottom: 75px; } .message-counter{ diff --git a/index.html b/index.html index d1cdd358..1ee0f579 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ // 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 var counter = document.querySelector("#counter"); - var intervalTime = 60000; + var intervalTime = 10000; var numMessages = 0; var currentMessage; @@ -22,11 +22,10 @@ //Create new emails every x seconds setInterval(function(){ - addNewMessage(); + addNewMessage(getNewMessage()); }, intervalTime); function addNewMessage(message){ - //var message = getNewMessage(); var mailContainer = document.querySelector(".inbox"); //Create a new bar for email and add to the inbox From 243e04cda5751595f829e022f2784afddef5b2f0 Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Fri, 14 Dec 2018 21:07:23 +0200 Subject: [PATCH 13/15] Add jump to message functionality --- index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 1ee0f579..b5aced2c 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ // 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 var counter = document.querySelector("#counter"); - var intervalTime = 10000; + var intervalTime = 5000; var numMessages = 0; var currentMessage; @@ -62,6 +62,7 @@ currentMessage.parentElement.removeChild(currentMessage); } displayEmail(message); + window.location.hash = "jump-location"; }); //Adjust inbox counter @@ -123,7 +124,7 @@

-
+
From 353de5d44a3ac0cc1043940fb9b7d46991232bba Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Fri, 14 Dec 2018 21:07:58 +0200 Subject: [PATCH 14/15] Change message interval time to 15 seconds --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b5aced2c..7b8ed0c1 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ // 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 var counter = document.querySelector("#counter"); - var intervalTime = 5000; + var intervalTime = 15000; var numMessages = 0; var currentMessage; From 4b0bc744529121f8b3673606c9d3f7c535f3931b Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Thu, 20 Dec 2018 21:44:09 +0200 Subject: [PATCH 15/15] Remove jump location functionality. Add functionality to toggle message box when email clicked --- css/style.css | 5 +++++ index.html | 26 +++++++++++++++++++------- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 28c19e85..bc756863 100644 --- a/css/style.css +++ b/css/style.css @@ -31,6 +31,11 @@ body{ #counter{ text-align: center; } + +.hide{ + visibility: hidden; +} + /* FLEX BOXES*/ .container{ display: flex; diff --git a/index.html b/index.html index 7b8ed0c1..5dcd28f7 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ var counter = document.querySelector("#counter"); var intervalTime = 15000; var numMessages = 0; + var currentMessageDiv; var currentMessage; counter.innerText = "Messages: " + numMessages; @@ -58,11 +59,21 @@ //On click remove old message(if it exists) and add message newBar.addEventListener("click", function(){ - if(currentMessage){ - currentMessage.parentElement.removeChild(currentMessage); + if(currentMessageDiv){ + if(message === currentMessage){ + //when button for current message is clicked, toggle visibility + if(currentMessageDiv.style.visibility === "hidden"){ + currentMessageDiv.style.visibility = "visible"; + }else{ + currentMessageDiv.style.visibility = "hidden"; + } + }else{ + currentMessageDiv.parentElement.removeChild(currentMessageDiv); + displayEmail(message); + } + }else{ + displayEmail(message); } - displayEmail(message); - window.location.hash = "jump-location"; }); //Adjust inbox counter @@ -71,7 +82,7 @@ } function displayEmail(message){ - var messageBox = document.querySelector(".message-box") + var messageBox = document.querySelector(".message-box"); var newMessage = document.createElement("div"); newMessage.className += "message"; @@ -102,7 +113,8 @@ //Add the message to the box made for it messageBox.appendChild(newMessage); - currentMessage = newMessage; + currentMessageDiv = newMessage; + currentMessage = message; } }; @@ -124,7 +136,7 @@

-
+