diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..d652e20 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,3 @@ +.Box { + border: 1px solid black; +} \ No newline at end of file diff --git a/components/Header/Header.css b/components/Header/Header.css new file mode 100644 index 0000000..8106a2a --- /dev/null +++ b/components/Header/Header.css @@ -0,0 +1,38 @@ +.Box__header { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.Box__headDropdown { + position: absolute; + left: 40px; + width: 90px; +} + +.Box__headDropTitle { + display: flex; + justify-content: center; + border-width: 2px; +} + +.Box__headDropdown--expanded { + position: absolute; + width: 100%; +} + +.Box__headDropUl { + display: flex; + flex-flow: column; + padding-left: 0; + list-style: none; + background: white; + border-width: 2px; +} + +.Box__headDropA { + padding: 5px 0 5px; + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..a9281a7 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,5 @@ +.Box__section { + display: inline-block; + width: 50%; + padding: 10px; +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..011a068 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,49 @@ Introduction to the DOM - + + +
+
+
+
Dropdown
+ +
+

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..57cbf7a --- /dev/null +++ b/index.js @@ -0,0 +1,15 @@ +const headDropdown = document.querySelector('.Box__headDropdown'); +const headDropdownExpanded = document.querySelector('.Box__headDropdown--expanded'); + +// Create class for quick set up of drop down functionality +class Dropdown { + // Take in subject of the event and it's trigger + constructor(subject, trigger) { + // Listen for triggering event + trigger.addEventListener('click', () => { + subject.classList.toggle('hidden'); // Hide/Show element + }) + } +} + +new Dropdown(headDropdownExpanded, headDropdown); \ No newline at end of file diff --git a/styles.css b/styles.css index 997c895..8422b7c 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,17 @@ -@import './components/Section/Section.css'; @import './components/Box/Box.css'; +@import './components/Header/Header.css'; +@import './components/Section/Section.css'; body { box-sizing: border-box; min-width: 300px; - margin: 0; + margin: 10px; } + +* { + box-sizing: border-box; +} + +.hidden { + display: none; +} \ No newline at end of file