JSFiddle - React, Tailwind, and code Playground

by milen_vm

HTML

<body>		
		<div>
			<h2>Geometry Shapes</h2>
			<form name="shapes" method="post">
				<div id="parameters">
					<label for="x">X1:</label>
					<input type="text" id="x1" name="x1-value" value="50" />
					<label for="y">Y1:</label>
					<input type="text" id="y1" name="y1-value" value="60" />
					<label for="color">Color:</label>
					<input type="color" id="color" name="color" value="#f8d888" />
					<br />
					<div id="optional"></div>
					<label for="shape">Shape:</label>
					<select id="shape">
						<option value="point">Point</option>
						<option value="segment">Segment</option>
						<option value="triangle">Triangle</option>
						<option value="rectangle">Rectangle</option>
						<option value="circle">Circle</option>
					</select>				
					<input type="button" id="add" value="Add" />
				</div>
				<select id="list" size="20"></select>
				<div id="buttons">
					<input type="button" id="up" value="&#8657;" />
					<input type="button" id="down" value="&#8659;" />
					<input type="button" id="remove" value="-" />
				</div>				
			</form>
			<canvas id="canvas" width="600" height="500"></canvas>
		</div>				
	</body>

CSS

body, div, h2, form, input, canvas {
	box-sizing: border-box;
}

body > div {
	width: 1100px;
	margin: 0 auto;
}
h2 {
	text-align: center;
}

form {
	display: inline-block;
	border: 1px solid black;
	width: 465px;
	height: 502px;
	vertical-align: top;
	padding: 15px 0 0 15px;
}

input[type="text"] {
	width: 50px;
	margin-bottom: 5px;
}

#parameters {
	height: 130px;
}

#list {
	width: 400px;
	vertical-align: bottom;
}

#buttons{
	max-width: 35px;
	display: inline-block;
	vertical-align: top;
	margin-left: 5px;
}

#buttons > input {
	width: 30px;
}

canvas {
	display: inline-block;
	border: 1px solid black;
	vertical-align: top;
}

JavaScript

var addOptions = (function() {
	function addOptions() {
		var optionalPrams = document.getElementById('optional');
		var shapeType = document.getElementById('shape').value;
	
		switch(shapeType) {
			case 'point':
				optionalPrams.innerHTML = '';
				break;
			case 'segment':
				optionalPrams.innerHTML = segmentParams();
				break;
			case 'triangle':
				optionalPrams.innerHTML = trianglePrams();
				break;
			case 'rectangle':
				optionalPrams.innerHTML = rectangleParams();
				break;
			case 'circle':
				optionalPrams.innerHTML = circleParams();
				break;
			default:
				break;
		}
	}
	
	function segmentParams() {
		var content = '<label for="x2">X2:</label>\n' +
			'<input type="text" id="x2" name="x2-value" value="0" />\n' +
			'<label for="y2">Y2: </label>' +
			'<input type="text" id="y2" name="y2-value" value="0" />';
			
		return content;
	}
		
	function trianglePrams() {
		var content = segmentParams();
		content += '\n<br />\n' +
			'<label for="x3">X3:</label>\n' +
			'<input type="text" id="x3" name="x3-value" value="0" />\n' +
			'<label for="y3">Y3: </label>' +
			'<input type="text" id="y3" name="y3-value" value="0" />';
			
		return content;
	}
	
	function rectangleParams() {
		var content = '<label for="width">Width:</label>\n' +
			'<input type="text" id="width" name="width-value" value="200" />\n' +
			'<label for="height">Height: </label>' +
			'<input type="text" id="height" name="height-value" value="100" />';
			
		return content;
	}
	
	function circleParams() {
		var content = '<label for="radius">Radius:</label>\n' +
			'<input type="text" id="radius" name="radius-value" value="150" />\n';
			
		return content;
	}
	
	return addOptions;
})();

document.getElementById('shape').addEventListener('change', addOptions);

var Shape = (function() {
	Object.prototype.extend = function extend(parent) {
		if (!Object.create) {
	        Object.prototype.create = function (proto) {
	            function F() {
	            };
	           ...