From 36a01008fa36e2470276af2cdcf76b001f2f6920 Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 16:03:42 -0700
Subject: [PATCH 01/13] Created Section, Box & Dropdown in HTML, DropdownReveal
 for HTML attribute of Lambda, Google & MDN & Script tag to reference main.js

---
 index.html | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 39167c5..977c79e 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,37 @@
 <!DOCTYPE html>
-<hml>
+<html>
 	<head>
-		<title>Introduction to the DOM</title>
+		<title>Components-BEM</title>
 		<link rel="stylesheet" href="./styles.css">
 	</head>
 	<body>
+		<div class="Section">
+			<div class="Section__header">
+				<div class="Dropdown">
+					<p>Dropdown</p>
+				</div>
+				<div class="DropdownReveal">
+					<a href="#">Lambda</a>
+					<a href="#">Google</a>
+					<a href="#">MDN</a>
+				</div>
+				<h1>Header</h1>
+			</div>
+			<div class="Boxes">
+				<div class="Box">
+					<h2>Placeholder</h2>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.</p>
+				</div>
+				<div class="Box">
+					<h2>Placeholder</h2>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.</p>
+				</div>
+			</div>
+		</div>
+		<script type="text/javascript" src="main.js"/>
 	</body>
-</hml>
\ No newline at end of file
+</html>
+
+<!-- Created Section, Box & Dropdown -->
+<!-- DropdownReveal will display HTML Attribute of Lambda, Google & MDN -->
+<!-- Added script tag to reference main.js for class constructors & Dropdown component functionality -->

From 1115b2bb47f1d3e11f006690bb16651aace1ed19 Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 16:04:42 -0700
Subject: [PATCH 02/13] Create box enclosing all content

---
 styles.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/styles.css b/styles.css
index 997c895..1e96af0 100644
--- a/styles.css
+++ b/styles.css
@@ -6,3 +6,12 @@ body {
 	min-width: 300px;
 	margin: 0;
 }
+
+/* Create box enclosing all content */
+.Section {
+	width: 100%;
+	border: 2px solid black;
+	display: flex;
+	flex-direction: column;
+}
+

From 7e33d24ec7c77521ddbf9e577efc1091cd3674fd Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 16:06:39 -0700
Subject: [PATCH 03/13] Create border & style surrounding Dropdown button

---
 styles.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/styles.css b/styles.css
index 1e96af0..cb12f2f 100644
--- a/styles.css
+++ b/styles.css
@@ -15,3 +15,17 @@ body {
 	flex-direction: column;
 }
 
+ /* Aligned Header to center */
+ .Section__header h1 {
+	text-align: center;
+}
+
+/* Create border & style surrounding Dropdown button */
+.Dropdown {
+	position: absolute;
+	border: 2px solid black;
+	padding: 0 15px;
+	left: 15px;
+	top: 15px;
+}
+

From 9f46481215f27c22e7be891882203066fc381c01 Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 16:09:09 -0700
Subject: [PATCH 04/13] Hide HTML attributes of Lambda, Google & MDN

---
 styles.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/styles.css b/styles.css
index cb12f2f..bd75f11 100644
--- a/styles.css
+++ b/styles.css
@@ -29,3 +29,15 @@ body {
 	top: 15px;
 }
 
+/* Hide HTML attributes of Lambda, Google, MDN */
+.DropdownReveal {
+	position: absolute;
+	border: 2px solid black;
+	background-color: white;
+	display: none;
+	flex-direction: column;
+	left: 10px;
+	top: 75px;
+}
+
+

From 7b0953f3e6c2ef021b563631f7c996ef24944958 Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 16:09:33 -0700
Subject: [PATCH 05/13] Format HTML attributes padding & width

---
 styles.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/styles.css b/styles.css
index bd75f11..c42a50f 100644
--- a/styles.css
+++ b/styles.css
@@ -40,4 +40,10 @@ body {
 	top: 75px;
 }
 
+/* Format HTML attributes padding & width */
+.DropdownReveal a {
+	padding: 5x;
+	width: 78px;
+}
+
 

From a644a23e4a83df4607f0a040fddb0bdbc26dd12d Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 16:10:02 -0700
Subject: [PATCH 06/13] Upon click of button from index.js DropdownReveal will
 be displayed

---
 styles.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/styles.css b/styles.css
