Objectives

At the end of this module, you should be able to:

• describe what a component is and identify different parts of a component
• write a function that utilizes createElement and returns a new DOM element
• iterate over a list of data creating a new component for each item and attaching that component to the DOM

Starter Code

We will use CodePen for this guided project. The Starter Code

Solution Code

We will use CodePen for this guided project. The Solution Code

Breakout Starter

https://codepen.io/cgorton/pen/WVMdpO?editors=0010

Breakout Solution

https://codepen.io/cgorton/pen/rXJJyB

Step 1:

**Explain that our component needs HTML structure. Review the HTML below and highlight the accordion class. **

<div class="container home">
  <header>
    <h1 class="main-header">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>
  <section class="main-content">
    <h2 class="first-heading">HTML, CSS, or JS</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 ideal and if they can't stop you then you become something
      else entirely. Legend, Mr Wayne.
    </p>
  </section>
  <section class="secondary">
    <div class="accordion">

    </div>
  </section>
</div>

Step 2:

Review the LESS syntax below. Explain that CSS is part of what makes a component reusable Note the panel styles for our accordion class. Note that without JavaScript the panels would always be expanded.

/* 

Step 2: Review the LESS syntax below. Explain that CSS is part of what 
makes a component reusable Note the panel styles for our accordion class.  
Note that without JavaScript the panels would always be expanded.  
We need to look at our JS for step 3  

*/
@lightblue: #9bbeff;
@blue: #1b6cff;
@orange: #ffae1b;

* {
  box-sizing: border-box;
  color: #191B1F;
}
body {
  font-family: Lato, sans-serif;
}
.container {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding-top: 2rem;
}
.main-content {
  background: @lightblue;
  padding: 10px;
  box-shadow: inset 1px 1px 10px 10px rgba(@blue, 0.1);
  h2, p {
    color: white;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
  }
  p {
    font-size: 18px;
  }
}
h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.5rem;
}
p {
  margin: 20px 0;
  line-height: 1.25;
}
header {
  width: 100vw;
  height: 15vh;
  padding-top: 2rem;
}
nav {
  display: flex;
  justify-content: space-evenly;
  align-items: start;
  
}
nav a {
  text-decoration: none;
  border: 2px solid @orange;
  padding: 10px 10px;
  color: black;
  transition: all 0.2s ease-in-out;
  border-radius: 5px;
}
nav a:hover,
 {
  color: white;
  background: @orange;
  box-shadow: 1px 1px 10px 10px rgba(@lightblue, 0.1);
}
.accordion {
  background: #fff;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
}
.panel {
  color: #64656A;
  padding: 30px;
  border-top: 2px solid @orange;
  transition: height 0.3s 0s;
}
.panel:first-child{
border-top: none;
}
.panel:last-child{
border-bottom: 2px solid @orange;
}
.panel-bar {
  display: flex;
  justify-content: space-between;
  h3{
    color: @blue;
    font-size: 20px;
  }
}
.panel-buttons button {
  cursor: pointer;
  background: @lightblue;
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 50%;
  padding: 5px;
}
.hide-btn {
  display: none;
}
.panel-content {
  display: none;
  margin-top: 15px;
}
.toggle-on {
  display: block;
}

Step 3: