From b85b6b1d9d9c0f42c4f019853d9d8148f16b4510 Mon Sep 17 00:00:00 2001 From: Henry K Date: Wed, 28 Mar 2018 16:18:06 -0700 Subject: [PATCH 1/3] first commit: dropdown not working yet --- components/Box/Box.css | 7 ++++++ components/Dropdown/Dropdown.css | 40 ++++++++++++++++++++++++++++++++ components/Header/Header.css | 8 +++++++ components/Section/Section.css | 11 +++++++++ index.html | 37 +++++++++++++++++++++++++++++ index.js | 23 ++++++++++++++++++ styles.css | 2 ++ 7 files changed, 128 insertions(+) create mode 100644 components/Dropdown/Dropdown.css create mode 100644 components/Header/Header.css create mode 100644 index.js diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..5e42b9c 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,7 @@ +.Box1 { + border: 2px solid black; +} + +.Box2 { + border: 2px solid black; +} \ No newline at end of file diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css new file mode 100644 index 0000000..85d139d --- /dev/null +++ b/components/Dropdown/Dropdown.css @@ -0,0 +1,40 @@ +.Dropdown__button { + background-color: #3498DB; + color: white; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; + justify-content: flex-start; +} + +/* position of the dropdown conent */ +.Dropdown { + position: relative; + display: inline-block; +} + +/* element of drop menu hidden by default */ +.Dropdown__content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* style for the links in the dropmenu */ +.Dropdown__content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ +.Dropdown--show { + display:block;} + +/* Change color of dropdown links on hover +.dropdown-content a:hover {background-color: #ddd} */ diff --git a/components/Header/Header.css b/components/Header/Header.css new file mode 100644 index 0000000..29ac24a --- /dev/null +++ b/components/Header/Header.css @@ -0,0 +1,8 @@ +/* look for Dropdown.css for Dropdow menu CSS elements */ + +.mainHeader { + display: flex; + justify-content: center; +} + + diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..22ddad3 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,11 @@ +.Section { + display: flex; + border: 2px solid black; + width: 100%; +} + +@media (max-width: 400px) { + .Section { + flex-direction: column; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..d464285 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,44 @@ Introduction to the DOM + + +
+
+ +
+ Lambda + Google + MDN +
+
+ +
+

This is 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..1ac03e5 --- /dev/null +++ b/index.js @@ -0,0 +1,23 @@ +const dropmenu = document.getElementById('.dropdown__content') + +const dropEvent = (event) => { + event.stopPropagation(); + console.log('dropdown is working'); + event.target.classList.toggle('Dropdown--show'); +} + + +dropmenu.addEventListener('click', dropEvent); + + +// class Dropdown { +// constructor (element) { +// this.element = element; +// this.element.addEventListener('click', () => this.dropDownEvent()}) +// } +// dropDownEvent(){ +// this.element.toggle('Dropdown--show') +// } +// } +// dropmenu = new Dropdown(element); + diff --git a/styles.css b/styles.css index 997c895..e70d9a6 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,5 @@ +@import './components/Dropdown/Dropdown.css'; +@import './components/Header/Header.css'; @import './components/Section/Section.css'; @import './components/Box/Box.css'; From 3ad988988459614bd2e7410d4f6c7d7de1707e29 Mon Sep 17 00:00:00 2001 From: Henry K Date: Wed, 28 Mar 2018 17:33:20 -0700 Subject: [PATCH 2/3] Done. Positioning and Dropdown menu fixed --- components/Dropdown/Dropdown.css | 4 +++- components/Header/Header.css | 9 +++++++-- index.js | 10 ++++------ 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css index 85d139d..56e6136 100644 --- a/components/Dropdown/Dropdown.css +++ b/components/Dropdown/Dropdown.css @@ -1,3 +1,4 @@ +/* button */ .Dropdown__button { background-color: #3498DB; color: white; @@ -6,6 +7,7 @@ border: none; cursor: pointer; justify-content: flex-start; + margin-left: 10%; } /* position of the dropdown conent */ @@ -33,7 +35,7 @@ } /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ -.Dropdown--show { +.Dropdown__content--show { display:block;} /* Change color of dropdown links on hover diff --git a/components/Header/Header.css b/components/Header/Header.css index 29ac24a..1321180 100644 --- a/components/Header/Header.css +++ b/components/Header/Header.css @@ -2,7 +2,12 @@ .mainHeader { display: flex; - justify-content: center; + justify-content: flex-start; + align-items: center; + border: 2px solid black; } - +.header { + margin-Left: 35%; + +} \ No newline at end of file diff --git a/index.js b/index.js index 1ac03e5..1c6aea2 100644 --- a/index.js +++ b/index.js @@ -1,13 +1,11 @@ -const dropmenu = document.getElementById('.dropdown__content') +const button = document.querySelector('.Dropdown__button') +const dropmenu = document.getElementById('dropDownLinks') const dropEvent = (event) => { - event.stopPropagation(); - console.log('dropdown is working'); - event.target.classList.toggle('Dropdown--show'); + dropmenu.classList.toggle('Dropdown__content--show'); } - -dropmenu.addEventListener('click', dropEvent); +button.addEventListener('click', dropEvent); // class Dropdown { From 5fbb97d13c5479d14e8655d7fb14094fd3f5b7e6 Mon Sep 17 00:00:00 2001 From: Henry K Date: Wed, 28 Mar 2018 18:33:12 -0700 Subject: [PATCH 3/3] fixed some issues; constructor needs work --- .vscode/launch.json | 14 ++++++++++++++ components/Header/Header.css | 8 +++++++- components/Section/Section.css | 2 +- index.js | 19 ++++++++++--------- 4 files changed, 32 insertions(+), 11 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..73b7a5c --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,14 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "program": "${workspaceFolder}/index.js" + } + ] +} \ No newline at end of file diff --git a/components/Header/Header.css b/components/Header/Header.css index 1321180..61b9f79 100644 --- a/components/Header/Header.css +++ b/components/Header/Header.css @@ -8,6 +8,12 @@ } .header { - margin-Left: 35%; + margin-left: 35%; +} + +@media (max-width: 400px) { + .header { + margin-left: 10%; + } } \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index 22ddad3..9309305 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -1,7 +1,7 @@ .Section { display: flex; border: 2px solid black; - width: 100%; + } @media (max-width: 400px) { diff --git a/index.js b/index.js index 1c6aea2..630441e 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,5 @@ -const button = document.querySelector('.Dropdown__button') -const dropmenu = document.getElementById('dropDownLinks') +let button = document.querySelector('.Dropdown__button') +let dropmenu = document.getElementById('dropDownLinks') const dropEvent = (event) => { dropmenu.classList.toggle('Dropdown__content--show'); @@ -8,14 +8,15 @@ const dropEvent = (event) => { button.addEventListener('click', dropEvent); -// class Dropdown { -// constructor (element) { -// this.element = element; -// this.element.addEventListener('click', () => this.dropDownEvent()}) +// class Dropdown12 { +// constructor () { +// this.addEventListener('click', () => { this.dropEvent() }) // } -// dropDownEvent(){ -// this.element.toggle('Dropdown--show') + +// dropEvent(event) { +// dropmenu.classList.toggle('Dropdown__content--show'); // } // } -// dropmenu = new Dropdown(element); + +// button = new Dropdown12();