From 5156d8369cfb6d81074c5a9a42345bdbebb81eba Mon Sep 17 00:00:00 2001 From: Shawn Stewart Date: Wed, 28 Mar 2018 20:23:45 -0500 Subject: [PATCH 1/2] Completion of Components-BEM. --- index.html | 23 ++++++++++++++++ index.js | 8 ++++++ styles.css | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 111 insertions(+) create mode 100644 index.js diff --git a/index.html b/index.html index 39167c5..97f7f4d 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,30 @@ Introduction to the DOM + +
+
+

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/index.js b/index.js new file mode 100644 index 0000000..027c3f7 --- /dev/null +++ b/index.js @@ -0,0 +1,8 @@ +const dropdown = document.querySelector('.Dropdown'); +const list = document.querySelector('.Dropdown__list'); + +function toggleList() { + list.classList.toggle('Dropdown__list--show'); +} + +dropdown.addEventListener('click', toggleList); \ No newline at end of file diff --git a/styles.css b/styles.css index 997c895..79409cb 100644 --- a/styles.css +++ b/styles.css @@ -6,3 +6,83 @@ body { min-width: 300px; margin: 0; } + +.Header { + border: 4px solid black; + text-align: center; +} + +.Header__h1 { + font-size: 40px; +} + +.Dropdown { + position: absolute; + top: 20px; + left: 50px; +} + +.Dropdown__text { + padding: 10px; 20px; + border: 3px solid black; +} + +.Dropdown__list { + display: none; +} + +.Dropdown__list--show { + display: flex; + flex-direction: column; + border: 3px solid black; + background-color: white; + padding: 10px; +} + +.Dropdown__item { + padding: 7px 0; +} + +.Section { + display: flex; + border: 4px solid black; + border-top: 0; +} + +.Box { + padding: 0 20px; +} + +.Box:first-child { + border-right: 4px solid black; +} + +@media (max-width: 800px) { + .Section { + flex-direction: column; + } + + .Box:first-child { + border-right: 0; + border-bottom: 4px solid black; + } +} + +@media (max-width: 450px) { + .Header { + display: flex; + justify-content: center; + align-items: center; + } + + .Dropdown { + position: relative; + top: 0; + left: 0; + margin-right: 10px; + } + + .Header__h1 { + margin-left: 10px; + } +} \ No newline at end of file From 170d138e0863fbc535fddb23cf80404fa5c2060e Mon Sep 17 00:00:00 2001 From: Shawn Stewart Date: Thu, 29 Mar 2018 16:53:32 -0500 Subject: [PATCH 2/2] Completion of BEM --- index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.js b/index.js index 027c3f7..6e95476 100644 --- a/index.js +++ b/index.js @@ -2,7 +2,9 @@ const dropdown = document.querySelector('.Dropdown'); const list = document.querySelector('.Dropdown__list'); function toggleList() { + console.log(list.classList); list.classList.toggle('Dropdown__list--show'); + console.log(list.classList); } dropdown.addEventListener('click', toggleList); \ No newline at end of file