From 109efef10fcfc4cf13d0d292d0f5907bfb4ed2cc Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 12:22:19 -0700 Subject: [PATCH 01/13] added the boxes html with BEM naming --- index.html | 36 ++++++++++++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 39167c5..3b6388f 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,41 @@ - + Introduction to the DOM +
+

Header

+
+

Dropdown

+
+
+
+
+

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 + \ No newline at end of file From 47e5e63c6f181d9709e6bb74047c01162f31761c Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 12:44:26 -0700 Subject: [PATCH 02/13] added styles to the boxes in box.css --- components/Box/Box.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..af0d617 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,6 @@ +.Box { + width: 49%; + height: 200px; + border: 3px solid black; + display: inline-block; +} \ No newline at end of file From d1c7faf461308835b3f5975b0f4b8a6ccb91913e Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 12:59:11 -0700 Subject: [PATCH 03/13] got box2 to line up with header box and gave header a box border --- components/Box/Box.css | 6 +++++- components/Section/Section.css | 4 ++++ index.html | 4 ++-- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index af0d617..49a1fd7 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -1,6 +1,10 @@ .Box { width: 49%; height: 200px; - border: 3px solid black; + border: 2px solid black; display: inline-block; +} + +.Box--2 { + width: 50%; } \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..36f7c09 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,4 @@ +.Header { + + border: 2px solid black; +} \ No newline at end of file diff --git a/index.html b/index.html index 3b6388f..8a69acf 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@
-

Header

+

Header

Dropdown

@@ -24,7 +24,7 @@

Placeholder

et elit at consequat. In hac habitasse platea dictumst.

-
+

Placeholder

From 87f238f62a3964181bcd25595406b3cf6f3d5f2c Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 13:02:15 -0700 Subject: [PATCH 04/13] changed dropdown from h3 to p and center header text --- components/Section/Section.css | 6 +++++- index.html | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/components/Section/Section.css b/components/Section/Section.css index 36f7c09..de050b2 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -1,4 +1,8 @@ .Header { - border: 2px solid black; + height: 100px; +} + +.Header__headline { + text-align: center; } \ No newline at end of file diff --git a/index.html b/index.html index 8a69acf..b169246 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,9 @@
-

Header

+

Header

-

Dropdown

+

Dropdown

From ef471768b8173f8ed8bddbb15a3440f55c898e2e Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 13:17:28 -0700 Subject: [PATCH 05/13] added dropdown folder and file in components folder, changed some styles --- Dropdown/Dropdown.css | 3 +++ components/Box/Box.css | 8 ++++++++ components/Section/Section.css | 3 ++- index.html | 2 +- 4 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 Dropdown/Dropdown.css diff --git a/Dropdown/Dropdown.css b/Dropdown/Dropdown.css new file mode 100644 index 0000000..cdcb9c7 --- /dev/null +++ b/Dropdown/Dropdown.css @@ -0,0 +1,3 @@ +.Header__dropdown { + text-align: center; +} \ No newline at end of file diff --git a/components/Box/Box.css b/components/Box/Box.css index 49a1fd7..de044b4 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -7,4 +7,12 @@ .Box--2 { width: 50%; +} + +.Box__header { + margin: 20px; +} + +.Box__text { + margin: 20px; } \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index de050b2..9d500c3 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -5,4 +5,5 @@ .Header__headline { text-align: center; -} \ No newline at end of file +} + diff --git a/index.html b/index.html index b169246..dc713e6 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@

Header

-
+

Dropdown

From 77dab895a5687eff517d39d3a737bba619a32276 Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 13:35:10 -0700 Subject: [PATCH 06/13] imported dropdown to styles.css --- Dropdown/Dropdown.css | 6 +++++- index.html | 4 +--- styles.css | 1 + 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/Dropdown/Dropdown.css b/Dropdown/Dropdown.css index cdcb9c7..6fedcde 100644 --- a/Dropdown/Dropdown.css +++ b/Dropdown/Dropdown.css @@ -1,3 +1,7 @@ .Header__dropdown { - text-align: center; + width: 8%; + height: 30px; + border: 3px solid black; + padding-left: 4px; + padding-top: 2px; } \ No newline at end of file diff --git a/index.html b/index.html index dc713e6..739c05b 100644 --- a/index.html +++ b/index.html @@ -7,9 +7,7 @@