index c42a50f..466a08f 100644
--- a/styles.css
+++ b/styles.css
@@ -46,4 +46,9 @@ body {
 	width: 78px;
 }
 
+/* Upon click of button from index.js DropdownReveal will be displayed */
+.display {
+	display: flex;
+}
+
 

From a2f4622e1ef2307df893d24d836d563e00d40a12 Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 16:14:00 -0700
Subject: [PATCH 07/13] Assigned direction to Box within Boxes

---
 styles.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/styles.css b/styles.css
index 466a08f..57163e3 100644
--- a/styles.css
+++ b/styles.css
@@ -51,4 +51,10 @@ body {
 	display: flex;
 }
 
+/* Assigned direction Box within Boxes */
+.Boxes {
+	display: flex;
+	flex-direction: row;
+}
+
 

From 182a38bb9e65d316e2cf1ec89fab25725b2e8ca7 Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 16:14:56 -0700
Subject: [PATCH 08/13] Border for box with Placeholder & Stylized with width &
 padding

---
 styles.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/styles.css b/styles.css
index 57163e3..8f68f84 100644
--- a/styles.css
+++ b/styles.css
@@ -57,4 +57,11 @@ body {
 	flex-direction: row;
 }
 
+/* Border for Box with Placeholder & Style with width & padding */
+.Box {
+	width: 50%;
+	border: 2px solid black;
+	padding: 0 20px;
+}
+
 

From 34f513f9a0e5af94f96e096f3edba2dee52ba5c9 Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 16:15:19 -0700
Subject: [PATCH 09/13] Create Media Query for Mobile Device

---
 styles.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/styles.css b/styles.css
index 8f68f84..7d2569a 100644
--- a/styles.css
+++ b/styles.css
@@ -64,4 +64,13 @@ body {
 	padding: 0 20px;
 }
 
+/* Create Media Query for Mobile device */
+@media (max-width: 500px) {
+	.Boxes {
+		flex-direction: column;
+	}
 
+	.Box {
+		width: 100%;
+	}
+}

From 5028b6c6b97143468ef9c754fe9572eb9ef11f18 Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 16:35:32 -0700
Subject: [PATCH 10/13] Added main.js

---
 main.js    | 0
 styles.css | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 main.js

diff --git a/main.js b/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/styles.css b/styles.css
index 7d2569a..b78c3ba 100644
--- a/styles.css
+++ b/styles.css
@@ -71,6 +71,6 @@ body {
 	}
 
 	.Box {
-		width: 100%;
+		width: auto;
 	}
 }

From f117a2d81bf405f6a48656760af16ec714b97879 Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 16:55:51 -0700
Subject: [PATCH 11/13] Added DOMString for Click & DropdownReveal

---
 main.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/main.js b/main.js
index e69de29..a46a356 100644
--- a/main.js
+++ b/main.js
@@ -0,0 +1,4 @@
+// Added DOMString for Click & DropdownReveal //
+const dropdown = document.querySelector('.Dropdown');
+const reveal = document.querySelector('.DropdownReveal');
+

From 48750784e7beebc55050bbf952a730094e142b27 Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 22:13:18 -0700
Subject: [PATCH 12/13] Created Components for Dropdown

---
 main.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/main.js b/main.js
index a46a356..f5287aa 100644
--- a/main.js
+++ b/main.js
@@ -2,3 +2,14 @@
 const dropdown = document.querySelector('.Dropdown');
 const reveal = document.querySelector('.DropdownReveal');
 
+// Upon click Dropdown will display HTML Attributes //
+class Dropdown {
+    constructor(button, list) {
+        button.addEventListener('click', (event) => {
+            list.classList.toggle('display');
+        });
+    }
+}
+
+const dd = new Dropdown(dropdown, reveal);
+

From 3a201c9ec430e08c168e5acd83315e3bb0263a00 Mon Sep 17 00:00:00 2001
From: MINE <Mine@MINEs-MacBook-Pro-2.local>
Date: Wed, 28 Mar 2018 22:17:38 -0700
Subject: [PATCH 13/13] Without Components

---
 main.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/main.js b/main.js
index f5287aa..be8d061 100644
--- a/main.js
+++ b/main.js
@@ -13,3 +13,7 @@ class Dropdown {
 
 const dd = new Dropdown(dropdown, reveal);
 
+// Without Components //
+dropdown.addEventListener('click', (event) => {
+    reveal.classList.toggle('display');
+});
\ No newline at end of file
