diff --git a/index.html b/index.html index 39167c5..4d47b64 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,37 @@ - + Introduction to the DOM + +
+
+
+

Dropdown

+
+
+
  • Lambda
    • +
  • Google
    • +
  • MDN
    • +
    +
    +

    + Header +

    +
    + +
    +
    +

    Placeholder

    +

    Some text here

    +
    +
    +

    Placeholder

    +

    Some text here

    +
    +
    + -     \ No newline at end of file + diff --git a/script.js b/script.js new file mode 100644 index 0000000..30c10d1 --- /dev/null +++ b/script.js @@ -0,0 +1,30 @@ +let dropdowns = document.querySelector('.Dropdown'); + +class DropdownMenu { + constructor(eb) { + this.element = eb; + this.button = this.element.querySelector('.Dropdown__button'); + this.button.addEventListener('click', () => { + this.dropdownAction(); + }); + } + dropdownAction() { + this.element.classList.toggle('Dropdown--active'); + } +} + + + +dropdowns = new DropdownMenu(dropdowns); + + +// dropdowns = Array.from(dropdowns).map((dropdown) => {console.log(dropdowns); +// }) + + +//Testing +// dropdowns = Array.from(dropdowns).map((dropdown) => new DropdownMenu(dropdown)); + +// dropdowns = Array.from(dropdowns).map( (dropdown) => { +// console.log(dropdown); +// }) diff --git a/styles.css b/styles.css index 997c895..945af39 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,52 @@ @import './components/Section/Section.css'; @import './components/Box/Box.css'; + body { box-sizing: border-box; min-width: 300px; margin: 0; + max-width: 1024px; +} + +header { + display:flex; + width: 100%; + border: 2px solid black; +} + +.Dropdown { + border: 2px solid black; + align-self: flex-start; +} + +header .h1 { + font-size: 30px; + margin-left: 1000px; +} + +header .Dropdown__content { + position: absolute; + margin-top:60px; + background-color: grey; + display: none; +} + +.Dropdown--active .Dropdown__content { + display:block; +} + +.container { + display:flex; + justify-content: space-evenly; + border: 2px black solid; + +} + +.container .box { + width: 50%; + border: 2px black solid; + display:flex; + flex-direction: column; + padding: 10px 10px; }