From acf4e773a9ca03227322af3807b27c90ff730850 Mon Sep 17 00:00:00 2001 From: Arthur Date: Wed, 29 May 2019 19:59:10 -1000 Subject: [PATCH 1/6] first commit. created geemail structure. functionality is working --- css/style.css | 34 ++++++++++++++ index.html | 128 +++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 160 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index e69de29b..db20694b 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,34 @@ +h1{ + height: 200px; + width: 200px; + font-family: cursive; + font-size: 50px; + color: fuchsia; + position: absolute; + position: absolute; + top: 30px; + left: 50px; +} +th, +td{ + border: 1pt solid black; + padding: 10px; + font-family: verdana; + text-align: left; + font-weight: 20; +} + +table{ + border: 2pt solid black; + background-color: azure; +} +.mailBox{ + top:40px; + left:425px; + position: relative; +} + +.container{ + color: red; + font-family: Impact; +} \ No newline at end of file diff --git a/index.html b/index.html index a8a1aad9..f1762a44 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,142 @@ +
+ mailbox +

Geemail

+
- Build Me! + +
+ +
+ +

+

+ + + + + + + + + +

Date

Sender

Subject

\ No newline at end of file From f169e99943dfab9ed98e0ef6b0b10c8d260adc36 Mon Sep 17 00:00:00 2001 From: Arthur Date: Wed, 29 May 2019 23:29:23 -1000 Subject: [PATCH 2/6] This allows generated message to open also added the message body that was missing --- index.html | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index f1762a44..ff43238a 100644 --- a/index.html +++ b/index.html @@ -81,16 +81,22 @@

Geemail

var newDate = document.createElement('td') var newSub = document.createElement('td') var newSend = document.createElement('td') + + var newBody = document.createElement('td') newDate.innerText = addedMessage.date newSub.innerText = addedMessage.subject newSend.innerText = addedMessage.sender - + newBody.innerText = addedMessage.body + + addedRow.appendChild(newBody); addedRow.appendChild(newDate); addedRow.appendChild(newSub); addedRow.appendChild(newSend) tbody.appendChild(addedRow) - + newBody.style.display = 'none' + addClickHandler(addedRow,newBody) + count++; document.getElementById("counter").innerText = 'Inbox: ' + count; },2500) From 4c7e2844129dbfa10c7f6a98ba987348c833ccc0 Mon Sep 17 00:00:00 2001 From: Arthur Date: Thu, 30 May 2019 10:01:48 -1000 Subject: [PATCH 3/6] moved date,subject, and sender around to make it look cleaner --- index.html | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index ff43238a..13c40325 100644 --- a/index.html +++ b/index.html @@ -27,13 +27,14 @@

Geemail

var sendEle = document.createElement('td') var subEle = document.createElement('td') - dateEle.innerText = message.date sendEle.innerText = message.sender - subEle.innerText = message.subject + subEle.innerText = message.subject + dateEle.innerText = message.date - newRow.appendChild(dateEle) + newRow.appendChild(sendEle) newRow.appendChild(subEle) + newRow.appendChild(dateEle) var newMessage = [message.sender,message.subject,message.date,message.body] @@ -81,19 +82,21 @@

Geemail

var newDate = document.createElement('td') var newSub = document.createElement('td') var newSend = document.createElement('td') - + var bodyRow = document.createElement('tr') var newBody = document.createElement('td') - newDate.innerText = addedMessage.date - newSub.innerText = addedMessage.subject newSend.innerText = addedMessage.sender + newSub.innerText = addedMessage.subject + newDate.innerText = addedMessage.date newBody.innerText = addedMessage.body - addedRow.appendChild(newBody); - addedRow.appendChild(newDate); + + addedRow.appendChild(newSend) addedRow.appendChild(newSub); - addedRow.appendChild(newSend) + addedRow.appendChild(newDate); + bodyRow.appendChild(newBody); tbody.appendChild(addedRow) + tbody.appendChild(bodyRow) newBody.style.display = 'none' addClickHandler(addedRow,newBody) @@ -134,9 +137,11 @@

Geemail

-

Date

+

Sender

Subject

+

Date

