From 6601eec03e4823d640f24ffc40cfb1b2d788edd4 Mon Sep 17 00:00:00 2001 From: markstez05 <36493764+markstez05@users.noreply.github.com> Date: Fri, 30 Mar 2018 08:29:21 -0500 Subject: [PATCH] aligned my edits with instructor version --- components/Box/Box.css | 5 +++++ components/Dropdown/Dropdown.css | 30 ++++++++++++++++++++++++++++++ components/Dropdown/Dropdown.js | 15 +++++++++++++++ components/Section/Section.css | 30 ++++++++++++++++++++++++++++++ index.html | 29 ++++++++++++++++++++++++++++- index.js | 0 styles.css | 1 + 7 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 components/Dropdown/Dropdown.css create mode 100644 components/Dropdown/Dropdown.js create mode 100644 index.js diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..34b1582 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,5 @@ +.Box__title { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 15px; +} diff --git a/components/Dropdown/Dropdown.css b/components/Dropdown/Dropdown.css new file mode 100644 index 0000000..43c7808 --- /dev/null +++ b/components/Dropdown/Dropdown.css @@ -0,0 +1,30 @@ +.Dropdown { + z-index: 5; + display: inline-block; + position: absolute; +} + +.Dropdown__button { + padding: 15px; + background-color: white; + border: 2.5px solid black; + cursor: pointer; +} + +.Dropdown__content { + position: absolute; + background-color: white; + display: none; + margin-top: 10px; + padding: 15px; + border: 2.5px solid black; +} + +Dropdown__link { + display: inline-block; + margin-bottom: 10px; +} + +.Dropdown--active .Dropdown__content{ + display: block; +} \ No newline at end of file diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js new file mode 100644 index 0000000..eee169f --- /dev/null +++ b/components/Dropdown/Dropdown.js @@ -0,0 +1,15 @@ +let dropdown = document.querySelector('.Dropdown'); + +class Dropdown { + constructor(element) { + this.element = element; + this.element.addEventListener('click', () => {this.toggleDropdown()}) + } + toggleDropdown(){ + this.element.classList.toggle('Dropdown--active') + } +} + +dropdown = new Dropdown(dropdown); + +console.log(dropdown); \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..8f630bc 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,30 @@ +.Section { + box-sizing:border-box; + display: inline-block; + clear: both; + width: 100%; + margin: 0; + padding: 20px; + position: relative; +} + +.Section--bordered { + border: 2.5px solid black; + border-top: none; +} + +.Section__header { + text-align: center; + font-size: 2.5rem; + font-weight: bold; +} + +.Section--half{ + width: 50%; + +} +body { + box-sizing: border-box; + min-width: 300px; + margin: 0; +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..f294e7d 100644 --- a/index.html +++ b/index.html @@ -5,5 +5,32 @@ - + +
+
+
Dropdown
+
+ Lambda + Google + MDN +
+
+
Header
+
+
+
+
Placeholder
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+
+
+
Placeholder
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+
+ \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..e69de29 diff --git a/styles.css b/styles.css index 997c895..33c9c4e 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,6 @@ @import './components/Section/Section.css'; @import './components/Box/Box.css'; +@import './components/Dropdown/Dropdown.css'; body { box-sizing: border-box;