Jeopardy! Daily Double Wager Calculator

by rchern

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="container">
  <h2>Inputs</h2>
  <form>
    <div class="mb-3">
      <div>Round</div>
      <div>
        <input id="roundJ" type="radio" class="form-check-input" name="round" value="J" required><label class="form-check-label" for="roundJ">Jeopardy!</label>
      </div>
      <div>
        <input id="roundDJ" type="radio" class="form-check-input" name="round" value="DJ" required><label class="form-check-label" for="roundDJ">Double Jeopardy!</label>
      </div>
      <div>
        <input id="roundTJ" type="radio" class="form-check-input" name="round" value="TJ" required>Triple Jeopardy</input>
      </div>
    </div>
    <div class="mb-3">
      <label for="number" class="form-label">Clue Number (from 1-30)</label>
      <input type="number" class="form-control" id="number" min="1" max="30" step="1" required />
    </div>
    <div class="mb-3">
      <label for="score" class="form-label">Player's Current Score</label>
      <input type="number" class="form-control" id="number" required />
    </div>
    <div class="mb-3">
      <label for="remaining" class="form-label">Remaining Value (do no include this DD value)</label>
      <input type="number" class="form-control" id="remaining" min="100" max="35600" step="100" required />
    </div>
    <div class="mb-3">
      <label for="other1" class="form-label">Other Player #1 Score</label>
      <input type="number" class="form-control" step="1" required />
    </div>
    <div class="mb-3">
      <label for="other2" class="form-label">Other Player #2 Score</label>
      <input type="number" class="form-control" step="1" required />
    </div>
    <div class="mb-3">
      <div>Confidence Level</div>
      <div>
        <input id="confidencePos" type="radio" class="form-check-input" name="confidence" value="1" required><label class="form-check-label" for="roundJ">Confident</label>
      </div>
     ...

CSS

#result {
  display: none;
}

JavaScript

document.querySelector("form").addEventListener("submit", function (e) {
  document.querySelector("#result").style.display = "block";
  e.preventDefault();
});