From 0cbd2edfb1e3589fa31138fd373a1f23a4d204fa Mon Sep 17 00:00:00 2001 From: Matthias Bakken Date: Wed, 28 Mar 2018 15:55:30 -0700 Subject: [PATCH 1/3] Finish project --for now --- components/Box/Box.css | 49 ++++++++++++++++++++++++++++++++++ components/Section/Section.css | 4 +++ index.html | 41 ++++++++++++++++++++++++++-- index.js | 28 +++++++++++++++++++ styles.css | 2 +- 5 files changed, 121 insertions(+), 3 deletions(-) create mode 100644 index.js diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..720cbcf 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,49 @@ +.Box { + display: flex; + border: 2px solid black; + flex-direction: row; + +} + +.Box__Header { + border: 1px solid red; + margin-left: auto; + margin-right: auto; +} + +.Box__Dropdown { + border: 2px solid black; + display: inline-block; + font-size: 18px; +} + +.Box__DropdownContent { + display:none; + background-color: white; + position: absolute; + min-width: 100%; + margin-top: 80px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +.Box__DropdownContent a { + display:flex; + text-decoration: none; + color: black; + margin: 10px; + padding: 12px 15px; + justify-content: flex-start; + flex-direction: column; + text-align: left; +} + +a:hover { + background-color: gray; + color: white; +} + +/* Show the dropdown menu */ +.show { + display: block; +} \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..c590096 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,4 @@ +.Box__Section { + border: 2px solid black; + padding: 20px; +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..6e181b9 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,46 @@ - + Introduction to the DOM + + +
+ + +
+ Lambda + Google + MDN +
+

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 + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..4888e46 --- /dev/null +++ b/index.js @@ -0,0 +1,28 @@ +// access dropDown button +let dropDown = document.querySelector('.Box__DropdownContent'); +let dropButton = document.querySelector('.Box__DropdownBtn'); +let childDropdown = dropDown.children; +// console.log(dropDown); +// console.log(childDropdown); + +// Dropdown constructor +class Dropdown { + constructor(el) { + this.element = el; + this.element.addEventListener('click', this.showContent) + } + // Dropdown prototype + showContent() { + dropDown.classList.toggle("show"); + } +} + +// make instances of Dropdown +childDropdown = Array.from(childDropdown).map(element => { + return new Dropdown(element); +}) +// console.log(childDropdown); + +for (let i = 0; i < childDropdown.length; i++) { + dropButton.addEventListener('click', childDropdown[i].showContent); +} \ No newline at end of file diff --git a/styles.css b/styles.css index 997c895..0476a8e 100644 --- a/styles.css +++ b/styles.css @@ -5,4 +5,4 @@ body { box-sizing: border-box; min-width: 300px; margin: 0; -} +} \ No newline at end of file From 7033d7b50e3ddb69bea108455fb17b1f61a6d23a Mon Sep 17 00:00:00 2001 From: Matthias Bakken Date: Wed, 28 Mar 2018 16:31:09 -0700 Subject: [PATCH 2/3] refactored index.js --- components/Box/Box.css | 1 - index.js | 14 ++++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index 720cbcf..2cff000 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -6,7 +6,6 @@ } .Box__Header { - border: 1px solid red; margin-left: auto; margin-right: auto; } diff --git a/index.js b/index.js index 4888e46..f6b75b5 100644 --- a/index.js +++ b/index.js @@ -18,11 +18,13 @@ class Dropdown { } // make instances of Dropdown -childDropdown = Array.from(childDropdown).map(element => { - return new Dropdown(element); -}) +// childDropdown = Array.from(childDropdown).map( element => { +// return new Dropdown(element); +// }) + +childDropdown = new Dropdown(dropDown); // console.log(childDropdown); -for (let i = 0; i < childDropdown.length; i++) { - dropButton.addEventListener('click', childDropdown[i].showContent); -} \ No newline at end of file +// for (let i = 0; i < childDropdown.length; i++) { +dropButton.addEventListener('click', childDropdown.showContent); +// } \ No newline at end of file From 77942861fc0e211b7634418d9e4ffdc2d0cce959 Mon Sep 17 00:00:00 2001 From: Matthias Bakken Date: Wed, 28 Mar 2018 16:42:57 -0700 Subject: [PATCH 3/3] cleaned up a index.js --- index.js | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/index.js b/index.js index f6b75b5..c6000ec 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,6 @@ // access dropDown button let dropDown = document.querySelector('.Box__DropdownContent'); let dropButton = document.querySelector('.Box__DropdownBtn'); -let childDropdown = dropDown.children; // console.log(dropDown); // console.log(childDropdown); @@ -9,22 +8,14 @@ let childDropdown = dropDown.children; class Dropdown { constructor(el) { this.element = el; - this.element.addEventListener('click', this.showContent) + this.element.addEventListener('click', this.showContent); } // Dropdown prototype showContent() { dropDown.classList.toggle("show"); } } +// create an Dropdown instance +let childDropdown = new Dropdown(dropDown); -// make instances of Dropdown -// childDropdown = Array.from(childDropdown).map( element => { -// return new Dropdown(element); -// }) - -childDropdown = new Dropdown(dropDown); -// console.log(childDropdown); - -// for (let i = 0; i < childDropdown.length; i++) { -dropButton.addEventListener('click', childDropdown.showContent); -// } \ No newline at end of file +dropButton.addEventListener('click', childDropdown.showContent); \ No newline at end of file