You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.5 KiB
109 lines
3.5 KiB
2 years ago
|
<!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>
|