devleague · kcbangi · May 2, 2019 · May 2, 2019 · May 2, 2019 · May 2, 2019
diff --git a/css/reset.css 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;
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,104 @@
+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;
+    border: 1px solid #999999;
+    display: inline-flex;
+    padding: 5px 50px;
+    width: 100%;
+}
+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-size: 16px;
+    font-weight: bold;
+}
+td {
+    padding: 7px;
+}
+b {
+    font-weight: bold;
+}
+img {
+    margin: auto 10px;
+}
+#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; */
+    display: none;
+}
+#message {
+    background: #ffffff;
+    border: 1px solid #999999;
+    overflow: scroll;
+    padding: 10px;
+    margin: 5px;
+    width: 900px;
+    height: 100%;
+}
+#user {
+    margin-right: 10px;
+}
+#close {
+    float: right;
+}
+img, #close:hover, a:hover, li:hover {
+    cursor: pointer;
+}
+tbody tr:hover {
+    cursor: pointer;
+    border: 2px ridge #666666;
+}
diff --git a/index.html b/index.html
@@ -1,18 +1,98 @@
+<!DOCTYPE html>
 <html>
-	<head>
-		<script src="js/mail-generator.js"></script>
-		<link href="css/style.css" rel="stylesheet" media="screen">
-    <script>
-      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
-
-      };
-    </script>
-	</head>
-	<body>
-		<div class="container" id="main">
-			Build Me!
-		</div>
-	</body>
+    <head>
+        <title>GeeMail</title>
+        <link rel="stylesheet" href="css/reset.css" />
+        <link rel="stylesheet" href="css/style.css" media="screen">
+        <script src="js/mail-generator.js"></script>
+        <!-- <script src="js/app.js"></script> -->
+        <script>
+            // 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);
+                let tbl = document.getElementById('tbl');
+                let email = 0;
+
+                window.geemails.forEach(function(msg) {
+                    loadEmail(msg)
+                }); 
+
+                function loadEmail(msg) {
+                    // show number of messages
+                    email++;
+                    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-content and message
+                    rows.onclick = function() {
+                        document.getElementById('message-content').innerHTML = `<b>Date:</b> ${msg.date}<br><br><b>From:</b> ${msg.sender}<br><br><b>Subject:</b> ${msg.subject}<br><br>${body}</strong>`;  
+                    }
+
+                    // 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 random new message
+                setInterval(function() {
+                    loadEmail(getNewMessage());
+                }, 10000);
+            };
+        </script>
+    </head>
+
+    <body>
+        <header>
+            <h1>GeeMail</h1>
+            <input id="searchBar" type="text" placeholder="Search mail..">
+            <img src="https://img.icons8.com/ios/50/000000/search.png">
+            <div id="user"><img src="https://img.icons8.com/pastel-glyph/50/000000/person-male.png"></div>
+            <img src="https://img.icons8.com/ios-glyphs/50/000000/menu.png">
+        </header>
+        <main>
+            <ul>
+                <li id="inbox"><a href="#">Inbox</a></li>
+                <li><a href="#">Junk</a></li>
+                <li><a href="#">Deleted</a></li>
+                <li><a href="#">Sent</a></li>
+            </ul> 
+
+            <div id="emails">
+                <table id="tbl">
+                    <thead>
+                        <tr>
+                            <th>Sender</th>
+                            <th>Subject</th>
+                            <th>Date</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div id="message">
+                <div id="message-content"></div>
+            </div>
+        </main>
+    </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,46 @@
+'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) {
+        // show number of messages
+        email++;
+        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-content and message
+        rows.onclick = function() {
+            document.getElementById('message-content').innerHTML = `<b>Date:</b> ${msg.date}<br><br><b>From:</b> ${msg.sender}<br><br><b>Subject:</b> ${msg.subject}<br><br>${body}</strong>`;  
+        }
+        // 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 random message
+    setInterval(function() {
+        loadEmail(getNewMessage());
+    }, 10000);
+};