Lewis Nozaki - GeeMail Coding Challenge

css/style.css

@@ -0,0 +1,154 @@
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  max-width: 800px;
+  margin: 30px auto;
+}
+
+.header {
+  margin-top: -30px;
+  background-color: #d44638;
+  color: white;
+  padding: 20px 20px 20px 40px;
+  font-size: 20px;
+}
+
+#logo {
+  text-shadow: 20px 20px 20px #701616;
+}
+
+#log-out {
+  margin-top: -70px;
+  margin-right: 10px;
+  float: right;
+  font-size: 10px;
+  border: 2px solid white;
+  padding: 10;
+  border-radius: 50px;
+  background-color: white;
+  color: #9c342b;
+  /* box-shadow: 2px 2px #c6c6c6; */
+}
+
+#log-out:hover {
+  transition: 0.3s;
+  background-color: #e49e9e;
+  color: white;
+}
+
+#search {
+  float: right;
+  width: 80%;
+  background-color: rgb(247, 243, 243);
+  background-image: url("/assets/search.png");
+  background-position: 7px;
+  background-size: 5%; 
+  background-repeat: no-repeat;
+  padding-left: 50px;
+  height: 40px;
+  border-right: 1px solid #c6c6c6;
+  border-radius: 10px;
+}
+
+body {
+  font-family: "roboto", sans-serif;
+  background-color: #eeeeee;
+}
+
+.menu {
+  height: 480px;
+  float: left;
+  width: 20%;
+  background-color: #fff;
+  overflow-x: auto;
+  padding-top: 0px;
+  border-right: 1px solid #c6c6c6;
+}
+
+.menu a {
+  padding: 20px 8px 20px 30px;
+  text-decoration: none;
+  font-size: 15px;
+  color: #818181;
+  display: block;
+}
+
+.menu a:hover {
+  background-color: #e49e9e;
+  color: #ffffff;
+  border-top-right-radius: 50px;
+  border-bottom-right-radius: 50px;
+  transition: 0.3s;
+}
+
+#emails {
+  float: right;
+  width: 80%;
+  height: 440px;
+  overflow: auto;
+  background-color: #fff;
+  padding-top: 0px;
+  border-left: 1px solid #c6c6c6;
+}
+
+#compose:hover {
+  background-color: cornflowerblue;
+}
+
+#plus {
+  color: turquoise;
+  font-size: 20px;
+}
+
+.clear {
+  clear: both;
+}
+
+.subject {
+  font-size: 13px;
+  list-style-type: none;
+  padding: 17px 10px 10px 50px;
+  border-bottom: 1px dotted #818181;
+  background-image: url("/assets/plus.png");
+  background-position: 10px;
+  background-size: 6%; 
+  background-repeat: no-repeat;
+}
+
+.subject:hover{
+  /* background: #929292;
+  color: white; */
+  /* padding: 15px 15px 15px 50px; */
+  font-size: 15px;
+  transition: 0.3s;
+}
+
+.message, .sender, .date {
+  /* border-top: 1px solid #9c9c9c; */
+  padding: 17px 10px 10px 50px;
+  font-size: 13px;
+  /* display: none; */
+}
+
+#first-email {
+  display: none;
+}
+/*side bar CSS*/
+/* width */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px grey; 
+  border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(165, 165, 165); 
+  border-radius: 10px;
+}

index.html

@@ -4,15 +4,172 @@
 		<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
+    // 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
+
+	  // My Code //
+
+	  let inboxBody = document.querySelector("#emails");
+
+	  function generateEmails(n, m) {
+		  for(i=0; i<n; i++) {
+			  // Set UI Elements
+			  let emailContainer = document.createElement('div');
+			  let UIdate = document.createElement("div");
+			  let UIsubject = document.createElement("div");
+			  let UIsender = document.createElement("div");
+			  let UIbody = document.createElement("div");
+			  emailContainer.className = "content";
 
-      };
-    </script>
+			  UIsubject.className = "subject";	
+			  UIsubject.textContent = m[i].subject;
+			  emailContainer.appendChild(UIsubject);
+			  UIsubject.style.display = "block";
+
+			  UIdate.className = "date";
+			  UIdate.textContent = `Date: ${m[i].date}`;
+			  UIsubject.appendChild(UIdate);
+			  UIdate.style.display = "none";
+
+			  UIsender.className = "sender";
+			  UIsender.textContent = `From: ${m[i].sender}`;
+			  UIsubject.appendChild(UIsender);
+			  UIsender.style.display = "none";
+
+			  UIbody.className = "message";
+			  UIbody.textContent = m[i].body;
+			  UIsubject.appendChild(UIbody);
+			  UIbody.style.display = "none";
+
+			  // Append to Inbox Body
+        let first = document.getElementById("emails");
+				let second = document.getElementById("first-email");
+				//first.insertBefore(emailContainer, second);
+				first.prepend(emailContainer)
+		}
+	}		
+
+  generateEmails(geemails.length, geemails);
+
+  let num = 11;
+	let inboxCount = document.querySelector("#count");
+  let classDiv = document.getElementsByClassName("subject");
+  for (i = 0; i<classDiv.length; i++){
+    classDiv[i].addEventListener("click", showMsg);
+  }
+
+  function showMsg() {
+    let showDate = this.querySelectorAll(".date")[0];
+    let showSender = this.querySelectorAll(".sender")[0];
+    let showMessage = this.querySelectorAll(".message")[0];
+    if (showDate.style.display === "none"){
+      showDate.style.display = "block";
+      showSender.style.display = "block";
+      showMessage.style.display = "block";
+    } else {
+      showDate.style.display = "none";
+      showSender.style.display = "none";
+      showMessage.style.display = "none";
+    }
+  }
+
+	setInterval(function(){
+	inboxCount.textContent = num++;
+
+	let array = [];
+	let newMsg = getNewMessage();
+	array.push(newMsg);
+	generateEmails(1, array);
+
+  let classDiv2 = document.getElementsByClassName("subject");
+  for (i = 1; i<=1; i++){
+    classDiv2[0].style.fontWeight = "bold";
+    classDiv2[0].addEventListener("click", function (){
+    let showDate2 = this.querySelectorAll(".date")[0];
+    let showSender2 = this.querySelectorAll(".sender")[0];
+    let showMessage2 = this.querySelectorAll(".message")[0];
+    if (showDate2.style.display === "none"){
+      showDate2.style.display = "block";
+    	showSender2.style.display = "block";
+      showMessage2.style.display = "block";
+			this.style.fontWeight = "normal";
+    } else {
+      showDate2.style.display = "none";
+      showSender2.style.display = "none";
+      showMessage2.style.display = "none";
+    }
+    })
+  }
+	}, 7000);
+
+		// Search Bar
+		let nav = document.querySelector("#search");
+		nav.addEventListener('keyup', filterEmails);
+		function filterEmails(e){
+			const text = e.target.value.toLowerCase();
+
+			document.querySelectorAll(".subject").forEach(function(email){
+				const sub = email.firstChild.textContent;
+				if (sub.toLowerCase().indexOf(text) !== -1){
+					email.style.display = "block";
+				} else {
+					email.style.display = "none";
+				}
+			})			
+		}
+	};
+
+		</script>
+		<link rel="stylesheet" href="css/style.css">
+		<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 	</head>
 	<body>
-		<div class="container" id="main">
-			Build Me!
+	<div class="container">
+
+		<!--Header-->
+		<div class="header">
+			<h1 id="logo">
+					GeeMail
+				</h1>
+			<span id="log-out">Log Out</span>
 		</div>
+
+		<!--Search Bar-->
+		<div class="searchBar">
+			<input type="text" id="search" placeholder="Search..">
+		</div>
+
+		<!--Side Navigation-->
+		<div class="menu">
+			<a href="#" id="compose"><span id="plus">+</span> Compose</a>
+			<a href="." id="inbox">Inbox (<span id="count">10</span>)</a>
+			<a href="#">Sent</a>
+			<a href="https://www.spam.com/">Spam</a>
+			<a href="#">Deleted</a>
+			<a href="#">Starred</a>
+			<a href="#">Categories</a>
+			<a href="#">Draft</a>
+		</div>
+
+		<!--Inbox of Messages-->
+		<div id="emails">
+			<!-- <div class="content"> -->
+			<li id="first-email">Open this email, Young sir. 
+					<p class="sender">Abraham Lincoln</p>
+					<p class="date">October 31, 2019</p>
+					<p class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet beatae veniam consequuntur deserunt suscipit nisi quidem explicabo voluptates? Consectetur reiciendis fugit aspernatur, itaque ad facilis quae exercitationem. Obcaecati accusantium quia saepe nesciunt qui! Tempora numquam pariatur id voluptate tenetur praesentium! Ratione dolorum quae reiciendis sint alias voluptates maiores voluptatem ipsum.</p>	
+			</li>
+			<!-- </div> -->
+		</div>
+
+		<!--Clear Float-->
+		<div class="clear"></div>
+
+		<!--Footer-->
+		<div class="footer">
+			<p>Copyright &copy; DevLeague 2019</p>
+		</div>
+
+	</div>
 	</body>
 </html>

