Here is free equity Calculator tool code tested and verified code for free, code is written in HTML, Javascript and Css, you just need to copy the entire code and use it as per your requirement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equity Calculator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/4.2.1/chart.umd.min.js" defer></script>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #f8c291, #6a89cc);
color: #fff;
margin: 0;
padding: 0;
}
.container {
margin-top: 50px;
}
.card {
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: 15px;
}
.card-header {
background-color: #ff9f43;
color: white;
font-weight: bold;
}
.btn-custom {
background-color: #38ada9;
color: white;
}
.btn-custom:hover {
background-color: #079992;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header text-center">
Equity Calculator
</div>
<div class="card-body">
<form id="equityForm">
<div class="mb-3">
<label for="totalShares" class="form-label">Total Shares</label>
<input type="number" class="form-control" id="totalShares" placeholder="Enter total number of shares" required>
</div>
<div class="mb-3">
<label for="shareholders" class="form-label">Number of Shareholders</label>
<input type="number" class="form-control" id="shareholders" placeholder="Enter number of shareholders" required>
</div>
<div id="shareholdersContainer"></div>
<button type="button" class="btn btn-custom mt-3" onclick="generateShareholdersInputs()">Generate Shareholder Inputs</button>
<button type="submit" class="btn btn-primary mt-3">Calculate</button>
</form>
</div>
</div>
<div class="card mt-4" id="resultsCard" style="display: none;">
<div class="card-header text-center">
Results
</div>
<div class="card-body">
<canvas id="resultsChart" style="height: 300px;"></canvas>
</div>
</div>
</div>
<script>
function generateShareholdersInputs() {
const shareholdersCount = document.getElementById('shareholders').value;
const container = document.getElementById('shareholdersContainer');
container.innerHTML = '';
for (let i = 0; i < shareholdersCount; i++) {
const shareholderDiv = document.createElement('div');
shareholderDiv.classList.add('mb-3');
const label = document.createElement('label');
label.setAttribute('for', `shareholder${i}`);
label.classList.add('form-label');
label.textContent = `Shareholder ${i + 1} Percentage (%)`;
const input = document.createElement('input');
input.setAttribute('type', 'number');
input.setAttribute('id', `shareholder${i}`);
input.setAttribute('class', 'form-control');
input.setAttribute('placeholder', `Enter percentage for Shareholder ${i + 1}`);
input.required = true;
shareholderDiv.appendChild(label);
shareholderDiv.appendChild(input);
container.appendChild(shareholderDiv);
}
}
document.getElementById('equityForm').addEventListener('submit', function (e) {
e.preventDefault();
const totalShares = parseFloat(document.getElementById('totalShares').value);
const shareholdersCount = parseInt(document.getElementById('shareholders').value);
let sharesDistribution = [];
for (let i = 0; i < shareholdersCount; i++) {
const percentage = parseFloat(document.getElementById(`shareholder${i}`).value);
const shares = (percentage / 100) * totalShares;
sharesDistribution.push({
label: `Shareholder ${i + 1}`,
value: shares
});
}
const totalPercentage = sharesDistribution.reduce((sum, shareholder) => sum + (shareholder.value / totalShares * 100), 0);
if (totalPercentage > 100) {
alert('Total percentage exceeds 100%. Please adjust the values.');
return;
}
renderChart(sharesDistribution);
});
function renderChart(data) {
const ctx = document.getElementById('resultsChart').getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: data.map(item => item.label),
datasets: [{
data: data.map(item => item.value),
backgroundColor: [
'#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'
]
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top'
}
}
}
});
document.getElementById('resultsCard').style.display = 'block';
}
</script>
</body>
</html>