first branch push

CSS/index.css

@@ -94,6 +94,7 @@ body {
   box-sizing: border-box;
   min-width: 300px;
   margin: 0;
+  background-color: lightgrey;
 }
 .header-container {
   width: 100%;
@@ -115,9 +116,11 @@ body {
   box-shadow: 1px 1px 5px #931d25;
   border-radius: 10px;
   overflow: hidden;
+  background-color: white;
 }
 .section .box {
   padding: 40px;
+  justify-content: space-between;
 }
 .section .box .box-title {
   font-size: 24px;

LESS/index.less

@@ -13,7 +13,8 @@
 body {
 	box-sizing: border-box;
 	min-width: 300px;
-	margin: 0;
+  margin: 0;
+  background-color: lightgrey;
 }
 
 .header-container {
@@ -39,8 +40,11 @@ body {
   box-shadow: 1px 1px 5px @lambda-red;
   border-radius: 10px;
   overflow: hidden;
+  background-color: white;
+
   .box {
     padding: 40px;
+    justify-content: space-between;
     .box-title {
       font-size: 24px;
       padding-bottom: 10px;

components/Dropdown/Dropdown.js

@@ -2,27 +2,27 @@ class Dropdown {
   constructor(element) {
 
     // Assign this.element to the dropdown element
-    this.element;
+    this.element = element;
 
     // Get the element with the ".dropdown-button" class found in the dropdown element (look at the HTML for context)
-    this.button = this.element.querySelector();
+    this.button = this.element.querySelector('.dropdown-button');
 
     // assign the reference to the ".dropdown-content" class found in the dropdown element
-    this.content;
+    this.content = this.element.querySelector('.dropdown-content');
 
     // Add a click handler to the button reference and call the toggleContent method.
     this.button.addEventListener('click', () => {
-
+      this.toggleContent();
     })
   }
 
   toggleContent() {
-
+    console.log('hi');
     // Toggle the ".dropdown-hidden" class off and on
-    this.content;
+    this.content.classList.toggle('dropdown-hidden');
   }
 }
 
 
 // Nothing to do here, just study what the code is doing and move on to the Dropdown class
-let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown));
+const dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown));

components/Tabs/Tabs.js

@@ -1,62 +1,86 @@
+/* START HERE: 
+
+- Select all classes named ".tabs-link" and assign that value to the links variable
+
+- With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList
+
+- In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter
+
+*/
 
-class TabLink {
+
+class Tabs {
   constructor(element) {
+    this.element = element
+    this.links = this.element.querySelectorAll(".tabs-links .tabs-link")
+    this.tabLinks = Array.from(this.links).map(el => new TabLink(el, this));
+    this.selected = this.tabLinks[0];
+    }
+    select(newTabLink) {
+      this.selected.deselect();
+      newTabLink.select()
+      this.selected = newTabLink;
+    }
+  }
+  class TabLink {
+    constructor(element, tabs) {
     // Assign this.element to the passed in DOM element
-    // this.element;
-
+    this.element = element;
+    this.tabs = tabs;
+    console.log(element);
+
     // Get the custom data attribute on the Link
-    // this.data;
-    
+    this.data = element.dataset.tab;
+
     // Using the custom data attribute get the associated Item element
-    // this.itemElement;
-    
+    this.itemElement = this.tabs.element.querySelector(`.tabs-item[data-tab="${this.data}"]`);
+
     // Using the Item element, create a new instance of the TabItem class
-    // this.tabItem;
-    
+    this.tabItem = new TabItem(this.itemElement);
+
     // Add a click event listener on this instance, calling the select method on click
-
+
+    element.addEventListener('click', () => this.tabs.select(this));
+    // element.addEventListener('click', () => console.log(this.tabs.select(this)));
   };
-
+  
   select() {
-    // Get all of the elements with the tabs-link class
-    // const links;
-
-    // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links
-    // Array.from(links).forEach();
-
     // Add a class named "tabs-link-selected" to this link
-    // this.element;
-
+    this.element.classList.add("tabs-link-selected");
     // Call the select method on the item associated with this link
-
+    this.tabItem.select();
+    }
+    deselect() {
+    // Get all of the elements with the tabs-link class
+
+    this.element.classList.remove('tabs-link-selected')
+    this.tabItem.deselect();
   }
-}
-
-class TabItem {
-  constructor(element) {
-    // Assign this.element to the passed in element
-    // this.element;
   }
-
-  select() {
-    // Select all ".tabs-item" elements from the DOM
-    // const items;
-
-    // Remove the class "tabs-item-selected" from each element
-
-    // Add a class named "tabs-item-selected" to this element
-    //this.element;
+
+  class TabItem {
+    constructor(element) {
+      // Assign this.element to the passed in element
+      this.element = element;
+    }
+
+    select() {
+      // Add a class named "tabs-item-selected" to this element
+      this.element.classList.add('tabs-item-selected');
+      }
+    deselect () {
+      // Select all ".tabs-item" elements from the DOM
+      // const items = document.querySelectorAll('.tabs-item');
+
+      // Remove the class "tabs-item-selected" from each element
+      // Array.from(items).forEach(item => item.classList.remove('tabs-item-selected'));
+      this.element.classList.remove('tabs-item-selected');
+    }
   }
-}
-
-/* START HERE: 
-
-- Select all classes named ".tabs-link" and assign that value to the links variable
-
-- With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList
-
-- In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter
-
-*/
-
-links = document.querySelectorAll();
+
+
+
+  const tabs = document.querySelector('.tabs');
+  new Tabs(tabs)
+  // links.forEach(link => new Tab(link));
+  // // console.log(links);

components/Tabs/Tabs.less

@@ -16,6 +16,10 @@
       font-weight: bold;
       padding-bottom: 10px;
     }
+    .tabs-item-description {
+      // transition: 0.5;
+      // writing-mode: vertical-lr;
+    }
   }
   .tabs-item-selected {
     display: block;

index.html

@@ -22,13 +22,22 @@
 
 		<div class="section">
 			<div class="box">
-				<div class="box-title">Box Title 1</div>
-				<div class="box-description">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.</div>
+				<img src="/components/images/beautiful-computer-desk-2089368.jpg" height="200px">
+
+				<!-- <div class="box-title">Box Title 1</div>
+				<div class="box-description">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.</div> -->
 			</div>
 			<div class="box">
-				<div class="box-title">Box Title 2</div>
-				<div class="box-description">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.</div>
+				<img src="/components/images/beautiful-computer-desk-2089368.jpg" height="200px">
+				<!-- <div class="box-title">Box Title 2</div>
+				<div class="box-description">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.</div> -->
 			</div>
+			<div class="box">
+					<img src="/components/images/beautiful-computer-desk-2089368.jpg" height="200px">
+
+					<!-- <div class="box-title">Box Title 1</div>
+					<div class="box-description">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.</div> -->
+				</div>
 		</div>
 
 		<div class="section">
@@ -38,6 +47,8 @@
 						<div class="tabs-link" data-tab="2">Tab 2</div>
 						<div class="tabs-link" data-tab="3">Tab 3</div>
 						<div class="tabs-link" data-tab="4">Tab 4</div>
+						<div class="tabs-link" data-tab="5">Tab 5</div>
+						<div class="tabs-link" data-tab="6">Tab 6</div>
 					</div>
 					<div class="tabs-items">
 						<div class="tabs-item tabs-item-selected" data-tab="1">
@@ -72,6 +83,22 @@
 								that this has already happened.
 							</div>
 						</div>
+						<div class="tabs-item" data-tab="5">
+							<div class="tabs-item-title">Quote 5</div>
+							<div class="tabs-item-description">
+								Curiously enough, the only thing that went through the mind of the bowl of petunias as it fell was Oh no, not again. Many
+								people have speculated that if we knew exactly why the bowl of petunias had thought that we would know a lot more about the
+								nature of the Universe than we do now.
+							</div>
+						</div>
+						<div class="tabs-item" data-tab="6">
+							<div class="tabs-item-title">Quote 6</div>
+							<div class="tabs-item-description">
+								Curiously enough, the only thing that went through the mind of the bowl of petunias as it fell was Oh no, not again. Many
+								people have speculated that if we knew exactly why the bowl of petunias had thought that we would know a lot more about the
+								nature of the Universe than we do now.
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>