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.
108 lines
3.5 KiB
108 lines
3.5 KiB
<!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>
|
|
|