Header

-
-

Dropdown

-
+

Dropdown

diff --git a/styles.css b/styles.css index 997c895..33c9c4e 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,6 @@ @import './components/Section/Section.css'; @import './components/Box/Box.css'; +@import './components/Dropdown/Dropdown.css'; body { box-sizing: border-box; From 6f121605bfca20e078bd33ecea6477b5e17bc533 Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 13:54:26 -0700 Subject: [PATCH 07/13] changed header spacing with dropdown --- Dropdown/Dropdown.css | 7 ------- components/Section/Section.css | 12 ++++++++++-- index.html | 2 +- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/Dropdown/Dropdown.css b/Dropdown/Dropdown.css index 6fedcde..e69de29 100644 --- a/Dropdown/Dropdown.css +++ b/Dropdown/Dropdown.css @@ -1,7 +0,0 @@ -.Header__dropdown { - width: 8%; - height: 30px; - border: 3px solid black; - padding-left: 4px; - padding-top: 2px; -} \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index 9d500c3..bc698da 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -1,9 +1,17 @@ .Header { + display: flex; border: 2px solid black; - height: 100px; + height: 80px; + justify-content: space-evenly; + flex-direction: row-reverse; } .Header__headline { - text-align: center; + margin-right: 45%; + margin-left: 400px; } +.Header__Dropdown { + margin-top: 30px; + align-items: center; + } diff --git a/index.html b/index.html index 739c05b..01f4b4e 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@

Header

-

Dropdown

+

Dropdown

From 2db22f941d637d5d198c2538c4fb7adc4b7981b5 Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 14:50:21 -0700 Subject: [PATCH 08/13] fixed styling for dropdown box --- Dropdown/Dropdown.css | 1 + components/Box/Box.css | 3 ++- components/Section/Section.css | 8 +++++++- index.html | 4 +++- styles.css | 3 ++- 5 files changed, 15 insertions(+), 4 deletions(-) diff --git a/Dropdown/Dropdown.css b/Dropdown/Dropdown.css index e69de29..8b13789 100644 --- a/Dropdown/Dropdown.css +++ b/Dropdown/Dropdown.css @@ -0,0 +1 @@ + diff --git a/components/Box/Box.css b/components/Box/Box.css index de044b4..4721f80 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -2,7 +2,8 @@ width: 49%; height: 200px; border: 2px solid black; - display: inline-block; + float: left; + margin-right: 0; } .Box--2 { diff --git a/components/Section/Section.css b/components/Section/Section.css index bc698da..f38ee47 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -11,7 +11,13 @@ margin-left: 400px; } -.Header__Dropdown { +.Header__Dropdown h4 { margin-top: 30px; align-items: center; + width: 100%; + height: 30px; + border: 3px solid black; + padding-left: 12px; + padding-top: 5px; + padding-right: 0; } diff --git a/index.html b/index.html index 01f4b4e..8151016 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,9 @@

Header

-

Dropdown

+
+

Dropdown

+
diff --git a/styles.css b/styles.css index 33c9c4e..78a8976 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,7 @@ +@import './components/Dropdown/Dropdown.css'; @import './components/Section/Section.css'; @import './components/Box/Box.css'; -@import './components/Dropdown/Dropdown.css'; + body { box-sizing: border-box; From e66d5aec0216347c213de83e4a6ce7f09f817ce3 Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 15:00:08 -0700 Subject: [PATCH 09/13] fixed folder structore in components folder --- Dropdown/Dropdown.css | 1 - components/Dropdown/Dropdown.css | 11 +++++++++++ components/Section/Section.css | 11 +---------- index.html | 7 ++++++- styles.css | 2 +- 5 files changed, 19 insertions(+), 13 deletions(-) delete mode 100644 Dropdown/Dropdown.css create mode 100644 components/Dropdown/Dropdown.css diff --git a/Dropdown/Dropdown.css b/Dropdown/Dropdown.css deleted file mode 100644 index 8b13789..0000000 --- a/Dropdown/Dropdown.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css new file mode 100644 index 0000000..55f51df --- /dev/null +++ b/components/Dropdown/Dropdown.css @@ -0,0 +1,11 @@ + +.Dropdown h4 { + margin-top: 30px; + align-items: center; + width: 100%; + height: 30px; + border: 3px solid black; + padding-left: 12px; + padding-top: 5px; + padding-right: 0; + } \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index f38ee47..c473bcb 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -11,13 +11,4 @@ margin-left: 400px; } -.Header__Dropdown h4 { - margin-top: 30px; - align-items: center; - width: 100%; - height: 30px; - border: 3px solid black; - padding-left: 12px; - padding-top: 5px; - padding-right: 0; - } + diff --git a/index.html b/index.html index 8151016..cebc84b 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,13 @@

Header

-
+

Dropdown

+
diff --git a/styles.css b/styles.css index 78a8976..1e79c0f 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,5 @@ -@import './components/Dropdown/Dropdown.css'; @import './components/Section/Section.css'; +@import './components/Dropdown/Dropdown.css'; @import './components/Box/Box.css'; From 06503ba42c02c4248df91566983d7804942f4515 Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 15:44:19 -0700 Subject: [PATCH 10/13] working on getting the dropdown menu to work --- components/Dropdown/Dropdown.css | 3 ++- index.html | 9 +++++---- index.js | 0 3 files changed, 7 insertions(+), 5 deletions(-) create mode 100644 index.js diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css index 55f51df..cd1e417 100644 --- a/components/Dropdown/Dropdown.css +++ b/components/Dropdown/Dropdown.css @@ -8,4 +8,5 @@ padding-left: 12px; padding-top: 5px; padding-right: 0; - } \ No newline at end of file + } + diff --git a/index.html b/index.html index cebc84b..5ce5e13 100644 --- a/index.html +++ b/index.html @@ -2,18 +2,19 @@ Introduction to the DOM - + +

