From de4c8f99a80dca2e7662fef0ab6761e76c050e6a Mon Sep 17 00:00:00 2001 From: jeffrey Date: Wed, 28 Mar 2018 18:44:30 -0400 Subject: [PATCH 1/5] nearly complete. need to finish click event. --- components/JavaScript/index.js | 17 ++++++++++ css/index.css | 57 ++++++++++++++++++++++++++++++++++ index.html | 39 ++++++++++++++++++++++- less/Box.less | 18 +++++++++++ less/Section.less | 22 +++++++++++++ less/dropdown.less | 28 +++++++++++++++++ less/index.less | 5 +++ 7 files changed, 185 insertions(+), 1 deletion(-) create mode 100644 components/JavaScript/index.js create mode 100644 css/index.css create mode 100644 less/Box.less create mode 100644 less/Section.less create mode 100644 less/dropdown.less create mode 100644 less/index.less diff --git a/components/JavaScript/index.js b/components/JavaScript/index.js new file mode 100644 index 0000000..aa297f0 --- /dev/null +++ b/components/JavaScript/index.js @@ -0,0 +1,17 @@ +class Dropdown { + constructor(element) { + this.element = element; + } + + dropdownOptions() { + this.element.addEventListener('click', function() { + document.querySelector('.Dropdown__options--click').style.display = 'relative'; + }); + } + +} + +const address = document.querySelector('.Box__header--dropdown'); +const dropdown = new Dropdown(address); + +dropdown.dropdownOption(); \ No newline at end of file diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..18158e9 --- /dev/null +++ b/css/index.css @@ -0,0 +1,57 @@ +body { + width: 100%; + max-width: 1024px; + margin: auto; +} +.container { + border: 2px solid black; +} +.Box__header--headline { + position: relative; + text-align: center; +} +.Dropdown { + position: absolute; + margin-left: 2%; +} +.Dropdown__button { + position: absolute; + border: 2px solid black; + background-color: white; + padding: 13px; + font-weight: bold; +} +.Dropdown__options--click { + position: absolute; + display: none; + flex-direction: column; + margin-top: 60px; + border: 2px solid black; + width: 96px; + background-color: white; +} +.Dropdown__options--click a { + margin: 5px; + padding-left: 10px; +} +.Section { + border: 1px solid black; + display: flex; +} +.Section .Section__subSection--left { + display: flex-column; + padding: 0 2%; + border-right: 2px solid black; + border-top: 2px solid black; +} +.Section .Section__subSection--right { + display: flex-column; + padding: 0 2%; + border-left: 2px solid black; + border-top: 2px solid black; +} +@media (max-width: 400px) { + .Section { + flex-direction: column; + } +} diff --git a/index.html b/index.html index 39167c5..77cb40e 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,46 @@ + Introduction to the DOM - + + +
+ +
+
+ +
+ Lambda + Google + MDN +
+
+ +
+

Header

+
+
+ +
+
+

Placeholder

+

+ 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. +

+
+
+

Placeholder

+

+ 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. +

