Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const grossInput = document.getElementById('grossSalary');
+ const ctx = document.getElementById('ratioChart').getContext('2d');
+ let chart;
+
+ function calculateNet(gross) {
+ // Simplified Israeli tax brackets (2023)
+ let tax = 0;
+ let ni = 0; // National Insurance
+ let hi = 0; // Health Insurance
+
+ // Income Tax calculation (simplified)
+ if (gross <= 6450) {
+ tax = gross * 0.1;
+ } else if (gross <= 9240) {
+ tax = 645 + (gross - 6450) * 0.14;
+ } else if (gross <= 14840) {
+ tax = 1037 + (gross - 9240) * 0.20;
+ } else if (gross <= 20620) {
+ tax = 2157 + (gross - 14840) * 0.31;
+ } else {
+ tax = 3957 + (gross - 20620) * 0.35;
+ }
+
+ // National Insurance (simplified)
+ ni = gross * 0.055;
+
+ // Health Insurance (simplified)
+ hi = gross * 0.03;
+
+ const totalDeductions = tax + ni + hi;
+ const net = gross - totalDeductions;
+
+ return {
+ net,
+ tax,
+ ni,
+ hi,
+ totalDeductions
+ };
+ }
+
+ function updateChart(gross, net, deductions) {
+ if (chart) {
+ chart.destroy();
+ }
+
+ chart = new Chart(ctx, {
+ type: 'doughnut',
+ data: {
+ labels: ['Net Salary', 'Deductions'],
+ datasets: [{
+ data: [net, deductions],
+ backgroundColor: ['#0066cc', '#ff4081'],
+ borderWidth: 0
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ cutout: '70%',
+ plugins: {
+ legend: {
+ position: 'bottom'
+ }
+ }
+ }
+ });
+ }
+
+ function updateDisplay() {
+ const gross = parseFloat(grossInput.value);
+ const results = calculateNet(gross);
+
+ document.getElementById('grossAmount').textContent = `₪${gross.toLocaleString()}`;
+ document.getElementById('netAmount').textContent = `₪${results.net.toLocaleString()}`;
+ document.getElementById('deductionsAmount').textContent = `₪${results.totalDeductions.toLocaleString()}`;
+
+ document.getElementById('incomeTax').textContent = `₪${results.tax.toLocaleString()}`;
+ document.getElementById('nationalInsurance').textContent = `₪${results.ni.toLocaleString()}`;
+ document.getElementById('healthInsurance').textContent = `₪${results.hi.toLocaleString()}`;
+
+ updateChart(gross, results.net, results.totalDeductions);
+ }
+
+ grossInput.addEventListener('input', updateDisplay);
+ updateDisplay();
+ });
+
+ class Chart {
+ constructor(ctx, config) {
+ this.ctx = ctx;
+ this.config = config;
+ this.draw();
+ }
+
+ destroy() {
+ this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+ }
+
+ draw() {
+ const centerX = this.ctx.canvas.width / 2;
+ const centerY = this.ctx.canvas.height / 2;
+ const radius = Math.min(centerX, centerY) * 0.8;
+
+ const total = this.config.data.datasets[0].data.reduce((a, b) => a + b, 0);
+ let startAngle = 0;
+
+ this.config.data.datasets[0].data.forEach((value, index) => {
+ const sliceAngle = (2 * Math.PI * value) / total;
+
+ this.ctx.beginPath();
+ this.ctx.fillStyle = this.config.data.datasets[0].backgroundColor[index];
+ this.ctx.moveTo(centerX, centerY);
+ this.ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
+ this.ctx.closePath();
+ this.ctx.fill();
+
+ startAngle += sliceAngle;
+ });
+ }
+ }
