bloominstituteoftechnology · ktan114 · Mar 28, 2018 · Mar 28, 2018 · Mar 28, 2018 · Mar 28, 2018
diff --git a/components/Box/Box.css b/components/Box/Box.css
@@ -0,0 +1,50 @@
+.Box {
+    display: flex;
+    flex-direction: row;
+    border: 2px solid black;
+}
+
+.Box__DropdownBtn {
+    display: inline-block;
+    font-size: 17px;
+    height: 55px;
+    margin: 20px 0 0 21px;
+    border: 2px solid black;
+}
+
+.Box__DropdownContent {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    margin: 80px 0 0 20px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    border: 2px black solid;
+}
+
+.Box__Links {
+    display: block;
+    background: hidden;
+    text-align: left;
+    color: black;
+    padding: 12px 20px 12px;
+}
+
+.Box__Links:visited {
+    color: purple;
+}
+
+.Box__Links:hover {
+    color: blue;
+}
+
+.Box__Header {
+    margin-left: 532px;
+    font-size: 37px;
+}
+
+/* Show the dropdown menu */
+.show {
+    display: block;
+}
+
diff --git a/components/Section/Section.css b/components/Section/Section.css
@@ -0,0 +1,11 @@
+.Box__Section {
+    border: 2px solid black;
+}
+
+.Section__h2 {
+    margin: 12px 10px 0 15px;
+}
+
+.Section__p {
+    margin-left: 15px;
+}
diff --git a/index.html b/index.html
@@ -1,9 +1,56 @@
 <!DOCTYPE html>
-<hml>
-	<head>
-		<title>Introduction to the DOM</title>
-		<link rel="stylesheet" href="./styles.css">
-	</head>
-	<body>
-	</body>
-</hml>
+
+<html>
+<head>
+	<title>Introduction to the DOM</title>
+	<link rel="stylesheet" href="./styles.css">
+	<script type="text/javascript" src="index.js" async></script>
+</head>
+
+<body>
+
+	<!-- Header Block -->
+
+	<div class="Box"> 
+		<button class="Box__DropdownBtn">Dropdown</button>
+		<div class="Box__DropdownContent">
+			<a href="#" class="Box__Links">Lambda</a>
+			<a href="#" class="Box__Links">Google</a>
+			<a href="#" class="Box__Links">MDN</a>
+		</div>
+		<h1 class="Box__Header">Header</h1>
+	</div>
+
+	<!-- Content Block -->
+
+	<div class="Box"> 
+		<div class="Box__Section">
+			<h2 class="Section__h2">Placeholder</h2>
+			<p class="Section__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__Section">
+			<h2 class="Section__h2">Placeholder</h2>
+			<p class="Section__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>
+
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,25 @@
+// Variables
+let dropDown = document.querySelector('.Box__DropdownContent');
+let dropButton = document.querySelector('.Box__DropdownBtn');
+let childDropdown = dropDown.children; // stores a tags
+
+// Dropdown constructor
+	// classList: This property is useful to add, remove and toggle CSS classes on an element.
+		// toggle: Toggles between a class name for an element.
+	// Toggles the links from display: block to none
+class Dropdown {
+	constructor(el) {
+		this.element = el;
+	}
+	showContent() {
+		dropDown.classList.toggle("show"); 
+	}
+}
+
+// Makes new Dropdown, with the method showContent();
+childDropdown = Array.from(childDropdown).map(element => {
+	return new Dropdown(element);
+})
+
+// Target = dropButton, event = 'click', listener = 'showContent()'
+dropButton.addEventListener('click', childDropdown[0].showContent);
diff --git a/markups/Desktop-activeDropdown.png b/markups/Desktop-activeDropdown.png
diff --git a/styles.css b/styles.css
@@ -6,3 +6,5 @@ body {
 	min-width: 300px;
 	margin: 0;
 }
+
+