From d216e238f9c0bca9920f700b4ba5955c69e1b7d0 Mon Sep 17 00:00:00 2001 From: jaivonmassena Date: Wed, 28 Mar 2018 16:22:22 -0400 Subject: [PATCH 1/4] basic html and css created --- index.html | 24 +++++++++++++++++++++++- index.js | 0 styles.css | 23 +++++++++++++++++++++++ 3 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 index.js diff --git a/index.html b/index.html index 39167c5..a9fc1b0 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,29 @@ Introduction to the DOM + +
+
+ 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 + diff --git a/index.js b/index.js new file mode 100644 index 0000000..e69de29 diff --git a/styles.css b/styles.css index 997c895..e72ecc2 100644 --- a/styles.css +++ b/styles.css @@ -6,3 +6,26 @@ body { min-width: 300px; margin: 0; } + +.Block{ + width:100%; + display:flex; + flex-wrap:wrap; + border: solid black 2px; +} +.Block__Header{ + display:flex; + justify-content: space-around; + align-items: center; + width:100%; +} +.Block--Body{ + width:49.7%; +} + +.Block__Dropdown{ + border: solid black 2px; + padding: 2px; + text-decoration: none; + color: black; +} From 5dd9100e0ac0c33a76747fea4b6805275b276d70 Mon Sep 17 00:00:00 2001 From: jaivonmassena Date: Wed, 28 Mar 2018 17:30:56 -0400 Subject: [PATCH 2/4] dropdown button puts brings out basic menu --- index.html | 9 ++++++++- index.js | 9 +++++++++ styles.css | 6 +++++- 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a9fc1b0..06a606a 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,14 @@
- Dropdown +
+ Dropdown +
+ Lamba + Google + MDN +
+

Header

diff --git a/index.js b/index.js index e69de29..43e8fbe 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,9 @@ +const DropdownB = document.querySelector('.Dropdown--btn'); +const DropdownC = document.querySelector('.Dropdown--content'); + + const showContent = () =>{ + DropdownC.style.display = 'flex'; + + }; + +DropdownB.addEventListener('click', showContent); diff --git a/styles.css b/styles.css index e72ecc2..3152470 100644 --- a/styles.css +++ b/styles.css @@ -23,9 +23,13 @@ body { width:49.7%; } -.Block__Dropdown{ +.Dropdown--btn{ border: solid black 2px; padding: 2px; text-decoration: none; color: black; } + +.Dropdown--content{ + display: none; +} From 1a93f2b4176a7ba93eddf3607508e046d4f83ec5 Mon Sep 17 00:00:00 2001 From: jaivonmassena Date: Wed, 28 Mar 2018 18:01:42 -0400 Subject: [PATCH 3/4] button now toggles and working on fixing the look to match the wireframe --- index.html | 2 +- index.js | 14 ++++++++++---- styles.css | 12 +++++++++++- 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 06a606a..9a94975 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@
- Dropdown +
Dropdown
Lamba Google diff --git a/index.js b/index.js index 43e8fbe..4a15bd8 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,15 @@ const DropdownB = document.querySelector('.Dropdown--btn'); -const DropdownC = document.querySelector('.Dropdown--content'); +const DropC = document.querySelector('.Dropdown--content'); - const showContent = () =>{ - DropdownC.style.display = 'flex'; - }; + +const showContent = (event) =>{ + + if (DropC.style.display === 'none') { + DropC.style.display = 'flex'; + } else { + DropC.style.display = 'none'; + } +}; DropdownB.addEventListener('click', showContent); diff --git a/styles.css b/styles.css index 3152470..d07bd09 100644 --- a/styles.css +++ b/styles.css @@ -14,7 +14,6 @@ body { border: solid black 2px; } .Block__Header{ - display:flex; justify-content: space-around; align-items: center; width:100%; @@ -28,8 +27,19 @@ body { padding: 2px; text-decoration: none; color: black; + cursor: pointer; } .Dropdown--content{ + margin-top: 1px; display: none; + flex-direction: column; + border: solid + z-index: 2; + border: solid black 2px; +} + +.Dropdown--link{ + text-decoration: none; + color: inherit; } From d7370b7ef58bd790894d35498644bd46def51ac6 Mon Sep 17 00:00:00 2001 From: jaivonmassena Date: Wed, 28 Mar 2018 18:44:20 -0400 Subject: [PATCH 4/4] improvement on styling, dropdown menu is now overlapping --- index.html | 10 +++++----- index.js | 2 +- styles.css | 26 +++++++++++++++++++++++--- 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 9a94975..5521320 100644 --- a/index.html +++ b/index.html @@ -11,22 +11,22 @@
Dropdown
- Lamba - Google - MDN + Lamba + Google + MDN

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.

diff --git a/index.js b/index.js index 4a15bd8..77b6cb8 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,7 @@ const DropC = document.querySelector('.Dropdown--content'); -const showContent = (event) =>{ +const showContent = () =>{ if (DropC.style.display === 'none') { DropC.style.display = 'flex'; diff --git a/styles.css b/styles.css index d07bd09..3e40893 100644 --- a/styles.css +++ b/styles.css @@ -12,31 +12,51 @@ body { display:flex; flex-wrap:wrap; border: solid black 2px; + } .Block__Header{ - justify-content: space-around; - align-items: center; + display:flex; width:100%; + align-items: center; + text-align: center; + } .Block--Body{ width:49.7%; } +.Block__headerHeadline{ + display: flex; + align-items: center; + margin-left: 40%; +} + +.Block__Dropdown{ + margin-left: 30px; +} .Dropdown--btn{ border: solid black 2px; padding: 2px; text-decoration: none; color: black; cursor: pointer; + width: 100px; + height: 20px; + text-align: center; + padding-top:5px; } .Dropdown--content{ + margin-top: 1px; display: none; flex-direction: column; border: solid - z-index: 2; + z-index: 1; border: solid black 2px; + position: absolute; + background: white; + width: 100px; } .Dropdown--link{