JSFiddle - React, Tailwind, and code Playground

by MichelleGlauser

HTML

<h1 class="title">Wacky Painter</h1>
	<div class="easel">
	</div>
	<form class="clear_board">
		<button type="button" id="clear_button" class="btn" onclick="clearBoard()">Clear Board</button>
	</form>

CSS

body {
  font-family: sans-serif;
  color: #ff757a;
}

.easel {
  width: 300px;
  outline: #c8c8c8 5px solid;
  margin: 0 auto;
}

.square {
  width: 20px;
  height: 20px;
  outline: thin solid #c8c8c8;
  display: inline-block;
  margin-top:-2px;
}

form {
  margin: 10px auto;
}

.title {
  margin: 0 auto;
  text-align: center;
  padding-bottom: 20px;
}

JavaScript

window.setUpEasel = function() {
	var squareString = "";
	for(var i=0; i < 195; i++) {
		squareString+='<div class="square"></div>';
	}
	$('.easel').append(squareString)
}

window.giveColor = function() {
	$('.easel').on('click', '.square', function() {
		var letters = '0123456789ABCDEF'.split('');
		var randomColor = '#';
		for (var i = 0; i < 6; i++ ) {
			randomColor += letters[Math.round(Math.random() * 15)];
		}
		$($(this)).css('background-color', randomColor);
	})
}
window.clearBoard = function() {
	$('#clear_button').on('click', function () {
		$('.square').css('background-color', 'white');
	})
}

	$(function () {
		setUpEasel();
		giveColor();
	});