Exercise Solution: Events

1. Add an Error Class on blur Top ↑

$( "#t1" ).on( "blur", function () {
    const value =
        Number( $( this ).val() );

    $( this ).toggleClass(
        "error",
        Number.isFinite( value ) &&
        value > 10
    );
});

2. Calculator Buttons Top ↑

function readNumbers() {
    return [
        Number( $( "#t2" ).val() ),
        Number( $( "#t3" ).val() )
    ];
}

$( "#add" ).on( "click", function () {
    const [ a, b ] = readNumbers();
    $( "#display2" ).text( a + b );
});

$( "#subtract" ).on( "click", function () {
    const [ a, b ] = readNumbers();
    $( "#display2" ).text( a - b );
});

$( "#multiply" ).on( "click", function () {
    const [ a, b ] = readNumbers();
    $( "#display2" ).text( a * b );
});

$( "#divide" ).on( "click", function () {
    const [ a, b ] = readNumbers();
    $( "#display2" ).text(
        b === 0
            ? "Cannot divide by zero"
            : a / b
    );
});

3. Enable Buttons only when Both Inputs Are Filled Top ↑

const $buttons =
    $( "#add, #subtract, #multiply, #divide" );

function updateButtons() {
    const ready =
        $( "#t2" ).val().trim() !== "" &&
        $( "#t3" ).val().trim() !== "";

    $buttons.prop(
        "disabled",
        !ready
    );
}

$( "#t2, #t3" ).on(
    "input",
    updateButtons
);

updateButtons();

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<input type='text'  id='t1'> 
<script>
$(document).ready(function() {

$('#t1').blur(function(){
var my_val=parseInt($('#t1').val());	

if(my_val >10 ){
$('#t1').addClass('error');
}
})

})
</script>

Original example 2

<div class='row'> <div class='col-md-2'><input type='text' class='form-control t_input' id='t2'> </div><div class='col-md-2'><input type='text' class='form-control t_input' id='t3'> </div><div class='col-sm-2'><span id=display2>0</span> </div></div>
<br>
<div class='row'> <div class='col-md-2'><button type='button' class='btn btn-success' id=my_b2>+</button> </div><div class='col-md-2'><button type='button' class='btn btn-danger' id=my_b3>-</button> </div>
<div class='col-md-2'><button type='button' class='btn btn-warning' id=my_b4>*</button> </div>
<div class='col-md-2'><button type='button' class='btn btn-info' id=my_b5>/</button> </div>
</div>

Original example 3

<script>
$(document).ready(function() {

$('#my_b2').click(function(){
var my_val2=parseInt($('#t2').val());	
var my_val3=parseInt($('#t3').val());	
$('#display2').text(my_val2 + my_val3)
})

$('#my_b3').click(function(){
var my_val2=parseInt($('#t2').val());	
var my_val3=parseInt($('#t3').val());	
$('#display2').text(my_val2 - my_val3)
})

$('#my_b4').click(function(){
var my_val2=parseInt($('#t2').val());	
var my_val3=parseInt($('#t3').val());	
$('#display2').text(my_val2 * my_val3)
})

$('#my_b5').click(function(){
var my_val2=parseInt($('#t2').val());	
var my_val3=parseInt($('#t3').val());	
$('#display2').text(my_val2 / my_val3)
})

})
</script>

Original example 4

<div class='row'> <div class='col-md-2'><input type='text' class='form-control t_input' id='t12'> </div><div class='col-md-2'><input type='text' class='form-control t_input' id='t13'> </div><div class='col-sm-2'><span id=display12>0</span> </div></div>
<br>
<div class='row'> <div class='col-md-2'><button type='button' class='btn btn-success' id=my_b12>+</button> </div><div class='col-md-2'><button type='button' class='btn btn-danger' id=my_b13>-</button> </div>
<div class='col-md-2'><button type='button' class='btn btn-warning' id=my_b14>*</button> </div>
<div class='col-md-2'><button type='button' class='btn btn-info' id=my_b15>/</button> </div>
</div>

Original example 5

<script>
$(document).ready(function() {
$("#my_b12,#my_b13,#my_b14,#my_b15").prop('disabled',true);

my_function=function my_function(){
var my_val2=$('#t12').val();	
var my_val3=$('#t13').val();
if(my_val2.length >0 && my_val3.length >0){
$("#my_b12,#my_b13,#my_b14,#my_b15").prop('disabled',false);	
}else{
$("#my_b12,#my_b13,#my_b14,#my_b15").prop('disabled',true);		
}	
}

$('#t12,#t13').blur(function(){
my_function()
})	

$('#my_b12').click(function(){
var my_val2=parseInt($('#t12').val());	
var my_val3=parseInt($('#t13').val());	
$('#display12').text(my_val2 + my_val3)
})

$('#my_b13').click(function(){
var my_val2=parseInt($('#t12').val());	
var my_val3=parseInt($('#t13').val());	
$('#display12').text(my_val2 - my_val3)
})

$('#my_b14').click(function(){
var my_val2=parseInt($('#t12').val());	
var my_val3=parseInt($('#t13').val());	
$('#display12').text(my_val2 * my_val3)
})

$('#my_b15').click(function(){
var my_val2=parseInt($('#t12').val());	
var my_val3=parseInt($('#t13').val());	
$('#display12').text(my_val2 / my_val3)
})

})
</script>

Additional Original Learning Routes Top ↑

• ../templates/custom.css

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: