From 7bc8e46b7875006f4c6ae7bee7eff1c44ed8ffdd Mon Sep 17 00:00:00 2001 From: BUDDHAPLEX Date: Wed, 28 Mar 2018 16:24:45 -0400 Subject: [PATCH 1/4] mobile version of page done, save for dropdown. --- components/Box/Box.css | 8 ++++++++ index.html | 30 ++++++++++++++++++++++-------- index.js | 6 ++++++ 3 files changed, 36 insertions(+), 8 deletions(-) create mode 100644 index.js diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..9632f65 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,8 @@ + +.Box { + border: 2px solid black; + padding: 10px; + margin: 0 10px; + display: flex; + align-items: center; + } \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..3d520d5 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,23 @@ - - - Introduction to the DOM - - - - - \ No newline at end of file + + + Components-BEM + + + + + +
+ +

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..3953a45 --- /dev/null +++ b/index.js @@ -0,0 +1,6 @@ +class Block_nav { + constructor(element){ + this.element = element; + + } +} \ No newline at end of file From 2465b7b614beafe479a1bcb01b33690ce6f1f863 Mon Sep 17 00:00:00 2001 From: BUDDHAPLEX Date: Wed, 28 Mar 2018 18:03:25 -0400 Subject: [PATCH 2/4] javascript code in --- components/Box/Box.css | 3 +- components/Section/Section.css | 5 +++ index.html | 66 +++++++++++++++++++++++--------- index.js | 19 +++++++-- styles.css | 70 ++++++++++++++++++++++++++++++++++ 5 files changed, 141 insertions(+), 22 deletions(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index 9632f65..38a5138 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -1,8 +1,7 @@ - .Box { border: 2px solid black; padding: 10px; margin: 0 10px; display: flex; - align-items: center; + flex-direction: column; } \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..5adc197 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,5 @@ +.Section { + box-sizing: border-box; + display: flex; + /* flex-wrap: wrap; */ + } \ No newline at end of file diff --git a/index.html b/index.html index 3d520d5..031ee73 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,55 @@ - - Components-BEM - - - + + + Components-BEM + + + - -
- -

Header

+Using ES6 class constructors, complete the `Dropdown` component functionality. --> + + +
+
+
+ +
+ Lambda + Google + MDN + +
+
-
-

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.

+

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 index 3953a45..45df8a6 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,19 @@ -class Block_nav { - constructor(element){ - this.element = element; +function myFunction() { + document.getElementById("myDropdown").classList.toggle("show"); +} + + +window.onclick = function(event) { + if (!event.target.matches('.dropbtn')) { + + var dropdowns = document.getElementsByClassName("dropdown-content"); + var i; + for (i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains('show')) { + openDropdown.classList.remove('show'); + } } + } } \ No newline at end of file diff --git a/styles.css b/styles.css index 997c895..bc6995d 100644 --- a/styles.css +++ b/styles.css @@ -6,3 +6,73 @@ body { min-width: 300px; margin: 0; } + +/* Navbar container */ +.navbar { + overflow: hidden; + background-color: #333; + font-family: Arial; + } + + /* Links inside the navbar */ + .navbar a { + float: left; + font-size: 16px; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; + } + + /* The dropdown container */ + .dropdown { + float: left; + overflow: hidden; + } + + /* Dropdown button */ + .dropdown .dropbtn { + font-size: 16px; + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: white; + font-family: inherit; /* Important for vertical align on mobile phones */ + margin: 0; /* Important for vertical align on mobile phones */ + } + + /* Add a red background color to navbar links on hover */ + .navbar a:hover, .dropdown:hover .dropbtn { + background-color: #a0001e; + } + + /* Dropdown content (hidden by default) */ + .dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + } + + /* Links inside the dropdown */ + .dropdown-content a { + float: none; + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; + } + + /* Add a grey background color to dropdown links on hover */ + .dropdown-content a:hover { + background-color: #ddd; + } + + /* Show the dropdown menu on hover */ + .dropdown:hover .dropdown-content { + display: block; + } \ No newline at end of file From e930a1fba25c05fbcb0e992cdbc6f52cffb6860e Mon Sep 17 00:00:00 2001 From: BUDDHAPLEX Date: Wed, 28 Mar 2018 18:52:08 -0400 Subject: [PATCH 3/4] finished js and most of mobile view. --- components/Box/Box.css | 2 -- components/Section/Section.css | 2 +- index.html | 23 ++++++++++------------- index.js | 26 ++++++++++++++++---------- 4 files changed, 27 insertions(+), 26 deletions(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index 38a5138..3bba61f 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -2,6 +2,4 @@ border: 2px solid black; padding: 10px; margin: 0 10px; - display: flex; - flex-direction: column; } \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index 5adc197..b8ed360 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -1,5 +1,5 @@ .Section { box-sizing: border-box; display: flex; - /* flex-wrap: wrap; */ + flex-flow: row wrap; } \ No newline at end of file diff --git a/index.html b/index.html index 031ee73..092988b 100644 --- a/index.html +++ b/index.html @@ -10,21 +10,18 @@ Using ES6 class constructors, complete the `Dropdown` component functionality. --> -
-
-
- -
- Lambda - Google - MDN - -
+
+
+ +
+ Lambda + Google + MDN
-

Header

+
+

Header

+
diff --git a/index.js b/index.js index 45df8a6..14f8052 100644 --- a/index.js +++ b/index.js @@ -1,19 +1,25 @@ +// class Box { +// constructor(element) { -function myFunction() { - document.getElementById("myDropdown").classList.toggle("show"); +// } + +// } + +function Toggle() { + document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { - if (!event.target.matches('.dropbtn')) { +if (!event.target.matches('.dropbtn')) { - var dropdowns = document.getElementsByClassName("dropdown-content"); - var i; - for (i = 0; i < dropdowns.length; i++) { - var openDropdown = dropdowns[i]; - if (openDropdown.classList.contains('show')) { - openDropdown.classList.remove('show'); - } + var dropdowns = document.getElementsByClassName("dropdown-content"); + var i; + for (i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains('show')) { + openDropdown.classList.remove('show'); } } +} } \ No newline at end of file From c5846bb63f44e73aa8baf1eb4f3424db89768a86 Mon Sep 17 00:00:00 2001 From: BUDDHAPLEX Date: Thu, 29 Mar 2018 14:49:25 -0400 Subject: [PATCH 4/4] refactored code --- components/Section/Section.css | 8 +- index.js | 35 +++--- styles.css | 189 +++++++++++++++++++++------------ 3 files changed, 138 insertions(+), 94 deletions(-) diff --git a/components/Section/Section.css b/components/Section/Section.css index b8ed360..0821c6d 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -1,5 +1,3 @@ -.Section { - box-sizing: border-box; - display: flex; - flex-flow: row wrap; - } \ No newline at end of file +section { + border: 1px solid black; +} \ No newline at end of file diff --git a/index.js b/index.js index 14f8052..cc7feed 100644 --- a/index.js +++ b/index.js @@ -1,25 +1,14 @@ -// class Box { -// constructor(element) { - -// } - -// } - -function Toggle() { - document.getElementById("myDropdown").classList.toggle("show"); -} - - -window.onclick = function(event) { -if (!event.target.matches('.dropbtn')) { - - var dropdowns = document.getElementsByClassName("dropdown-content"); - var i; - for (i = 0; i < dropdowns.length; i++) { - var openDropdown = dropdowns[i]; - if (openDropdown.classList.contains('show')) { - openDropdown.classList.remove('show'); - } +class Dropdown { + constructor() { + this.dropDownButton = document.querySelector('.dropdown_button'); + this.dropDownItems = document.querySelector('.dropdown_menu'); + console.log(this.dropdownMenu); + + this.dropDownButton.addEventListener('click', this.toggleMenu.bind(this)); + } + toggleMenu(event) { + this.dropdownItems.classList.toggle('dropdown_menu--show'); } } -} \ No newline at end of file + +window.onload = () => new Dropdown(); diff --git a/styles.css b/styles.css index bc6995d..6631d6a 100644 --- a/styles.css +++ b/styles.css @@ -7,72 +7,129 @@ body { margin: 0; } -/* Navbar container */ -.navbar { - overflow: hidden; - background-color: #333; - font-family: Arial; - } - - /* Links inside the navbar */ - .navbar a { - float: left; - font-size: 16px; - color: white; - text-align: center; - padding: 14px 16px; - text-decoration: none; - } - - /* The dropdown container */ - .dropdown { - float: left; - overflow: hidden; - } - - /* Dropdown button */ - .dropdown .dropbtn { - font-size: 16px; - border: none; - outline: none; - color: white; - padding: 14px 16px; +body { + min-width: 300px; + margin: 0; +} + +section { + border: 1px solid black; +} + +.dropdown { + position: absolute; + left: 10px; + top: 10px; +} + +.dropdown__button { background-color: white; - font-family: inherit; /* Important for vertical align on mobile phones */ - margin: 0; /* Important for vertical align on mobile phones */ - } - - /* Add a red background color to navbar links on hover */ - .navbar a:hover, .dropdown:hover .dropbtn { - background-color: #a0001e; - } - - /* Dropdown content (hidden by default) */ - .dropdown-content { + padding: 10px 0; + width: 200px; + font-size: 16px; + border: 1px solid black; + background-color: white; + color: black; + padding: 16px; + font-size: 16px; + border: 2px solid black; + cursor: pointer; +} + +.dropdown__menu { display: none; - position: absolute; - background-color: #f9f9f9; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; - } - - /* Links inside the dropdown */ - .dropdown-content a { - float: none; - color: black; - padding: 12px 16px; + margin-top: 3px; + background-color: white; + flex-direction: column; + width: 198px; + border: 1px solid black; +} + +.dropdown__menu--show { + display: flex; +} + +.dropdown__menu a { text-decoration: none; - display: block; - text-align: left; - } - - /* Add a grey background color to dropdown links on hover */ - .dropdown-content a:hover { - background-color: #ddd; - } - - /* Show the dropdown menu on hover */ - .dropdown:hover .dropdown-content { - display: block; - } \ No newline at end of file + color: black; + padding: 10px 0; + text-align: center; +} + +.dropdown__menu a:hover { + background-color: black; + color: white; +} + +.header { + display: flex; + align-items: center; + justify-content: center; +} + +.content { + display: flex; + flex-direction: row; +} + +.content__block { + width: 50%; + border: 1px solid black; + padding: 10px; +} + +@media(max-width: 400px) { + .content { + flex-direction: column; + } + .content__block { + width: 100%; + } + .header { + flex-direction: column-reverse; + align-items: center; + justify-content: center; + } + .dropdown { + position: inherit; + margin-bottom: 10px; + } + .dropdown__menu { + position: absolute; + } +} +/* Header { +} */ +/* Dropdown Button */ + + +/* Dropdown button on hover & focus */ +.dropbtn:hover, .dropbtn:focus { + background-color: #2980B9; +} + + + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover {background-color: #ddd} + +/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ +.show {display:block;} \ No newline at end of file