JSFiddle - React, Tailwind, and code Playground

by thillin

HTML

<body>
    <div class="notification"></div>
    <div class="container">
        <ul class="board">
            <li class="dot colour7"></li>
            <li class="dot colour1"></li>
            <li class="dot colour2"></li>
            <li class="dot colour5"></li>
            <li class="dot colour1"></li>
            <li class="dot colour9"></li>
            <li class="dot colour1"></li>
            <li class="dot colour1"></li>
            <li class="dot colour4"></li>
            <li class="dot colour2"></li>
            <li class="dot colour7"></li>
            <li class="dot colour7"></li>
            <li class="dot colour6"></li>
            <li class="dot colour3"></li>
            <li class="dot colour2"></li>
            <li class="dot colour9"></li>
            <li class="dot colour2"></li>
            <li class="dot colour2"></li>
            <li class="dot colour3"></li>
            <li class="dot colour5"></li>
            <li class="dot colour3"></li>
            <li class="dot colour1"></li>
            <li class="dot colour3"></li>
            <li class="dot colour3"></li>
            <li class="dot colour6"></li>
            <li class="dot colour3"></li>
            <li class="dot colour9"></li>
            <li class="dot colour9"></li>
            <li class="dot colour4"></li>
            <li class="dot colour7"></li>
            <li class="dot colour4"></li>
            <li class="dot colour8"></li>
            <li class="dot colour1"></li>
            <li class="dot colour4"></li>
            <li class="dot colour1"></li>
            <li class="dot colour7"></li>
            <li class="dot colour9"></li>
            <li class="dot colour5"></li>
            <li class="dot colour8"></li>
            <li class="dot colour1"></li>
            <li class="dot colour5"></li>
            <li class="dot colour5"></li>
            <li class="dot colour5"></li>
            <li class="dot colour3"></li>
            <li class="dot colour5"></li>
        ...

CSS

/* @group Reset */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* @end */
 .html, body {
    height: 100%;
    width: 100%;
}
.notification {
    height: 50px;
    width: 200px;
    margin: 10% auto;
    border-radius: 6px;
}
.board {
    list-style: none;
}
.dot {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    float: left;
    margin: 2px;
}
.dot:hover {
    opacity: 0.5;
}
.container {
    width: 216px;
    height: 216px;
    margin: 2%% auto 0 auto;
}
.dot.colour1, .notification.colour1 {
    background: #2980b9;
}
.dot.colour2, .notification.colour2 {
    background: #e74c3c;
}
.dot.colour3, .notification.colour3 {
    background: #d35400;
}
.dot.colour4, .notification.colour4 {
    background: #f1c40f;
}
.dot.colour5, .notification.colour5 {
    background: #2c3e50;
}
.dot.colour6, .notification.colour6 {
    background: #e67e22;
}
.dot.colour7, .notification.colour7 {
   ...

JavaScript

$(document).ready(function () {
    /**var dot1 = $(".colour1");
var dot2 = $(".colour2");
var dot3 = $(".colour3");
var dot4 = $(".colour4");
var dot5 = $(".colour5");
var dot6 = $(".colour6");
var dot7 = $(".colour7");
var dot8 = $(".colour8");
var dot9 = $(".colour9");**/
    var dots = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    game();

    function testfunction(number) {
        alert("Everything is gone!");
        alert(dots);
        var noToRemove = number -1;
        dots.splice(noToRemove, 1);
        alert(dots);
        $(".notification").removeClass("colour" + number);
        game();
    }

    function game() {
        var number = dots[Math.floor(Math.random() * dots.length)];
        var dot = $(".colour" + number);
        $(".notification").addClass("colour" + number);
        $(dot).click(function () {
            $(this).hide();
            if ($('.dot.colour' + number + ':visible').length == 0) {
                testfunction(number);
            }
        });
    }
});
//            dots = jQuery.grep(arr, function (value) {
//            return value != number});