JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<body>
	<div class="widget_container">

		<div class="controls">

            <!-- Orange -->
            <div id="group_orange" class="color_btn" data-color="orange">

    			<div class="option_orange">1</div>

                <div class="controls_orange">
                    <div class="orange_minus btn_action" data-type="minus">-</div>
                    <div class="orange_plus btn_action"  data-type="plus">+</div>
                </div>

            </div>

            <!-- Green -->
            <div id="group_green" class="color_btn" data-color="green">

                <div class="option_green">1</div>

                <div class="controls_green">
                    <div class="green_minus btn_action" data-type="minus">-</div>
                    <div class="green_plus btn_action"  data-type="plus">+</div>
                </div>

            </div>

            <!-- Red -->
            <div id="group_red" class="color_btn" data-color="red">

                <div class="option_red">1</div>

                <div class="controls_red">
                    <div class="red_minus btn_action" data-type="minus">-</div>
                    <div class="red_plus btn_action"  data-type="plus">+</div>
                </div>

            </div>
		</div>
	</div>
    
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="js/main.js"></script>
</body>

CSS

.widget_container {
	padding: 10px;
	width: auto;
	height: 100px;
	background: #eee;
	font-family: Arial, sans-serif;

	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.option_orange,
.option_green,
.option_red {
	position: relative;
	z-index: 3;
}

.option_orange,
.option_green,
.option_red,

.orange_minus, 
.orange_plus,

.green_minus, 
.green_plus,

.red_minus, 
.red_plus {
	float: left;
	width: 33px;
	height: 20px;
	color: #333;
	text-align: center;
	line-height: 20px;
	cursor: pointer;
}

.controls_orange,
.controls_green,
.controls_red { position: relative; }

.orange_minus, 
.orange_plus,
.green_minus, 
.green_plus,
.red_minus, 
.red_plus { position: absolute; }

.option_orange { background: #ff8b25; }

#group_orange,
#group_green,
#group_red {
	float: left;
}

#group_green {
	margin: 0 10px;
}
.option_green {
	/*margin: 0 10px;*/
	background: #59c24b;
}

.option_red { background: #ff0000; }

.option_orange,
.option_green,
.option_red { color: #fff; }

.orange_minus, 
.orange_plus { background: #ffd98a; }

.green_minus, 
.green_plus { background: #d4eece; }

.red_minus, 
.red_plus { background: #ffb2b2; }

JavaScript

(function() { "use strict";

	var new_w;

	// Hover over button group
	$('.color_btn').unbind('mouseover').bind('mouseover', function() {
		
		var color = $(this).data('color').toString();

		// Shift button over to reveal [ - ] button:
		$('.option_'+color).css({left: "30px"});

		// Shift [ + ] button over to reveal it:
		$('.'+color+'_plus').css(
			{
				left: ($('.'+color+'_plus').width() 
					 + $('.option_'+color).width()
					 - 3)
			}
		);

		// Upddate width of this button group:
		new_w = ($('.'+color+'_minus').width() 
				  + $('.'+color+'_plus').width()
				  + $('.option_'+color).width());

		$('#group_'+color).width(new_w);

		$('.btn_action').unbind('click').bind('click', function() {
			var type = $(this).data('type').toString();

			console.log(color);
			console.log(type);

			var number = parseInt($('option_'+color).text(), 10);
			// var number = $('option_'+color).text();
			// var num = parseInt(number, 10);
			console.log(number);
			// console.log(num);

			if (type === 'plus') {
				// number = number + 1;
				$('option_'+color).text(number + 1);
				console.log(number);
			}
		});
	});

	// Mouse off button group
	$('.color_btn').unbind('mouseout').bind('mouseout', function() {

		var color = $(this).data('color').toString();

		$('.option_'+color).css({left: "0px"});
		$('.'+color+'_plus').css({left: "0px"});

		new_w = $('.option_'+color).width();
		$('#group_'+color).width(new_w);
	});

})();