Finished Coding Challenge (May 2019 Prep Class)

css/style.css

@@ -0,0 +1,83 @@
+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: 120%;
+    background-repeat: no-repeat;
+    background-attachment: fixed; */
+    font-family: Candara, Helvetica, sans-serif;
+    margin: 0;
+}
+
+.fromElem{
+    font-style: italic;
+    text-align: right;
+}
+
+.subjElem{
+    font-weight: bold;
+    text-align: right;
+}
+
+img{
+    width: 40px;
+}
+
+#mainHeader{
+    background: rgba(0, 0, 0, 0.678);
+    color: white;
+    font-size: 40px;
+    text-align: center;
+    margin: 0px 0px 15px;
+    padding: 10px;
+}
+
+.title{
+    background: transparent;
+}
+
+.dateElem{
+    font-size: 15px;
+    border: 1px solid black;
+    background: rgba(255, 255, 255, 0.849);
+    margin-left: auto;
+    margin-right: auto;
+    margin-block-end: 10px;
+    padding: 10px;
+    box-align: center;
+    text-align: left;
+    width: 650px;
+    height: auto;
+    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.582);
+    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: 8px;
+    width: 75px;
+    border-radius: 5px;
+}
+
+.dateElem:hover{
+    background: rgb(255, 255, 255);
+}
+
+#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%;
+  }
+
+

index.html

@@ -6,13 +6,164 @@
       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
-
+
+				// 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++){
+
+					list.push(window.geemails[i]);
+
+					var dateBox = createElem('div', 'dateElem', list[i].date);
+					main.appendChild(dateBox);
+
+					var senderBox = createElem('div', 'fromElem', 'From: ' + 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';
+
+					dateBox.addEventListener('click', showBody);
+				}
+
+					// CREATING NEW MESSAGES
+					function generate(){
+
+					var newMessage = getNewMessage();
+
+					// increase inbox number
+					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);
+
+					// repeated code from the original first 10 emails
+					list.push(window.geemails[randNum]);
+
+					var dateBox = createElem('div', 'dateElem', newMessage.date);
+					main.appendChild(dateBox);
+
+					var senderBox = createElem('div', 'fromElem', 'From: ' + newMessage.sender);
+					dateBox.appendChild(senderBox);
+
+					var subjBox = createElem('div', 'subjElem', newMessage.subject);
+					dateBox.appendChild(subjBox);
+
+					var bodyBox = createElem('p', 'bodyElem', newMessage.body);
+					bodyBox.style.display = 'none';
+					dateBox.appendChild(bodyBox);
+
+					dateBox.addEventListener('click', showBody);
+					}
+
+				// SHOW AND HIDE THE BODY
+				function showBody(){
+					var show = this.querySelector('.bodyElem');
+					if(show.style.display == 'block'){
+						show.style.display = 'none';
+					}else{
+						show.style.display = 'block';
+					}
+				}
+
+				// INBOX COUNTER
+				var counts = createElem('div', 'counter', 'Inbox: ' + list.length);
+				inboxCount.appendChild(counts);
+				var counter = 10;
+
+				// 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
+});
+
       };
     </script>
 	</head>
 	<body>
+
+		<div id="particles-js"></div>
+
+		<header class="title">
+			<h1 id="mainHeader">
+				<img src="https://cdn.worldvectorlogo.com/logos/gmail-icon.svg" alt="">
+				GeeMail</h1>
+			<div id="inboxCount"></div>
+		</header>
+
 		<div class="container" id="main">
-			Build Me!
+			<!-- Build Me! -->
 		</div>
+
+<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+
 	</body>
 </html>