JSFiddle - React, Tailwind, and code Playground

by ruslyrossi

HTML

<input type="text" placeholder="e.g. 4000 per month" id="salary" autocomplete="off" class="allownumericwithdecimal" />
<div id="result" style="margin-top:800px">Result
    <div>
        <div id="negative" style="display:none">Negative</div>
        <div id="positive" style="display:none">Positive</div>

JavaScript

var delay = (function () {
	    var timer = 0;
	    return function (callback, ms) {
	        clearTimeout(timer);
	        timer = setTimeout(callback, ms);
	    };
	})();

	function scrollToElement(elem) {
	    $('html, body').delay(5000).animate({
	        scrollTop: $(elem).offset().top
	    }, 2000);
	}

	$('#salary').keyup(function () {

	    var salary = $('#salary').val();

	    delay(function () {
	        calculate(salary);
	    }, 1000);

	});

	function calculate(salary) {

	    if (salary) {

	        var total_net_income = salary * 3;

	        if (total_net_income > 1000) {
	            // positive
	            $("#negative").hide();
	            $("#positive").delay(1000).fadeIn(800);
	            scrollToElement('#result');
	        }

	    }

	}