IntroJs-Party-Time-vanilla-js

index.html

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

introjs-party-time-vanilla-js.markdown

IntroJs-Party-Time-vanilla-js

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 a box when button is mouseover
btn.addEventListener("mouseover", function(event) {
  console.log("button mouseover event");

  var div = document.createElement("div");
  var colorTime;
  div.classList.add("box");

  // 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);
});

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

// this function will return a string of three numbers
function randColor() {
  var color = [];
  var r = randNumber(255, 1);
  var g = randNumber(255, 13);
  var b = randNumber(255, 36);

  color.push(r, g, b);

  return color.join(",");
}

// this function takes the highest possible number and the lowest number and returns the number
function randNumber(high, low) {
  var num = Math.floor((Math.random() * high) + low);

  return num;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

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;
}