RGB/index.html at main · lcomeau01/RGB · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
    <title>RGB Converter</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>RGB Converter</h1>
    <section class="form-container">
        <section class="content">
            <!-- HTML THAT WILL CHANGE WHEN REQUEST IS GRANTED -->
            <form method="get" id="form" action="#">
                <p>RGB: </p>
                <input type="number" id="red">
                <input type="number" id="green">
                <input type="number" id="blue">
                <input type="button" value="Convert" id="button1">
            </form>
            <section class="color-info">
                <div class="label">
                    <p id="square"></p>
                    <p class="color-text"> <b id="Name"> White </b> </p>
                </div>
                <div class="color-types">
                    <p class="color-text"  id="hsl-value"> <b>HSL Value: </b> hsl(0, 0%, 100%) </p>
                    <p class="color-text"  id="hex-value"> <b>Hex Value: </b> #FFFFFF </p>
                    <p class="color-text"  id="hsv-value"> <b>HSV Value: </b> hsv(0, 0%, 100%) </p>
                </div>
                <div class="color-types">
                    <p class="color-text" id="cmyk-value"> <b>CMYK Value: </b> cmyk(0, 0, 0, 0) </p>
                    <p class="color-text"  id="xyz-value"> <b>XYZ Value: </b> XYZ(95, 100, 108.883) </p>
                </div>
            </section>
        </section>
    </section>
    <!-- JAVASCRIPT -->
    <script>
        window.onload = function() {
            button = document.getElementById("button1");
            button.onclick = function() {
                getColors();
            }
        }
        function getColors() {
            red = validateColor(document.getElementById("red").value);
            green = validateColor(document.getElementById("green").value);
            blue = validateColor(document.getElementById("blue").value);

            color = red + "," + green + "," + blue;

            colorSquare = document.getElementById("square");
            colorSquare.style.backgroundColor = "rgb(" + color + ")";

            fetchData(color);
        }
        function validateColor(value) {
            if (value > 255) return 255;
            else if (value < 0 || value == "") return 0;
            else return value;
        }

        function fetchData(color) {
            url = "https://www.thecolorapi.com/id?rgb=" + color;
            res = fetch(url)
            .then (res => res.text())
            .then (data =>
                {
                    data = JSON.parse(data);
                    hex = data.hex.value;
                    document.getElementById("hex-value").innerHTML = "<b>Hex Value: </b>" + hex;

                    name = data.name.value;
                    document.getElementById("Name").innerHTML = name;

                    hsl = data.hsl.value;
                    document.getElementById("hsl-value").innerHTML = "<b>HSL Value: </b>" + hsl;

                    hsv = data.hsv.value;
                    document.getElementById("hsv-value").innerHTML = "<b>HSV Value: </b>" + hsv;

                    cmyk = data.cmyk.value;
                    document.getElementById("cmyk-value").innerHTML = "<b>CMYK Value: </b>" + cmyk;

                    xyz = data.xyz.value;
                    document.getElementById("xyz-value").innerHTML = "<b>XYZ Value: </b>" + xyz;
                })
            .catch (error => console.log("this didn't work: " + error));
        }
</script>
</body>
</html>