Embedded Files
Code
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stock Market Simulator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
#dashboard {
margin: 20px auto;
max-width: 600px;
padding: 20px;
background: white;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.stock {
display: flex;
justify-content: space-between;
padding: 12px;
border-bottom: 1px solid #ddd;
font-size: 18px;
}
.stock button {
padding: 8px 15px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
background-color: #4CAF50;
color: white;
border: none;
}
.stock button:disabled {
background-color: #ddd;
}
#balance {
font-size: 24px;
font-weight: bold;
color: green;
margin-bottom: 20px;
}
h2 {
margin-top: 20px;
font-size: 22px;
}
.error {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Stock Market Simulator</h1>
<div id="dashboard">
<p id="balance">Balance: $100,000.00</p>
<h2>Stocks</h2>
<div id="stocks"></div>
<p class="error" id="errorMessage"></p>
</div>
<script>
let balance = 100000; // Starting balance
let stocks = {
"AAPL": { price: 4000, owned: 0 },
"GOOGL": { price: 2800, owned: 0 },
"AMZN": { price: 3400, owned: 0 },
"TSLA": { price: 700, owned: 0 }
};
function updateStockPrices() {
for (let stock in stocks) {
let change = (Math.random() - 0.5) * 10; // Small fluctuation
stocks[stock].price = Math.max(1, stocks[stock].price + change);
}
displayStocks();
}
function displayStocks() {
document.getElementById("balance").textContent = `Balance: $${balance.toFixed(2)}`;
let stocksDiv = document.getElementById("stocks");
stocksDiv.innerHTML = ""; // Clear previous stock listings
for (let stock in stocks) {
let stockDiv = document.createElement("div");
stockDiv.className = "stock";
stockDiv.innerHTML = `
<span>${stock} - $${stocks[stock].price.toFixed(2)}</span>
<span>Owned: ${stocks[stock].owned}</span>
<button onclick="buyStock('${stock}')" ${balance < stocks[stock].price ? 'disabled' : ''}>Buy</button>
<button onclick="sellStock('${stock}')" ${stocks[stock].owned === 0 ? 'disabled' : ''}>Sell</button>
`;
stocksDiv.appendChild(stockDiv);
}
}
function buyStock(stock) {
if (balance >= stocks[stock].price) {
balance -= stocks[stock].price;
stocks[stock].owned++;
document.getElementById("errorMessage").textContent = ""; // Clear any error messages
displayStocks();
} else {
showError("Not enough funds to buy this stock!");
}
}
function sellStock(stock) {
if (stocks[stock].owned > 0) {
balance += stocks[stock].price;
stocks[stock].owned--;
document.getElementById("errorMessage").textContent = ""; // Clear any error messages
displayStocks();
} else {
showError("You don't own any of this stock!");
}
}
function showError(message) {
document.getElementById("errorMessage").textContent = message;
}
setInterval(updateStockPrices, 3000); // Update stock prices every 3 seconds
displayStocks();
</script>
</body>
</html>
Page updated
Report abuse