From a86abeff4ba5b3579bfdc12569378ea2e82832b3 Mon Sep 17 00:00:00 2001 From: mgchmiel Date: Wed, 28 Mar 2018 15:58:13 -0400 Subject: [PATCH 1/4] WIP --- components/Box/Box.css | 5 +++++ components/Dropdown/Dropdown.css | 7 +++++++ components/Dropdown/Dropdown.js | 0 components/Section/Section.css | 22 ++++++++++++++++++++++ index.html | 28 ++++++++++++++++++++++++++++ styles.css | 1 + 6 files changed, 63 insertions(+) create mode 100644 components/Dropdown/Dropdown.css create mode 100644 components/Dropdown/Dropdown.js diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..8558821 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,5 @@ + +.Box__Header { + font-weight: bold; + padding: 10px 0; +} \ No newline at end of file diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css new file mode 100644 index 0000000..15093ed --- /dev/null +++ b/components/Dropdown/Dropdown.css @@ -0,0 +1,7 @@ +.Dropdown--List { + display: flex; +} +.Dropdown--List a{ + flex-direction: column; + align-items: center; +} \ 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 e69de29..e279cf2 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,22 @@ +.Section { + box-sizing: border-box; + display: inline-block; + width: 100%; + margin: 0; + padding: 15px; + } + + .Section__Header { + text-align: center; + font-weight: bold; + font-size: 25px; + } + + .Section__Bordered { + border: 1.5px solid black; + } + + .Section__Half { + display: inline-block; + width: 49%; + } \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..52f4b93 100644 --- a/index.html +++ b/index.html @@ -5,5 +5,33 @@ + +
+
+
DropDown
+
+ 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 diff --git a/styles.css b/styles.css index 997c895..e1989f4 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 8cb7e64afe6982b4669db658c3487e0b531f2bfc Mon Sep 17 00:00:00 2001 From: mgchmiel Date: Wed, 28 Mar 2018 16:01:40 -0400 Subject: [PATCH 2/4] WIP --- components/Dropdown/Dropdown.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css index 15093ed..e69de29 100644 --- a/components/Dropdown/Dropdown.css +++ b/components/Dropdown/Dropdown.css @@ -1,7 +0,0 @@ -.Dropdown--List { - display: flex; -} -.Dropdown--List a{ - flex-direction: column; - align-items: center; -} \ No newline at end of file From 2b9a049e820a88daf8b22461fd47f3bf663fbccb Mon Sep 17 00:00:00 2001 From: Iqra Javed Date: Wed, 28 Mar 2018 15:09:10 -0500 Subject: [PATCH 3/4] added some js for dropdown --- components/Dropdown/Dropdown.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index e69de29..c5761db 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -0,0 +1,11 @@ +class Dropdown { + constructor(element) { + this.element = element; + this.element.addEventListener('mousedown', () => { + Dropdown[0].classList.add('DropDown--Box'); + }); + this.element.addEventListener('mouseout', () => { + Dropdown[0].classList.remove('DropDown--Box'); + }); +} +} \ No newline at end of file From 734e5a9db0342cb327a3c8c46c652bbd8cc9aa7b Mon Sep 17 00:00:00 2001 From: "David A. Morales" Date: Wed, 28 Mar 2018 16:48:15 -0400 Subject: [PATCH 4/4] tidying up some html --- index.html | 46 +++++++++++++++++++++------------------------- styles.css | 2 +- 2 files changed, 22 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 52f4b93..1ea4c58 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + Introduction to the DOM @@ -7,31 +7,27 @@
-
-
DropDown
-
- 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. +
+
Dropdown
+
+ 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.
-
-
-
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 diff --git a/styles.css b/styles.css index e1989f4..33c9c4e 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,6 @@ @import './components/Section/Section.css'; @import './components/Box/Box.css'; -@import '.components/Dropdown/Dropdown.css'; +@import './components/Dropdown/Dropdown.css'; body { box-sizing: border-box;