devleague · frzrbox · Apr 26, 2019 · Apr 26, 2019 · Apr 26, 2019 · Apr 26, 2019
diff --git a/README.md b/README.md
@@ -1,50 +1,8 @@
-# GeeMail 
+# This is my Gee Mail clone
 
-GeeMail is a coding exercise meant to simulate an e-mail web application inbox.
+## The branch that is working currently is iss53
 
-## Description
-
-With this coding challenge you will be creating a simulation of a little known current e-mail web application you may or may not have heard of.
-
-We have created a basic mail generator script for you that will load a handful of pre-populated messages when your application loads and you will be requried to consume that data and build out UI elements to display that data along with populating new messages and some other basic functionality.
-
-## Pre-Requisites
-You will need the following tools to complete this challenge
-
-* A personal GitHub account
-* [Sublime Text 3 ](http://www.sublimetext.com/3)
-* [Git](https://help.github.com/articles/set-up-git#platform-all)
-
-## Objectives
-
-1. Fork this repository to your own GitHub profile and clone to your local machine.
- * [How to Fork A Repository](https://help.github.com/articles/fork-a-repo/)
-
-2. Create a basic page layout via HTML/CSS with a top header section with the name of the application and a content section where you will display the messages.
-
-3. When your page loads, via JavaScript access our prepopulated data stored in the `window.geemails` variable. Each object in the array has the following properties:
-	* date - The date message was sent
-	* subject - The subject of the message
-	* sender - The sender of the message
-	* body - The GeeMail message content
-
-4. With this data you must make a visual list of mail messages on the page with the following minimum requirements.
-	* Each message should have it's own row showing:
-		* Date
-		* Sender
-		* Subject
-	* When clicking on a message you must provide some method of showing the message for that row.
-
-5. You must show an inbox count somewhere on the page to show the current number of messages in your inbox.
-
-6. Set a recurring function to via the JavaScript `setInterval` function that will call our existing `getNewMessage` function that we have created for you that will return a newly created message with the same properties as your previous messages.
-
-6. All CSS styles should be created in the `css\style.css` file included in the project. 
-
-7. All JavaScript should be created in the `<head>` element in your included `index.html` file inside of the window.onload function already created in the `<head>` section.
-
-8. Commit your code often and when you are completed send us a pull request from your repository so that we may review your code.
-
-Bonus: You may add any images or any extra functionality that you wish to your application and use any other JavaScript frameworks if you like.
-
-## Most Importanly....Have Fun!
+Need to refactor
+- There is a lot of repeated code for creating the message element for each geemail
+and for creating a new message for the setInterval, make a createNewMessageElement() 
+that I can use in both
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,103 @@
+body{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    background: #f6f6f8;
+}
+
+h1{
+    margin: 0;
+}
+
+.site-heading{
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 10vh;
+    background: #f6f6f8;
+    width: 100%;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.site-heading.scrolling{
+    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
+    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
+    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
+}
+
+.inbox{
+    margin-left: 5%;
+}
+
+.name{
+    margin-right: 5%;
+}
+
+#message-grid{
+    margin-top: 15vh;
+    display: grid;
+    grid-template-rows: repeat(auto, 1fr);
+    grid-row-gap: 20px;
+}
+
+
+.message{
+    padding: 10px 15px;
+    margin: 0 auto;
+    width: 90%;
+    background: #f6f6f8;
+    transition: all .3s ease;
+    border-top: 1px solid #2C3938;
+    border-bottom: 1px solid #2C3938;
+}
+
+.message:hover{
+    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
+    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
+    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
+    border: none;
+    cursor: pointer;
+}
+
+.date{
+    margin-top: 0;
+    margin-bottom: .4rem;
+}
+
+.subject{
+    font-size: 16px;
+    margin: 0;
+}
+
+.sender{
+    font-size: 20px;
+    margin: 0;
+    font-size: 1.3rem;
+}
+
+.body-copy{
+    font-size: 14px;
+    display: none;
+    opacity: 0;
+    transition: all .3s ease-in-out;
+}
+
+.body-copy.active{
+    opacity: 1;
+    display: block;
+}
+
+.message button{
+    background: none;
+    border: none;
+    font-size: 1rem;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+
diff --git a/index.html b/index.html
@@ -2,17 +2,31 @@
 	<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>
+		<script src="js/message.js"></script>
+    	<script>
+			window.onload = () => {
+				// Show available messages in inbox
+				populateData()
+			}
+		</script>
+	</head> 
 	<body>
-		<div class="container" id="main">
-			Build Me!
+		<div class="container" id="main"> 
+			<div class="site-heading">
+				<div class="name">
+					<h1>David Efhan</h1>
+				</div>
+
+				<div class="inbox"><h1>You have</h1> <span class="message-number"></span> unread messages</div>
+			</div>
+
+			<div id="message-grid">
+			</div>
 		</div>
+
+		<script>
+			newIntervalMessage();
+			inboxStarting()
+		</script>
 	</body>
-</html>
+</html> 
diff --git a/js/message.js b/js/message.js
@@ -0,0 +1,79 @@
+// Find find indexOf window.geemail
+const geeMails = window.geemails;
+
+//! CREATE THE MESSAGE ELEMENT
+const createNewMessage = (event) => {
+
+    const messageGrid = document.querySelector('#message-grid');
+    const message = document.createElement('DIV');
+    message.classList.add('message');
+    //Create the children of message;
+    const date = document.createElement('DIV');
+    const subject = document.createElement('DIV');
+    const sender = document.createElement('DIV');
+    const bodyCopy = document.createElement('P');
+
+    date.classList.add('date');
+    subject.classList.add('subject');
+    sender.classList.add('sender');
+    bodyCopy.classList.add('body-copy');
+
+    date.innerHTML = event.date;
+    subject.innerHTML = event.subject;
+    sender.innerHTML = event.sender;
+    bodyCopy.innerHTML = event.body; 
+
+    messageGrid.appendChild(message);
+    message.appendChild(date);
+    message.appendChild(subject);
+    message.appendChild(sender);
+    message.appendChild(bodyCopy);
+
+    message.addEventListener('click', () => {
+        bodyCopy.classList.toggle('active');
+    })
+
+}
+
+
+//! POPULATE THE DATA INTO THE MESSAGES
+populateData = () => {
+    //For each geeMail find the index and create a message for each
+    geeMails.forEach(mail => {
+        createNewMessage(mail);
+    })
+}
+
+const newIntervalMessage = () => {
+    // Use the setInterval method to create a new message every 10 seconds     
+    setInterval(() => {
+        inboxIncrease()
+        createNewMessage(getNewMessage());
+    }, 5000);
+}
+
+
+// As we scroll the page give the header a shadow
+const headerShadow = () => {
+    window.addEventListener('scroll', () => {
+        const header = document.querySelector('.site-heading');
+        header.classList.add('scrolling');
+    })
+}
+
+//! INBOX
+let startingValue = geeMails.length;
+
+const inboxStarting = () => {
+    const inboxNumber = document.querySelector('.message-number');
+    inboxNumber.innerHTML = startingValue;
+}
+
+const inboxIncrease = () => {
+    const inboxNumber = document.querySelector('.message-number');
+    inboxNumber.innerHTML = startingValue++;
+}
+
+
+headerShadow();
+