js/mail-generator.js

@@ -3,9 +3,38 @@
 
 
   //Gee Mail message stub data 
-  var subject = ['Call Your Mother', 'Cheap Online Meds', 'Change Your Life Today', 'Sppoky Stories', 'Meet Singles In Your Area', 'Have You Heard?', 'Yo', 'RE: Looking for a three legged cat', 'Get Rich Quick!', 'FW: Token Chain Email'];
-  var sender = ['Mary Monster', 'Dave Danger', 'Spam Master', 'Spike Spurner', 'Ray Ranger', 'Catherine Chaos', 'Van Pire', 'Andy Argye', 'Rick Roger', 'Sue Mee'];
-  var body = ['I am never gonna see a merman, ever. You haven\'t seen my drawer of inappropriate starches?','I\'ll kill a man in a fair fight. Or if I think he\'s gonna start a fair fight. Or if he bothers me. Or if there\'s a woman. Or if I\'m getting paid. Mostly when I\'m getting paid. I thought all children despise effort and enjoy cartoons. Don\'t be ridiculous. Martha Stewart isn\'t a demon. She\'s a witch. Someone else\'s loss is my chocolatey goodness. I don\'t want to use the word genius, but I\'d be ok if you wanted to. What did I say to you about barging into my shuttle? Now you can luxuriate in a nice jail cell, but if your hand touches metal, I swear by my pretty floral bonnet: I will end you. Oh Spike, devour me! You\'re gonna die screaming but you won\'t be heard. Eyeballs to entrails, my sweet.','We need to save Buffy from Hansel and Gretel. Well, you were busy trying to get yourself lit on fire. The only thing Willow was ever good for, the only thing I ever had going for me were those moments, just moments, where Tara would look at me and I was wonderful. Everyone\'s a hero in their own way, in their own not that heroic way. Planet\'s coming up a mite fast.','Better to cut you down to size, grandma. I\'m the one who brings about the thought-pocalypse. Yeah, it was sexy the way she touched me real hard with her fists. I dislike that Anya. She\'s newly human and strangely literal.','Yeah, well, I\'m not the one who wanted Wind Beneath My Wings for the first dance. She\'s a truck-driving magic mama! And I\'m a huge fan of the way you lose control and turn into an enormous green rage monster. We\'re outlaws with hearts of gold. Or even worse, a sneezure.','Oh my god! Did it sing? Turns out I suddenly find myself needing to know the plural of apocalypse. It\'s about women. It was like the Heimlich, with stripes! First of all, Feng Shui up the yin yang, also I designed parts of it but I did not design the stone cold foxes in the small clothes and the ample massage facilities. That girl will rain destruction down on you and your ship. Sweetie, if he had a tussle with that Sasquatch, we\'d be in the dirt right about now, scooping up the Captain\'s teeth. You can\'t spend the rest of your life waiting for Xander to wake up and smell the hottie. Either blow us all up or rub soup in our hair. It\'s a toss-up. I think calling him that is an insult to the psychotic lowlife community.','Xander, that\'s not the North Star, it\'s an airplane. You can\'t open the book of my life and jump in the middle. What do they need such good eyesight for anyway? Well we could grind our enemies into talcum powder with a sledgehammer but, gosh, we did that last night. The gentlemen are coming by. You can\'t take the sky from me. Okay, at this point you\'re abusing sarcasm. Well, I haven\'t been to a hell dimension just of late, but I do know a thing or two about torment.','And now the one person who should be here is gone, and a waste like you gets to live. The human mind is like Van Halen; if you just pull out one piece and keep replacing it, it just degenerates. Turns out I suddenly find myself needing to know the plural of apocalypse. It\'s a real burn, being right so often. Who\'s calling me? Everybody I know lives here.','Looking in windows, knocking on doors. Well, look at me. I\'m all fuzzy. And what\'s with all the carrots? That girl will rain destruction down on you and your ship. If I could make you purtier, I would. I wanna hurt you, but I can\'t resist the sinister attraction of your cold and muscular body! Seems odd you\'d name your ship after a battle you were on the wrong side of.','I\'m a comfortador also. You\'re a hell of a woman. Passion rules us all. You\'re gonna die screaming but you won\'t be heard. How did your brain even learn human speech? I\'m just so curious. Occasionally, I\'m callous and strange.'];
+  var subject = ['Call Your Mother', 
+  'Cheap Online Meds', 
+  'Change Your Life Today', 
+  'Spooky Stories', 
+  'Meet Singles In Your Area', 
+  'Have You Heard?', 
+  'Yo', 
+  'RE: Looking for a three legged cat', 
+  'Get Rich Quick!', 
+  'FW: Token Chain Email'];
+
+  var sender = ['Mary Monster', 
+  'Dave Danger', 
+  'Spam Master', 
+  'Spike Spurner', 
+  'Ray Ranger', 
+  'Catherine Chaos', 
+  'Van Pire', 
+  'Andy Argye', 
+  'Rick Roger', 
+  'Sue Mee'];
+
+  var body = ['I am never gonna see a merman, ever. You haven\'t seen my drawer of inappropriate starches?',
+  'I\'ll kill a man in a fair fight. Or if I think he\'s gonna start a fair fight. Or if he bothers me. Or if there\'s a woman. Or if I\'m getting paid. Mostly when I\'m getting paid. I thought all children despise effort and enjoy cartoons. Don\'t be ridiculous. Martha Stewart isn\'t a demon. She\'s a witch. Someone else\'s loss is my chocolatey goodness. I don\'t want to use the word genius, but I\'d be ok if you wanted to. What did I say to you about barging into my shuttle? Now you can luxuriate in a nice jail cell, but if your hand touches metal, I swear by my pretty floral bonnet: I will end you. Oh Spike, devour me! You\'re gonna die screaming but you won\'t be heard. Eyeballs to entrails, my sweet.',
+  'We need to save Buffy from Hansel and Gretel. Well, you were busy trying to get yourself lit on fire. The only thing Willow was ever good for, the only thing I ever had going for me were those moments, just moments, where Tara would look at me and I was wonderful. Everyone\'s a hero in their own way, in their own not that heroic way. Planet\'s coming up a mite fast.',
+  'Better to cut you down to size, grandma. I\'m the one who brings about the thought-pocalypse. Yeah, it was sexy the way she touched me real hard with her fists. I dislike that Anya. She\'s newly human and strangely literal.',
+  'Yeah, well, I\'m not the one who wanted Wind Beneath My Wings for the first dance. She\'s a truck-driving magic mama! And I\'m a huge fan of the way you lose control and turn into an enormous green rage monster. We\'re outlaws with hearts of gold. Or even worse, a sneezure.',
+  'Oh my god! Did it sing? Turns out I suddenly find myself needing to know the plural of apocalypse. It\'s about women. It was like the Heimlich, with stripes! First of all, Feng Shui up the yin yang, also I designed parts of it but I did not design the stone cold foxes in the small clothes and the ample massage facilities. That girl will rain destruction down on you and your ship. Sweetie, if he had a tussle with that Sasquatch, we\'d be in the dirt right about now, scooping up the Captain\'s teeth. You can\'t spend the rest of your life waiting for Xander to wake up and smell the hottie. Either blow us all up or rub soup in our hair. It\'s a toss-up. I think calling him that is an insult to the psychotic lowlife community.',
+  'Xander, that\'s not the North Star, it\'s an airplane. You can\'t open the book of my life and jump in the middle. What do they need such good eyesight for anyway? Well we could grind our enemies into talcum powder with a sledgehammer but, gosh, we did that last night. The gentlemen are coming by. You can\'t take the sky from me. Okay, at this point you\'re abusing sarcasm. Well, I haven\'t been to a hell dimension just of late, but I do know a thing or two about torment.',
+  'And now the one person who should be here is gone, and a waste like you gets to live. The human mind is like Van Halen; if you just pull out one piece and keep replacing it, it just degenerates. Turns out I suddenly find myself needing to know the plural of apocalypse. It\'s a real burn, being right so often. Who\'s calling me? Everybody I know lives here.',
+  'Looking in windows, knocking on doors. Well, look at me. I\'m all fuzzy. And what\'s with all the carrots? That girl will rain destruction down on you and your ship. If I could make you purtier, I would. I wanna hurt you, but I can\'t resist the sinister attraction of your cold and muscular body! Seems odd you\'d name your ship after a battle you were on the wrong side of.',
+  'I\'m a comfortador also. You\'re a hell of a woman. Passion rules us all. You\'re gonna die screaming but you won\'t be heard. How did your brain even learn human speech? I\'m just so curious. Occasionally, I\'m callous and strange.'];
 
 
   function loadGeeMails(){
@@ -47,3 +76,6 @@
   window.getNewMessage = getNewMessage;
   loadGeeMails();	
 })();
+
+
+