From e59f67d5839ad54735e08df8a07ffdf1939a3bb9 Mon Sep 17 00:00:00 2001 From: Natalie Schennum Date: Wed, 28 Mar 2018 15:44:12 -0700 Subject: [PATCH] Components added and functioning --- components/Box/Box.css | 17 ++++++++++++++ components/Dropdown/Dropdown.css | 33 +++++++++++++++++++++++++++ components/Dropdown/Dropdown.js | 21 ++++++++++++++++++ components/Section/Section.css | 9 ++++++++ index.html | 38 ++++++++++++++++++++++++++++++++ styles.css | 14 ++++++++++++ 6 files changed, 132 insertions(+) create mode 100644 components/Dropdown/Dropdown.css create mode 100644 components/Dropdown/Dropdown.js diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..5085b63 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,17 @@ + +.Block { + padding: 10px; + border: 1px solid black; + } + .Block__H { + padding: 5px; + } + .Block__Header { + margin-bottom: 10px; + font-weight: bold; + font-size: 20px; + } + + .Block__Text { + line-height: 1.3; + } \ No newline at end of file diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css new file mode 100644 index 0000000..90ce8d7 --- /dev/null +++ b/components/Dropdown/Dropdown.css @@ -0,0 +1,33 @@ +.Dropdown { + position: absolute; /* keeps dropdown going down*/ + padding-top: 45px; + padding-left: 15px; + cursor: pointer; + } + + .Dropdown__Title { + padding: 10px; + border: 2px solid black; + } + + .Dropdown__List { + margin-top: 10px; + padding: 10px; + display: none; + flex-direction: column; + line-height: 2; + width: 78px; + background: white; + border: 2px solid black; + } + + .display { + display: flex; + align-self: center; + } + + @media (max-width: 600px) { + .Dropdown { + padding: 20px 0 0 20px; + } + } \ No newline at end of file diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js new file mode 100644 index 0000000..46c8054 --- /dev/null +++ b/components/Dropdown/Dropdown.js @@ -0,0 +1,21 @@ + +class Dropdown { + constructor(element, hideClass) { + this.element = element, // 1st step w js element functions + this.clicked = false, // the default Boolean value is false-on is true + this.child = [...this.element.children].find(child => child.className === hideClass), + this.element.addEventListener('click', () => this.handleClickEvent()) + } +// element function causing the class list to display if it is not displayed + handleClickEvent() { + if (this.clicked && this.child.classList) this.child.classList.remove('display') + else this.child.classList.add('display') + this.toggleDropdown() + } +// toggle allows the event to be turned off and therefore repeated + toggleDropdown() { + this.clicked = !this.clicked + } +} +// const must be displayed at the bottom here and in this 'assign New Class' format +const dropdown = new Dropdown(document.querySelector('.Dropdown'),'Dropdown__List') \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..107cf24 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,9 @@ +.Section { + display: flex; + } + + @media (max-width: 600px) { + .Section { + flex-direction: column; + } + } \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..c63c88c 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,47 @@ + + Introduction to the DOM + +
+ +
+
Dropdown
+
+ 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 diff --git a/styles.css b/styles.css index 997c895..bbfba35 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,22 @@ @import './components/Section/Section.css'; @import './components/Box/Box.css'; +@import './components/Header/Header.css'; +@import './components/Dropdown/Dropdown.css'; body { box-sizing: border-box; min-width: 300px; margin: 0; } +h3 { + font-weight: bold; + text-align: center; + font-size: 40px; + } + + @media (max-width: 600px) { + .Header { + font-size: 32px; + + } + } \ No newline at end of file