JSFiddle - React, Tailwind, and code Playground

by Adam Trojnar

HTML

<form id="form" onsubmit="return check_all();" method="get">
    <!--<p><input type="checkbox" id="Checkbox1" /> Ruby <span id="Div1">0</span></p>
  <p><input type="checkbox" id="Checkbox2" /> C <span id="Div2">0</span></p>
  <p><input type="checkbox" id="Checkbox3" /> Java <span id="Div3">0</span></p>
  <p><input type="checkbox" id="Checkbox4" /> Delphi <span id="Div4">0</span></p>
  <p><input type="checkbox" id="Checkbox5" /> C++ <span id="Div5">0</span></p>-->
    <p>
        <input type="checkbox" id="Checkbox1" value="Checkbox1" name="lang" />Język 1 <span id="Span1">0</span>
    </p>
    <p>
        <input type="checkbox" id="Checkbox2" value="Checkbox2" name="lang" />Język 2 <span id="Span2">0</span>
    </p>
    <p>
        <input type="checkbox" id="Checkbox3" value="Checkbox3" name="lang" />Język 3 <span id="Span3">0</span>
    </p>
    <p>
        <input type="checkbox" id="Checkbox4" value="Checkbox4" name="lang" />Język 4 <span id="Span4">0</span>
    </p>
    <p>
        <input type="checkbox" id="Checkbox5" value="Checkbox5" name="lang" />Język 5 <span id="Span5">0</span>
    </p>
    <div class="send">
        <input type="submit" value="Wyślij formularz">
    </div>
</form>

CSS

p {
    padding: 0;
    margin: 0;
    font-family:'Century Gothic';
    font-size:larger;
    margin:5px;
    padding:5px;
}
.green {
    background-color:green;
    border:1px solid black;
    border-radius:100%;
    padding:5px;
    margin:5px;
}
.white {
    background-color:white;
    border:1px solid white;
    border-radius:100%;
    padding:5px;
    margin:5px;
}
.red {
    background-color:red;
    border:1px solid black;
    border-radius:100%;
    padding:5px;
    margin:5px;
}
.send {
    margin-top: 20px;
}

JavaScript

function check_all() {
        var whatChecked = 0;
        var form = this.form;
        var checkboxs = form.lang;

        for (x = 0; x < checkboxs.length; x++) {
            if (checkboxs[x].checked) {
                whatChecked++;
            }
        }
        if (whatChecked != 3) {
            alert('You choose ' + whatChecked + ' , but you must choose only 3');
        } else {
            alert('You choose ' + whatChecked + ' .Form was send!');
        }
    }

    var counter = 0;
    var myGreenArray = new Array();


    function toogle() {
        checkGreen();
        if (this.checked && counter < 3) {
            this.nextElementSibling.className = "green";
            counter++;
            console.log(counter);
            var idx = myGreenArray.indexOf(this);
            if (idx == -1) {
                myGreenArray.push(this);
            }

        } else if (this.checked && counter >= 3) {
            this.nextElementSibling.className = "red";
            counter++;
            console.log(counter);
        } else if (this.checked && counter >= 3) {
            this.nextElementSibling.className = "white";
            counter++;
            console.log(counter);
        } else {
            this.nextElementSibling.className = "white";


            // myGreenArray.pop(this);
            counter--;
            console.log(myGreenArray);
            console.log(counter);

            console.log("else test in toogle();");


        }


    }

    function checkGreen() {
        if (this.checked && counter >= 3) {

            console.log("if test in checkGreen()");

        }
    }

    document.getElementById("Checkbox1").onclick = toogle;
    document.getElementById("Checkbox2").onclick = toogle;
    document.getElementById("Checkbox3").onclick = toogle;
    document.getElementById("Checkbox4").onclick = toogle;
    document.getElementById("Checkbox5").onclick = toogle;