JSFiddle - React, Tailwind, and code Playground

by Kvark

HTML

<body>
		<div id="container">
			<div id="header">
				<h1>
					Range Definition
				</h1>
			</div>
			<form>
				<div id="wrapper">
				</div>
			</form>
			<div id="rangebar">
				<p> - [100 %] -</p>
				<p> - [ 90 %] -</p>
				<p> - [ 80 %] -</p>
				<p> - [ 70 %] -</p>
				<p> - [ 60 %] -</p>
				<p> - [ 50 %] -</p>
				<p> - [ 40 %] -</p>
				<p> - [ 30 %] -</p>
				<p> - [ 20 %] -</p>
				<p> - [ 10 %] -</p>
				<p> - [  0 %] -</p>
			</div>
			<div id="controls">
				<p><input id="cls" name="cls" type="button" value="Clear all"><input id="add" name="add" type="button" value="Add range"><input id="del" name="del" type="button" value="Delete range"><input id="set" name="set" type="button" value="Set default"></p>
			</div>
			<div id="footer">
			</div>
		</div>
	</body>

CSS

html, body
			{
				margin: 0;
				padding: 0;
				height: 100%;
			}

			body
			{
				font: 76% arial,sans-serif
			}
			
			p
			{
				margin:0 10px 10px
			}
			
			a
			{
				display:block;
				color: #981793;
				padding:10px;
			}
			
			div#header h1
			{
				height:80px;
				line-height:80px;
				margin:0;
				padding-left:10px;
				background: #EEE;
				color: #79B30B
			}
			
			div#range0 
			{
				background: #CD0A31;
				height: 10%;
				width: 600px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range1 
			{
				background: #F43445;
				height: 10%;
				width: 600px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range2 
			{
				background: #F44C34;
				height: 10%;
				width: 600px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range3 
			{
				background: #F47634;
				height: 10%;
				width: 600px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range4 
			{
				background: #F49C34;
				height: 10%;
				width: 600px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range5 
			{
				background: #F4C934;
				height: 10%;
				width: 600px;
				border-top: 2px #000000 groove;
				border-bottom: 2px #000000 groove; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				display: table;
			}
			
			div#range6 
			{
				background: #F4F434;
				height: 10%;
				width: 600px;
				border-top: 2px #000000 groove;
				border-bottom: 2px...

JavaScript

$(document).ready(function()
			{
				var RangesColors = ["#CD0A31", "#F43445", "#F44C34", "#F47634", "#F49C34", "#F4C934", "#F4F434", "#D5F434", "#AEF434", "#5BBE3C"]; 
				var num = $('#wrapper').size() - 1;
				var wrapper = $("#wrapper");
                wrapper.append('<div id="range0">0</div>');
				$('#range0').css({ "background": RangesColors[0], 'height': '100%' });
				num++;
                
				$('#add').click(function() 
				{
					if (num > 9)
					{
						num = 10;
					}
					else
					{
						if (num != 10)
						{
							wrapper.append('<div id="range' + num + '">' + num + '</div>');
							$('#range'+ num).css({ "background": RangesColors[num] });
							num++;
							for (var ii = 0; ii < num; ii++)
							{
								$('#range'+ ii).css({ 'height': (100 / num) + '%' });
							}
						}
					};
				});
	
				$('#cls').click(function() 
				{ 
					if(num > 1) 
					{
						do 
						{
							num--;
							$('#range' + num + ':last').remove();
						} 
						while (num > 1);
					}
					$('#range0').css({ "background": RangesColors[0], 'height': '100%' });
				});
				
				$('#del').click(function() 
				{
					if (num > 1) 
					{
						num--;
						$('#range' + num + ':last').remove();
						for (var ii = 0; ii < num; ii++)
						{
							$('#range'+ ii).css({ 'height': (100 / num) + '%' });
						} 
					}
				});
	
				$('#set').click(function() 
				{
					if (num > 1) 
					{
						do 
						{
							num--;
							$('#range' + num + ':last').remove();
						} 
						while (num > 0);
					};
					$('#range0').css({ "background": RangesColors[0], 'height': '10%' });
					do
					{
						wrapper.append('<div id="range' + num + '">' + num + '</div>');
						$('#range'+ num).css({ "background": RangesColors[num], 'height': '10%' });
						num++;
					}
					while (num < 10);
				});
			});