/* Creating the variables */ var random1 = 0; var random2 = 0; var random3 = 0; var rgbCode = "rgb(0, 0, 0)"; var lastCode = ["rgb(0, 0, 0)"]; var allColours = ["rgb(0, 0, 0)"]; var hexCode = "#000000" var lastHexCode = ["#000000"]; var allHexColours = ["#000000"]; var btn; var height; var amount = 1; var am; var clicked = 0; var time; var interval; var pick = 0; /* Generating random numbers */ function randomC() { if (pick == 1) pickC(); for (i = 0; i < amount; i++) { random1 = Math.floor(Math.random() * 256); random2 = Math.floor(Math.random() * 256); random3 = Math.floor(Math.random() * 256); colour = new draw(random1, random2, random3); } } /* Turning the random numbers into a rgb-value */ function draw(r, g, b) { if (pick == 0) { this.r = r; this.g = g; this.b = b; } else if (pick == 1) { this.r = document.getElementById("red").value; this.g = document.getElementById("green").value; this.b = document.getElementById("blue").value; } rgbCode = "rgb(" + this.r + ", " + this.g + ", " + this.b + ")"; hexCode = rgbToHex(parseInt(this.r), parseInt(this.g), parseInt(this.b)); /* Putting the rgb-value in an array to save it */ lastCode.push(rgbCode); allColours.push(rgbCode); lastHexCode.push(hexCode); allHexColours.push(hexCode) /* Removing the oldest rgb-value */ if (lastCode.length > 2) { lastCode.shift(); } if (lastHexCode.length > 2) { lastHexCode.shift(); } /* Changing the colours of the:... */ /* "Current" rgb-value */ document.getElementById("div1").style.color = lastCode[0]; document.getElementById("div1").style.backgroundColor = rgbCode; document.getElementById("div1").innerHTML = "
" + "Current RGB- and Hex-Value:" + "
" + "
" + rgbCode + "
" + hexCode; /* "Previous rgb-value" */ document.getElementById("div2").style.color = rgbCode; document.getElementById("div2").style.backgroundColor = lastCode[0]; document.getElementById("div2").innerHTML = "
" + "Previous RGB- and Hex-Value:" + "
" + "
" + lastCode[0] + "
" + lastHexCode[0]; } function getColours() { document.getElementById("div3").innerHTML =""; for (i = 1; i < allColours.length; i++) document.getElementById("div3").innerHTML += "

" + allColours[i] + "
" + allHexColours[i] + "

\■

"; window.scrollTo(0, 520); } function clearColours() { if (pick == 1) pickC(); lastCode = ["rgb(0, 0, 0)"]; allColours = ["rgb(0, 0, 0)"] ; lastHexCode = ["#000000"]; allHexColours = ["#000000"]; getColours(); window.scrollTo(0, 0); draw("0", "0", "0"); } //Made by The Coding Sloth, 2017. function up() { window.scrollTo(0, 0); } function down() { window.scrollTo(0, 9999999999); } function pickC() { if (pick == 0) { var red = document.createElement("input"); red.type = "range"; red.min = "0"; red.max = "255"; red.defaultValue = "128"; red.setAttribute("id", "red"); red.style.width = (window.innerWidth / 3 - 10) + "px"; //red.style.position = "absolute"; //red.style.transformOrigin = "center center"; //red.style.left = "0%"; $("#ranges").append(red); var green = document.createElement("input"); green.type = "range"; green.min = "0"; green.max = "255"; green.defaultValue = "128"; green.setAttribute("id", "green"); green.style.width = (window.innerWidth / 3 - 10) + "px"; //green.style.position = "absolute"; //green.style.transformOrigin = "center center"; //green.style.left = "30%"; $("#ranges").append(green); var blue = document.createElement("input"); blue.type = "range"; blue.min = "0"; blue.max = "255"; blue.defaultValue = "128"; blue.setAttribute("id", "blue"); blue.style.width = (window.innerWidth / 3 - 10) + "px"; //blue.style.position = "absolute"; //blue.style.transformOrigin = "center center"; //blue.style.right = "0%"; $("#ranges").append(blue); document.getElementById("red").addEventListener("change", draw); document.getElementById("green").addEventListener("change", draw); document.getElementById("blue").addEventListener("change", draw); $("#pick").html("Back"); pick = 1; } else if (pick == 1) { $("#red").remove(); $("#green").remove(); $("#blue").remove(); $("#pick").html("Pick a colour"); pick = 0; } } // This rgb to hex method came from Tim Down, // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb function componentToHex(c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex; } function rgbToHex(r, g, b) { this.r = r; this.g = g; this.b = b return "#" + componentToHex(this.r) + componentToHex(this.g) + componentToHex(this.b); } function settings() { var w = $(window).width(); var h = $(window).height(); var f = $("input").is(":focus"); if (clicked == 0) { if (pick == 1) pickC(); $("#settings").animate({width: w, opacity: "0.9"}, 500); $("#settings").animate({height: 200}, 700); $("#settings").append("

"); $("#settings").append(""); $("#settings").append("
"); $("#settings").append("

created by: The Coding Sloth, 2017

"); clicked = 1; } else if (clicked == 1 && f == false) { $("#settings").animate({height: "30px"}, 700); $("#settings").animate({width: "30px", opacity: "0.3"}, 500); amount = document.getElementById("1").value; if (amount <= 0) amount = 1; time = document.getElementById("2").value; if (time > 0) interval = setInterval(randomC, time*1000); else if (time == 0) clearInterval(interval); else alert("invalid number, please try something else.") $("#settings input").remove(); $("#settings br").remove(); $("#settings p").remove(); clicked = 0; } }

Colour Generator