Tyler spaulding

Article/Article.js

@@ -3,18 +3,19 @@
 class Article {
   constructor(domElement) {
     // assign this.domElement to the passed in domElement
-    this.domElement;
+    this.domElement = domElement;
     // create a reference to the ".expandButton" class. 
-    this.expandButton;
+    this.expandButton = this.domElement.querySelector('.expandButton');
+    // console.log(this.expandButton);
     // Using your expandButton reference, update the text on your expandButton to say "expand"
-
+    this.expandButton.textContent = 'expand';
     // Set a click handler on the expandButton reference, calling the expandArticle method.
-
+    this.expandButton.addEventListener('click', this.expandArticle.bind(this));
   }
 
   expandArticle() {
     // Using our reference to the domElement, toggle a class to expand or hide the article.
-
+    this.domElement.classList.toggle('article-open');
   }
 }
 
@@ -26,4 +27,7 @@ class Article {
 
 */
 
-let articles;
+let articles = document.querySelectorAll('.article');
+articles.forEach( function(article) {
+  return new Article(article);
+});

Article/Article.less

@@ -40,9 +40,9 @@
     background-color: white;
   }
 }
-
 .article-open {
   height: 400px;
+  overflow-y: scroll;
 }
 
 

CSS/index.css

@@ -35,6 +35,77 @@
   margin: 0;
   font-size: 48px;
 }
+.menu-button {
+  position: absolute;
+  left: 20px;
+  cursor: pointer;
+}
+.menu {
+  display: none;
+  position: fixed;
+  top: 75px;
+  left: 0;
+  width: 350px;
+  height: 100vh;
+  /* This give the height 100% of the screen or, '100% of View Height' */
+  background-color: #81C784;
+  border: 1px solid #004D40;
+  border-left: none;
+  border-bottom: none;
+  z-index: 2;
+  /* This set the layer level of the element, it has precendence over initial level of 1*/
+}
+.menu ul li {
+  list-style-type: none;
+  font-size: 32px;
+  padding: 30px 0;
+  text-align: center;
+}
+.menu--open {
+  display: block;
+}
+.articles {
+  margin-top: 95px;
+}
+.article {
+  margin: 20px 10%;
+  padding: 0 20px 25px;
+  border: 1px solid lightgrey;
+  border-radius: 10px;
+  background-color: white;
+  position: relative;
+  height: 50px;
+  overflow: hidden;
+  box-shadow: 2px 2px 2px lightgrey;
+}
+.article h2 {
+  font-size: 28px;
+  padding: 0;
+  margin: 15px 0 0;
+}
+.article .date {
+  margin: 0;
+  font-size: 14px;
+}
+.article .close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+.article .expandButton {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  font-size: 12px;
+  color: grey;
+  cursor: pointer;
+  transform: translate(-50%);
+  background-color: white;
+}
+.article-open {
+  height: 400px;
+  overflow-y: scroll;
+}
 html,
 body {
   margin: 0;

Header/Header.less

@@ -14,4 +14,4 @@
     margin: 0;
     font-size: 48px;
   }
-}
+}

LESS/index.less

@@ -4,6 +4,8 @@
 /* Below this line is where you will start your work */
 /* It is important to note, you will not be writing any CSS in this file*/
 @import '../Header/Header.less';
+@import '../Menu/Menu.less';
+@import '../Article/Article.less';
 
 html, body {
   margin: 0;

Menu/Menu.js

@@ -1,10 +1,26 @@
 
 const toggleMenu = () => {
   // Toggle the "menu--open" class on your menu refence. 
+  menu.classList.toggle('menu--open');
+  if(menu.classList.contains('menu--open')){
+    // text.style.
+    TweenMax.from(menu,2,{left: '-250px', ease: Bounce.easeOut});
+    TweenMax.to(articles,2,{left:250, width: '50%',ease:Back.easeOut});
+  } else {
+    TweenMax.to(articles,2,{left:'0', width: '80%',ease:Back.easeOut})
+  }
+}
+const header = document.querySelector('h1');
+window.onload = function() {
+  TweenMax.from(header,2,{x:'200px'});
+  TweenMax.to(menuButton,5,{backgroundColor:'green'});
 }
-
 // Start Here: Create a reference to the ".menu" class
-const menu;
+const menu = document.querySelector('.menu');
+
 // create a reference to the ".menu-button" class
-const menuButton;
+const menuButton = document.querySelector('.menu-button');
+
+const text = document.querySelectorAll('.text');
 // Using your menuButton reference, add a click handler that calls toggleMenu
+menuButton.addEventListener('click', toggleMenu);

index.html

@@ -111,6 +111,22 @@ <h2>Professional Software Development in 2018</h2>
           hodor - hodor hodor hodor. Hodor. Hodor hodor... Hodor hodor hodor hodor hodor? </p>
         <span class='expandButton'></span>
       </div>
+      <div class="article">
+        <h2>My Article!</h2>
+        <p class="date">Nov 7th, 2017</p>
+        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+          eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
+          voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
+          sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
+          numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis 
+          nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum 
+          iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo 
+          voluptas nulla pariatur?"
+        </p>
+        <span class='expandButton'></span>
+      </div>
     </div>
+    <!-- GSAP -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
   </body>
 </html>