From 1ca375a3e68e4d423d37a35438326dc7e70b1246 Mon Sep 17 00:00:00 2001 From: Andrew Obiano Date: Mon, 27 May 2019 17:23:23 -1000 Subject: [PATCH 1/9] got the mail to show --- index.html | 38 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a8a1aad9..38679f1a 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,47 @@ 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 list = []; + + for(i=0; i<10; i++){ + list.push(window.geemails[i]); + + var messageElem = document.createElement('li'); + messageElem.id = 'messages'; + main.appendChild(messageElem); + messageElem.innerHTML = list[i].date + '
' + list[i].sender + '
' + list[i].subject; + + var bodyElem = document.createElement('p'); + bodyElem.id = 'mailBody'; + bodyElem.innerHTML = list[i].body; + main.appendChild(bodyElem); + } + + mailBody.style.display = 'none'; // WHY YOU NO WORK + + messages.addEventListener('click', showBody); + + function showBody(){ + if(mailBody.style.display == 'block'){ + mailBody.style.display = 'none'; + }else{ + mailBody.style.display = 'block'; + } + } + }; + +
+

GeeMail

+
+
- Build Me! +
+ \ No newline at end of file From 676789516ac3e75cf189eb9559afda987eb3ceae Mon Sep 17 00:00:00 2001 From: Andrew Obiano Date: Thu, 30 May 2019 15:53:13 -1000 Subject: [PATCH 2/9] updated as of 5/30/19 --- css/style.css | 7 +++++ index.html | 81 ++++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 74 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index e69de29b..6589c724 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,7 @@ +#mailBody{ + display: none; +} + +#messages{ + list-style: none; +} \ No newline at end of file diff --git a/index.html b/index.html index 38679f1a..4606ab15 100644 --- a/index.html +++ b/index.html @@ -7,41 +7,94 @@ // 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 + // LETS BUILD SOME ELEMENTS + function createElem(elem, label, inside){ + var elemBox = document.createElement(elem); + elemBox.className = label; + elemBox.innerHTML = inside; + + return elemBox; + } + + // LIST THE FIRST 10 EMAILS AND BODIES var list = []; for(i=0; i<10; i++){ + + // update inbox counter + // counter++; + // inboxCount.innerHTML = counter; + list.push(window.geemails[i]); - var messageElem = document.createElement('li'); - messageElem.id = 'messages'; - main.appendChild(messageElem); - messageElem.innerHTML = list[i].date + '
' + list[i].sender + '
' + list[i].subject; + var dateBox = createElem('div', 'dateElem', list[i].date); + main.appendChild(dateBox); + + var senderBox = createElem('div', 'fromElem', list[i].sender); + dateBox.appendChild(senderBox); + + var subjBox = createElem('div', 'subjElem', list[i].subject); + dateBox.appendChild(subjBox); + + var bodyBox = createElem('p', 'bodyElem', list[i].body); + dateBox.appendChild(bodyBox); + bodyBox.style.display = 'none'; - var bodyElem = document.createElement('p'); - bodyElem.id = 'mailBody'; - bodyElem.innerHTML = list[i].body; - main.appendChild(bodyElem); + dateBox.addEventListener('click', showBody); } + + // CREATING NEW MESSAGES + function getNewMessage(){ - mailBody.style.display = 'none'; // WHY YOU NO WORK + counter++; + inboxCount.innerHTML = counter; - messages.addEventListener('click', showBody); + for(i=0; i<1; i++){ + list.push(window.geemails[i]); + var dateBox = createElem('div', 'dateElem', list[i].date); + main.appendChild(dateBox); + + var senderBox = createElem('div', 'fromElem', list[i].sender); + dateBox.appendChild(senderBox); + + var subjBox = createElem('div', 'subjElem', list[i].subject); + dateBox.appendChild(subjBox); + + var bodyBox = createElem('p', 'bodyElem', list[i].body); + bodyBox.style.display = 'none'; + dateBox.appendChild(bodyBox); + + dateBox.addEventListener('click', showBody); + } + } + + // SHOW AND HIDE THE BODY function showBody(){ - if(mailBody.style.display == 'block'){ - mailBody.style.display = 'none'; + var show = this.querySelector('.bodyElem'); + if(show.style.display == 'block'){ + show.style.display = 'none'; }else{ - mailBody.style.display = 'block'; + show.style.display = 'block'; } } + // INBOX COUNTER + var counts = createElem('div', 'counter', list.length); + inboxCount.appendChild(counts); + var counter = 10; + + // RECURRING MESSAGE GENERATOR + setInterval(getNewMessage, 5000); + };
-

GeeMail

+

GeeMail

+
From 055a5facb4b84884c050610a6bf0bb20d4527b9f Mon Sep 17 00:00:00 2001 From: Andrew Obiano Date: Thu, 30 May 2019 21:24:32 -1000 Subject: [PATCH 3/9] getting there --- css/style.css | 36 ++++++++++++++++++++++++++++++++---- index.html | 39 +++++++++++++++++++-------------------- 2 files changed, 51 insertions(+), 24 deletions(-) diff --git a/css/style.css b/css/style.css index 6589c724..c7884b20 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,35 @@ -#mailBody{ - display: none; +.body{ + } -#messages{ - list-style: none; +#mainHeader{ + text-align: center; + margin: 15px; + padding: 15px; +} + +.dateElem{ + border: 1px solid black; + margin-left: auto; + margin-right: auto; + margin-block-end: 10px; + padding: 10px; + box-align: center; + width: 500px; + box-shadow: 4px 4px 4px grey; + transition-duration: 400ms; +} + +#inboxCount{ + border: 1px solid black; + margin-left: auto; + margin-right: auto; + margin-block-end: 10px; + text-align: center; + padding: 15px; + width: 75px; +} + +.dateElem:hover{ + background: rgb(235, 235, 235); } \ No newline at end of file diff --git a/index.html b/index.html index 4606ab15..6d734e5e 100644 --- a/index.html +++ b/index.html @@ -21,10 +21,6 @@ for(i=0; i<10; i++){ - // update inbox counter - // counter++; - // inboxCount.innerHTML = counter; - list.push(window.geemails[i]); var dateBox = createElem('div', 'dateElem', list[i].date); @@ -46,27 +42,30 @@ // CREATING NEW MESSAGES function getNewMessage(){ + // increase inbox number counter++; - inboxCount.innerHTML = counter; + inboxCount.innerHTML = 'Inbox: ' + counter; + + // so I can pull a random element from the list of emails + var randNum = Math.floor(Math.random()*list.length); - for(i=0; i<1; i++){ - list.push(window.geemails[i]); + // repeated code from the original first 10 emails + list.push(window.geemails[randNum]); - var dateBox = createElem('div', 'dateElem', list[i].date); - main.appendChild(dateBox); + var dateBox = createElem('div', 'dateElem', list[randNum].date); + main.appendChild(dateBox); - var senderBox = createElem('div', 'fromElem', list[i].sender); - dateBox.appendChild(senderBox); + var senderBox = createElem('div', 'fromElem', list[randNum].sender); + dateBox.appendChild(senderBox); - var subjBox = createElem('div', 'subjElem', list[i].subject); - dateBox.appendChild(subjBox); + var subjBox = createElem('div', 'subjElem', list[randNum].subject); + dateBox.appendChild(subjBox); - var bodyBox = createElem('p', 'bodyElem', list[i].body); - bodyBox.style.display = 'none'; - dateBox.appendChild(bodyBox); + var bodyBox = createElem('p', 'bodyElem', list[randNum].body); + bodyBox.style.display = 'none'; + dateBox.appendChild(bodyBox); - dateBox.addEventListener('click', showBody); - } + dateBox.addEventListener('click', showBody); } // SHOW AND HIDE THE BODY @@ -80,7 +79,7 @@ } // INBOX COUNTER - var counts = createElem('div', 'counter', list.length); + var counts = createElem('div', 'counter', 'Inbox: ' + list.length); inboxCount.appendChild(counts); var counter = 10; @@ -93,7 +92,7 @@
-

GeeMail

+

GeeMail

From 78e9384a73754de40e9776876daff85bcf0cd608 Mon Sep 17 00:00:00 2001 From: Andrew Obiano Date: Thu, 30 May 2019 22:23:15 -1000 Subject: [PATCH 4/9] done i guess --- css/style.css | 25 ++++++++++++++++++++++--- index.html | 6 +++--- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index c7884b20..cd501277 100644 --- a/css/style.css +++ b/css/style.css @@ -1,21 +1,40 @@ -.body{ - +body{ + background-image: url('https://i1.wp.com/textureshot.com/wp-content/uploads/2018/11/Background-image-for-website-SF-Wallpaper.jpg?fit=1024%2C576&ssl=1'); + background-size: 100%; + background-repeat: no-repeat; + background-attachment: fixed; + font-family: Arial, Helvetica, sans-serif; +} + +.fromElem{ + font-style: italic; + text-align: right; +} + +.subjElem{ + font-weight: bold; + text-align: right; } #mainHeader{ + font-size: 40px; text-align: center; margin: 15px; padding: 15px; } .dateElem{ + font-size: 15px; border: 1px solid black; + background: white; margin-left: auto; margin-right: auto; margin-block-end: 10px; padding: 10px; box-align: center; - width: 500px; + text-align: left; + width: 650px; + height: auto; box-shadow: 4px 4px 4px grey; transition-duration: 400ms; } diff --git a/index.html b/index.html index 6d734e5e..9ca470ed 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@ var dateBox = createElem('div', 'dateElem', list[i].date); main.appendChild(dateBox); - var senderBox = createElem('div', 'fromElem', list[i].sender); + var senderBox = createElem('div', 'fromElem', 'From: ' + list[i].sender); dateBox.appendChild(senderBox); var subjBox = createElem('div', 'subjElem', list[i].subject); @@ -55,7 +55,7 @@ var dateBox = createElem('div', 'dateElem', list[randNum].date); main.appendChild(dateBox); - var senderBox = createElem('div', 'fromElem', list[randNum].sender); + var senderBox = createElem('div', 'fromElem', 'From: ' + list[randNum].sender); dateBox.appendChild(senderBox); var subjBox = createElem('div', 'subjElem', list[randNum].subject); @@ -85,7 +85,7 @@ // RECURRING MESSAGE GENERATOR setInterval(getNewMessage, 5000); - + }; From e6784b83dd1afb6ff0447e3394c7b5a15a2032b1 Mon Sep 17 00:00:00 2001 From: Andrew Obiano Date: Fri, 31 May 2019 17:59:29 -1000 Subject: [PATCH 5/9] finished --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 9ca470ed..f254307b 100644 --- a/index.html +++ b/index.html @@ -84,7 +84,7 @@ var counter = 10; // RECURRING MESSAGE GENERATOR - setInterval(getNewMessage, 5000); + setInterval(getNewMessage, 10000); }; From 00de92c8c12bd62de7891052965df7c4178715ba Mon Sep 17 00:00:00 2001 From: Andrew Obiano Date: Fri, 31 May 2019 18:34:59 -1000 Subject: [PATCH 6/9] finished --- css/style.css | 2 +- index.html | 16 +++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index cd501277..e44abafa 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,6 @@ body{ background-image: url('https://i1.wp.com/textureshot.com/wp-content/uploads/2018/11/Background-image-for-website-SF-Wallpaper.jpg?fit=1024%2C576&ssl=1'); - background-size: 100%; + background-size: 120%; background-repeat: no-repeat; background-attachment: fixed; font-family: Arial, Helvetica, sans-serif; diff --git a/index.html b/index.html index f254307b..c44d15d1 100644 --- a/index.html +++ b/index.html @@ -40,9 +40,11 @@ } // CREATING NEW MESSAGES - function getNewMessage(){ + function generate(){ - // increase inbox number + var newMessage = getNewMessage(); + + // increase inbox number counter++; inboxCount.innerHTML = 'Inbox: ' + counter; @@ -52,16 +54,16 @@ // repeated code from the original first 10 emails list.push(window.geemails[randNum]); - var dateBox = createElem('div', 'dateElem', list[randNum].date); + var dateBox = createElem('div', 'dateElem', newMessage.date); main.appendChild(dateBox); - var senderBox = createElem('div', 'fromElem', 'From: ' + list[randNum].sender); + var senderBox = createElem('div', 'fromElem', 'From: ' + newMessage.sender); dateBox.appendChild(senderBox); - var subjBox = createElem('div', 'subjElem', list[randNum].subject); + var subjBox = createElem('div', 'subjElem', newMessage.subject); dateBox.appendChild(subjBox); - var bodyBox = createElem('p', 'bodyElem', list[randNum].body); + var bodyBox = createElem('p', 'bodyElem', newMessage.body); bodyBox.style.display = 'none'; dateBox.appendChild(bodyBox); @@ -84,7 +86,7 @@ var counter = 10; // RECURRING MESSAGE GENERATOR - setInterval(getNewMessage, 10000); + setInterval(generate, 1000); }; From 0e92a5f64d0f6c5171817df9db4b41e620ce0172 Mon Sep 17 00:00:00 2001 From: Andrew Obiano Date: Fri, 31 May 2019 18:43:25 -1000 Subject: [PATCH 7/9] finished --- css/style.css | 2 ++ index.html | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index e44abafa..1a1f8850 100644 --- a/css/style.css +++ b/css/style.css @@ -37,6 +37,7 @@ body{ height: auto; box-shadow: 4px 4px 4px grey; transition-duration: 400ms; + border-radius: 5px; } #inboxCount{ @@ -47,6 +48,7 @@ body{ text-align: center; padding: 15px; width: 75px; + border-radius: 5px; } .dateElem:hover{ diff --git a/index.html b/index.html index c44d15d1..d2060173 100644 --- a/index.html +++ b/index.html @@ -86,7 +86,7 @@ var counter = 10; // RECURRING MESSAGE GENERATOR - setInterval(generate, 1000); + setInterval(generate, 10000); }; From 9df6fea991d478a7c84f5ba3538e6340dd5b7782 Mon Sep 17 00:00:00 2001 From: Andrew Obiano Date: Fri, 31 May 2019 20:23:02 -1000 Subject: [PATCH 8/9] finished --- css/style.css | 45 ++++++++++++++++++++++++++++------- index.html | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 100 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 1a1f8850..fe0df2d7 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,10 @@ body{ - background-image: url('https://i1.wp.com/textureshot.com/wp-content/uploads/2018/11/Background-image-for-website-SF-Wallpaper.jpg?fit=1024%2C576&ssl=1'); + /* background-image: url('https://i1.wp.com/textureshot.com/wp-content/uploads/2018/11/Background-image-for-website-SF-Wallpaper.jpg?fit=1024%2C576&ssl=1'); background-size: 120%; background-repeat: no-repeat; - background-attachment: fixed; - font-family: Arial, Helvetica, sans-serif; + background-attachment: fixed; */ + font-family: Candara, Helvetica, sans-serif; + margin: 0; } .fromElem{ @@ -16,11 +17,21 @@ body{ text-align: right; } +img{ + width: 40px; +} + #mainHeader{ + background: rgba(0, 0, 0, 0.678); + color: white; font-size: 40px; text-align: center; - margin: 15px; - padding: 15px; + margin: 0px 0px 15px; + padding: 10px; +} + +.title{ + background: transparent; } .dateElem{ @@ -35,22 +46,38 @@ body{ text-align: left; width: 650px; height: auto; - box-shadow: 4px 4px 4px grey; + box-shadow: 4px 4px 4px rgb(0, 0, 0); transition-duration: 400ms; border-radius: 5px; } #inboxCount{ + background: white; + box-shadow: 4px 4px 4px rgb(0, 0, 0); border: 1px solid black; margin-left: auto; margin-right: auto; margin-block-end: 10px; text-align: center; - padding: 15px; + padding: 8px; width: 75px; border-radius: 5px; } .dateElem:hover{ - background: rgb(235, 235, 235); -} \ No newline at end of file + background: rgb(201, 201, 201); +} + +#particles-js { + position: fixed; + z-index: -1; + width: 100%; + height: 100%; + background-color: #2d7191; + background-image: url(""); + background-repeat: no-repeat; + background-size: cover; + background-position: 50% 50%; + } + + \ No newline at end of file diff --git a/index.html b/index.html index d2060173..27eb6708 100644 --- a/index.html +++ b/index.html @@ -88,13 +88,74 @@ // RECURRING MESSAGE GENERATOR setInterval(generate, 10000); + // PARTICLES + particlesJS("particles-js", { + particles: { + number: { value: 80, density: { enable: true, value_area: 800 } }, + color: { value: "#ffffff" }, + shape: { + type: "circle", + stroke: { width: 0, color: "#000000" }, + polygon: { nb_sides: 5 }, + image: { src: "img/github.svg", width: 100, height: 100 } + }, + opacity: { + value: 0.5, + random: false, + anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } + }, + size: { + value: 3, + random: true, + anim: { enable: false, speed: 40, size_min: 0.1, sync: false } + }, + line_linked: { + enable: true, + distance: 150, + color: "#ffffff", + opacity: 0.4, + width: 1 + }, + move: { + enable: true, + speed: 6, + direction: "none", + random: false, + straight: false, + out_mode: "out", + bounce: false, + attract: { enable: false, rotateX: 600, rotateY: 1200 } + } + }, + interactivity: { + detect_on: "canvas", + events: { + onhover: { enable: true, mode: "repulse" }, + onclick: { enable: true, mode: "push" }, + resize: true + }, + modes: { + grab: { distance: 400, line_linked: { opacity: 1 } }, + bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, + repulse: { distance: 200, duration: 0.4 }, + push: { particles_nb: 4 }, + remove: { particles_nb: 2 } + } + }, + retina_detect: true +}); + }; +
+
-

GeeMail

+

+ + GeeMail

@@ -102,5 +163,7 @@

GeeMail

+ + \ No newline at end of file From f86d36966dc1a5876f58052956a11e22fb17b260 Mon Sep 17 00:00:00 2001 From: Andrew Obiano Date: Fri, 31 May 2019 20:27:42 -1000 Subject: [PATCH 9/9] finished --- css/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index fe0df2d7..46674892 100644 --- a/css/style.css +++ b/css/style.css @@ -37,7 +37,7 @@ img{ .dateElem{ font-size: 15px; border: 1px solid black; - background: white; + background: rgba(255, 255, 255, 0.849); margin-left: auto; margin-right: auto; margin-block-end: 10px; @@ -46,7 +46,7 @@ img{ text-align: left; width: 650px; height: auto; - box-shadow: 4px 4px 4px rgb(0, 0, 0); + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.582); transition-duration: 400ms; border-radius: 5px; } @@ -65,7 +65,7 @@ img{ } .dateElem:hover{ - background: rgb(201, 201, 201); + background: rgb(255, 255, 255); } #particles-js {