diff --git a/CSS/index.css b/CSS/index.css index ca8a0be31..05a2bdc5e 100644 --- a/CSS/index.css +++ b/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; diff --git a/LESS/index.less b/LESS/index.less index 6f6cdfd7e..67ca170e4 100644 --- a/LESS/index.less +++ b/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; diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..43a6a08fa 100644 --- a/components/Dropdown/Dropdown.js +++ b/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)); \ No newline at end of file +const dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown)); \ No newline at end of file diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 4163d47aa..66ae9e7d8 100644 --- a/components/Tabs/Tabs.js +++ b/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(); \ No newline at end of file + + + + const tabs = document.querySelector('.tabs'); + new Tabs(tabs) + // links.forEach(link => new Tab(link)); + // // console.log(links); \ No newline at end of file diff --git a/components/Tabs/Tabs.less b/components/Tabs/Tabs.less index 2c114d684..3eb8d6368 100644 --- a/components/Tabs/Tabs.less +++ b/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; diff --git a/components/images/adult-blur-business-2102416.jpg b/components/images/adult-blur-business-2102416.jpg new file mode 100644 index 000000000..bfe89e7d7 Binary files /dev/null and b/components/images/adult-blur-business-2102416.jpg differ diff --git a/components/images/beautiful-computer-desk-2089368.jpg b/components/images/beautiful-computer-desk-2089368.jpg new file mode 100644 index 000000000..38ef04e34 Binary files /dev/null and b/components/images/beautiful-computer-desk-2089368.jpg differ diff --git a/index.html b/index.html index febb5870b..d5d115386 100644 --- a/index.html +++ b/index.html @@ -22,13 +22,22 @@
-
Box Title 1
-
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.
+ + +
-
Box Title 2
-
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.
+ +
+
+ + + +
@@ -38,6 +47,8 @@
Tab 2
Tab 3
Tab 4
+
Tab 5
+
Tab 6
@@ -72,6 +83,22 @@ that this has already happened.
+
+
Quote 5
+
+ 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. +
+
+
+
Quote 6
+
+ 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. +
+