Kelly calculator

By sasko

HTML

<head>
<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>
</head>

<div id="wrap">
<h2>Kelly calculator</h2>
    <div class="formStyles" > 

        <input id="probability" type="text" value="Probability" /><br />
        <input id="odds" type="text" value="Odds" /><br />
        <input id="balance" type="text" value="Balance" /><br />
        
        <input id="submit" type="submit" value="Submit" />
        <input id="reset" type="reset" value="Reset" />
        <div id="result"></div>
    </div>
</div>

CSS

body, html {
    margin: 5px; padding: 0;
    font-family: 'Yanone Kaffeesatz';
}

h2{
    padding: 10px 10px 20px 10px;
    font-size: 20px;
    color: #444444;
    letter-spacing: 1px;
}

#wrap{
    width: 400px;
    margin: 0px auto;
    overflow: hidden;
}

form{
    margin-bottom: 20px;
}

.formStyles input[type="submit"],
.formStyles input[type="reset"],
.formStyles input[type="image"] {
    padding: 9px 20px 6px 20px;
    margin: 4px 2px;
    color: #444444;
    font-family: 'Yanone Kaffeesatz';
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    background-color: #F0F0F0;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F0F0F0), color-stop(100%, #F5F5F5));
    background-image: -webkit-linear-gradient(bottom, #F0F0F0 0%, #F5F5F5 100%);
    background-image: -moz-linear-gradient(bottom, #F0F0F0 0%, #F5F5F5 100%);
    background-image: -o-linear-gradient(bottom, #F0F0F0 0%, #F5F5F5 100%);
    background-image: -ms-linear-gradient(bottom, #F0F0F0 0%, #F5F5F5 100%);
    background-image: linear-gradient(bottom, #F0F0F0 0%, #F5F5F5 100%);

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
    text-shadow: 0px 1px 0px white;
}

.formStyles input[type="submit"]:hover,
.formStyles input[type="reset"]:hover,
.formStyles input[type="image"]:hover {
    background-color: #E8E8E8;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E8E8E8), color-stop(100%, #F5F5F5));
    background-image: -webkit-linear-gradient(bottom, #E8E8E8 0%, #F5F5F5 100%);
    background-image: -moz-linear-gradient(bottom, #E8E8E8 0%, #F5F5F5 100%);
    background-image: -o-linear-gradient(bottom, #E8E8E8 0%, #F5F5F5 100%);
    background-image: -ms-linear-gradient(bottom, #E8E8E8 0%, #F5F5F5 100%);
    background-image: linear-gradient(bottom, #E8E8E8 0%, #F5F5F5 100%);

    -webkit-box-shadow: 0px 1px 1px...

JavaScript

/*
formStyles_green
formStyles_red
*/
$('#submit').on('click', function() {
    var probability = $('#probability').val();
    var odds = $('#odds').val();
    var balance = $('#balance').val();
    
    result = parseFloat(((probability/100)* (odds - 1) / (odds - 1) * odds - 1).toFixed(4)) * 0.95;
    
    var stake = ((balance / 100) * parseFloat((result * 100).toFixed(2)))
    $('#result').text((result * 100).toFixed(2) + '% of' + balance + '€ which is ' +stake + '€');
});