From c679a19cdb56e7479263e5dac131cbb65f6772ff Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 10:56:42 -0700 Subject: [PATCH 01/18] Created index.js --- index.html | 2 +- index.js | 0 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 index.js diff --git a/index.html b/index.html index 39167c5..b196afc 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ Introduction to the DOM - + diff --git a/index.js b/index.js new file mode 100644 index 0000000..e69de29 From 7cc62cfa5f4f3afec11c648fd52464a2bee54e95 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 10:59:04 -0700 Subject: [PATCH 02/18] Connected index.html to index.js --- index.html | 1 + index.js | 1 + 2 files changed, 2 insertions(+) diff --git a/index.html b/index.html index b196afc..6987d5d 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Introduction to the DOM + diff --git a/index.js b/index.js index e69de29..f1e8a8a 100644 --- a/index.js +++ b/index.js @@ -0,0 +1 @@ +console.log('Connected'); \ No newline at end of file From cf4dae6ec4c3d018440543b7018ce14ff051e131 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 11:11:10 -0700 Subject: [PATCH 03/18] Added header to index.html --- index.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/index.html b/index.html index 6987d5d..79dd285 100644 --- a/index.html +++ b/index.html @@ -6,5 +6,18 @@ +
+
+
Dropdown
+
+ +
+
+

Header

+
\ No newline at end of file From 3679fa35cfac13bb8af1d9248a4131d87b0b24d9 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 11:11:52 -0700 Subject: [PATCH 04/18] Added sections to index.html --- index.html | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/index.html b/index.html index 79dd285..af9138d 100644 --- a/index.html +++ b/index.html @@ -19,5 +19,31 @@

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 From 3aac7d35d475cc4d72cf30b6933cd767f049e52a Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 11:12:28 -0700 Subject: [PATCH 05/18] Created Header and Header.css in components folder --- components/Header/Header.ss | 0 styles.css | 1 + 2 files changed, 1 insertion(+) create mode 100644 components/Header/Header.ss diff --git a/components/Header/Header.ss b/components/Header/Header.ss new file mode 100644 index 0000000..e69de29 diff --git a/styles.css b/styles.css index 997c895..1dc0b73 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,6 @@ @import './components/Section/Section.css'; @import './components/Box/Box.css'; +@import './components/Header/Header.css'; body { box-sizing: border-box; From 67a2d0e4bccbedbd5a6027d31b6f202abb8ebc50 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 11:18:56 -0700 Subject: [PATCH 06/18] Fixed typo and modified index.html to better fix BEM standards and project requirements --- components/Header/Header.css | 3 ++ components/Header/Header.ss | 0 index.html | 56 +++++++++++++++++++----------------- 3 files changed, 32 insertions(+), 27 deletions(-) create mode 100644 components/Header/Header.css delete mode 100644 components/Header/Header.ss diff --git a/components/Header/Header.css b/components/Header/Header.css new file mode 100644 index 0000000..02ad52b --- /dev/null +++ b/components/Header/Header.css @@ -0,0 +1,3 @@ +.Header { + width: 100%; +} \ No newline at end of file diff --git a/components/Header/Header.ss b/components/Header/Header.ss deleted file mode 100644 index e69de29..0000000 diff --git a/index.html b/index.html index af9138d..f8254dd 100644 --- a/index.html +++ b/index.html @@ -6,35 +6,23 @@ -
-
-
Dropdown
-
- +
+
+
+
Dropdown
+
+ +
+

Header

-

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

+

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. @@ -45,5 +33,19 @@

Placeholder

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 From b6c79d9af80af8d724c6c372e6abe50db72ece59 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 12:00:48 -0700 Subject: [PATCH 07/18] Styled header --- components/Header/Header.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/Header/Header.css b/components/Header/Header.css index 02ad52b..3d90073 100644 --- a/components/Header/Header.css +++ b/components/Header/Header.css @@ -1,3 +1,8 @@ -.Header { +.Box__header { width: 100%; -} \ No newline at end of file + display: flex; + border-bottom: 2px solid black; + align-items: center; + justify-content: center; +} + From 620d64aac18a033eff82c28bc0fc2ff7224533a4 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 12:01:18 -0700 Subject: [PATCH 08/18] Styled header dropdown when visible --- components/Header/Header.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/components/Header/Header.css b/components/Header/Header.css index 3d90073..cd1d6c7 100644 --- a/components/Header/Header.css +++ b/components/Header/Header.css @@ -6,3 +6,15 @@ justify-content: center; } +.Box__headDropdown { + position: absolute; + left: 40px; + width: 90px; +} + +.Box__headDropTitle { + display: flex; + justify-content: center; + border: 2px solid black; +} + From ffb8cf7912a21bffddc9f944055433ead90821a3 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 12:01:47 -0700 Subject: [PATCH 09/18] Styled hidden portion of header dropdown --- components/Header/Header.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/components/Header/Header.css b/components/Header/Header.css index cd1d6c7..3d66d8a 100644 --- a/components/Header/Header.css +++ b/components/Header/Header.css @@ -18,3 +18,21 @@ border: 2px solid black; } +.Box__headDropdown--expanded { + position: absolute; + width: 100%; + display: none; +} + +.Box__headDropUl { + padding-left: 0; + list-style: none; + border: 2px solid black; + background: white; +} + +.Box__headDropLi { + padding: 5px 0 5px; + display: flex; + justify-content: center; +} \ No newline at end of file From 1c5b1e8cbfec73c0ca54944578a6729cc275c24f Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 12:02:35 -0700 Subject: [PATCH 10/18] Styled box --- components/Box/Box.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..0cfe3b5 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,4 @@ +.Box { + border: 2px solid black; + margin: 10px; +} \ No newline at end of file From 0f206afc0876c3ed7e01ac8d478bbd7270d75636 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 12:02:56 -0700 Subject: [PATCH 11/18] Minor adjustments and modifications --- index.html | 10 +++++----- styles.css | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index f8254dd..1d15513 100644 --- a/index.html +++ b/index.html @@ -12,15 +12,15 @@
Dropdown

