JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

	<head>
	
		<title>Javascript/jQuery Project</title>
		<link rel="stylesheet" href="odin.css">
		<meta charset="UTF-8"> 
		<script src="odinjquery.js"></script>
		
	</head>

	<body>
	
		<section id="buttons">
			<button type="button" id="black">Reset Black</button>
			<button type="button" id="random">Reset Random</button>
			<button type="button" id="fiftyshades">Reset 50 Shades</button>
		</section>
		
		<div class="container">
			<div class="knob"></div>
			<div class="knob" id="knob2"></div>
		</div>
		
		<script src="odin.js"></script>
		
	</body>

</html>

CSS

.grey {
	float: right;
	background-color: grey;
	height: 5px;
	width: 5px;
	margin: 0px;
	padding: 0px;
}
.container {
	clear: both;
	position: relative;
	height: 500px;
	width: 500px;
	margin: 0px auto;
	border: 35px solid red;
	border-bottom: 80px solid red;
	border-radius: 25px;
}
.black {
	background-color: black;
}
button {
	display: inline;
	float: left;
	background-color: #0066FF;
	border: none;
	color: white;
	font-weight: bold;
	display: block;
	margin: 10px 5px;
	padding: 5px 10px;
}
#buttons {
	margin: 0px auto;
	width: 32%;
}
.knob {
	position: absolute;
	background-color: white;
	height: 85px;
	width: 85px;
	border-radius: 100px;
	margin-top: 490px;
}
#knob2 {
	margin-left: 415px;
}
.fiftyshades {
    background-color: black;
    opacity: 0.1;
}

JavaScript

$(document).ready(function() {

var reset = function() {
	var w = prompt("How many blocks per side?");
	var newDim = $(".container").width()/(w);
	$(".black").remove();
	$(".grey").remove();
	for (i=0; i<Math.pow(w, 2); i++) {
		$('.container').append('<div class="grey"></div>');
	}
	$(".grey").css("height", newDim);
	$(".grey").css("width", newDim); 
}

reset();

$(".grey").mouseenter(function() {
	$(this).addClass("black");
});
    
$("#black").click(function() {

	reset();

	$(".grey").mouseenter(function(){
		$(this).addClass("black");
	});
});
    
$("#random").click(function() {
	
	reset();
	
	function getRandomColor() {
		return '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
	}
	$(".grey").mouseenter(function(){
		$(this).css("background-color", getRandomColor());
	});
});
    
$("#fiftyshades").click(function() {

    reset();
    
	
		
    $(".grey").mouseenter(function(){
        if (!$(this).hasClass("fiftyshades"))
		{
			$(this).addClass("fiftyshades");
			console.log("Adding fiftyshades")
			if ($(this).hasClass("fiftyshades"))
			{
				console.log("Add was success");
				console.log("Classes: ")
				var className = $(this).attr('class');
				console.log("     " + className);
			}
		}
    });
	
	$(".fiftyshades").mouseenter(function(){
		var shade =  parseFloat($(this).css("opacity"));
		console.log("Shade: " + shade);
		if (shade < 1) {
			$(this).css("opacity", shade + 0.1);
		}
	});
});
    
});