diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..287ea56 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,4 @@ +.Box { + border: 2px solid black; + padding: 0; +} \ No newline at end of file diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css new file mode 100644 index 0000000..62f6969 --- /dev/null +++ b/components/Dropdown/Dropdown.css @@ -0,0 +1,23 @@ +.Box__headDropTitle { + padding: 10px; + } + + .Box__headDropdown { + margin-left: 20px; + position: absolute; + } + + .Box__headDropUl { + display: none; + } + + .Box__headDropA { + display: block; + text-align: center; + padding: 18px; + } + + .Box__headDropdown--expanded { + position: absolute; + background-color: white; + } \ No newline at end of file diff --git a/components/Header/Header.css b/components/Header/Header.css new file mode 100644 index 0000000..e493a4c --- /dev/null +++ b/components/Header/Header.css @@ -0,0 +1,9 @@ +.Box__header { + text-align: center; + display: flex; + align-items: center; +} + +.Box__headTitle { + width: 100%; +} diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..35470ad 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,7 @@ +.Box__placeholder { + display: flex; +} + +.Box__section { + padding: 10px; +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..8a25cef 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,47 @@ 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..c8ca2be --- /dev/null +++ b/index.js @@ -0,0 +1,17 @@ +// Set up references to the DOM +const dropdown = document.querySelector(".Box__headDropdown"); +const dropUl = document.querySelector(".Box__headDropUl"); + +//Make dropdown component class +class Dropdown { + constructor(elements, trigger) { + //console.log(elements); + //Expand functionality + trigger.addEventListener('click', () => { + //console.log(elements); + elements.classList.toggle('Box__headDropUl'); + }); + } +} +//Initialized Event Listener +new Dropdown(dropUl, dropdown); \ No newline at end of file diff --git a/styles.css b/styles.css index 997c895..00f7d64 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,7 @@ -@import './components/Section/Section.css'; @import './components/Box/Box.css'; +@import './components/Header/Header.css'; +@import './components/Dropdown/Dropdown.css'; +@import './components/Section/Section.css'; body { box-sizing: border-box;