Header

-
+

Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida @@ -33,7 +33,7 @@

Placeholder

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 diff --git a/styles.css b/styles.css index 1dc0b73..7e4a68a 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,6 @@ -@import './components/Section/Section.css'; @import './components/Box/Box.css'; @import './components/Header/Header.css'; +@import './components/Section/Section.css'; body { box-sizing: border-box; From c86f691212fe62030bfe5d57c4bf7e32de03fa52 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 12:36:36 -0700 Subject: [PATCH 12/18] Styled sections --- components/Section/Section.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..a9281a7 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,5 @@ +.Box__section { + display: inline-block; + width: 50%; + padding: 10px; +} \ No newline at end of file From c6cc415cf4335273f2cc3f3585b14434462dbe31 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 12:38:20 -0700 Subject: [PATCH 13/18] Updated index.html and box styling to better represent box divisions --- components/Box/Box.css | 3 +-- index.html | 17 ++++++++--------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index 0cfe3b5..d652e20 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -1,4 +1,3 @@ .Box { - border: 2px solid black; - margin: 10px; + border: 1px solid black; } \ No newline at end of file diff --git a/index.html b/index.html index 1d15513..9df8078 100644 --- a/index.html +++ b/index.html @@ -7,20 +7,20 @@

-
+
-
Dropdown
+
Dropdown
-

Header

-
+

Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida @@ -32,8 +32,7 @@

Placeholder

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 From 684ec4363befabdf6942ab218cc9c1ac1a6361b7 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 12:39:16 -0700 Subject: [PATCH 14/18] Added rule to styles.css to properly apply border box sizing to all elements --- styles.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 7e4a68a..7d7a2c0 100644 --- a/styles.css +++ b/styles.css @@ -5,5 +5,9 @@ body { box-sizing: border-box; min-width: 300px; - margin: 0; + margin: 10px; } + +* {s + box-sizing: border-box; +} \ No newline at end of file From c96e4ae21b1e55d9953955c0917cd513c94d2142 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 12:39:54 -0700 Subject: [PATCH 15/18] Changed header styles to adapt to new box styles --- components/Header/Header.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/components/Header/Header.css b/components/Header/Header.css index 3d66d8a..2cd1525 100644 --- a/components/Header/Header.css +++ b/components/Header/Header.css @@ -1,7 +1,6 @@ .Box__header { width: 100%; display: flex; - border-bottom: 2px solid black; align-items: center; justify-content: center; } @@ -15,7 +14,7 @@ .Box__headDropTitle { display: flex; justify-content: center; - border: 2px solid black; + border-width: 2px; } .Box__headDropdown--expanded { @@ -25,13 +24,15 @@ } .Box__headDropUl { + display: flex; + flex-flow: column; padding-left: 0; list-style: none; - border: 2px solid black; background: white; + border-width: 2px; } -.Box__headDropLi { +.Box__headDropA { padding: 5px 0 5px; display: flex; justify-content: center; From 93fed13bf5fe3b3311ceb386abe426817c3ff739 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 12:44:11 -0700 Subject: [PATCH 16/18] Fixed but and added DOM references into index.js --- index.js | 5 ++++- styles.css | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index f1e8a8a..4d4e699 100644 --- a/index.js +++ b/index.js @@ -1 +1,4 @@ -console.log('Connected'); \ No newline at end of file +const headDropdown = document.querySelector('.Box__headDropdown'); +const headDropdownExpanded = document.querySelector('.Box__headDropdown--expanded'); + +console.log(headDropdown, headDropdownExpnanded); \ No newline at end of file diff --git a/styles.css b/styles.css index 7d7a2c0..ab2e96d 100644 --- a/styles.css +++ b/styles.css @@ -8,6 +8,6 @@ body { margin: 10px; } -* {s +* { box-sizing: border-box; } \ No newline at end of file From 2056439d211cebf9bc7885a221cdd5b7f893e187 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 12:49:34 -0700 Subject: [PATCH 17/18] Added finishing touches and click functionality for drop down --- components/Header/Header.css | 1 - index.html | 2 +- index.js | 6 +++++- styles.css | 4 ++++ 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/components/Header/Header.css b/components/Header/Header.css index 2cd1525..8106a2a 100644 --- a/components/Header/Header.css +++ b/components/Header/Header.css @@ -20,7 +20,6 @@ .Box__headDropdown--expanded { position: absolute; width: 100%; - display: none; } .Box__headDropUl { diff --git a/index.html b/index.html index 9df8078..629580b 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@

Dropdown
-
+ diff --git a/index.js b/index.js index 61cf014..57cbf7a 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,15 @@ const headDropdown = document.querySelector('.Box__headDropdown'); const headDropdownExpanded = document.querySelector('.Box__headDropdown--expanded'); -headDropdown.addEventListener('click', () => { - headDropdownExpanded.classList.toggle('hidden'); -}) +// Create class for quick set up of drop down functionality +class Dropdown { + // Take in subject of the event and it's trigger + constructor(subject, trigger) { + // Listen for triggering event + trigger.addEventListener('click', () => { + subject.classList.toggle('hidden'); // Hide/Show element + }) + } +} -console.log(headDropdown, headDropdownExpanded); \ No newline at end of file +new Dropdown(headDropdownExpanded, headDropdown); \ No newline at end of file