From 7b062e8ccd966ae659fdc50af573513b0e5e1cb6 Mon Sep 17 00:00:00 2001 From: odax Date: Wed, 28 Mar 2018 18:52:14 -0400 Subject: [PATCH 1/3] completed working on html, started working on javascript, dropdown is still nonworking --- index.html | 30 ++++++++++++++++++++++++++++-- script.js | 15 +++++++++++++++ styles.css | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 89 insertions(+), 2 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index 39167c5..bb60ead 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,35 @@ - + Introduction to the DOM + +
+
+

Dropdown

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

    + Header +

    +
    + +
    +
    +

    Placeholder

    +

    Some text here

    +
    +
    +

    Placeholder

    +

    Some text here

    +
    +
    + -     \ No newline at end of file + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..18b7d81 --- /dev/null +++ b/script.js @@ -0,0 +1,15 @@ +let dropdownButton = document.querySelector('.dropdown'); +let invisibleDropdown = document.querySelector('.dropdownInvisible'); + + +class dropdownMenu { + constructor(eb) { + this.element = eb; + this.element.addEventListener('click', () => {this.dropdownAction()}) + } + dropdownAction() { + invisibleDropdown.classList.toggle('.dropdownInvisible'); + } +} + +dropdownButton = new dropdownMenu(dropdownButton); \ No newline at end of file diff --git a/styles.css b/styles.css index 997c895..8c6952f 100644 --- a/styles.css +++ b/styles.css @@ -5,4 +5,50 @@ body { box-sizing: border-box; min-width: 300px; margin: 0; + max-width: 1024px; +} + +header { + display:flex; + width: 100%; + border: 2px solid black; +} + +header .dropdown { + border: 2px solid black; + align-self: flex-start; +} + +header .h1 { + font-size: 30px; + margin-left: 1000px; +} + +header .dropdownFormat { + position: absolute; + margin-top:60px; + background-color: grey; +} + +header .dropdownInvisible { + display:none; +} + +.dropdownInvisibleVisible { + display:true; +} + +.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; } From 1d67a06ff10ef7640f4e3c8a5eddd368ecee1b4c Mon Sep 17 00:00:00 2001 From: odax Date: Thu, 29 Mar 2018 11:13:55 -0400 Subject: [PATCH 2/3] worked on setting up javascript, could not get it to work --- index.html | 20 +++++++++++--------- script.js | 28 ++++++++++++++++++++-------- styles.css | 14 ++++++-------- 3 files changed, 37 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index bb60ead..675d952 100644 --- a/index.html +++ b/index.html @@ -7,17 +7,19 @@
    -
    -

    Dropdown

    -
    -
    +
    +
    +

    Dropdown

    +
    +
  • Lambda
  • Google
  • MDN
    • -
    -

    - Header -

    +
    +
    +

    + Header +

    @@ -32,4 +34,4 @@

    Placeholder

    - \ No newline at end of file + diff --git a/script.js b/script.js index 18b7d81..b85d241 100644 --- a/script.js +++ b/script.js @@ -1,15 +1,27 @@ -let dropdownButton = document.querySelector('.dropdown'); -let invisibleDropdown = document.querySelector('.dropdownInvisible'); - - -class dropdownMenu { +class DropdownMenu { constructor(eb) { this.element = eb; - this.element.addEventListener('click', () => {this.dropdownAction()}) + this.button = this.element.querySelector('.Dropdown__button'); + this.button.addEventListener('click', () => { + this.dropdownAction(); + }); } dropdownAction() { - invisibleDropdown.classList.toggle('.dropdownInvisible'); + this.element.classList.toggle('Dropdown--active'); } } -dropdownButton = new dropdownMenu(dropdownButton); \ No newline at end of file +let dropdowns = document.querySelectorAll('.Dropdown'); + + + +//Testing +// dropdowns = Array.from(dropdowns).map((dropdown) => new DropdownMenu(dropdown)); + +//middle is best +// dropdowns = Array.from(dropdowns).map((dropdown) => {console.log(dropdowns); +// }) + +// dropdowns = Array.from(dropdowns).map( (dropdown) => { +// console.log(dropdown); +// }) diff --git a/styles.css b/styles.css index 8c6952f..cd3b0c1 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,7 @@ @import './components/Section/Section.css'; @import './components/Box/Box.css'; + body { box-sizing: border-box; min-width: 300px; @@ -14,7 +15,7 @@ header { border: 2px solid black; } -header .dropdown { +header .Dropdown { border: 2px solid black; align-self: flex-start; } @@ -24,18 +25,15 @@ header .h1 { margin-left: 1000px; } -header .dropdownFormat { +header .Dropdown__content { position: absolute; margin-top:60px; background-color: grey; + display: none; } -header .dropdownInvisible { - display:none; -} - -.dropdownInvisibleVisible { - display:true; +.Dropdown--active .Dropdown__content { + display:block; } .container { From ec40650ee452733d68f46b8e8690053783727dfa Mon Sep 17 00:00:00 2001 From: odax Date: Thu, 29 Mar 2018 22:25:31 -0400 Subject: [PATCH 3/3] completed project, used an incorrect script link so-to-speak --- index.html | 2 +- script.js | 11 +++++++---- styles.css | 2 +- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 675d952..4d47b64 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Introduction to the DOM - +
    diff --git a/script.js b/script.js index b85d241..30c10d1 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,5 @@ +let dropdowns = document.querySelector('.Dropdown'); + class DropdownMenu { constructor(eb) { this.element = eb; @@ -11,17 +13,18 @@ class DropdownMenu { } } -let dropdowns = document.querySelectorAll('.Dropdown'); +dropdowns = new DropdownMenu(dropdowns); -//Testing -// dropdowns = Array.from(dropdowns).map((dropdown) => new DropdownMenu(dropdown)); -//middle is best // 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 cd3b0c1..945af39 100644 --- a/styles.css +++ b/styles.css @@ -15,7 +15,7 @@ header { border: 2px solid black; } -header .Dropdown { +.Dropdown { border: 2px solid black; align-self: flex-start; }