JSFiddle - React, Tailwind, and code Playground

by Mi_Creativity

HTML

<div>
	<form id="ChartsForm">
		<div id="optionsheader">
			<div id="dateoptions">
				<p>Until date: <input id="until" type="date" name="until_date" value="Until date"></p>
				<p>Since date: <input id="since" type="date" name="since_date" value="Since date"></p>
			</div>
		</div>
		<div id="selectaccount">
			<select name="accmenu" id="accmenu" style="width:300px; float:left; clear:both;">
                <option value="">Choose your page</option>
                <option value="1">Page 1</option>
                <option value="2">Page 2</option>
                <option value="3">Page 3</option>
                <option value="4">Page 4</option>
            </select>
		</div>
		<div class="insightsoptions">
			<p>Choose your insights:</p>
			<input id="newLikes" class="insightsbuttons" type="submit" name="submit" value="Daily new likes">
			<input id="unlikes" class="insightsbuttons" type="submit" name="submit" value="Daily unlikes">
		</div>
		<div class="insightsgraphs">
			<div id="dailyNewLikes" class="chartcontainer"></div>
			<div id="dailyUnlikes"></div>
		</div>

	</form>
</div>

CSS

.insightsbuttons {
	background-color: #E42217;
	display: block;
	height: 50px;
	margin-top: 5px;
	width: 150px;
}
.insightsgraphs {
	float: left;
	height: 235px;
	margin-left: 3px;
	margin-right: 3px;
	width: 470px;
}
.insightsgraphs div {
	display: none;
}
.insightsoptions {
	clear: both;
	float: left;
	width: 150px;
}
.insightsoptions p {
	display: block;
	height: 28px;
	line-height: 28px;
	margin-bottom: 12px;
	margin-top: 10px;
	text-align: center;
}
#newLikes.green {
	background-color: #347C17;
}
#unlikes.green {
	background-color: #347C17;
}
.req{
    border:2px red solid;
}
.required{
    color:red;
    font-size: 0.8em;
    font-style:italic;
    }

JavaScript

$(function () {
   //removing the highlighting class on change
    $('#until').change(function() {
        $(this).removeClass('req').next('.required').remove();
    });
    $('#since').change(function() {
        $(this).removeClass('req').next('.required').remove();
    });
        
  $('#accmenu').change(function() {
        var dSince= $('#since').val();
        var dUntil= $('#until').val();
        if(dSince=='' || dUntil==''){
        alert('You MUST select Both dates!');
        $(this).val(0); // Set the menu to the default 
           //Adding the Highlight and focus
             if(dSince==''){
             $('#since').addClass('req').after('<span class="required">- required *</span>').focus();}
            if(dUntil==''){
                $('#until').addClass('req').after('<span class="required">- required *</span>').focus();}
           
        }else{
		$(".insightsgraphs div").hide();
		$(".insightsoptions input").removeClass("green");
		$("#newLikes").one('click', function () {
            $("#dailyNewLikes").html('</p>Test daily new likes</p>');
			return false;
		});
		$("#unlikes").one('click', function () {
            $("#dailyUnlikes").html('</p>Test daily unlikes</p>');
			return false;
		});
        }  //End of the if statement
	});
	$("#newLikes").on('click', function(){
		$(this).toggleClass('green');
		$('#dailyNewLikes').toggle();
		return false;
	});
	$("#unlikes").on('click', function(){
		$(this).toggleClass('green');
		$('#dailyUnlikes').toggle();
		return false;
	});
      
});