+ From ceed0e04f9a19fad9b894d01b4f48dd6d68bf1a8 Mon Sep 17 00:00:00 2001 From: Arthur Date: Thu, 30 May 2019 20:47:42 -1000 Subject: [PATCH 4/6] incompleted fix --- css/style.css | 18 +++++++++++++----- index.html | 51 ++++++++++++++++++++++++++------------------------- 2 files changed, 39 insertions(+), 30 deletions(-) diff --git a/css/style.css b/css/style.css index db20694b..787bc927 100644 --- a/css/style.css +++ b/css/style.css @@ -18,10 +18,6 @@ td{ font-weight: 20; } -table{ - border: 2pt solid black; - background-color: azure; -} .mailBox{ top:40px; left:425px; @@ -31,4 +27,16 @@ table{ .container{ color: red; font-family: Impact; -} \ No newline at end of file +} +.tableBody{ + width: 100%; + +} + +.Row{ + border: 5px solid black; + display: flex; + align-content: center; + width: 100%; +} + diff --git a/index.html b/index.html index 13c40325..11165219 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@

Geemail

// 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 //For every geemail messagae create a new row within the tbody - var tbody = document.querySelector('tbody') + var tbody = document.querySelector('.tableBody') for (var i = 0; i < window.geemails.length; i++) { let message = window.geemails[i]; @@ -22,16 +22,18 @@

Geemail

// {message.subject} // ` - var newRow = document.createElement('tr') - var dateEle = document.createElement('td') - var sendEle = document.createElement('td') - var subEle = document.createElement('td') + var newRow = document.createElement('div') + var dateEle = document.createElement('div') + var sendEle = document.createElement('div') + var subEle = document.createElement('div') sendEle.innerText = message.sender subEle.innerText = message.subject dateEle.innerText = message.date - + sendEle.className = 'sender' + subEle.className = 'subject' + dateEle.className = 'date' newRow.appendChild(sendEle) newRow.appendChild(subEle) newRow.appendChild(dateEle) @@ -39,8 +41,8 @@

Geemail

var newMessage = [message.sender,message.subject,message.date,message.body] // created table row for message body - var messageRow = document.createElement('tr'); - var messageEle = document.createElement('td'); + var messageRow = document.createElement('div'); + var messageEle = document.createElement('div'); messageEle.innerText = newMessage; messageRow.appendChild(messageEle); messageRow.style.display = 'none'; @@ -78,12 +80,12 @@

Geemail

// console.log(getNewMessage); var addedMessage = getNewMessage(); - var addedRow = document.createElement('tr') - var newDate = document.createElement('td') - var newSub = document.createElement('td') - var newSend = document.createElement('td') - var bodyRow = document.createElement('tr') - var newBody = document.createElement('td') + var addedRow = document.createElement('div') + var newDate = document.createElement('div') + var newSub = document.createElement('div') + var newSend = document.createElement('div') + var bodyRow = document.createElement('div') + var newBody = document.createElement('div') newSend.innerText = addedMessage.sender newSub.innerText = addedMessage.subject @@ -133,21 +135,20 @@

Geemail

- +

-
- - - - + + +
+
+

Sender

+

Subject

+

Date

+
+
- - - - -

Sender

Subject

Date

\ No newline at end of file From 1e829d81778d84fa67b2a9578edf5a7d77e999fb Mon Sep 17 00:00:00 2001 From: Arthur Date: Thu, 30 May 2019 23:27:41 -1000 Subject: [PATCH 5/6] more css practice --- css/style.css | 14 +++++++++++++- index.html | 6 +++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 787bc927..d3a91879 100644 --- a/css/style.css +++ b/css/style.css @@ -29,14 +29,26 @@ td{ font-family: Impact; } .tableBody{ + border: 1px solid black; + display: grid; width: 100%; +} +.column{ + display: flex; + flex: 33%; + } .Row{ - border: 5px solid black; + border: 3px solid black; display: flex; align-content: center; width: 100%; } +.sendCol{ + display: flex; + flex-direction: column; + border: 1px solid black; +} diff --git a/index.html b/index.html index 11165219..18b313e7 100644 --- a/index.html +++ b/index.html @@ -31,9 +31,9 @@

Geemail

subEle.innerText = message.subject dateEle.innerText = message.date - sendEle.className = 'sender' - subEle.className = 'subject' - dateEle.className = 'date' + sendEle.className = 'sendCol' + subEle.className = 'subCol' + dateEle.className = 'dateCol' newRow.appendChild(sendEle) newRow.appendChild(subEle) newRow.appendChild(dateEle) From e28926c8f5d2df848aa311314461d65bf10f3ef7 Mon Sep 17 00:00:00 2001 From: Arthur Date: Thu, 30 May 2019 23:54:22 -1000 Subject: [PATCH 6/6] test --- css/style.css | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index d3a91879..6b625856 100644 --- a/css/style.css +++ b/css/style.css @@ -29,26 +29,21 @@ td{ font-family: Impact; } .tableBody{ - border: 1px solid black; display: grid; - width: 100%; + grid-template-columns: auto auto auto; + background-color: #2196F3; + padding: 10px; -} -.column{ - display: flex; - flex: 33%; - } .Row{ - border: 3px solid black; - display: flex; - align-content: center; - width: 100%; + display: grid; + grid-template-columns: auto auto auto; + background-color: white; + padding: 10px; } .sendCol{ - display: flex; - flex-direction: column; + display: grid; border: 1px solid black; }