diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..2cff000 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,48 @@ +.Box { + display: flex; + border: 2px solid black; + flex-direction: row; + +} + +.Box__Header { + margin-left: auto; + margin-right: auto; +} + +.Box__Dropdown { + border: 2px solid black; + display: inline-block; + font-size: 18px; +} + +.Box__DropdownContent { + display:none; + background-color: white; + position: absolute; + min-width: 100%; + margin-top: 80px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +.Box__DropdownContent a { + display:flex; + text-decoration: none; + color: black; + margin: 10px; + padding: 12px 15px; + justify-content: flex-start; + flex-direction: column; + text-align: left; +} + +a:hover { + background-color: gray; + color: white; +} + +/* Show the dropdown menu */ +.show { + display: block; +} \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..c590096 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,4 @@ +.Box__Section { + border: 2px solid black; + padding: 20px; +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..6e181b9 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,46 @@ - + Introduction to the DOM + + +
+ + +
+ 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 diff --git a/index.js b/index.js new file mode 100644 index 0000000..c6000ec --- /dev/null +++ b/index.js @@ -0,0 +1,21 @@ +// access dropDown button +let dropDown = document.querySelector('.Box__DropdownContent'); +let dropButton = document.querySelector('.Box__DropdownBtn'); +// console.log(dropDown); +// console.log(childDropdown); + +// Dropdown constructor +class Dropdown { + constructor(el) { + this.element = el; + this.element.addEventListener('click', this.showContent); + } + // Dropdown prototype + showContent() { + dropDown.classList.toggle("show"); + } +} +// create an Dropdown instance +let childDropdown = new Dropdown(dropDown); + +dropButton.addEventListener('click', childDropdown.showContent); \ No newline at end of file diff --git a/styles.css b/styles.css index 997c895..0476a8e 100644 --- a/styles.css +++ b/styles.css @@ -5,4 +5,4 @@ body { box-sizing: border-box; min-width: 300px; margin: 0; -} +} \ No newline at end of file