How to create a Sports Bet Calculator using javascript

Question

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 enter the moneyLine number, which can be mostly any 3 digits number and I then enter the bet amount.

Now, the moneyLine can either be negative (-) if betting a favorite or positive (+) if betting the underdog.

Please see the code below: For testing proposes, I use any -110 or 110 and then, any bet amount. But it can actually be any chosen moneyLine and betAmount.

// Single Straight Sports Bet Calculator 

function betCalculator(moneyLine) { 

    var odds;
    var betAmount = +prompt("Enter Bet Amount"); 

    if (moneyLine >= 0) { 
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 

    } else  {
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 


    } return ((odds * betAmount).toFixed(2)); 
}
 alert(betCalculator(+prompt("Enter Money Line")));

// Single Straight Sports Bet Calculator 

function betCalculator(moneyLine) { 
    
    var odds;
    var betAmount = +prompt("Enter Bet Amount"); 
    
    if (moneyLine >= 0) { 
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 
    
    } else  {
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 
    

    } return ((odds * betAmount).toFixed(2)); 
}
 alert(betCalculator(+prompt("Enter Money Line")));

Answer 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' }
  ;
function betCalculator()
  {
  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; }

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

thead tr:nth-of-type(3) { display: none; counter-reset: line; }
tbody tr { counter-increment: line; }
tbody td:nth-of-type(1) {  color: darkslategrey; }
tbody td:nth-of-type(1)::before { content: counter(line) '0a0-0a00a0'; }

tfoot { font-weight: bold; }
tfoot td:nth-of-type(1) { text-align: right; }
tfoot td: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;
}
thead tr:nth-of-type(1) button { background-color: #063329; }
thead tr:nth-of-type(2) button { background-color: crimson; }
tbody button  { background-color: #071b3f;}

<form action="" id="form-X">
  <table>
    <caption title="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><input type="number" step="10" value="0" name="betAmount" min="0"></td>
        <td><button type="reset">&empty;</button></td>   
      </tr>
      <tr><td colspan="2">Teams Money Lines</td>  <td><button id="New-Line">+</button></td></tr>
      <tr>
        <td contenteditable spellcheck="false">...</td>
        <td><input type="number" step="10" value="0"></td>
        <td><button>&#8722;</button></td>
      </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
      <tr>
        <td> Payout : </td>
        <td colspan="2"> </td>
      </tr>
    </tfoot>
  </table>
</form>