diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..4721f80 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,19 @@ +.Box { + width: 49%; + height: 200px; + border: 2px solid black; + float: left; + margin-right: 0; +} + +.Box--2 { + width: 50%; +} + +.Box__header { + margin: 20px; +} + +.Box__text { + margin: 20px; +} \ No newline at end of file diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css new file mode 100644 index 0000000..424ba68 --- /dev/null +++ b/components/Dropdown/Dropdown.css @@ -0,0 +1,26 @@ + +.Dropdown__button { + margin-top: 30px; + align-items: center; + min-width: 160px; + height: 30px; + border: 3px solid black; + padding-left: 12px; + padding-top: 5px; + padding-right: 0; + position: absolute; + } + +.Dropdown__Menu { + visibility: hidden; + list-style: none; +} + +.Dropdown__Menu li { + border: 1px solid black; + background-color: #F9F9F9; +} + +.show { + visibility: visible; +} \ No newline at end of file diff --git a/components/Dropdown/index.js b/components/Dropdown/index.js new file mode 100644 index 0000000..df70540 --- /dev/null +++ b/components/Dropdown/index.js @@ -0,0 +1,35 @@ +// function myFunction() { +// document.getElementById('myDropdown').classList.toggle('show') +// } +// let button = document.querySelector('.Dropdown__button') +// button.onclick = function(event) { +// let dropdowns = document.getElementById('myDropdown') +// console.log(dropdowns) +// dropdowns.classList.toggle('show') +// } + +//Refactoring my JS to match what Dan did + +class Dropdown { + constructor(element, hideClass) { + this.element = element, + this.clicked = false, + this.child = [...this.element.children].find(child => child.className === hideClass), + this.element.addEventListener('click', () => this.handleClickEvent()) + } + + // display hidden menu + handleClickEvent() { + if (this.clicked && this.child.classList)this.child.classList.remove('display') + else this.child.classList.add('show') + this.toggleDropdown() + } + + // toggle allows the event to turn on/off + toggleDropdown() { + this.clicked = !this.clicked + } +} + +// const must be at the bottom in the 'new Class' format +const dropdown = new Dropdown(document.querySelector('.Dropdown'), 'Dropdown__Menu') diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..c473bcb 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,14 @@ +.Header { + display: flex; + border: 2px solid black; + height: 80px; + justify-content: space-evenly; + flex-direction: row-reverse; +} + +.Header__headline { + margin-right: 45%; + margin-left: 400px; +} + + diff --git a/index.html b/index.html index 39167c5..0157a5b 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,47 @@ - + Introduction to the DOM - + +
+ +

Header

+
+

Dropdown

+ +
+
+
+
+

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 997c895..1e79c0f 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,8 @@ @import './components/Section/Section.css'; +@import './components/Dropdown/Dropdown.css'; @import './components/Box/Box.css'; + body { box-sizing: border-box; min-width: 300px;