From 4269800f2f3ed05e2f964b1991a3b86c43a869b8 Mon Sep 17 00:00:00 2001 From: ajf412 Date: Wed, 28 Mar 2018 19:38:23 -0400 Subject: [PATCH 1/2] Still working on the project. Up and down for kids a lot today. --- components/Box/Box.css | 38 ++++++++++++++++++++++++++++++++++ components/Section/Section.css | 5 +++++ index.html | 29 +++++++++++++++++++++++--- index.js | 14 +++++++++++++ styles.css | 4 ++++ 5 files changed, 87 insertions(+), 3 deletions(-) create mode 100644 index.js diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..918f0b7 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,38 @@ +/* .Box { + border: 2px solid black; +} */ + +.Box__header { + display: flex; + align-items: center; + padding-left: 10px; +} + +.Box__h1 { + border: none; +} + +nav { + padding: 10px; +} + +.Box__navDropdown{ + border: 2px solid black; + padding: 15px; + width: 70px; +} + +.Box__navButtons { + display: hidden; + flex-direction: column; + justify-content: center; + padding: 10px 0 10px 0; + margin-top: 15px; + border: 2px solid black; + width: 100px; + position:fixed; + background: white; +} +a{ + padding: 5px 0 5px 15px; +} \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..ef08836 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,5 @@ +.Section { + border: 2px solid black; + padding: 0 20px 0 20px; + /*display: flex;*/ +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..b2400c3 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,32 @@ - + Introduction to the DOM - + + +
+ +

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..6b3c794 --- /dev/null +++ b/index.js @@ -0,0 +1,14 @@ +const navButtons = document.getElementsByClassName('.Box__navButtons'); +let navButtonOff = false; + +function displayNavButtons() { + // navButtonOff = !navButtonOff; + // if (!navButtonOff){ + + // } + // else navButtons.style.display = 'none'; +} + +console.log(navButtons); + +//navButtons.style.display = 'flex'; \ No newline at end of file diff --git a/styles.css b/styles.css index 997c895..8a29c09 100644 --- a/styles.css +++ b/styles.css @@ -6,3 +6,7 @@ body { min-width: 300px; margin: 0; } + +h1 { + font-size: 36px; +} From 7215760389811a2f9ac60a40ee464634a0f303c3 Mon Sep 17 00:00:00 2001 From: ajf412 Date: Wed, 28 Mar 2018 21:10:03 -0400 Subject: [PATCH 2/2] Assignment complete. --- components/Box/Box.css | 34 ++++++++++++++++++++++------------ components/Section/Section.css | 19 +++++++++++++++++-- index.html | 22 ++++++++++++---------- index.js | 30 ++++++++++++++++++++++-------- styles.css | 6 +++++- 5 files changed, 78 insertions(+), 33 deletions(-) diff --git a/components/Box/Box.css b/components/Box/Box.css index 918f0b7..7102e01 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -1,13 +1,3 @@ -/* .Box { - border: 2px solid black; -} */ - -.Box__header { - display: flex; - align-items: center; - padding-left: 10px; -} - .Box__h1 { border: none; } @@ -19,11 +9,11 @@ nav { .Box__navDropdown{ border: 2px solid black; padding: 15px; - width: 70px; + width: 100px; } .Box__navButtons { - display: hidden; + display: none; flex-direction: column; justify-content: center; padding: 10px 0 10px 0; @@ -35,4 +25,24 @@ nav { } a{ padding: 5px 0 5px 15px; +} + +.Box__placeholder { + padding: 0 20px 0 20px; + width: 100%; + margin: 0; + border: 2px solid black; + /*display: flex;*/ +} + +.Box__text{ + display:flex; +} + +@media(min-width: 401px){ + .Box__text { + width: 100%; + justify-content: center; + position: fixed; + } } \ No newline at end of file diff --git a/components/Section/Section.css b/components/Section/Section.css index ef08836..2440e81 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -1,5 +1,20 @@ .Section { border: 2px solid black; - padding: 0 20px 0 20px; - /*display: flex;*/ + +} + +.Section__header { + display: flex; + align-items: center; + padding-left: 10px; + border-bottom: none; +} + +@media(min-width: 401px){ + .Section__info { + display: flex; + flex-direction: row; + align-self: stretch; + justify-items: stretch; + } } \ No newline at end of file diff --git a/index.html b/index.html index b2400c3..fb2c385 100644 --- a/index.html +++ b/index.html @@ -4,29 +4,31 @@ Introduction to the DOM + -
+
-

Header

+
+

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.

-

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 index 6b3c794..e4c3c95 100644 --- a/index.js +++ b/index.js @@ -1,14 +1,28 @@ -const navButtons = document.getElementsByClassName('.Box__navButtons'); -let navButtonOff = false; +// ________ VARIABLES ________ +const navButtons = document.getElementById('navButtons'); +const navDropdown = document.getElementById('navDropdown'); +let navButtonOn = true; +let cursor = 'default'; +// ________ NAV DROPDOWN ________ function displayNavButtons() { - // navButtonOff = !navButtonOff; - // if (!navButtonOff){ - - // } - // else navButtons.style.display = 'none'; + navButtonOn = !navButtonOn; + if (!navButtonOn){ + navButtons.style.display = 'none'; + } + else navButtons.style.display = 'flex'; +} + +function cursorDefault() { + document.body.style.cursor = 'default'; +} + +function cursorDropdown() { + document.body.style.cursor = 's-resize'; } console.log(navButtons); -//navButtons.style.display = 'flex'; \ No newline at end of file +navDropdown.addEventListener('mouseover', cursorDropdown); +navDropdown.addEventListener('mouseout', cursorDefault); +navDropdown.addEventListener('click', displayNavButtons); \ No newline at end of file diff --git a/styles.css b/styles.css index 8a29c09..5a271f4 100644 --- a/styles.css +++ b/styles.css @@ -1,10 +1,14 @@ @import './components/Section/Section.css'; @import './components/Box/Box.css'; +* { + box-sizing: border-box; +} body { - box-sizing: border-box; min-width: 300px; margin: 0; + display: flex; + flex-direction: column; } h1 {