From 222740c6bb6c3bdb83c4989a0023952a4afd698e Mon Sep 17 00:00:00 2001 From: Keith Date: Wed, 1 May 2019 21:25:18 -0700 Subject: [PATCH 1/7] init --- index.html | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a8a1aad9..02564e0d 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -11,8 +12,27 @@ -
- Build Me! +
+

GeeMail

+ +
+
+
+ + + + + + + \ No newline at end of file From 664cb0d6467663ac28c1c1d96dcfd6bbda0c8599 Mon Sep 17 00:00:00 2001 From: Keith Date: Thu, 2 May 2019 02:10:33 -0700 Subject: [PATCH 2/7] add table and data --- css/reset.css | 48 ++++++++++++++++++++++++++++ index.html | 88 +++++++++++++++++++++++++++++++++++++-------------- js/app.js | 1 + 3 files changed, 114 insertions(+), 23 deletions(-) create mode 100644 css/reset.css create mode 100644 js/app.js diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..af944401 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/index.html b/index.html index 02564e0d..3912101d 100644 --- a/index.html +++ b/index.html @@ -1,38 +1,80 @@ + GeeMail + + - - + + +

GeeMail

+
+ +
  • Inbox
    • +
  • Junk
    • +
  • Deleted
    • +
  • Sent
    • + +
    +
    + + + + + + + + + + + + + +
    SubjectSenderDate
    +
    +
    +
    +
    +
    - - - - - - - \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 00000000..ad9a93a7 --- /dev/null +++ b/js/app.js @@ -0,0 +1 @@ +'use strict'; From 0c8f25971e01ab614bf06a69d411f4a7cc82343f Mon Sep 17 00:00:00 2001 From: Keith Date: Thu, 2 May 2019 03:03:41 -0700 Subject: [PATCH 3/7] message --- index.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 3912101d..6ef94674 100644 --- a/index.html +++ b/index.html @@ -10,10 +10,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 window.onload = function() { - console.log(window.geemails); - console.log(window.getNewMessage); - let tbl = document.getElementById('tbl'); let email = 0; @@ -26,16 +23,19 @@ document.getElementById('counter').innerHTML = `Inbox: ${email}`; let rows = tbl.insertRow(1); - let subjectCell = rows.insertCell(0); - subjectCell.innerHTML = msg.subject; - let senderCell = rows.insertCell(1); + let senderCell = rows.insertCell(0); senderCell.innerHTML = msg.sender; + let subjectCell = rows.insertCell(1); + subjectCell.innerHTML = msg.subject; let dateCell = rows.insertCell(2); dateCell.innerHTML = msg.date; let body = msg.body; - }; - + rows.onclick = function() { + document.getElementById('email-info').innerHTML = `${msg.date}
    ${msg.sender}
    ${msg.subject}`; + document.getElementById('email-content').innerHTML = `${body}`; + }; + }; }; From 5c83a2d00e96e732558772a2b95bd12c0e725a2d Mon Sep 17 00:00:00 2001 From: Keith Date: Thu, 2 May 2019 03:36:02 -0700 Subject: [PATCH 4/7] render new message --- index.html | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 6ef94674..1fd18708 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,10 @@ function loadEmail(msg) { email++; - document.getElementById('counter').innerHTML = `Inbox: ${email}`; + // show number of messages + document.getElementById('inbox').innerHTML = `Inbox ${email}`; + // create row and cell for the email let rows = tbl.insertRow(1); let senderCell = rows.insertCell(0); senderCell.innerHTML = msg.sender; @@ -31,11 +33,16 @@ dateCell.innerHTML = msg.date; let body = msg.body; + // print info and message rows.onclick = function() { document.getElementById('email-info').innerHTML = `${msg.date}
    ${msg.sender}
    ${msg.subject}`; document.getElementById('email-content').innerHTML = `${body}`; - }; + } }; + // render new message + setInterval(function() { + loadEmail(getNewMessage()); + }, 8000) }; @@ -47,9 +54,8 @@

    GeeMail

    -
      -
    • Inbox
      • +
    • Inbox
    • Junk
    • Deleted
    • Sent
      • From 726425a567c9db9d12594efe968292fed9fb77c4 Mon Sep 17 00:00:00 2001 From: Keith Date: Thu, 2 May 2019 07:16:53 -0700 Subject: [PATCH 5/7] css and edit other stuff --- css/style.css | 86 +++++++++++++++++++++++++++ index.html | 157 +++++++++++++++++++++++++------------------------- js/app.js | 36 ++++++++++++ 3 files changed, 200 insertions(+), 79 deletions(-) diff --git a/css/style.css b/css/style.css index e69de29b..69d2432c 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,86 @@ +body { + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + background-image: url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2767&q=80"); + background-size: cover; + width: 100%; + height: auto; + overflow: hidden; +} + +header { + background:#ffffff; + text-align: center; + border: 1px solid #999999; + display: inline-flex; + padding: 5px 50px; + width: 100%; + text-align: center; +} +h1 { + font-size: 50px; + margin-right: 50px; + color: #333333; +} +input { + width: 700px; + font-size: 15px; +} +main { + width: 100%; + display: flex; + /* justify-content: center; */ +} +ul { + background: #ffffff; + /* border: 1px solid #999999; */ + padding: 30px; + height: 200px; + width: 60px; + margin: 5px; +} +li { + margin: 25px auto; + font-size: 18px; +} +a { + text-decoration: none; + color: #333333; +} +th { + font-weight: bold; +} +td { + padding: 7px; +} +#nav { + + float: left; + border: 1px solid #999999; + padding: 50px; +} +#inbox { + font-weight: bold; +} +#emails { + background: #ffffff; + /* border: 1px solid #999999; */ + padding:20px; + overflow: scroll; + width: 400px; + height: 600px; + font-size: 14px; + margin: 5px; +} +#message-info { + font-weight: bold; + margin: 20px auto; +} +#message { + background: #ffffff; + border: 1px solid #999999; + overflow: scroll; + padding: 10px; + margin: 5px; + width: 900px; + height: 100%; +} \ No newline at end of file diff --git a/index.html b/index.html index 1fd18708..322d3a43 100644 --- a/index.html +++ b/index.html @@ -1,86 +1,85 @@ - - GeeMail - - - - - + + - + // print info and message + rows.onclick = function() { + document.getElementById('message-info').innerHTML = `Date: ${msg.date}

      From: ${msg.sender}

      Subject: ${msg.subject}`; + document.getElementById('message-content').innerHTML = `${body}`; + } + }; + // render new message + setInterval(function() { + loadEmail(getNewMessage()); + }, 9000); + }; + + - -
      -

      GeeMail

      - -
      -
      -
      - -
      -
      - - - - - - - - - - - - - -
      SubjectSenderDate
      -
      -
      -
      -
      -
      -
      - + +
      +

      GeeMail

      + +
      +
      + + +
      + + + + + + + + + + + + + +
      SenderSubjectDate
      +
      +
      +
      +
      +
      +
      + \ No newline at end of file diff --git a/js/app.js b/js/app.js index ad9a93a7..371027b4 100644 --- a/js/app.js +++ b/js/app.js @@ -1 +1,37 @@ 'use strict'; + +window.onload = function() { + console.log(window.geemails); + let tbl = document.getElementById('tbl'); + let email = 0; + + window.geemails.forEach(function(msg) { + loadEmail(msg) + }); + + function loadEmail(msg) { + email++; + // show number of messages + document.getElementById('inbox').innerHTML = `Inbox ${email}`; + + // create row and cell for the email + let rows = tbl.insertRow(1); + let senderCell = rows.insertCell(0); + senderCell.innerHTML = msg.sender; + let subjectCell = rows.insertCell(1); + subjectCell.innerHTML = msg.subject; + let dateCell = rows.insertCell(2); + dateCell.innerHTML = msg.date; + let body = msg.body; + + // print info and message + rows.onclick = function() { + document.getElementById('message-info').innerHTML = `Date: ${msg.date}

      From: ${msg.sender}

      Subject: ${msg.subject}`; + document.getElementById('message-content').innerHTML = `${body}`; + } + }; + // render new message + setInterval(function() { + loadEmail(getNewMessage()); + }, 9000); +}; \ No newline at end of file From 1598a5658f7e431928198df4eb3fea3e7585bd1a Mon Sep 17 00:00:00 2001 From: Keith Date: Fri, 3 May 2019 15:15:36 -0700 Subject: [PATCH 6/7] toggletesting --- css/style.css | 23 ++++++++++++++++++----- index.html | 22 ++++++++++++++++++---- toggletest.html | 38 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 74 insertions(+), 9 deletions(-) create mode 100644 toggletest.html diff --git a/css/style.css b/css/style.css index 69d2432c..f49972f8 100644 --- a/css/style.css +++ b/css/style.css @@ -6,15 +6,12 @@ body { height: auto; overflow: hidden; } - header { background:#ffffff; - text-align: center; border: 1px solid #999999; display: inline-flex; padding: 5px 50px; width: 100%; - text-align: center; } h1 { font-size: 50px; @@ -47,11 +44,15 @@ a { color: #333333; } th { + font-size: 16px; font-weight: bold; } td { padding: 7px; } +b { + font-weight: bold; +} #nav { float: left; @@ -72,8 +73,9 @@ td { margin: 5px; } #message-info { - font-weight: bold; - margin: 20px auto; + /* font-weight: bold; */ + /* margin: 20px auto; */ + display: none; } #message { background: #ffffff; @@ -83,4 +85,15 @@ td { margin: 5px; width: 900px; height: 100%; +} +#user { + margin-top: 10px; + margin-right: 10px; +} +#close { + float: right; +} +#user:hover, #close:hover, a:hover, li:hover, tr:hover { + cursor: pointer; + background-color: #f1f1f1; } \ No newline at end of file diff --git a/index.html b/index.html index 322d3a43..99921252 100644 --- a/index.html +++ b/index.html @@ -33,11 +33,24 @@ dateCell.innerHTML = msg.date; let body = msg.body; - // print info and message + // print-content and message rows.onclick = function() { - document.getElementById('message-info').innerHTML = `Date: ${msg.date}

      From: ${msg.sender}

      Subject: ${msg.subject}`; - document.getElementById('message-content').innerHTML = `${body}`; + let toggle = document.getElementById('message-content').innerHTML = `Date: ${msg.date}

      From: ${msg.sender}

      Subject: ${msg.subject}

      ${body}`; + if(toggle.style.display === "none") { + toggle.style.display = "block"; + }else { + toggle.style.display = "none"; + } } + function myFunction() { + let toggle1 = document.getElementById('close'); + if(toggle1.style.display === 'block') { + toggle1.style.display = 'none'; + }else { + toggle1.style.display = 'none'; + } + } + }; // render new message setInterval(function() { @@ -49,6 +62,7 @@
      +

      GeeMail

      @@ -77,7 +91,7 @@

      GeeMail

    -
    +
    diff --git a/toggletest.html b/toggletest.html new file mode 100644 index 00000000..f05248b3 --- /dev/null +++ b/toggletest.html @@ -0,0 +1,38 @@ + + + + Toogle in javascript + + + + + +
    +

    Hide and show toggle content

    +
    + + + + \ No newline at end of file From 5a78cef43dcf42f338cca1cf4ce46b4f430c4bd1 Mon Sep 17 00:00:00 2001 From: Keith Date: Sat, 4 May 2019 15:48:53 -0700 Subject: [PATCH 7/7] toggle messages --- css/style.css | 11 ++++++++--- index.html | 39 +++++++++++++++++++-------------------- js/app.js | 21 +++++++++++++++------ toggletest.html | 38 -------------------------------------- 4 files changed, 42 insertions(+), 67 deletions(-) delete mode 100644 toggletest.html diff --git a/css/style.css b/css/style.css index f49972f8..c20432f4 100644 --- a/css/style.css +++ b/css/style.css @@ -53,6 +53,9 @@ td { b { font-weight: bold; } +img { + margin: auto 10px; +} #nav { float: left; @@ -87,13 +90,15 @@ b { height: 100%; } #user { - margin-top: 10px; margin-right: 10px; } #close { float: right; } -#user:hover, #close:hover, a:hover, li:hover, tr:hover { +img, #close:hover, a:hover, li:hover { + cursor: pointer; +} +tbody tr:hover { cursor: pointer; - background-color: #f1f1f1; + border: 2px ridge #666666; } \ No newline at end of file diff --git a/index.html b/index.html index 99921252..8b2d6e36 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,8 @@ }); function loadEmail(msg) { - email++; // show number of messages + email++; document.getElementById('inbox').innerHTML = `Inbox ${email}`; // create row and cell for the email @@ -35,36 +35,36 @@ // print-content and message rows.onclick = function() { - let toggle = document.getElementById('message-content').innerHTML = `Date: ${msg.date}

    From: ${msg.sender}

    Subject: ${msg.subject}

    ${body}`; - if(toggle.style.display === "none") { - toggle.style.display = "block"; - }else { - toggle.style.display = "none"; - } + document.getElementById('message-content').innerHTML = `Date: ${msg.date}

    From: ${msg.sender}

    Subject: ${msg.subject}

    ${body}`; } - function myFunction() { - let toggle1 = document.getElementById('close'); - if(toggle1.style.display === 'block') { - toggle1.style.display = 'none'; - }else { - toggle1.style.display = 'none'; + + // hide/show messages + let hideStuff = document.querySelector('#message-content'); + rows.addEventListener('click', function() { + if(hideStuff.style.display == 'block'){ + hideStuff.style.display = 'none' + }else{ + hideStuff.style.display = 'block' } - } - + } + ); }; - // render new message + + // render random new message setInterval(function() { loadEmail(getNewMessage()); - }, 9000); + }, 10000); };
    -

    GeeMail

    - + + +
    +
      @@ -91,7 +91,6 @@

      GeeMail

    -
    diff --git a/js/app.js b/js/app.js index 371027b4..3ad55b3d 100644 --- a/js/app.js +++ b/js/app.js @@ -10,8 +10,8 @@ window.onload = function() { }); function loadEmail(msg) { - email++; // show number of messages + email++; document.getElementById('inbox').innerHTML = `Inbox ${email}`; // create row and cell for the email @@ -24,14 +24,23 @@ window.onload = function() { dateCell.innerHTML = msg.date; let body = msg.body; - // print info and message + // print-content and message rows.onclick = function() { - document.getElementById('message-info').innerHTML = `Date: ${msg.date}

    From: ${msg.sender}

    Subject: ${msg.subject}`; - document.getElementById('message-content').innerHTML = `${body}`; + document.getElementById('message-content').innerHTML = `Date: ${msg.date}

    From: ${msg.sender}

    Subject: ${msg.subject}

    ${body}`; } + // hide/show messages + let hideStuff = document.querySelector('#message-content'); + rows.addEventListener('click', function() { + if(hideStuff.style.display == 'block'){ + hideStuff.style.display = 'none' + }else{ + hideStuff.style.display = 'block' + } + } + ); }; - // render new message + // render new random message setInterval(function() { loadEmail(getNewMessage()); - }, 9000); + }, 10000); }; \ No newline at end of file diff --git a/toggletest.html b/toggletest.html deleted file mode 100644 index f05248b3..00000000 --- a/toggletest.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - Toogle in javascript - - - - - -
    -

    Hide and show toggle content

    -
    - - - - \ No newline at end of file