From 53589f2a430dcec9fea8eeae79c0615fe7c153c9 Mon Sep 17 00:00:00 2001 From: Iqra Javed Date: Wed, 28 Mar 2018 16:22:32 -0500 Subject: [PATCH 1/8] created dropdown.css, started creating markup to match Desktop.png --- components/Dropdown/Dropdown.css | 0 index.html | 7 +++++++ styles.css | 1 + 3 files changed, 8 insertions(+) create mode 100644 components/Dropdown/Dropdown.css diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index 39167c5..a1b4c50 100644 --- a/index.html +++ b/index.html @@ -5,5 +5,12 @@ +
+ +

Header

+
+
+ +
\ No newline at end of file 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 7257dfb3949a8effff027245d49433e518309b3c Mon Sep 17 00:00:00 2001 From: Iqra Javed Date: Wed, 28 Mar 2018 17:22:48 -0500 Subject: [PATCH 2/8] finished basic structure and added some styling --- components/Box/Box.css | 3 +++ components/Dropdown/Dropdown.css | 3 +++ components/Section/Section.css | 21 ++++++++++++++++++++ index.html | 34 ++++++++++++++++++++++++++------ 4 files changed, 55 insertions(+), 6 deletions(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..f743e96 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,3 @@ +.Box{ + padding: 20px; +} \ No newline at end of file diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css index e69de29..5661511 100644 --- a/components/Dropdown/Dropdown.css +++ b/components/Dropdown/Dropdown.css @@ -0,0 +1,3 @@ +.Dropdown { + display: inline-block; +} \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..c77b5e2 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,21 @@ + +.Section { + max-width: 1100px; + width: 100%; + margin: 0 auto; + border: 2px solid black; +} +.Section__header { + display: inline-block; + margin-left: 340px; +} + +.Section--half { + width: 49%; + display: inline-block; + border: 0px; +} + +.Section--border { + border-right: 2px solid black; +} diff --git a/index.html b/index.html index a1b4c50..9db1390 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,38 @@ - + Introduction to the DOM
- -

Header

-
+
+ +
+ 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 + \ No newline at end of file From 793a20a9608db4e5c5717da00a7ad33f19a701d2 Mon Sep 17 00:00:00 2001 From: Iqra Javed Date: Wed, 28 Mar 2018 17:33:58 -0500 Subject: [PATCH 3/8] styled button and created Dropdown.js --- components/Dropdown/Dropdown.css | 16 ++++++++++++++++ components/Dropdown/Dropdown.js | 0 components/Section/Section.css | 2 +- index.html | 11 ++++++----- 4 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 components/Dropdown/Dropdown.js diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css index 5661511..0168d50 100644 --- a/components/Dropdown/Dropdown.css +++ b/components/Dropdown/Dropdown.css @@ -1,3 +1,19 @@ .Dropdown { display: inline-block; + margin-left: 20px; +} + +.Dropdown__btn { + border: 2px solid black; + height: 40px; +} + +.Dropdown__list { + display: flex; + flex-direction: column; + display: none; +} + +.Dropdown--active { + display: flex; } \ No newline at end of file diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js new file mode 100644 index 0000000..e69de29 diff --git a/components/Section/Section.css b/components/Section/Section.css index c77b5e2..86301de 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -7,7 +7,7 @@ } .Section__header { display: inline-block; - margin-left: 340px; + margin-left: 390px; } .Section--half { diff --git a/index.html b/index.html index 9db1390..1c65754 100644 --- a/index.html +++ b/index.html @@ -3,16 +3,17 @@ Introduction to the DOM +
-
- Lambda - Google - MDN -
+
+ Lambda + Google + MDN +

Header

From b1b9fdaf41140779fe964e32da764e8d8316621f Mon Sep 17 00:00:00 2001 From: Iqra Javed Date: Wed, 28 Mar 2018 17:59:23 -0500 Subject: [PATCH 4/8] added js code for dropdown, it's functional but does not yet match the provided activeDropdown.png --- components/Dropdown/Dropdown.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index e69de29..c9c13c3 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -0,0 +1,6 @@ +const btn = document.querySelector('.Dropdown__btn'); +const dropdown = document.querySelector('.Dropdown__list'); + +btn.addEventListener('click', () => { + dropdown.classList.toggle('Dropdown--active'); +}) \ No newline at end of file From 342822d8645e1eab6be5453a7dfd5da1d4f572b4 Mon Sep 17 00:00:00 2001 From: Iqra Javed Date: Wed, 28 Mar 2018 18:06:48 -0500 Subject: [PATCH 5/8] styled dropdown list --- components/Dropdown/Dropdown.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css index 0168d50..24b1775 100644 --- a/components/Dropdown/Dropdown.css +++ b/components/Dropdown/Dropdown.css @@ -9,11 +9,17 @@ } .Dropdown__list { - display: flex; + /* display: flex; */ flex-direction: column; display: none; + margin-top: 10px; + background: white; + border: 2px solid black; + text-align: center; + justify-content: space-around; } .Dropdown--active { display: flex; + height: 80px; } \ No newline at end of file From 23a78a87c586547bbfb0d8859f7ee2f2be46179b Mon Sep 17 00:00:00 2001 From: Iqra Javed Date: Wed, 28 Mar 2018 18:15:06 -0500 Subject: [PATCH 6/8] added position absolute to .Dropdown__list and that fixed the btn --- components/Dropdown/Dropdown.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css index 24b1775..80a2dab 100644 --- a/components/Dropdown/Dropdown.css +++ b/components/Dropdown/Dropdown.css @@ -17,6 +17,8 @@ border: 2px solid black; text-align: center; justify-content: space-around; + position: absolute; + width: 65px; } .Dropdown--active { From 2e0156f0bdc39a718b45fca5db5774c103124b5e Mon Sep 17 00:00:00 2001 From: Iqra Javed Date: Wed, 28 Mar 2018 19:44:38 -0500 Subject: [PATCH 7/8] refactored code into ES6 class syntax --- components/Dropdown/Dropdown.css | 1 - components/Dropdown/Dropdown.js | 24 +++++++++++++++++++----- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css index 80a2dab..05b46d0 100644 --- a/components/Dropdown/Dropdown.css +++ b/components/Dropdown/Dropdown.css @@ -9,7 +9,6 @@ } .Dropdown__list { - /* display: flex; */ flex-direction: column; display: none; margin-top: 10px; diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c9c13c3..9b6fcb2 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -1,6 +1,20 @@ -const btn = document.querySelector('.Dropdown__btn'); -const dropdown = document.querySelector('.Dropdown__list'); +let btn = document.querySelector('.Dropdown__btn'); +let dropdown = document.querySelector('.Dropdown__list'); -btn.addEventListener('click', () => { - dropdown.classList.toggle('Dropdown--active'); -}) \ No newline at end of file +// btn.addEventListener('click', () => { +// dropdown.classList.toggle('Dropdown--active'); +// }) + +// ES6 Syntax +class Dropdown { + constructor(button, dropdownMenu) { + this.button = button; + this.dropdownMenu = dropdownMenu + this.button.addEventListener('click', () => {this.showDropdown()}) + } + showDropdown() { + this.dropdownMenu.classList.toggle('Dropdown--active'); + } +} + +btn = new Dropdown(btn, dropdown); \ No newline at end of file From 6449936db74915ed0c8c9ddcb15a9bb0fdef1075 Mon Sep 17 00:00:00 2001 From: Iqra Javed Date: Wed, 28 Mar 2018 20:20:17 -0500 Subject: [PATCH 8/8] changed Section__text class to Box__text in markup --- components/Dropdown/Dropdown.js | 3 ++- index.html | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index 9b6fcb2..72b6512 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -1,6 +1,7 @@ let btn = document.querySelector('.Dropdown__btn'); let dropdown = document.querySelector('.Dropdown__list'); + // btn.addEventListener('click', () => { // dropdown.classList.toggle('Dropdown--active'); // }) @@ -17,4 +18,4 @@ class Dropdown { } } -btn = new Dropdown(btn, dropdown); \ No newline at end of file +btn = new Dropdown(btn, dropdown); diff --git a/index.html b/index.html index 1c65754..0cdb69e 100644 --- a/index.html +++ b/index.html @@ -21,14 +21,14 @@

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.