Input Age (AR)

Get age from form and show a message

HTML

<div id="container">
  <p>ادخل العمر</p>
  <p>
    <input id="age" type="number">
    <br>
    <span id="error"></span>
  </p>
  
   
  <button>ادخل</button>
  <p id="resault"></p>
</div>

CSS

body {
  direction: 'rtl';
  background: #20262E;
  padding: 20px;
}

#container {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

input {
  border: none;
  background: gainsboro;
  padding: 8px;
  border-radius: 5px;
}
#error {
 color: #ff0000;
 font-size: 13px;
 display: none;
}

#resault {
  display: none;
}

JavaScript

// find elements
var button = $("button");
var resault = $("#resault");
var error = $("#error");

// handle click and add class
button.on("click", function(){

  var age = $("#age").val();
  
  if(age === ''){
  	error.text('الرجاء ادخال العمر');
    return error.fadeIn();
  }
  
  resault.fadeIn();
  
  if(age < 18){
    resault.text('عمرك اقل من 18 سنة');
  } else if( age < 30 ){
    resault.text('عمرك اقل من 30 سنة');
    
  }else if (age < 50 ){
    resault.text('عمرك اقل من 50 سنة');
	}else{
    resault.text('عمرك اكبر من 50 سنة');
  }
  error.fadeOut();
})