JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<input class="input_phone_num" type="tel" />
<div class="dial-call-button">Submit!</div>

CSS

/*
-------------
animations */

@-webkit-keyframes open {
  0% {
    opacity: 0;
    height: 0;
    margin: 0 10px;
  }
  100% {
    height: 17px; 
    opacity: 1;
    margin: 10px;
  }
}

.Animation--open {
  -webkit-animation-name: open;
  -webkit-animation-duration: 0.12s;
}

@-webkit-keyframes close {
  0% {
    opacity: 1;
    height: 17px;
    margin: 10px;
  }
  100% {
    opacity: 0;
    height: 0;
    margin: 0 10px;
  }
}

.Animation--close {
  -webkit-animation-name: close;
  -webkit-animation-duration: 0.12s;
}


/*
--------------------
styles */

.input_phone_num{
    width: 144px;
    margin: 10px 10px 0 10px;
    padding: 5px 10px;
    border: 1px solid lightblue;
    font-size: 11px;
    color: lightblue;
    outline: none;
    -webkit-transition: 0.3s;
}

    .input_phone_num:focus{
        box-shadow: 0 0 8px rgba(0,0,0,0.3);
    }

.alert{
  width: 152px; height: 17px; 
  margin: 10px;
  padding: 3px 3px 3px 9px;
  border: 1px solid #e5ce8e;
  background-color: #fff6dd;
  font: italic 11px/17px helvetica;
  color: #b5a270;
}

.dial-call-button {
  width: 164px;
  margin: 10px 0 0 10px;
  padding: 7px 0 8px 0;
  background-color: #7fbf4d;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
  background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: linear-gradient(top, #7fbf4d, #63a62f);
  border: 1px solid #63a62f;
  border-bottom: 1px solid #5b992b;
  -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
     -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
          box-shadow: inset 0 1px 0 0 #96ca6d;
  color: #fff;
  font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  text-align: center;
  text-shadow: 0 -1px 0 #4c9021;
 ...

JavaScript

/*allow numbers and plus sign only to be inputed. alert slide when bad*/
(function(){  
    var removeAlert;

    var startTimeout = function () {
        removeAlert =   setTimeout(
                            function () {
                                $('.alert').addClass('Animation--close');

                                setTimeout(
                                    function () {
                                        $('.alert').remove();
                                    }
                                , parseFloat($('.Animation--close').css('-webkit-animation-duration'))*1000);
                            } 
                        , 2000);
    };

    var restartTimeout = function () {
        if(removeAlert !== undefined) {
            clearTimeout(removeAlert);
            startTimeout();
        }
    };


    $('.input_phone_num').on(
        'keypress',   
        function(event) {
            if (
                   isNaN(String.fromCharCode(event.charCode)) 
                && String.fromCharCode(event.charCode) !== "+"
            ) {
                if (!document.getElementsByClassName('alert')[0]) {

                    $("<div/>", {
                        class: "alert Animation--open",
                        text: "Numbers (0-9, +) only."
                    }).insertAfter('.input_phone_num');

                    startTimeout();
                } else {
                    restartTimeout();
                }

                return false;
            }
        }
    );
})();

/*input empty? return false*/
(function(){
    $('.dial-call-button').on(
        'click',
        function () {
            if($('.input_phone_num').val() !== "") { 
                alert('Form submitted.'); 
            }
        }
    );
})();