Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
body {
  font-family: sans-serif;
}
.square {
  width: 50px;
  height: 50px;
  border: solid 1px black;
  float: left;
  margin: 0 10px 0 0 ;
}

#red {
  background-color: red;
}

#blue {
  background-color: blue;
}
#green {
  background-color: green;
}
</style>
</head>
<body>
  <h1>My App</h1>
  <div class='square' id='red'>
  </div>
  <div class='square' id='green'>
  </div>
  <div class='square' id='blue'>
  </div>
  <button id='show'>Show All</button>
  <button id='hide'>Hide All</button>
  <ul>
  </ul>

<script id="jsbin-javascript">
console.clear();

const ul = document.querySelector('ul');

const blue = document.querySelector('#blue');

blue.addEventListener('click', function(){
  this.style.display = 'none';
})

const squares = document.querySelectorAll('.square');
squares.forEach( square => {
  square.addEventListener('click', function(){
    const li = document.createElement('li');
    li.innerHTML = `you clicked on ${ this.id}`;
    ul.appendChild(li);

  })
});

const showButton = document.querySelector('#show');

showButton.addEventListener('click', function(){
const squares =    document.querySelectorAll('.square');
  squares.forEach( square => square.style.display = '');
})

const hideButton = document.querySelector('#hide');

hideButton.addEventListener('click', function(){
const squares =    document.querySelectorAll('.square');
  squares.forEach( square => square.style.display = 'none');
})
</script>


<script id="jsbin-source-css" type="text/css">body {
  font-family: sans-serif;
}
.square {
  width: 50px;
  height: 50px;
  border: solid 1px black;
  float: left;
  margin: 0 10px 0 0 ;
}

#red {
  background-color: red;
}

#blue {
  background-color: blue;
}
#green {
  background-color: green;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">console.clear();

const ul = document.querySelector('ul');

const blue = document.querySelector('#blue');

blue.addEventListener('click', function(){
  this.style.display = 'none';
})

const squares = document.querySelectorAll('.square');
squares.forEach( square => {
  square.addEventListener('click', function(){
    const li = document.createElement('li');
    li.innerHTML = `you clicked on ${ this.id}`;
    ul.appendChild(li);

  })
});

const showButton = document.querySelector('#show');

showButton.addEventListener('click', function(){
const squares =    document.querySelectorAll('.square');
  squares.forEach( square => square.style.display = '');
})

const hideButton = document.querySelector('#hide');

hideButton.addEventListener('click', function(){
const squares =    document.querySelectorAll('.square');
  squares.forEach( square => square.style.display = 'none');
})</script></body>
</html>