From 596a6c280345245a8dd7f3e96b2213ff2a8ef359 Mon Sep 17 00:00:00 2001 From: Kevinnnface <45556758+Kevinnnface@users.noreply.github.com> Date: Fri, 22 Mar 2019 15:06:18 -1000 Subject: [PATCH 01/18] stuff --- css/style.css | 25 ++++++++++++++++++++++++ index.html | 53 ++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 75 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index e69de29b..a97ff428 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,25 @@ +.menuItems { + /* display: flex; */ + color: red; +} +:hover.menuItems{ + color: white; + background: red; +} + +#menuOptions { + padding: 10px; +} + +/* .date{ + float: right; +} */ + +#emails{ + padding: 20px 50px 20px 50px; + margin: 20px 10px 20px 10px; +} + +.body{ + padding: 0px 10px 50px 10px; +} \ No newline at end of file diff --git a/index.html b/index.html index a8a1aad9..3478ef55 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,60 @@ 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 - + + function getEmails(x, y){ + for (var i = 0; i < x; i++){ + + var emailBox = document.getElementById('emails'); + + var subject = document.createElement('div'); + subject.className = 'subject'; + subject.textContent = 'Subject: ' + y[i].subject; + emailBox.appendChild(subject); + subject.style.display = 'block'; + + var date = document.createElement('div'); + date.className = 'date'; + date.textContent = 'Date: ' + y[i].date; + subject.appendChild(date); + date.style.display = 'block'; + + var sender = document.createElement('div'); + sender.className = 'sender'; + sender.textContent = 'Sender: ' + y[i].sender; + date.appendChild(sender); + sender.style.display = 'block'; + + var body = document.createElement('div'); + body.className = 'body'; + body.textContent = 'Body: ' + y[i].body; + sender.appendChild(body); + body.style.display = 'block'; + + } + } + getEmails(geemails.length, geemails); + + + setInterval(function(){ + + + + }, 3000); }; -
- Build Me! +

Gee-Mail

+
+ + + + + +
+
+
\ No newline at end of file From fc2273f16d1800d459fe1f6197f99b5daa0049bb Mon Sep 17 00:00:00 2001 From: Kevinnnface <45556758+Kevinnnface@users.noreply.github.com> Date: Fri, 22 Mar 2019 15:19:27 -1000 Subject: [PATCH 02/18] need to add interval + counter --- index.html | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 3478ef55..e3028c90 100644 --- a/index.html +++ b/index.html @@ -40,9 +40,12 @@ } getEmails(geemails.length, geemails); - + var num = 10; + var findInbox = document.getElementById('menuOptions'); + findInbox.appendChild(num); + setInterval(function(){ - + inboxCounter.textContent = num++; }, 3000); @@ -52,7 +55,7 @@

Gee-Mail

