From 3f8d6b583d70e99f99d5e02155091bef18666b97 Mon Sep 17 00:00:00 2001 From: sadrak105 Date: Wed, 28 Mar 2018 14:57:46 -0500 Subject: [PATCH 1/9] created js, header.css, connected files --- components/Header/Header.css | 0 index.html | 1 + index.js | 1 + styles.css | 3 ++- 4 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 components/Header/Header.css create mode 100644 index.js diff --git a/components/Header/Header.css b/components/Header/Header.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index 39167c5..7dac120 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Introduction to the DOM + diff --git a/index.js b/index.js new file mode 100644 index 0000000..f554971 --- /dev/null +++ b/index.js @@ -0,0 +1 @@ +console.log("connected") \ No newline at end of file diff --git a/styles.css b/styles.css index 997c895..7e4a68a 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'; +@import './components/Section/Section.css'; body { box-sizing: border-box; From bca6df8bb83c1a4c7b738b439aafc05cd692ac3d Mon Sep 17 00:00:00 2001 From: sadrak105 Date: Wed, 28 Mar 2018 15:09:56 -0500 Subject: [PATCH 2/9] setup page --- index.html | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/index.html b/index.html index 7dac120..eb9ab4c 100644 --- a/index.html +++ b/index.html @@ -6,5 +6,42 @@ +
+
+
+
Dropdown
+
+ +
+
+

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 612bac3fb7264f01633ee4c04e709d3fd79cf4af Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 13:13:02 -0700 Subject: [PATCH 3/9] Added extra classes to index.html to better represent box sectioning --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index eb9ab4c..f82b6c6 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,11 @@
-
+
-
Dropdown
-
-
-
+

PlaceHolder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, @@ -31,7 +31,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 nec felis quis, From 8acdf23e4237c317768df9aed6985c20c67490dd Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 13:27:57 -0700 Subject: [PATCH 4/9] Modified html and added styles for sections and boxes --- components/Box/Box.css | 3 +++ components/Section/Section.css | 7 +++++ index.html | 48 ++++++++++++++++++---------------- 3 files changed, 35 insertions(+), 23 deletions(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..35161a1 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,3 @@ +.Box { + border: 2px solid black; +} \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..35470ad 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,7 @@ +.Box__placeholder { + display: flex; +} + +.Box__section { + padding: 10px; +} \ No newline at end of file diff --git a/index.html b/index.html index f82b6c6..5a3c597 100644 --- a/index.html +++ b/index.html @@ -19,29 +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.

-
+
+
+
+

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 e0b233ee7642ad46a8a0f8df506076ba3c04c255 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 13:50:15 -0700 Subject: [PATCH 5/9] Included functionality of drop down and added some styles --- components/Header/Header.css | 8 ++++++++ index.html | 2 +- index.js | 8 +++++++- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/components/Header/Header.css b/components/Header/Header.css index e69de29..030cb9c 100644 --- a/components/Header/Header.css +++ b/components/Header/Header.css @@ -0,0 +1,8 @@ +.Box__header { + text-align: center; + display: flex; +} + +.Box__headDropUl { + display: none; +} \ No newline at end of file diff --git a/index.html b/index.html index 5a3c597..d8acc09 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Introduction to the DOM - +
diff --git a/index.js b/index.js index f554971..81936af 100644 --- a/index.js +++ b/index.js @@ -1 +1,7 @@ -console.log("connected") \ No newline at end of file +// Set up references to the DOM +const dropdown = document.querySelector(".Box__headDropdown"); +const dropUl = document.querySelector(".Box__headDropUl"); + +dropdown.addEventListener('click', () => { + dropUl.classList.toggle('Box__headDropUl'); +}); \ No newline at end of file From c4b03fdc805d0abba9c7892fc28d8dfe16892823 Mon Sep 17 00:00:00 2001 From: sadrak105 Date: Wed, 28 Mar 2018 16:23:03 -0500 Subject: [PATCH 6/9] finalized styling --- components/Box/Box.css | 1 + components/Header/Header.css | 25 +++++++++++++++++++++++++ index.html | 2 +- 3 files changed, 27 insertions(+), 1 deletion(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index 35161a1..287ea56 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -1,3 +1,4 @@ .Box { border: 2px solid black; + padding: 0; } \ No newline at end of file diff --git a/components/Header/Header.css b/components/Header/Header.css index 030cb9c..ad6351d 100644 --- a/components/Header/Header.css +++ b/components/Header/Header.css @@ -1,8 +1,33 @@ .Box__header { text-align: center; display: flex; + align-items: center; +} + +.Box__headTitle { + width: 100%; +} + +.Box__headDropTitle { + padding: 10px; +} + +.Box__headDropdown { + margin-left: 20px; + position: absolute; } .Box__headDropUl { display: none; +} + +.Box__headDropA { + display: block; + text-align: center; + padding: 18px; +} + +.Box__headDropdown--expanded { + position: absolute; + background-color: white; } \ No newline at end of file diff --git a/index.html b/index.html index d8acc09..8e1d4f5 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
Dropdown
-

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.

-
-
+
+
+
+

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/styles.css b/styles.css index 7e4a68a..00f7d64 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,6 @@ @import './components/Box/Box.css'; @import './components/Header/Header.css'; +@import './components/Dropdown/Dropdown.css'; @import './components/Section/Section.css'; body { From 0f160005b9c136f280f50f09d316c02a1e8d00e2 Mon Sep 17 00:00:00 2001 From: Devon Bacon Date: Wed, 28 Mar 2018 14:40:07 -0700 Subject: [PATCH 8/9] Cleaned code --- index.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 5d72a3c..8a25cef 100644 --- a/index.html +++ b/index.html @@ -10,15 +10,15 @@
Dropdown
-
- -
+
+ +
-

Header

+

Header

From 203cd729cc117ca003dd5b359d7a57d8d1b7d0b9 Mon Sep 17 00:00:00 2001 From: sadrak105 Date: Wed, 28 Mar 2018 17:24:17 -0500 Subject: [PATCH 9/9] class dropdown --- index.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 81936af..c8ca2be 100644 --- a/index.js +++ b/index.js @@ -2,6 +2,16 @@ const dropdown = document.querySelector(".Box__headDropdown"); const dropUl = document.querySelector(".Box__headDropUl"); -dropdown.addEventListener('click', () => { - dropUl.classList.toggle('Box__headDropUl'); -}); \ No newline at end of file +//Make dropdown component class +class Dropdown { + constructor(elements, trigger) { + //console.log(elements); + //Expand functionality + trigger.addEventListener('click', () => { + //console.log(elements); + elements.classList.toggle('Box__headDropUl'); + }); + } +} +//Initialized Event Listener +new Dropdown(dropUl, dropdown); \ No newline at end of file