+
+
+ +
+ + \ No newline at end of file diff --git a/less/Box.less b/less/Box.less new file mode 100644 index 0000000..cdc2a24 --- /dev/null +++ b/less/Box.less @@ -0,0 +1,18 @@ +body { + width: 100%; + max-width: 1024px; + margin: auto; +} + +.container { + border: 2px solid black; +} + +.Box__header { + +} + +.Box__header--headline { + position: relative; + text-align: center; +} \ No newline at end of file diff --git a/less/Section.less b/less/Section.less new file mode 100644 index 0000000..b8f9227 --- /dev/null +++ b/less/Section.less @@ -0,0 +1,22 @@ +.Section { + border: 1px solid black; + display: flex; + + .Section__subSection--left { + display: flex-column; + padding: 0 2%; + border-right: 2px solid black; + border-top: 2px solid black; + } + + .Section__subSection--right { + display: flex-column; + padding: 0 2%; + border-left: 2px solid black; + border-top: 2px solid black; + } + + @media @phone { + flex-direction: column; + } +} \ No newline at end of file diff --git a/less/dropdown.less b/less/dropdown.less new file mode 100644 index 0000000..6169a7b --- /dev/null +++ b/less/dropdown.less @@ -0,0 +1,28 @@ +.Dropdown { + position: absolute; + margin-left: 2%; +} + +.Dropdown__button { + position: absolute; + border: 2px solid black; + background-color: white; + padding: 13px; + font-weight: bold; +} + +.Dropdown__options--click { + position: absolute; + display: none; + flex-direction: column; + margin-top: 60px; + border: 2px solid black; + width: 96px; + background-color: white; + + a { + margin: 5px; + padding-left: 10px; + } +} + diff --git a/less/index.less b/less/index.less new file mode 100644 index 0000000..410bfa0 --- /dev/null +++ b/less/index.less @@ -0,0 +1,5 @@ +@phone: ~'(max-width: 400px)'; + +@import "Box"; +@import "dropdown"; +@import "Section"; \ No newline at end of file From 4cf773dbe1f1a28a8745057a9674da4af635b828 Mon Sep 17 00:00:00 2001 From: jeffrey Date: Wed, 28 Mar 2018 18:53:46 -0400 Subject: [PATCH 2/5] removed some files that werent being used --- components/Box/Box.css | 0 components/JavaScript/index.js | 17 ----------------- components/Section/Section.css | 0 index.html | 3 +-- index.js | 21 +++++++++++++++++++++ 5 files changed, 22 insertions(+), 19 deletions(-) delete mode 100644 components/Box/Box.css delete mode 100644 components/JavaScript/index.js delete mode 100644 components/Section/Section.css create mode 100644 index.js diff --git a/components/Box/Box.css b/components/Box/Box.css deleted file mode 100644 index e69de29..0000000 diff --git a/components/JavaScript/index.js b/components/JavaScript/index.js deleted file mode 100644 index aa297f0..0000000 --- a/components/JavaScript/index.js +++ /dev/null @@ -1,17 +0,0 @@ -class Dropdown { - constructor(element) { - this.element = element; - } - - dropdownOptions() { - this.element.addEventListener('click', function() { - document.querySelector('.Dropdown__options--click').style.display = 'relative'; - }); - } - -} - -const address = document.querySelector('.Box__header--dropdown'); -const dropdown = new Dropdown(address); - -dropdown.dropdownOption(); \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css deleted file mode 100644 index e69de29..0000000 diff --git a/index.html b/index.html index 77cb40e..bd27831 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,6 @@ MDN -

Header

@@ -41,6 +40,6 @@

Placeholder

- + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..69a4e10 --- /dev/null +++ b/index.js @@ -0,0 +1,21 @@ +class Dropdown { + constructor(element) { + this.element = element; + + this.element.addEventListener('click', function() { + document.querySelector('.Dropdown__options--click').style.display = 'relative'; + }); + } + + // dropdownOptions() { + // this.addEventListener('click', function() { + // document.querySelector('.Dropdown__options--click').style.display = 'relative'; + // }); + // } + +} + +const address = document.querySelector('.Dropdown__button'); +const dropdown = new Dropdown(address); + +dropdown(); \ No newline at end of file From a9419ef13ced678febd2142dac49df7f4dd7587d Mon Sep 17 00:00:00 2001 From: jeffrey Date: Wed, 28 Mar 2018 20:48:47 -0400 Subject: [PATCH 3/5] discrepency between visual and actual sizes of the button --- css/index.css | 8 +++++++- index.html | 2 +- index.js | 50 ++++++++++++++++++++++++++++++++++++---------- less/dropdown.less | 9 ++++++++- 4 files changed, 55 insertions(+), 14 deletions(-) diff --git a/css/index.css b/css/index.css index 18158e9..0cf26c9 100644 --- a/css/index.css +++ b/css/index.css @@ -21,9 +21,15 @@ body { padding: 13px; font-weight: bold; } +.Dropdown__hidden { + display: none; +} +.Dropdown__hidden a { + display: none; +} .Dropdown__options--click { position: absolute; - display: none; + display: flex; flex-direction: column; margin-top: 60px; border: 2px solid black; diff --git a/index.html b/index.html index bd27831..47c030d 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
-
+
Lambda Google MDN diff --git a/index.js b/index.js index 69a4e10..752731a 100644 --- a/index.js +++ b/index.js @@ -2,20 +2,48 @@ class Dropdown { constructor(element) { this.element = element; - this.element.addEventListener('click', function() { - document.querySelector('.Dropdown__options--click').style.display = 'relative'; - }); + this.element.addEventListener('click', () => {this.dropdownOptions()}); } - // dropdownOptions() { - // this.addEventListener('click', function() { - // document.querySelector('.Dropdown__options--click').style.display = 'relative'; - // }); - // } + dropdownOptions() { + document.querySelector('#toggle').classList.toggle('Dropdown__hidden'); + document.querySelector('#toggle').classList.toggle('Dropdown__options--click'); + } } -const address = document.querySelector('.Dropdown__button'); -const dropdown = new Dropdown(address); +const address = document.querySelector('#toggle'); +new Dropdown(address); + + + + + + + + + + + + + + + + + +// const button = document.querySelector('button'); + +// const eventHandler = function(x) { +// x.classList.toggle('Dropdown__hidden'); +// x.classList.toggle('Dropdown__options--click'); +// } + +// const clicker = function(x) { +// x.addEventListener('click', function() { +// eventHandler(x); +// }); +// }; + +//console.log(button); -dropdown(); \ No newline at end of file +// clicker(button); \ No newline at end of file diff --git a/less/dropdown.less b/less/dropdown.less index 6169a7b..f2f346f 100644 --- a/less/dropdown.less +++ b/less/dropdown.less @@ -11,9 +11,16 @@ font-weight: bold; } +.Dropdown__hidden { + display: none; + a { + display: none; + } +} + .Dropdown__options--click { position: absolute; - display: none; + display: flex; flex-direction: column; margin-top: 60px; border: 2px solid black; From 2a8baaf4c4d87b08d1389eff4a3163a322fd2e21 Mon Sep 17 00:00:00 2001 From: jeffrey Date: Wed, 28 Mar 2018 21:12:44 -0400 Subject: [PATCH 4/5] properly nested elements within less files --- css/index.css | 4 ++-- less/Box.less | 4 ---- less/Section.less | 4 ++-- less/dropdown.less | 47 +++++++++++++++++++++++----------------------- 4 files changed, 27 insertions(+), 32 deletions(-) diff --git a/css/index.css b/css/index.css index 0cf26c9..6035e70 100644 --- a/css/index.css +++ b/css/index.css @@ -44,13 +44,13 @@ body { border: 1px solid black; display: flex; } -.Section .Section__subSection--left { +.Section__subSection--left { display: flex-column; padding: 0 2%; border-right: 2px solid black; border-top: 2px solid black; } -.Section .Section__subSection--right { +.Section__subSection--right { display: flex-column; padding: 0 2%; border-left: 2px solid black; diff --git a/less/Box.less b/less/Box.less index cdc2a24..c39421c 100644 --- a/less/Box.less +++ b/less/Box.less @@ -8,10 +8,6 @@ body { border: 2px solid black; } -.Box__header { - -} - .Box__header--headline { position: relative; text-align: center; diff --git a/less/Section.less b/less/Section.less index b8f9227..8708655 100644 --- a/less/Section.less +++ b/less/Section.less @@ -2,14 +2,14 @@ border: 1px solid black; display: flex; - .Section__subSection--left { + &__subSection--left { display: flex-column; padding: 0 2%; border-right: 2px solid black; border-top: 2px solid black; } - .Section__subSection--right { + &__subSection--right { display: flex-column; padding: 0 2%; border-left: 2px solid black; diff --git a/less/dropdown.less b/less/dropdown.less index f2f346f..79d4321 100644 --- a/less/dropdown.less +++ b/less/dropdown.less @@ -1,35 +1,34 @@ .Dropdown { position: absolute; margin-left: 2%; -} -.Dropdown__button { - position: absolute; - border: 2px solid black; - background-color: white; - padding: 13px; - font-weight: bold; -} + &__button { + position: absolute; + border: 2px solid black; + background-color: white; + padding: 13px; + font-weight: bold; + } -.Dropdown__hidden { - display: none; - a { + &__hidden { display: none; + a { + display: none; + } } -} -.Dropdown__options--click { - position: absolute; - display: flex; - flex-direction: column; - margin-top: 60px; - border: 2px solid black; - width: 96px; - background-color: white; + &__options--click { + position: absolute; + display: flex; + flex-direction: column; + margin-top: 60px; + border: 2px solid black; + width: 96px; + background-color: white; - a { - margin: 5px; - padding-left: 10px; + a { + margin: 5px; + padding-left: 10px; + } } } - From bab4c2528dfd7bba98eae963af256fcbca0b491f Mon Sep 17 00:00:00 2001 From: jeffrey Date: Thu, 29 Mar 2018 11:42:50 -0400 Subject: [PATCH 5/5] finally got the button working! --- css/index.css | 70 +++++++++++++++++++++++++++------------------- index.html | 31 ++++++++++---------- index.js | 69 +++++++++++++++++---------------------------- less/Box.less | 20 ++++++++++--- less/Section.less | 24 +++++++++------- less/dropdown.less | 31 ++++++++++---------- 6 files changed, 127 insertions(+), 118 deletions(-) diff --git a/css/index.css b/css/index.css index 6035e70..1439d8b 100644 --- a/css/index.css +++ b/css/index.css @@ -6,55 +6,67 @@ body { .container { border: 2px solid black; } -.Box__header--headline { - position: relative; - text-align: center; +.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 { - position: absolute; border: 2px solid black; background-color: white; padding: 13px; font-weight: bold; } -.Dropdown__hidden { - display: none; -} -.Dropdown__hidden a { - display: none; -} -.Dropdown__options--click { +.Dropdown__content { position: absolute; - display: flex; - flex-direction: column; - margin-top: 60px; + display: none; + margin-top: 10px; border: 2px solid black; - width: 96px; background-color: white; + padding: 13px; +} +.Dropdown__content--active { + display: block; +} +.Dropdown__link { + display: none; + margin-bottom: 10px; } -.Dropdown__options--click a { - margin: 5px; - padding-left: 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__subSection--left { - display: flex-column; - padding: 0 2%; - border-right: 2px solid black; - border-top: 2px solid black; -} -.Section__subSection--right { - display: flex-column; - padding: 0 2%; - border-left: 2px solid black; - border-top: 2px solid black; +.Section--bordered:first-of-type { + border-top: 2.5px solid black; } @media (max-width: 400px) { .Section { diff --git a/index.html b/index.html index 47c030d..7b9019f 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Introduction to the DOM + @@ -11,35 +12,31 @@
- -
- Lambda - Google - MDN +
Dropdown
+
+ Lambda + Google + MDN
-
-

Header

-
+

Header

-
-
-

Placeholder

-

+

+
+

Placeholder

+

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.

-
-

Placeholder

-

+

+

Placeholder

+

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.

- - \ No newline at end of file diff --git a/index.js b/index.js index 752731a..107b6c9 100644 --- a/index.js +++ b/index.js @@ -1,49 +1,32 @@ class Dropdown { - constructor(element) { - this.element = element; - - this.element.addEventListener('click', () => {this.dropdownOptions()}); - } - - dropdownOptions() { - document.querySelector('#toggle').classList.toggle('Dropdown__hidden'); - document.querySelector('#toggle').classList.toggle('Dropdown__options--click'); - } - + 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'); + }); + } } -const address = document.querySelector('#toggle'); -new Dropdown(address); - - - - - - - - +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; +} - - - - - - -// const button = document.querySelector('button'); - -// const eventHandler = function(x) { -// x.classList.toggle('Dropdown__hidden'); -// x.classList.toggle('Dropdown__options--click'); -// } - -// const clicker = function(x) { -// x.addEventListener('click', function() { -// eventHandler(x); -// }); -// }; - -//console.log(button); - -// clicker(button); \ No newline at end of file +console.log(commonElements([1, 2, 3, 4], [3, 4, 5, 6])); +*/ \ No newline at end of file diff --git a/less/Box.less b/less/Box.less index c39421c..fa9a4b1 100644 --- a/less/Box.less +++ b/less/Box.less @@ -8,7 +8,19 @@ body { border: 2px solid black; } -.Box__header--headline { - position: relative; - text-align: center; -} \ No newline at end of file +.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 index 8708655..71eced9 100644 --- a/less/Section.less +++ b/less/Section.less @@ -1,19 +1,23 @@ .Section { + box-sizing: border-box; border: 1px solid black; display: flex; + width: 100%; + margin: 0; + position: relative; - &__subSection--left { - display: flex-column; - padding: 0 2%; - border-right: 2px solid black; - border-top: 2px solid black; + &__header { + text-align: center; + font-weight: bold; } - &__subSection--right { - display: flex-column; - padding: 0 2%; - border-left: 2px solid black; - border-top: 2px solid black; + &--bordered { + border-top: none; + border: 2px solid black; + + &:first-of-type { + border-top: 2.5px solid black; + } } @media @phone { diff --git a/less/dropdown.less b/less/dropdown.less index 79d4321..541551b 100644 --- a/less/dropdown.less +++ b/less/dropdown.less @@ -1,34 +1,35 @@ .Dropdown { + display: inline-block; position: absolute; margin-left: 2%; &__button { - position: absolute; border: 2px solid black; background-color: white; padding: 13px; font-weight: bold; } - &__hidden { + &__content { + position: absolute; display: none; - a { - display: none; + margin-top: 10px; + border: 2px solid black; + background-color: white; + padding: 13px; + + &--active { + display: block; } } - &__options--click { - position: absolute; - display: flex; - flex-direction: column; - margin-top: 60px; - border: 2px solid black; - width: 96px; - background-color: white; + &__link { + display: none; + margin-bottom: 10px; - a { - margin: 5px; - padding-left: 10px; + &--active { + display: block; } } + }