A Pen by goodbedford on CodePen.
Created
October 10, 2016 02:53
-
-
Save goodbedford/9629f4039201c6f833726b05d2f7eebb to your computer and use it in GitHub Desktop.
IntroJs-Party-Time-part2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1 id="title">Party Time</h1> | |
| <button class="button">Change Color</button> | |
| <div class="target"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment