JavaScript Exit Ticket

My work for the javascript exit ticket.

layout:default

%%html


<html>
<head>
  <title>Quarterback Statistics</title>
</head>
<body>
  <h1>Track Quarterback Performances</h1>

  <form id="stats-form" onsubmit="return updateQuarterbackStats()">
    <label for="quarterbackName">Quarterback Name:</label>
    <input type="text" id="quarterbackName" required><br>
    
    <label for="date">Date:</label>
    <input type="text" id="date" required><br>

    <label for="completionPercentage">Completion Percentage:</label>
    <input type="number" id="completionPercentage" required><br>

    <label for="result">Result:</label>
    <select id="result" required>
      <option value="W">Win</option>
      <option value="L">Loss</option>
    </select><br>

    <label for="yardsThrown">Yards Thrown:</label>
    <input type="number" id="yardsThrown" required><br>

    <label for="touchdownsThrown">Touchdowns Thrown:</label>
    <input type="number" id="touchdownsThrown" required><br>

    <label for="interceptionsThrown">Interceptions Thrown:</label>
    <input type="number" id="interceptionsThrown" required><br>

    <label for="defenseRank">Defense Rank:</label>
    <input type="number" id="defenseRank" required><br>

    <button type="submit">Submit</button>
  </form>

  <label for="searchInput">Search:</label>
  <input type="text" id="searchInput" placeholder="Enter quarterback name">
  <button onclick="searchStats()">Search</button>


  <h2>Quarterback Statistics</h2>
  <table id="quarterback-stats">
    <thead>
      <tr>
        <th>Quarterback Name</th>
        <th>Date</th>
        <th>Completion Percentage</th>
        <th>Result</th>
        <th>Yards Thrown</th>
        <th>Touchdowns Thrown</th>
        <th>Interceptions Thrown</th>
        <th>Defense Rank</th>
      </tr>
    </thead>
    <tbody id="stats-body">
    </tbody>
  </table>
  <script>
  
        var sampleStats = [
          {
            quarterbackName: "Drew Brees",
            date: "10/01/2015",
            completionPercentage: 78,
            result: "W",
            yardsThrown: 505,
            touchdownsThrown: 7,
            interceptionsThrown: 2,
            defenseRank: 30
          },
          {
            quarterbackName: "Patrick Mahomes",
            date: "10/19/2018",
            completionPercentage: 72,
            result: "W",
            yardsThrown: 478,
            touchdownsThrown: 6,
            interceptionsThrown: 3,
            defenseRank: 19
          }
        ];


        function updateQuarterbackStats() {
          var quarterbackName = document.getElementById("quarterbackName").value;
          var date = document.getElementById("date").value;
          var completionPercentage = parseFloat(document.getElementById("completionPercentage").value);
          var result = document.getElementById("result").value;
          var yardsThrown = parseInt(document.getElementById("yardsThrown").value);
          var touchdownsThrown = parseInt(document.getElementById("touchdownsThrown").value);
          var interceptionsThrown = parseInt(document.getElementById("interceptionsThrown").value);
          var defenseRank = parseInt(document.getElementById("defenseRank").value);

          // Get the table body element
          var tableBody = document.getElementById("stats-body");

          // Create a new row for the data
          var newRow = document.createElement("tr");

          // Create cells for each data field
          var quarterbackNameCell = document.createElement("td");
          quarterbackNameCell.textContent = quarterbackName;
          newRow.appendChild(quarterbackNameCell);

          var dateCell = document.createElement("td");
          dateCell.textContent = date;
          newRow.appendChild(dateCell);

          var completionPercentageCell = document.createElement("td");
          completionPercentageCell.textContent = completionPercentage;
          newRow.appendChild(completionPercentageCell);

          var resultCell = document.createElement("td");
          resultCell.textContent = result;
          newRow.appendChild(resultCell);

          var yardsThrownCell = document.createElement("td");
          yardsThrownCell.textContent = yardsThrown;
          newRow.appendChild(yardsThrownCell);

          var touchdownsThrownCell = document.createElement("td");
          touchdownsThrownCell.textContent = touchdownsThrown;
          newRow.appendChild(touchdownsThrownCell);

          var interceptionsThrownCell = document.createElement("td");
          interceptionsThrownCell.textContent = interceptionsThrown;
          newRow.appendChild(interceptionsThrownCell);

          var defenseRankCell = document.createElement("td");
          defenseRankCell.textContent = defenseRank;
          newRow.appendChild(defenseRankCell);

          // Append the new row to the table body
          tableBody.appendChild(newRow);

          alert("Quarterback stats updated successfully!");

          // Clear the form after submission
          document.getElementById("stats-form").reset();

          // Prevent form submission
          return false;
        }

        function searchStats() {
          var input = document.getElementById("searchInput").value.toLowerCase();
          var table = document.getElementById("quarterback-stats");
          var rows = table.getElementsByTagName("tr");

          for (var i = 1; i < rows.length; i++) {
            var cells = rows[i].getElementsByTagName("td");
            var found = false;

            for (var j = 0; j < cells.length; j++) {
              var cellText = cells[j].textContent.toLowerCase();

              if (cellText.indexOf(input) > -1) {
                found = true;
                break;
              }
            }

            if (found) {
              rows[i].style.display = "";
            } else {
              rows[i].style.display = "none";
            }
          }
        }
        
    function loadSampleStats() {
      var tableBody = document.getElementById("stats-body");

      for (var i = 0; i < sampleStats.length; i++) {
        var stat = sampleStats[i];

        var newRow = document.createElement("tr");

        var quarterbackNameCell = document.createElement("td");
        quarterbackNameCell.textContent = stat.quarterbackName;
        newRow.appendChild(quarterbackNameCell);

        var dateCell = document.createElement("td");
        dateCell.textContent = stat.date;
        newRow.appendChild(dateCell);

        var completionPercentageCell = document.createElement("td");
        completionPercentageCell.textContent = stat.completionPercentage;
        newRow.appendChild(completionPercentageCell);

        var resultCell = document.createElement("td");
        resultCell.textContent = stat.result;
        newRow.appendChild(resultCell);

        var yardsThrownCell = document.createElement("td");
        yardsThrownCell.textContent = stat.yardsThrown;
        newRow.appendChild(yardsThrownCell);

        var touchdownsThrownCell = document.createElement("td");
        touchdownsThrownCell.textContent = stat.touchdownsThrown;
        newRow.appendChild(touchdownsThrownCell);

        var interceptionsThrownCell = document.createElement("td");
        interceptionsThrownCell.textContent = stat.interceptionsThrown;
        newRow.appendChild(interceptionsThrownCell);

        var defenseRankCell = document.createElement("td");
        defenseRankCell.textContent = stat.defenseRank;
        newRow.appendChild(defenseRankCell);

        tableBody.appendChild(newRow);
      }
    }

    window.onload = function() {
      loadSampleStats();
    };
  
  </script>
