I have applied styles by using internal css code, however the styles don’t seem to be applied to the html web page in the browser. I have troubleshooted everywhere yet I still cant fix it. Weirdly, the style doesn’t show up in inspect element either. I’m just starting out coding, so I have no idea whats the problem. Heres my 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: 'Roboto Mono', monospace;
color: #fff;
background-color: #000;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
margin: 0;
font-size: 36px;
}
section {
padding: 20px;
background-color: #222;
margin: 20px auto;
max-width: 600px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
margin-top: 0;
font-size: 24px;
color: #fff;
}
form {
max-width: 400px;
margin: 0 auto;
}
label {
margin-bottom: 10px;
font-size: 16px;
}
input[type="text"],
input[type="number"],
button {
margin-bottom: 20px;
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #333;
color: #fff;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="number"]:focus,
button:focus {
outline: none;
border-color: #007bff;
}
button {
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
padding: 12px 20px;
font-size: 18px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
#stockList {
list-style: none;
padding: 0;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Stock Market Simulator</h1>
<p>Your Balance: $<span id="balance">10000</span></p>
</header>
<section id="buySection">
<h2>Buy Stocks</h2>
<form id="buyForm">
<label for="stockInput">Stock Symbol:</label>
<input type="text" id="stockInput" placeholder="Enter Stock Symbol" required>
<label for="quantityInput">Quantity:</label>
<input type="number" id="quantityInput" placeholder="Quantity" required>
<button type="submit">Buy</button>
</form>
</section>
<section id="stockListSection">
<h2>Your Stocks</h2>
<ul id="stockList">
<!-- Bought stocks will be displayed here dynamically -->
</ul>
</section>
<section id="sellSection">
<h2>Sell Stocks</h2>
<form id="sellForm">
<!-- Sell stocks form will be generated dynamically by JavaScript -->
</form>
</section>
<footer>
<p>© 2024 Stock Market Simulator</p>
</footer>
<!-- JavaScript placeholder -->
<script src="script.js"></script>
</body>
</html>
'
'
And here is my .js code
let balance = 10000;
let stocks = [];
// Function to fetch stock price using Alpha Vantage API
async function getStockPrice(symbol) {
try {
const apiKey = 'YOUR_API_KEY'; // Replace 'YOUR_API_KEY' with your actual Alpha Vantage API key
const response = await fetch(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=${apiKey}`);
const data = await response.json();
// Extract the latest stock price from the API response
const latestPrice = parseFloat(data['Global Quote']['05. price']);
return latestPrice;
} catch (error) {
console.error('Error fetching stock price:', error);
return null;
}
}
function buyStock(event) {
event.preventDefault(); // Prevent form submission
const stockSymbol = document.getElementById("stockInput").value.toUpperCase();
const quantity = parseInt(document.getElementById("quantityInput").value);
getStockPrice(stockSymbol).then(stockPrice => {
const totalCost = stockPrice * quantity;
// Check if the user has enough balance to buy stocks
if (totalCost <= balance) {
balance -= totalCost;
updateBalance();
updateStockList(stockSymbol, quantity, stockPrice);
populateSellDropdown(); // Update the sell dropdown after buying stocks
} else {
alert("Insufficient balance!");
}
});
}
function sellStock(event) {
event.preventDefault(); // Prevent form submission
const stockSymbol = document.getElementById("sellStockInput").value.toUpperCase();
const quantity = parseInt(document.getElementById("sellQuantityInput").value);
const stockIndex = findStockIndex(stockSymbol);
if (stockIndex !== -1 && quantity <= stocks[stockIndex].quantity) {
getStockPrice(stocks[stockIndex].symbol).then(stockPrice => {
const totalSaleAmount = stockPrice * quantity;
balance += totalSaleAmount;
updateBalance();
updateStockListAfterSale(stockIndex, quantity);
});
} else {
alert("You either entered an invalid stock symbol or don't have enough stocks to sell!");
}
}
function updateBalance() {
document.getElementById("balance").innerText = balance.toFixed(2);
}
function updateStockList(symbol, quantity, price) {
const stockList = document.getElementById("stockList");
const listItem = document.createElement("li");
listItem.textContent = `${quantity} shares of ${symbol} at $${price.toFixed(2)} each`;
stockList.appendChild(listItem);
// Add the bought stock to the stocks array
stocks.push({ symbol: symbol, quantity: quantity, price: price });
}
function updateStockListAfterSale(stockIndex, quantitySold) {
const stockList = document.getElementById("stockList");
const stockItem = stockList.childNodes[stockIndex];
const currentQuantity = stocks[stockIndex].quantity;
if (quantitySold === currentQuantity) {
stockList.removeChild(stockItem);
stocks.splice(stockIndex, 1);
} else {
stocks[stockIndex].quantity -= quantitySold;
stockItem.textContent = `${stocks[stockIndex].quantity} shares of ${stocks[stockIndex].symbol} at $${stocks[stockIndex].price.toFixed(2)} each`;
}
}
function populateSellDropdown() {
const sellDropdown = document.getElementById("sellStockInput");
sellDropdown.innerHTML = ""; // Clear previous options
stocks.forEach((stock, index) => {
const option = document.createElement("option");
option.value = stock.symbol;
option.textContent = `${stock.quantity} shares of ${stock.symbol}`;
sellDropdown.appendChild(option);
});
}
function findStockIndex(symbol) {
for (let i = 0; i < stocks.length; i++) {
if (stocks[i].symbol === symbol) {
return i;
}
}
return -1; // Stock symbol not found
}
document.getElementById("buyForm").addEventListener("submit", buyStock);
document.getElementById("sellForm").addEventListener("submit", sellStock);
I have tried troubleshooting steps according to both stack and chatgpt but nothing helps
New contributor
IT Champ is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.