JSFiddle - React, Tailwind, and code Playground

by sh0kri

HTML

<!-- Do not copy this code -->
<html>
<head>
    <title>Age Calculator</title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <div id="main_container">
        <div id="birth_date_input"><b>أدخل العمر </b>: <input type="date" id="birth_date" placeholder="mm/dd/yyyy"></div>
        <br/>
        <div id="calculate" class="btn btn--primary uppercase">تأكد من تصريح الدخول</div>
        
        <div id="age_container">
            <span id="exact_age">العمر</span>
        </div>
    </div>
</body>
</html>

CSS

body {
  direction: 'rtl';
  background: #20262E;
  padding: 20px;
}
#main_container {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

#birth_date_input, #age_container {
    text-align: center;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
}

#age_container {
   width: 300px;
  background: #fff;
  color: #a3a3a3;
  font: inherit;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
  border: 0;
  outline: 0;
  padding: 5px 18px;
  background-color: non;
    display : none;
}

#age {
    padding: 5px;
}

#birth_date {
    width: 200px;
  background: #fff;
  color: #a3a3a3;
  font: inherit;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
  border: 0;
  outline: 0;
  padding: 22px 18px;
}

.btn {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}
.btn--primary {
  background: #7f8ff4;
  color: #fff;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  padding: 12px 36px;
}
.btn--primary:hover {
  background: #6c7ff2;
}
.btn--primary:active {
  background: #7f8ff4;
  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
}


//////////////////////////////////////////////////////////////////////////

JavaScript

$(document).ready(function(){
    $("#calculate").click(function(){
        var mdate       = $("#birth_date").val().toString();
        var yearThen    = parseInt(mdate.substring(0,4), 10);
        var monthThen   = parseInt(mdate.substring(5,7), 10);
        var dayThen     = parseInt(mdate.substring(8,10), 10);
        
        var today       = new Date();
        var birthday    = new Date(yearThen, monthThen-1, dayThen);
        
        var differenceInMilisecond = today.valueOf() - birthday.valueOf();
        
        var days = Math.round(differenceInMilisecond / (60*60*24*1000));
        
        if(differenceInMilisecond < 0) {
           $('#age_container').css('display' , 'none');
            alert('لا يمكن أن يكون تاريخ الميلاد أقل من التاريخ الحالي');
            return;
        }
        
        var year_age    = Math.floor(differenceInMilisecond / 31536000000);
        var day_age     = Math.floor((differenceInMilisecond % 31536000000) / 86400000);
        
        if ((today.getMonth() == birthday.getMonth()) && (today.getDate() == birthday.getDate())) {
            alert("عيد ميلاد سعيد!!!");
        }
        
        var month_age   = Math.floor(day_age/30);
        
        day_age         = day_age % 30;
        
        if (isNaN(year_age) || isNaN(month_age) || isNaN(day_age)) {
            $("#exact_age").text("تاريخ ميلاد خاطئ نرجوا المحاولة مرة اخرى");
        } else {
            $('#age_container').css('display' , 'block');
            $("#exact_age").html(" <span id='young'></span><br/><br/><span id='days'></span><br>عمرك هو<br><span id=\"age\">" + year_age + " years " + month_age + " months " + day_age + " days</span>");
            
            if(year_age <= 16) {
                $('#young').html('يسمح الدخول بدون الحاجه لفيزة');
            } else if(year_age > 16 && year_age <= 49) {
                $('#young').html('تحتاج استخراج فيزا للدخول');
            } else if(year_age > 49) {
                $('#young').html('لا تحتاج...