3

2 years ago · 62485034d8
parent 8fb915166a
commit 62485034d8
1 changed files with 0 additions and 108 deletions
--- a/non.html
+++ b/non.html
@ -1,108 +0,0 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container mt-5">
      <form id="stock-form">
        <div class="form-group">
          <label for="stock-select">Select a stock:</label>
          <select class="form-control" id="stock-select">
            <option value="AAPL">AAPL (Apple Inc.)</option>
            <option value="GOOG">GOOG (Alphabet Inc.)</option>
            <option value="MSFT">MSFT (Microsoft Corporation)</option>
            <option value="AMZN">AMZN (Amazon.com, Inc.)</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary">Add</button>
      </form>
      <button type="submit" class="btn btn-primary" id="submit-btn">Add to Watchlist</button>
      <ul class="list-group mt-3" id="stock-list"></ul>
    </div>
    <!-- jQuery and Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
      // Initialize empty stock list
      let stockList = [];
      // Cache frequently-used DOM elements
      const $stockForm = $('#stock-form');
      const $stockSelect = $('#stock-select');
      const $stockList = $('#stock-list');
      const $submitBtn = $('#submit-btn');
      // Function to add a new stock item to the list
      function addStockItem(stock) {
        // Add item to array
        stockList.push(stock);
        // Update HTML list
        const $newItem = $(`<li class="list-group-item">${stock}<button class="btn btn-sm btn-danger float-right delete-btn">X</button></li>`);
        $stockList.append($newItem);
      }
      // Function to delete a stock item from the list
      function deleteStockItem(itemIndex) {
        // Remove item from array
        stockList.splice(itemIndex, 1);
        // Update HTML list
        $stockList.children().eq(itemIndex).remove();
      }
      // Function to handle form submission
      $stockForm.submit(function(event) {
        event.preventDefault();
        // Get selected stock from form
        const selectedStock = $stockSelect.val();
        if (selectedStock != null) {
          // Add new item to list
          addStockItem(selectedStock);
          // Clear input field
          $stockSelect.val('');
        }
      });
      // Event listener for delete button clicks
      $stockList.on('click', '.delete-btn', function(event) {
        // Get index of item to delete
        const $deleteBtn = $(event.target);
        const itemIndex = $deleteBtn.parent().index();
        // Delete item from list
        deleteStockItem(itemIndex);
      });
      // Event listener for submit button click
      $submitBtn.click(function(event) {
        // Send stock list to server
        console.log(event.target)
        console.log(stockList)
        $.ajax({
          url: '/submit',
          method: 'POST',
          data: { stockList: JSON.stringify(stockList) },
          success: function(response) {
            console.log('Stock list submitted successfully');
          },
          error: function(xhr) {
            console.log('Error submitting stock list: ' + xhr.responseText);
          }
        });
      });
    </script>
  </body>
 </html>