How To Create A Sports Bet Calculator Using Javascript

I have created this simple straight bet calculator using JavaScript. It allows me to calculate, if it is a winning ticket, how much the payout will be. How it works? First I will

Solution 1:

Revised first version :)

const bt_Nwline = document.getElementById('New-Line')
  ,   xForm     = document.getElementById('form-X')
  ,   wTable    = xForm.querySelector('table')
  ,   baseLine  = wTable.querySelector('thead tr:nth-of-type(3)')
  ,   tBody     = wTable.querySelector('tbody')
  ,   tPayout   = wTable.querySelector('tfoot td:nth-of-type(2)')
  ;
xForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ;
xForm.onreset =_=>{ tPayout.textContent = '0.00' }
  ;
functionbetCalculator()
  {
  let bet  = xForm.betAmount.valueAsNumber || 0
    , odds = [...tBody.querySelectorAll('input')]
              .filter(ml=>!isNaN(ml.valueAsNumber) )
              .reduce((odd,ml)=> odd *= ml.valueAsNumber >= 0
                                      ? (ml.valueAsNumber /100) +1
                                      : (100 / Math.abs(ml.valueAsNumber)) +1
                    ,1)
  tPayout.textContent = ((odds *bet).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g,',')
  }
betCalculator()
  ;
bt_Nwline.onclick=_=>
  {
  tBody.appendChild( baseLine.cloneNode(true)) 
  }
tBody.onclick=e=>
  {
  if (!e.target.matches('button')) return
  wTable.deleteRow(e.target.closest('tr').rowIndex)
  betCalculator()
  }
xForm.oninput = betCalculator
  ;

table   { border-collapse: collapse; }
caption { background-color: #1a4641; color: whitesmoke; font-weight: bold;  padding: .6em;}
td:nth-of-type(1) { min-width:8em; }
td      { border: 1px solid grey; padding: .4em .8em; }
thead   { background-color: #7adfd3; color: #1d1313;  font-weight: bold; }

theadtr:nth-of-type(1) td:nth-of-type(1) { text-align: right; }
theadtr:nth-of-type(2) td:nth-of-type(1) { text-align: center; }

theadtr:nth-of-type(3) { display: none; counter-reset: line; }
tbodytr { counter-increment: line; }
tbodytd:nth-of-type(1) {  color: darkslategrey; }
tbodytd:nth-of-type(1)::before { content: counter(line) '\00a0-\00a0\00a0'; }

tfoot { font-weight: bold; }
tfoottd:nth-of-type(1) { text-align: right; }
tfoottd:nth-of-type(2)::before { content: '$ ' }

input { font-size: 1.2em; text-align: right; direction: rtl; width:8em;}

button  { 
  width: 2em;
  height: 1.4em;
  border-radius: 1em / .6em;
  color: whitesmoke;
  font-size: .9em;
  font-weight: bolder;
  line-height: .8em;
  padding: 0;
}
theadtr:nth-of-type(1) button { background-color: #063329; }
theadtr:nth-of-type(2) button { background-color: crimson; }
tbodybutton  { background-color: #071b3f;}

<formaction=""id="form-X"><table><captiontitle="Useful for both Negative ‘−’ and / or Positive ‘+’ Money Lines including Single Straight Bets!">
      True Odds Parlay Bet Calculator
    </caption><thead><tr><td>Bet Amount : </td><td><inputtype="number"step="10"value="0"name="betAmount"min="0"></td><td><buttontype="reset">&empty;</button></td></tr><tr><tdcolspan="2">Teams Money Lines</td><td><buttonid="New-Line">+</button></td></tr><tr><tdcontenteditablespellcheck="false">...</td><td><inputtype="number"step="10"value="0"></td><td><button>&#8722;</button></td></tr></thead><tbody></tbody><tfoot><tr><td> Payout : </td><tdcolspan="2"></td></tr></tfoot></table></form>

After looking your second Snippet I do that:

const myForm     = document.getElementById('my-form')
  ,   moneyLines = [...myForm.querySelectorAll('.moneyLine')]
  ;
myForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ; 
myForm.oninput = betCalculator
  ;
functionbetCalculator()
  {
  let bet  = myForm.betAmount.valueAsNumber || 0
    , odds = moneyLines
                .filter(ml=>!isNaN(ml.valueAsNumber) )
                .reduce((odd,ml)=> odd *= ml.valueAsNumber >= 0
                                        ? (ml.valueAsNumber /100) +1
                                        : (100 / Math.abs(ml.valueAsNumber)) +1
                      ,1)

  
  myForm.result.value = (odds *bet).toFixed(2)
  }
betCalculator()

form#my-form { position: relative; }
legend {font-size: .9em; }
legend:after { content: '\00a0' }
fieldset { display:block; width: 16em; position: absolute; }
fieldset:nth-child(1){ top: 1em; left: 1em; }
fieldset:nth-child(2){ top: 1em; left:20em; }
fieldset:nth-child(3){ top:19em; left: 1em; }
label   { display: block; float: left; clear: both; margin: .2em1em .4em0;}
labelb { display: inline-block; width:2em }
labelb::after { content:' : '}
labelinput { font-size: 1.2em; text-align: right; direction: rtl; width:8em;}
output { font-weight: bold; width: 14em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;}
output::before {  content: '$ '; }

<h2>True Odds Parlay Bet Calculator</h2><p><small>
  Useful for both <b>Negative "&#8722;"</b> and/or <b>Positive "+"</b> Money Lines including Single Straight Bets!
</small></p><formaction=""id="my-form"><fieldset><legend>Bet Amount :</legend><label><inputtype="number"name="betAmount"step=anymin=0></label></fieldset><fieldset><legend>Team Respective Money Lines :</legend><label><b>1</b><inputtype="number"class="moneyLine"step=any ></label><label><b>2</b><inputtype="number"class="moneyLine"step=any ></label><label><b>3</b><inputtype="number"class="moneyLine"step=any ></label><label><b>4</b><inputtype="number"class="moneyLine"step=any ></label><label><b>5</b><inputtype="number"class="moneyLine"step=any ></label><label><b>6</b><inputtype="number"class="moneyLine"step=any ></label><label><b>7</b><inputtype="number"class="moneyLine"step=any ></label><label><b>8</b><inputtype="number"class="moneyLine"step=any ></label><label><b>9</b><inputtype="number"class="moneyLine"step=any ></label></fieldset><fieldset><legend>Payout :</legend><outputname="result"value='0'></output><br><br><buttontype="reset">Reset Calculator!</button></fieldset></form>