Options Calculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Options Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
}
input[type="number"] {
width: 100%;
padding: 8px;
margin: 5px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<h2>Options Calculator</h2>
<form id="optionsForm">
<label for="stockPrice">Stock Price:</label>
<input type="number" id="stockPrice" step="0.01" min="0" required><br>
<label for="strikePrice">Strike Price:</label>
<input type="number" id="strikePrice" step="0.01" min="0" required><br>
<label for="timeToExpiration">Time to Expiration (in years):</label>
<input type="number" id="timeToExpiration" step="0.01" min="0" required><br>
<label for="volatility">Volatility:</label>
<input type="number" id="volatility" step="0.01" min="0" required><br>
<label for="riskFreeRate">Risk-free Rate:</label>
<input type="number" id="riskFreeRate" step="0.0001" min="0" required><br>
<label for="result">Option Price:</label>
<input type="text" id="result" disabled><br>
</form>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
function calculateOptionPrice() {
const S = parseFloat(document.getElementById("stockPrice").value);
const K = parseFloat(document.getElementById("strikePrice").value);
const T = parseFloat(document.getElementById("timeToExpiration").value);
const sigma = parseFloat(document.getElementById("volatility").value);
const r = parseFloat(document.getElementById("riskFreeRate").value);
const d1 = (Math.log(S / K) + (r + 0.5 * sigma * sigma) * T) / (sigma * Math.sqrt(T));
const d2 = d1 - sigma * Math.sqrt(T);
const N_d1 = cumulativeDistribution(d1);
const N_d2 = cumulativeDistribution(d2);
const callPrice = S * N_d1 - K * Math.exp(-r * T) * N_d2;
document.getElementById("result").value = callPrice.toFixed(2);
}
function cumulativeDistribution(x) {
// Cumulative distribution function for standard normal distribution
return 0.5 * (1 + erf(x / Math.sqrt(2)));
}
function erf(x) {
// Error function approximation
const a1 = 0.254829592;
const a2 = -0.284496736;
const a3 = 1.421413741;
const a4 = -1.453152027;
const a5 = 1.061405429;
const p = 0.3275911;
const sign = (x < 0) ? -1 : 1;
x = Math.abs(x);
const t = 1.0 / (1.0 + p * x);
const y = 1.0 - ((((a5 * t + a4) * t) + a3) * t + a2) * t * Math.exp(-x * x);
return sign * y;
}
// Attach event listeners to input fields for real-time updates
const inputFields = document.querySelectorAll('input[type="number"]');
inputFields.forEach(input => {
input.addEventListener('input', calculateOptionPrice);
});
// Initial calculation on page load
calculateOptionPrice();
});
</script>
</body>
</html>
This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!