Ionut1

by toby3105

HTML

<input type="text" placeholder="Please input a number" id="noColors"/>
<div id="display"></div>

CSS

#display{
    background-color:black;
    height:50px;
    margin:10px;
}

JavaScript

/* - Cand se introduce un numar n in text input pentru care
	- generezi n culori diferite (nu tonuri de culori, nu ma astept sa creezi tu algoritmul cauta pe net)
    - se creaza cate un buton pentru fiecare culoare (butonul trebuie sa aiba culoare generate si label cu hex-ul ei)
    - la click pe un buton culoarea div-ului cu id-ul display se schimba in cea a butonului;
*/    
(function(){

document.getElementById('noColors').addEventListener("keyup", function(){
    var noColors = document.getElementById('noColors').value;
    var display = document.getElementById('display');
    display.innerHTML = "";
 
    var colors = [];
    for (var hue = 0; hue < 360; hue += 360 / noColors) {
        colors.push(hsvToRgb(hue, 100, 100));
    }
    for (var i = 0; i < colors.length; i++) {
        var newBtn = document.createElement("button");
        var btnContent = document.createTextNode(colors[i]);
        
        newBtn.id = "btn" + i;
        newBtn.style.cssText = "background-color: rgb("+colors[i] + ")";
        newBtn.appendChild(btnContent);
        
        document.getElementById("display").appendChild(newBtn);
        
        document.getElementById('btn' + i).addEventListener("click", function(){
            var color = this.innerHTML;
    		var display = document.getElementById('display');
    		display.style.backgroundColor = "rgb(" + color + ")";
        });
    }
});

function hsvToRgb(h, s, v) {
    var r, g, b;
    var i;
    var f, p, q, t;
    s /= 100;
    v /= 100;
 
    if (s == 0) {
        r = v;
        g = v;
        b = v;
        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }
    h /= 60;
    i = Math.floor(h);
    f = h - i;
    p = v * (1 - s);
    q = v * (1 - s * f);
    t = v * (1 - s * (1 - f));
    switch (i) {
        case 0:
            r = v;
            g = t;
            b = p;
            break;
        case 1:
            r = q;
            g = v;
            b = p;
            break;
       ...