IntroJs-Party-Time-part2

index.html

 <h1 id="title">Party Time</h1>
 <button class="button">Change Color</button>
  <div class="target"></div>

introjs-party-time-part2.markdown

IntroJs-Party-Time-part2

A Pen by goodbedford on CodePen.

License.

script.js

//app.js

var btn = document.querySelector(".button");
var body = document.body;
var title = document.querySelector("#title");
var target = document.querySelector(".target");


// this listener will add 500 small box when button is mouseover
btn.addEventListener("click", function(event) {
  console.log("button clicked");
  for (var i = 0; i < 500; i++) {
    (function() {
      var div = document.createElement("div");
      var colorTime;
      div.classList.add("box-sm");

      // this setInterval will change backgroundColor using random time between 0-3s
      colorTime = setInterval(function() {
        div.style.backgroundColor = changeColor();
      }, (Math.random() * 3000));

      // this listener is will clear the colorTime interval and make invisible
      div.addEventListener("mouseenter", function(event) {
        clearInterval(colorTime);
        div.style.visibility = "hidden";
      });
      target.appendChild(div);
    })();
  }
});

function changeColor() {
  var color = randColor();
  // console.log("color is:" + color);
  return "rgb(" + color + ")";
}

function randColor() {
  var color = [];
  var r = randNumber(255, 100);
  var g = randNumber(200, 1);
  var b = randNumber(150, 30);

  color.push(r, g, b);

  return color.join(",");
}

function randNumber(high, low) {
  var num = Math.floor((Math.random() * high) + low);

  return num;
}

style.css

/*base */

body {
  background-color: black;
  /*background-color: rgb(255, 30, 255);*/
  /*background-color: #242*/
}

h1 {
  color: rgb(138, 160, 163);
  font-size: 5rem;
  text-align: center;
}


/*class*/

.block-hover {
  background-color: black;
  border: 1px solid black;
  height: 5px;
  width: 5px;
}

.box {
  border: 1px solid white;
  height: 50px;
  width: 50px;
}

.box:hover {
  background-color: white;
}

.box-sm {
  height: 20px;
  width: 20px;
}

.box-sm:hover {
  background-color: white;
}

.button {
  background-color: black;
  border: 5px solid orange;
  color: white;
  cursor: pointer;
  display: block;
  font-size: 24px;
  margin: 10px auto;
  outline: 0;
  padding: 10px 20px;
  width: auto;
}

.button:hover {
  background-color: orange;
  border: 5px solid black;
  color: black;
}

.button:active {
  background-color: darkorange;
}

.fun-title {
  color: rgba(44, 200, 100, 0.5);
  font-size: 50px;
  text-transform: uppercase;
  transform: translateX(50px);
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.target {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.yellow {
  background-color: yellow;
}