- + From f710aa879ad2ac01dc47b6ed3b7c68512a5622a2 Mon Sep 17 00:00:00 2001 From: Kevin Guo Date: Sat, 23 Mar 2019 22:01:55 -1000 Subject: [PATCH 03/18] event listener --- index.html | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index e3028c90..35b06c25 100644 --- a/index.html +++ b/index.html @@ -40,13 +40,30 @@ } getEmails(geemails.length, geemails); - var num = 10; - var findInbox = document.getElementById('menuOptions'); - findInbox.appendChild(num); + var subjectBox = document.getElementsByClassName('subject'); + var dateBox = document.getElementsByClassName('date'); + var senderBox = document.getElementsByClassName('sender'); + var bodyBox = document.getElementsByClassName('body'); - setInterval(function(){ - inboxCounter.textContent = num++; + for (var i = 0; i < geemails.length; i++){ + + subjectBox.addEventListener('click', displayMessages); + function displayMessages(){ + if(dateBox.style.display === 'block'){ + dateBox.style.display = 'none' + senderBox.style.display = 'none' + bodyBox.style.display = 'none' + }else{ + dateBox.style.display = 'block' + senderBox.style.display = 'block' + bodyBox.style.display = 'block' + } + } + } + + setInterval(function(){ + }, 3000); }; From 0b8b7db5fd0a700bd48c789547efe9b2024e6d0f Mon Sep 17 00:00:00 2001 From: Kevinnnface <45556758+Kevinnnface@users.noreply.github.com> Date: Sun, 24 Mar 2019 01:28:30 -1000 Subject: [PATCH 04/18] 'fixed' --- index.html | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 35b06c25..1ea3070d 100644 --- a/index.html +++ b/index.html @@ -40,30 +40,29 @@ } getEmails(geemails.length, geemails); - var subjectBox = document.getElementsByClassName('subject'); + var subjectBoxes = document.getElementsByClassName('subject'); var dateBox = document.getElementsByClassName('date'); var senderBox = document.getElementsByClassName('sender'); var bodyBox = document.getElementsByClassName('body'); for (var i = 0; i < geemails.length; i++){ - subjectBox.addEventListener('click', displayMessages); + subjectBoxes[i].addEventListener('click', displayMessages); function displayMessages(){ - if(dateBox.style.display === 'block'){ - dateBox.style.display = 'none' - senderBox.style.display = 'none' - bodyBox.style.display = 'none' + if(subjectBoxes.style.display === 'block'){ + dateBox.style.display = 'none' + senderBox.style.display = 'none' + bodyBox.style.display = 'none' }else{ - dateBox.style.display = 'block' - senderBox.style.display = 'block' - bodyBox.style.display = 'block' + dateBox.style.display = 'block' + senderBox.style.display = 'block' + bodyBox.style.display = 'block' } } } - setInterval(function(){ - + setInterval(function(){ }, 3000); }; From cb54d050a51faf09e3a7acfd426eb99c19893e30 Mon Sep 17 00:00:00 2001 From: Kevinnnface <45556758+Kevinnnface@users.noreply.github.com> Date: Sun, 24 Mar 2019 13:28:38 -1000 Subject: [PATCH 05/18] ' --- index.html | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 1ea3070d..036acdde 100644 --- a/index.html +++ b/index.html @@ -47,17 +47,18 @@ for (var i = 0; i < geemails.length; i++){ - subjectBoxes[i].addEventListener('click', displayMessages); + subjectBoxes[i].addEventListener('click', displayMessages); + subjectBoxes[i].style.display === 'block'; - function displayMessages(){ - if(subjectBoxes.style.display === 'block'){ - dateBox.style.display = 'none' - senderBox.style.display = 'none' - bodyBox.style.display = 'none' - }else{ - dateBox.style.display = 'block' - senderBox.style.display = 'block' - bodyBox.style.display = 'block' + function displayMessages(){ + if(subjectBoxes[i].style.display === 'block'){ + dateBox[i].style.display = 'none'; + senderBox[i].style.display = 'none'; + bodyBox[i].style.display = 'none'; + }else{ + dateBox[i].style.display = 'block'; + senderBox[i].style.display = 'block'; + bodyBox[i].style.display = 'block'; } } } From f486deaf0079835993c1948a2ce729c12d5d03ff Mon Sep 17 00:00:00 2001 From: Kevinnnface <45556758+Kevinnnface@users.noreply.github.com> Date: Sun, 24 Mar 2019 15:07:34 -1000 Subject: [PATCH 06/18] toggling messages works --- css/style.css | 20 +++++++++++++++++ index.html | 62 ++++++++++++++++++++++++++++++++------------------- 2 files changed, 59 insertions(+), 23 deletions(-) diff --git a/css/style.css b/css/style.css index a97ff428..3e74cd9a 100644 --- a/css/style.css +++ b/css/style.css @@ -20,6 +20,26 @@ margin: 20px 10px 20px 10px; } +.email { + border: 4px solid black; +} + +.subject { + border: 7px solid cornflowerblue; +} + .body{ padding: 0px 10px 50px 10px; +} + +.date { + border: 2px solid yellow; +} + +.sender { + border: 2px solid blue; +} + +.body { + border: 2px solid red; } \ No newline at end of file diff --git a/index.html b/index.html index 036acdde..c1eb2d5a 100644 --- a/index.html +++ b/index.html @@ -3,19 +3,23 @@

Gee-Mail

- - - - - +
Inbox
+
Sent
+
Important
+
Drafts
+
Trash
From 4afde276bf5229cc7f48bb845283fb46344cbc0e Mon Sep 17 00:00:00 2001 From: Kevinnnface <45556758+Kevinnnface@users.noreply.github.com> Date: Sun, 24 Mar 2019 18:22:09 -1000 Subject: [PATCH 08/18] changed inbox indentation --- css/style.css | 6 ++---- index.html | 16 ++++++++++------ 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 52fcd184..c9cc568f 100644 --- a/css/style.css +++ b/css/style.css @@ -11,10 +11,6 @@ padding: 10px; } -/* .date{ - float: right; -} */ - #emails{ padding: 20px 50px 20px 50px; margin: 20px 10px 20px 10px; @@ -32,6 +28,8 @@ .date { border: 2px solid yellow; display: block; + padding: 0px 10px 20px 10px; + } .sender { diff --git a/index.html b/index.html index 3084ac04..ff958818 100644 --- a/index.html +++ b/index.html @@ -14,12 +14,16 @@ function getEmails(x, y) { for (var i = 0; i < x; i++) { + // function makeEmailBox(elem, label, content, cssStyle) { + // var label = document.createElement(elem); + // label.className = 'label'; + // label.textContent = y[i].label + // } + var email = document.createElement('div'); email.className = 'email'; emailBox.appendChild(email); - - var subject = document.createElement('div'); subject.className = 'subject'; subject.textContent = 'Subject: ' + y[i].subject; @@ -40,7 +44,7 @@ var body = document.createElement('div'); body.className = 'body'; - body.textContent = 'Body: ' + y[i].body; + body.textContent = y[i].body; subject.appendChild(body); body.style.display = 'block'; @@ -99,19 +103,19 @@ var newSubject = document.createElement('div'); newSubject.addEventListener('click', displayMessages); newSubject.className = 'subject'; - newSubject.textContent = getNewMessage().subject; + newSubject.textContent = "Subject: " + getNewMessage().subject; email.prepend(newSubject); newSubject.style.display = 'block' var newDate = document.createElement('div'); newDate.className = 'date'; - newDate.textContent = getNewMessage().date; + newDate.textContent = "Date: " + getNewMessage().date; newSubject.appendChild(newDate); newDate.style.display = 'block' var newSender = document.createElement('div'); newSender.className = 'sender'; - newSender.textContent = getNewMessage().sender; + newSender.textContent = "Sender: " + getNewMessage().sender; newSubject.appendChild(newSender); newSender.style.display = 'block' From b886d3763cfd46028fbc40c482a191f1f0828f9d Mon Sep 17 00:00:00 2001 From: Kevinnnface <45556758+Kevinnnface@users.noreply.github.com> Date: Sun, 24 Mar 2019 18:34:51 -1000 Subject: [PATCH 09/18] moving date to right of subject in css --- css/style.css | 15 +++++++++------ index.html | 19 +++++++++++-------- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index c9cc568f..819b98e2 100644 --- a/css/style.css +++ b/css/style.css @@ -1,10 +1,14 @@ +* { + font-family: 'Roboto', sans-serif; +} .menuItems { - /* display: flex; */ + float: left; color: red; } -:hover.menuItems{ +:hover.menuOptions{ color: white; background: red; + margin: 0px 350px 0px 0px; } #menuOptions { @@ -17,7 +21,6 @@ } .email { - border: 4px solid black; } .subject { @@ -26,19 +29,19 @@ } .date { - border: 2px solid yellow; + float: right; display: block; padding: 0px 10px 20px 10px; } .sender { - border: 2px solid blue; + /* border: 2px solid blue; */ display: block; } .body { padding: 0px 10px 50px 10px; - border: 2px solid red; + /* border: 2px solid red; */ display: block; } \ No newline at end of file diff --git a/index.html b/index.html index ff958818..d1ec8671 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,9 @@ + -

Gee-Mail

+

Gee-Mail
cuz...

Compose
Inbox
From 1caf4ea28e9ff9ac10736f52ab6ad64d2a381236 Mon Sep 17 00:00:00 2001 From: Kevin Guo Date: Mon, 25 Mar 2019 21:09:44 -1000 Subject: [PATCH 13/18] changed font sizes of date, added background to menu items --- css/style.css | 22 +++++++++++++++------- index.html | 2 +- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index 08393f7f..ad5e45b2 100644 --- a/css/style.css +++ b/css/style.css @@ -5,13 +5,19 @@ body { #cuz { display:inline-block; + font-size: 16pt; } -.menuItems { +#menuItems { float: left; color: rgb(255, 20, 20); - /* padding: 0px 0px 0px 0px; */ + margin-left: -10px; + padding-left: 5px; + padding-right: 5px; font-size: 16pt; + background: #cccccc; + border-radius: 0px 25px 25px 0px; + } #inboxCounter:hover { @@ -25,7 +31,7 @@ body { color: white; background: rgb(255, 20, 20); border-radius: 0px 25px 25px 0px; - margin: 0px 0px 0px -8px; + margin: 0px 0px 0px 0px; padding: 5px 10px 5px 0px; } @@ -37,8 +43,8 @@ body { #emails{ /* padding: 20px 50px 20px 100px; */ - margin: 20px 100px 20px 100px; - border: 1px solid red; + margin: 20px 80px 20px 110px; + /* border: 1px solid red; */ } @@ -49,6 +55,7 @@ body { background-color: #333333; color: #e6e6e6; font-size: 14pt; + padding-left: -10px; /* overflow: auto; */ } @@ -56,7 +63,7 @@ body { float: right; display: none; background-color: #333333; - font-size: 10pt; + font-size: 8pt; /* overflow: auto; */ /* padding: 0px 10px 20px 10px; */ } @@ -67,11 +74,12 @@ body { display: none; font-size: 12pt; font: bold; + padding-top: 20px; /* overflow: auto; */ } .body { - padding: 0px 10px 50px 10px; + padding: 20px 50px 20px 50px; background-color: #333333; /* border: 2px solid red; */ display: none; diff --git a/index.html b/index.html index 3e044ee9..676a108e 100644 --- a/index.html +++ b/index.html @@ -143,7 +143,7 @@

Gee-Mail
cuz...

-
+