</body>
</html>

Explanation of Code

Here is my explanation of the code, which creates a table of quarterback stats based on user inputs. The code also allows the user to be able to search for certain quarterback names.

This first block of code is responsible for the HTML elements which are created.

%%html


<body>
  <h1>Track Quarterback Performances</h1>
  <!-- Creates a form for user to be able input responses -->
  <form id="stats-form" onsubmit="return updateQuarterbackStats()">
    <label for="quarterbackName">Quarterback Name:</label>
    <input type="text" id="quarterbackName" required><br>
    
    <label for="date">Date:</label>
    <input type="text" id="date" required><br>

    <label for="completionPercentage">Completion Percentage:</label>
    <input type="number" id="completionPercentage" required><br>

    <label for="result">Result:</label>
    <select id="result" required>
      <option value="W">Win</option>
      <option value="L">Loss</option>
    </select><br>

    <label for="yardsThrown">Yards Thrown:</label>
    <input type="number" id="yardsThrown" required><br>

    <label for="touchdownsThrown">Touchdowns Thrown:</label>
    <input type="number" id="touchdownsThrown" required><br>

    <label for="interceptionsThrown">Interceptions Thrown:</label>
    <input type="number" id="interceptionsThrown" required><br>

    <label for="defenseRank">Defense Rank:</label>
    <input type="number" id="defenseRank" required><br>

    <button type="submit">Submit</button>
  </form>
  
  <!-- Button to be able to search for certain names -->
  <label for="searchInput">Search:</label>
  <input type="text" id="searchInput" placeholder="Enter quarterback name">
  <button onclick="searchStats()">Search</button>

  <!-- Displays table -->
  <h2>Quarterback Statistics</h2>
  <table id="quarterback-stats">
    <thead>
      <tr>
        <th>Quarterback Name</th>
        <th>Date</th>
        <th>Completion Percentage</th>
        <th>Result</th>
        <th>Yards Thrown</th>
        <th>Touchdowns Thrown</th>
        <th>Interceptions Thrown</th>
        <th>Defense Rank</th>
      </tr>
    </thead>
    <tbody id="stats-body">
    </tbody>
  </table>

This next block is the javascript code, which is essential for the code.

%%js