Header

-

Dropdown

- +
diff --git a/index.js b/index.js new file mode 100644 index 0000000..e69de29 From a79a6b4ec715b1f6cd36e91c5cc7a1ecd27f5da0 Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 16:41:33 -0700 Subject: [PATCH 11/13] figuring out how to get the dropdown menu to work --- components/Dropdown/Dropdown.css | 21 +++++++++++++++++++-- index.html | 6 +++--- index.js | 16 ++++++++++++++++ 3 files changed, 38 insertions(+), 5 deletions(-) diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css index cd1e417..99d7999 100644 --- a/components/Dropdown/Dropdown.css +++ b/components/Dropdown/Dropdown.css @@ -1,8 +1,8 @@ -.Dropdown h4 { +.Dropdown__button { margin-top: 30px; align-items: center; - width: 100%; + min-width: 160px; height: 30px; border: 3px solid black; padding-left: 12px; @@ -10,3 +10,20 @@ padding-right: 0; } +.Dropdown__Menu { + visibility: hidden; + overflow: hidden; + transform-origin: top; + padding: 0; + list-style: none; + transform: scaleY(0); + left: 0; + margin-top: 2px; + top: 100%; + min-width: 90%; + transition: all .3s ease; +} + +.show { + display: block; +} \ No newline at end of file diff --git a/index.html b/index.html index 5ce5e13..3983f99 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,13 @@ Introduction to the DOM -

Header

-

Dropdown

-
    +

    Dropdown

    +
      Lambda School Google MDN @@ -43,5 +42,6 @@

      Placeholder

      et elit at consequat. In hac habitasse platea dictumst.

+ \ No newline at end of file diff --git a/index.js b/index.js index e69de29..dad65a2 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,16 @@ +function myFunction() { + document.getElementById('myDropdown').classList.toggle('show') +} + +window.onclick = function(event) { + if (!event.target.matches('Dropdown__button')) { + let dropdowns = document.getElementsByClassName('Dropdown__Menu') + let i + for (i = 0; i < dropdowns.length; i++) { + let openDropDown = dropdowns[i] + if (openDropDown.classList.contains('show')) { + openDropDown.classList.remove('show') + } + } + } +} \ No newline at end of file From 35275437fa7554a3dab9c9ac718fbc2085c7d1ef Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Wed, 28 Mar 2018 17:32:52 -0700 Subject: [PATCH 12/13] got dropdown menu to work and styled some --- components/Dropdown/Dropdown.css | 16 ++++++---------- components/Dropdown/index.js | 9 +++++++++ index.html | 8 ++++---- index.js | 16 ---------------- 4 files changed, 19 insertions(+), 30 deletions(-) create mode 100644 components/Dropdown/index.js delete mode 100644 index.js diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css index 99d7999..7ab2628 100644 --- a/components/Dropdown/Dropdown.css +++ b/components/Dropdown/Dropdown.css @@ -12,18 +12,14 @@ .Dropdown__Menu { visibility: hidden; - overflow: hidden; - transform-origin: top; - padding: 0; list-style: none; - transform: scaleY(0); - left: 0; - margin-top: 2px; - top: 100%; - min-width: 90%; - transition: all .3s ease; +} + +.Dropdown__Menu li { + border: 1px solid black; + background-color: #F9F9F9; } .show { - display: block; + visibility: visible; } \ No newline at end of file diff --git a/components/Dropdown/index.js b/components/Dropdown/index.js new file mode 100644 index 0000000..00f461c --- /dev/null +++ b/components/Dropdown/index.js @@ -0,0 +1,9 @@ +function myFunction() { + document.getElementById('myDropdown').classList.toggle('show') +} +let button = document.querySelector('.Dropdown__button') +button.onclick = function(event) { + let dropdowns = document.getElementById('myDropdown') + console.log(dropdowns) + dropdowns.classList.toggle('show') +} \ No newline at end of file diff --git a/index.html b/index.html index 3983f99..0157a5b 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,14 @@
+

Header

Dropdown

@@ -42,6 +43,5 @@

Placeholder

et elit at consequat. In hac habitasse platea dictumst.

- \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index dad65a2..0000000 --- a/index.js +++ /dev/null @@ -1,16 +0,0 @@ -function myFunction() { - document.getElementById('myDropdown').classList.toggle('show') -} - -window.onclick = function(event) { - if (!event.target.matches('Dropdown__button')) { - let dropdowns = document.getElementsByClassName('Dropdown__Menu') - let i - for (i = 0; i < dropdowns.length; i++) { - let openDropDown = dropdowns[i] - if (openDropDown.classList.contains('show')) { - openDropDown.classList.remove('show') - } - } - } -} \ No newline at end of file From 92a8c43339204291464f22538890d9730510af1e Mon Sep 17 00:00:00 2001 From: Tylar Pierson Date: Thu, 29 Mar 2018 08:12:25 -0700 Subject: [PATCH 13/13] refactored my JS to Dan's example --- components/Dropdown/Dropdown.css | 1 + components/Dropdown/index.js | 42 ++++++++++++++++++++++++++------ 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css index 7ab2628..424ba68 100644 --- a/components/Dropdown/Dropdown.css +++ b/components/Dropdown/Dropdown.css @@ -8,6 +8,7 @@ padding-left: 12px; padding-top: 5px; padding-right: 0; + position: absolute; } .Dropdown__Menu { diff --git a/components/Dropdown/index.js b/components/Dropdown/index.js index 00f461c..df70540 100644 --- a/components/Dropdown/index.js +++ b/components/Dropdown/index.js @@ -1,9 +1,35 @@ -function myFunction() { - document.getElementById('myDropdown').classList.toggle('show') +// function myFunction() { +// document.getElementById('myDropdown').classList.toggle('show') +// } +// let button = document.querySelector('.Dropdown__button') +// button.onclick = function(event) { +// let dropdowns = document.getElementById('myDropdown') +// console.log(dropdowns) +// dropdowns.classList.toggle('show') +// } + +//Refactoring my JS to match what Dan did + +class Dropdown { + constructor(element, hideClass) { + this.element = element, + this.clicked = false, + this.child = [...this.element.children].find(child => child.className === hideClass), + this.element.addEventListener('click', () => this.handleClickEvent()) + } + + // display hidden menu + handleClickEvent() { + if (this.clicked && this.child.classList)this.child.classList.remove('display') + else this.child.classList.add('show') + this.toggleDropdown() + } + + // toggle allows the event to turn on/off + toggleDropdown() { + this.clicked = !this.clicked + } } -let button = document.querySelector('.Dropdown__button') -button.onclick = function(event) { - let dropdowns = document.getElementById('myDropdown') - console.log(dropdowns) - dropdowns.classList.toggle('show') -} \ No newline at end of file + +// const must be at the bottom in the 'new Class' format +const dropdown = new Dropdown(document.querySelector('.Dropdown'), 'Dropdown__Menu')