index.html
|
1 2 3 4 |
<h1>Aspect Ratio Calculator</h1> <label>Width</label><input type="text" name="width"> <label>Height</label><input type="text" name="height"> <p class="result"></p> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
body { margin: 40px; } * { box-sizing: border-box; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; margin-top: 10px; } input { width: 100px; } .result { margin-left: 70px; } |
script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
jQuery.noConflict(); jQuery( document ).ready( function() { jQuery( 'input' ).on( 'keyup', function() { var width = jQuery( '[name="width"]' ).val(), height = jQuery( '[name="height"]' ).val(), ratio = '1 : '; ratio += height / width; jQuery( '.result' ).text( ratio ); }) }); |
