diff --git a/components/Box/Box.css b/components/Box/Box.css deleted file mode 100644 index e69de29..0000000 diff --git a/components/Section/Section.css b/components/Section/Section.css deleted file mode 100644 index e69de29..0000000 diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..1439d8b --- /dev/null +++ b/css/index.css @@ -0,0 +1,75 @@ +body { + width: 100%; + max-width: 1024px; + margin: auto; +} +.container { + border: 2px solid black; +} +.Box--left { + border-right: 1.5px solid black; +} +.Box--right { + border-left: 1.5px solid black; +} +.Box__title { + padding: 15px 25px 0; + margin: 0; +} +.Box__content { + padding: 15px 25px 15px; + margin: 0; +} +.Dropdown { + display: inline-block; + position: absolute; + margin-left: 2%; +} +.Dropdown__button { + border: 2px solid black; + background-color: white; + padding: 13px; + font-weight: bold; +} +.Dropdown__content { + position: absolute; + display: none; + margin-top: 10px; + border: 2px solid black; + background-color: white; + padding: 13px; +} +.Dropdown__content--active { + display: block; +} +.Dropdown__link { + display: none; + margin-bottom: 10px; +} +.Dropdown__link--active { + display: block; +} +.Section { + box-sizing: border-box; + border: 1px solid black; + display: flex; + width: 100%; + margin: 0; + position: relative; +} +.Section__header { + text-align: center; + font-weight: bold; +} +.Section--bordered { + border-top: none; + border: 2px solid black; +} +.Section--bordered:first-of-type { + border-top: 2.5px solid black; +} +@media (max-width: 400px) { + .Section { + flex-direction: column; + } +} diff --git a/index.html b/index.html index 39167c5..7b9019f 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,42 @@ + 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/index.js b/index.js new file mode 100644 index 0000000..107b6c9 --- /dev/null +++ b/index.js @@ -0,0 +1,32 @@ +class Dropdown { + constructor(element) { + this.element = element; + this.button = this.element.querySelector(".Dropdown__button"); + + this.button.addEventListener("click", () => { + this.display(); + }); + } + + display() { + document.querySelector('.Dropdown__content').classList.toggle('Dropdown__content--active'); + document.querySelectorAll('.Dropdown__link').forEach(function(x) { + x.classList.toggle('Dropdown__link--active'); + }); + } +} + +let dropdowns = document.querySelectorAll(".Dropdown"); +Array.from(dropdowns).map(dropdown => new Dropdown(dropdown)); + + +// daily javascript challenge below -- not directly relevant +/* +function commonElements(arr1, arr2) { + const result = []; + arr1.forEach(element => {if (arr2.includes(element)) result.push(element);}); + return result; +} + +console.log(commonElements([1, 2, 3, 4], [3, 4, 5, 6])); +*/ \ No newline at end of file diff --git a/less/Box.less b/less/Box.less new file mode 100644 index 0000000..fa9a4b1 --- /dev/null +++ b/less/Box.less @@ -0,0 +1,26 @@ +body { + width: 100%; + max-width: 1024px; + margin: auto; +} + +.container { + border: 2px solid black; +} + +.Box { + &--left { + border-right: 1.5px solid black; + } + &--right { + border-left: 1.5px solid black; + } + &__title { + padding: 15px 25px 0; + margin: 0; + } + &__content { + padding: 15px 25px 15px; + margin: 0; + } +} diff --git a/less/Section.less b/less/Section.less new file mode 100644 index 0000000..71eced9 --- /dev/null +++ b/less/Section.less @@ -0,0 +1,26 @@ +.Section { + box-sizing: border-box; + border: 1px solid black; + display: flex; + width: 100%; + margin: 0; + position: relative; + + &__header { + text-align: center; + font-weight: bold; + } + + &--bordered { + border-top: none; + border: 2px solid black; + + &:first-of-type { + border-top: 2.5px solid black; + } + } + + @media @phone { + flex-direction: column; + } +} \ No newline at end of file diff --git a/less/dropdown.less b/less/dropdown.less new file mode 100644 index 0000000..541551b --- /dev/null +++ b/less/dropdown.less @@ -0,0 +1,35 @@ +.Dropdown { + display: inline-block; + position: absolute; + margin-left: 2%; + + &__button { + border: 2px solid black; + background-color: white; + padding: 13px; + font-weight: bold; + } + + &__content { + position: absolute; + display: none; + margin-top: 10px; + border: 2px solid black; + background-color: white; + padding: 13px; + + &--active { + display: block; + } + } + + &__link { + display: none; + margin-bottom: 10px; + + &--active { + display: block; + } + } + +} diff --git a/less/index.less b/less/index.less new file mode 100644 index 0000000..410bfa0 --- /dev/null +++ b/less/index.less @@ -0,0 +1,5 @@ +@phone: ~'(max-width: 400px)'; + +@import "Box"; +@import "dropdown"; +@import "Section"; \ No newline at end of file