FSW 14: Components - I

fsw-14-components-i.markdown

FSW 14: Components - I

A Pen by AngeloDeleon on CodePen.

License.

index.html

<div class="container home">
  <header>
    <h1 class="main-header a b c d">Components - I</h1>
    <nav class="main-nav">
      <a href="https://learn.lambdaschool.com/" target="_blank" id="home-tag">Home</a>
      <a href="#" class="nav-item">About</a>
      <a href="#" class="nav-item">Blog</a>
      <a href="#" class="nav-item">Contact</a>
    </nav>
  </header>
  <h2 class="first-heading">What up FSW 14</h2>
  <p class="testing">No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an idel and if they can't stop you then you become something
    else entirely. Legend, Mr Wayne.
  </p>
  <section class="button-container">
    <div class="btn-component btn-1">Button 1</div>
    <div class="btn-component btn-2">Button 2</div>
    <div class="btn-component">Button 3</div>
    <div class="btn-component">Button 4</div>
  </section>
</div>

script.js

const home = document.querySelector('.home');
const testing = document.querySelector('.testing');

home.addEventListener('click', (event) => {
  console.log('we clicked home!');
});

class Button {
  constructor(domElement) {
    this.domElement = domElement;
    this.domElement.addEventListener('click', this.btnClick);
  }
  btnClick(event) {
    event.stopPropagation();
    console.log(`I clicked on ${event.currentTarget}`);
    event.currentTarget.style.color = "red";
    testing.classList.toggle('change');
  }
}

let buttons = document.querySelectorAll('.btn-component');

buttons = Array.from(buttons).map( domElement => {
  return new Button(domElement);
});




// btn1.addEventListener('click', (event) => {
//   console.log('we clicked the button!');
// });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

style.less

* {
  box-sizing: border-box;
}

.container {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

h1 {
   font-size: 1.5rem;
}

h2 {
  font-size: 1.5rem;
}

p {
  margin: 10px 0;
}

.home {
  cursor: pointer;
  border: 1px solid red;
  
  header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    
    nav {
      display: flex;
      width: 70%;
      justify-content: space-evenly;
    }
  }
  
  
}

.change {
  visibility: hidden;
}
  
.btn-component {
  box-sizing: border-box;
  width: 200px;
  height: 45px;
  background: lightgray;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  border-radius: 10px;
}