bloominstituteoftechnology · jeffreyflynn · Mar 28, 2018 · Mar 28, 2018 · Mar 29, 2018 · Mar 29, 2018
diff --git a/components/Box/Box.css b/components/Box/Box.css
diff --git a/components/Section/Section.css b/components/Section/Section.css
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,75 @@
+body {
+  width: 100%;
+  max-width: 1024px;
+  margin: auto;
+}
+.container {
+  border: 2px solid black;
+}
+.Box--left {
+  border-right: 1.5px solid black;
+}
+.Box--right {
+  border-left: 1.5px solid black;
+}
+.Box__title {
+  padding: 15px 25px 0;
+  margin: 0;
+}
+.Box__content {
+  padding: 15px 25px 15px;
+  margin: 0;
+}
+.Dropdown {
+  display: inline-block;
+  position: absolute;
+  margin-left: 2%;
+}
+.Dropdown__button {
+  border: 2px solid black;
+  background-color: white;
+  padding: 13px;
+  font-weight: bold;
+}
+.Dropdown__content {
+  position: absolute;
+  display: none;
+  margin-top: 10px;
+  border: 2px solid black;
+  background-color: white;
+  padding: 13px;
+}
+.Dropdown__content--active {
+  display: block;
+}
+.Dropdown__link {
+  display: none;
+  margin-bottom: 10px;
+}
+.Dropdown__link--active {
+  display: block;
+}
+.Section {
+  box-sizing: border-box;
+  border: 1px solid black;
+  display: flex;
+  width: 100%;
+  margin: 0;
+  position: relative;
+}
+.Section__header {
+  text-align: center;
+  font-weight: bold;
+}
+.Section--bordered {
+  border-top: none;
+  border: 2px solid black;
+}
+.Section--bordered:first-of-type {
+  border-top: 2.5px solid black;
+}
+@media (max-width: 400px) {
+  .Section {
+    flex-direction: column;
+  }
+}
diff --git a/index.html b/index.html
@@ -1,9 +1,42 @@
 <!DOCTYPE html>
 <hml>
 	<head>
+		<meta charset="utf-8">
 		<title>Introduction to the DOM</title>
-		<link rel="stylesheet" href="./styles.css">
+		<link rel="stylesheet" href="css/index.css">
+		<script type="text/javascript" src="./index.js" async></script>
 	</head>
 	<body>
+
+		<div class="container">
+
+			<header class="Box__header">
+				<div class="Dropdown">
+					<div class="Dropdown__button">Dropdown</div>
+					<div class="Dropdown__content">
+						<a class="Dropdown__link" href="#">Lambda</a>
+						<a class="Dropdown__link" href="#">Google</a>
+						<a class="Dropdown__link" href="#">MDN</a>
+					</div>
+				</div> <!-- end of dropdown -->
+				<h1 class="Section__header">Header</h1>
+			</header>
+
+			<div class="Section Section--bordered">
+				<div class="Box--left">
+					<h3 class="Box__title">Placeholder</h3>
+					<p class="Box__content">
+						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--right">
+					<h3 class="Box__title">Placeholder</h3>
+					<p class="Box__content">
+						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> <!-- end of class Box -->
 	</body>
 </hml>
diff --git a/index.js b/index.js
@@ -0,0 +1,32 @@
+class Dropdown {
+  constructor(element) {
+    this.element = element;
+    this.button = this.element.querySelector(".Dropdown__button");
+
+    this.button.addEventListener("click", () => {
+      this.display();
+    });
+  }
+
+  display() {
+  	document.querySelector('.Dropdown__content').classList.toggle('Dropdown__content--active');
+  	document.querySelectorAll('.Dropdown__link').forEach(function(x) {
+  		x.classList.toggle('Dropdown__link--active');
+  	});
+  }
+}
+
+let dropdowns = document.querySelectorAll(".Dropdown");
+Array.from(dropdowns).map(dropdown => new Dropdown(dropdown));
+
+
+// daily javascript challenge below -- not directly relevant 
+/*
+function commonElements(arr1, arr2) {
+  const result = [];
+  arr1.forEach(element => {if (arr2.includes(element)) result.push(element);});
+  return result;
+}
+
+console.log(commonElements([1, 2, 3, 4], [3, 4, 5, 6]));
+*/
diff --git a/less/Box.less b/less/Box.less
@@ -0,0 +1,26 @@
+body {
+	width: 100%;
+	max-width: 1024px;
+	margin: auto;
+}
+
+.container {
+	border: 2px solid black;
+}
+
+.Box {
+	&--left {
+		border-right: 1.5px solid black;
+	}
+	&--right {
+		border-left: 1.5px solid black;
+	}
+	&__title {
+		padding: 15px 25px 0;
+		margin: 0;
+	}
+	&__content {
+		padding: 15px 25px 15px;
+		margin: 0;
+	}
+}
diff --git a/less/Section.less b/less/Section.less
@@ -0,0 +1,26 @@
+.Section {
+	box-sizing: border-box;
+	border: 1px solid black;
+	display: flex;
+	width: 100%;
+	margin: 0;
+	position: relative;
+
+	&__header {
+		text-align: center;
+		font-weight: bold;
+	}
+
+	&--bordered {
+		border-top: none;
+		border: 2px solid black;
+
+		&:first-of-type {
+			border-top: 2.5px solid black;
+		}
+	}
+
+	@media @phone {
+		flex-direction: column;
+	}
+}
diff --git a/less/dropdown.less b/less/dropdown.less
@@ -0,0 +1,35 @@
+.Dropdown {
+	display: inline-block;
+	position: absolute;
+	margin-left: 2%;
+
+	&__button {
+		border: 2px solid black;
+		background-color: white;
+		padding: 13px;
+		font-weight: bold;
+	}
+
+	&__content {
+		position: absolute;
+		display: none;
+		margin-top: 10px;
+		border: 2px solid black;
+		background-color: white;
+		padding: 13px;
+
+		&--active {
+			display: block;
+		}
+	}
+
+	&__link {
+		display: none;
+		margin-bottom: 10px;
+
+		&--active {
+			display: block;
+		}
+	}
+
+}
diff --git a/less/index.less b/less/index.less
@@ -0,0 +1,5 @@
+@phone: ~'(max-width: 400px)';
+
+@import "Box";
+@import "dropdown";
+@import "Section";