master
SeanChenTaipei
2 years ago
parent
8fb915166a
commit
62485034d8
1 changed files with 0 additions and 108 deletions
@ -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> |
||||
Loading…
Reference in new issue