// Javascript code
        // Defines some sample statistics
        var sampleStats = [
          {
            quarterbackName: "Drew Brees",
            date: "10/01/2015",
            completionPercentage: 78,
            result: "W",
            yardsThrown: 505,
            touchdownsThrown: 7,
            interceptionsThrown: 2,
            defenseRank: 30
          },
          {
            quarterbackName: "Patrick Mahomes",
            date: "10/19/2018",
            completionPercentage: 72,
            result: "W",
            yardsThrown: 478,
            touchdownsThrown: 6,
            interceptionsThrown: 3,
            defenseRank: 19
          }
        ];

        // function to update statistics
        function updateQuarterbackStats() {
          // defining variables based on the HTML elements and their ids
          var quarterbackName = document.getElementById("quarterbackName").value;
          var date = document.getElementById("date").value;
          var completionPercentage = parseFloat(document.getElementById("completionPercentage").value);
          var result = document.getElementById("result").value;
          var yardsThrown = parseInt(document.getElementById("yardsThrown").value);
          var touchdownsThrown = parseInt(document.getElementById("touchdownsThrown").value);
          var interceptionsThrown = parseInt(document.getElementById("interceptionsThrown").value);
          var defenseRank = parseInt(document.getElementById("defenseRank").value);

          // Get the table body element
          var tableBody = document.getElementById("stats-body");

          // Create a new row for the data
          var newRow = document.createElement("tr");

          // Create cells for each data field
          var quarterbackNameCell = document.createElement("td");
          quarterbackNameCell.textContent = quarterbackName;
          newRow.appendChild(quarterbackNameCell);

          var dateCell = document.createElement("td");
          dateCell.textContent = date;
          newRow.appendChild(dateCell);

          var completionPercentageCell = document.createElement("td");
          completionPercentageCell.textContent = completionPercentage;
          newRow.appendChild(completionPercentageCell);

          var resultCell = document.createElement("td");
          resultCell.textContent = result;
          newRow.appendChild(resultCell);

          var yardsThrownCell = document.createElement("td");
          yardsThrownCell.textContent = yardsThrown;
          newRow.appendChild(yardsThrownCell);

          var touchdownsThrownCell = document.createElement("td");
          touchdownsThrownCell.textContent = touchdownsThrown;
          newRow.appendChild(touchdownsThrownCell);

          var interceptionsThrownCell = document.createElement("td");
          interceptionsThrownCell.textContent = interceptionsThrown;
          newRow.appendChild(interceptionsThrownCell);

          var defenseRankCell = document.createElement("td");
          defenseRankCell.textContent = defenseRank;
          newRow.appendChild(defenseRankCell);

          // Append the new row to the table body
          tableBody.appendChild(newRow);

          // Alerts the user that statistics are updated
          alert("Quarterback stats updated successfully!");

          // Clear the form after submission
          document.getElementById("stats-form").reset();

          // Prevent form submission
          return false;
        }

        // searches for based on the name
        function searchStats() {
          var input = document.getElementById("searchInput").value.toLowerCase();
          var table = document.getElementById("quarterback-stats");
          var rows = table.getElementsByTagName("tr");
        
          // checks each element and makes sure to check the user search
          for (var i = 1; i < rows.length; i++) {
            var cells = rows[i].getElementsByTagName("td");
            var found = false;

            // for loop through cell contents
            for (var j = 0; j < cells.length; j++) {
              var cellText = cells[j].textContent.toLowerCase();
              
              // checks if the input is the same as a row
              if (cellText.indexOf(input) > -1) {
                // found to break the loop
                found = true;
                break;
              }
            }

            if (found) {
              // displays actual search values
              rows[i].style.display = "";
            } else {
              // displays nothing
              rows[i].style.display = "none";
            }
          }
        }
        
    function loadSampleStats() {
      var tableBody = document.getElementById("stats-body");

      // for loop which goes through every sample statistic
      for (var i = 0; i < sampleStats.length; i++) {
        var stat = sampleStats[i];

        var newRow = document.createElement("tr");

        // adds every sample statistic
        var quarterbackNameCell = document.createElement("td");
        quarterbackNameCell.textContent = stat.quarterbackName;
        newRow.appendChild(quarterbackNameCell);

        var dateCell = document.createElement("td");
        dateCell.textContent = stat.date;
        newRow.appendChild(dateCell);

        var completionPercentageCell = document.createElement("td");
        completionPercentageCell.textContent = stat.completionPercentage;
        newRow.appendChild(completionPercentageCell);

        var resultCell = document.createElement("td");
        resultCell.textContent = stat.result;
        newRow.appendChild(resultCell);

        var yardsThrownCell = document.createElement("td");
        yardsThrownCell.textContent = stat.yardsThrown;
        newRow.appendChild(yardsThrownCell);

        var touchdownsThrownCell = document.createElement("td");
        touchdownsThrownCell.textContent = stat.touchdownsThrown;
        newRow.appendChild(touchdownsThrownCell);

        var interceptionsThrownCell = document.createElement("td");
        interceptionsThrownCell.textContent = stat.interceptionsThrown;
        newRow.appendChild(interceptionsThrownCell);

        var defenseRankCell = document.createElement("td");
        defenseRankCell.textContent = stat.defenseRank;
        newRow.appendChild(defenseRankCell);

        tableBody.appendChild(newRow);
      }
    }
    
    // makes sure that the function happens
    window.onload = function() {
      loadSampleStats();
    };