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: 500px;
padding: 20px;
background: white;
box-shadow: 0px 0px 10px gray;
border-radius: 10px;
}
.stock {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
button {
padding: 5px 10px;
cursor: pointer;
}
#balance {
font-size: 20px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<h1>Stock Market Simulator</h1>
<div id="dashboard">
<p>Balance: <span id="balance">$10,000</span></p>
<h2>Stocks</h2>
<div id="stocks"></div>
</div>
<script>
let balance = 100000; // Starting money
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.toFixed(2)}`;
let stocksDiv = document.getElementById("stocks");
stocksDiv.innerHTML = "";
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}')">Buy</button>
<button onclick="sellStock('${stock}')">Sell</button>
`;
stocksDiv.appendChild(stockDiv);
}
}
function buyStock(stock) {
if (balance >= stocks[stock].price) {
balance -= stocks[stock].price;
stocks[stock].owned++;
displayStocks();
} else {
alert("Not enough money!");
}
}
function sellStock(stock) {
if (stocks[stock].owned > 0) {
balance += stocks[stock].price;
stocks[stock].owned--;
displayStocks();
} else {
alert("You don't own this stock!");
}
}
setInterval(updateStockPrices, 3000); // Update prices every 3 seconds
displayStocks();
</script>
</body>
</html>
Page updated
Report abuse