LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Click the box once to proceed

The box
CSS
body {
  background: #D2D2D2;
}

h1 {
  margin: 1rem 0 1rem 3rem;
  text-transform: uppercase;
  font-family: 'Helvetica';
  color: #292929;
}

div {
  width: 35rem;
  height: 8rem;
  line-height: 4;
  display: block;
  text-align: center;
  font-size: 2rem;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.25rem;
  margin: 2rem auto;
  cursor: pointer;
  border: 2px solid #292929;
}

.good {
  background: #185901;
}

.bad {
  background: #980101;
  color: #FFF;
}
JS
// First we detect the click event
document.getElementById('the-box').addEventListener('click', function () {
  // Using an if statement to check the class
  if (this.classList.contains('bad')) {
    // The box that we clicked has a class of bad so let's remove it and add the good class
   this.classList.remove('bad');
   this.classList.add('good');
  } else {
    // The user obviously can't follow instructions so let's alert them of what is supposed to happen next
    alert("You can proceed!");
  }
});
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:34

Related Codes

Pen ID
Pen ID
Pen ID