JSFiddle - React, Tailwind, and code Playground

by kannankeril

HTML

<div id = "table">
    <div class = "row">
        <div class = "cell">        </div>
        <div class = "cell">        </div>
        <div class = "cell">        </div>
    </div>
    <div class = "row">
        <div class = "cell">         </div>
        <div class = "cell bggreen"> </div>
        <div class = "cell">         </div>
    </div>
    <div class = "row">
        <div class = "cell">        </div>
        <div class = "cell">        </div>
        <div class = "cell">        </div>
    </div>
</div>

CSS

#table { 
    display: table; 
}
.row { 
    display: table-row; 
}
.cell { 
    display: table-cell; 
    border : 1px solid black; 
    width : 100px; 
    height : 100px; 
    background-color:white;
}
.cell:hover { 
    cursor:pointer;
    background-color:yellow;
}
.bggreen {
    background-color: green;
}
.bggreen:hover {
    cursor: pointer;
    background-color: green;
}

JavaScript

/*
2.	Please write an HTML segment (assume this is in the middle of the page) that would render a 3 by 3 grid without using the <table> tag.

a.	Part 1 (No JavaScript)
i.	The middle square should be colored green on page load
ii.	The squares should all be 100 pixels by 100 pixels

b.	Part 2 (HTML, CSS, and JavaScript and all frameworks allowed)
i.	All requirements of Part 1 need to be met
ii.	On hovering over a square, the cursor needs to change from a cursor to a pointer
iii.	On hovering your cursor over an unselected square, the background needs to change to a yellow color
iv.	On hovering your cursor over a selected square, the background color should not change
v.	On clicking an unselected square, the background should change to the green background
vi.	At most only a single square should be selected at a time (clicking an unselected square should unselect the previously selected square)
vii.	On clicking a selected square, the square should be unselected and change back to the background color
*/

$(".cell").click(function(e){
    var isSelected = $(this).hasClass("bggreen");
    $(".cell").removeClass("bggreen");
    if (!isSelected){
        $(this).addClass("bggreen");
    }
});