calculator-1

by pkschultz

HTML

<div id="texas-inherited-property-calculator" class="calculator-container">
  <h2 class="calculator-title">Texas Capital Gains on Inherited Property Calculator</h2>
  
  <div class="calculator-grid">
    <div class="calculator-section">
      <h3>Property Details</h3>
      
      <div class="form-group">
        <label for="inheritedValue">Step-up Basis (Value When Inherited)</label>
        <div class="input-wrapper">
          <span class="currency-symbol">$</span>
          <input type="number" id="inheritedValue" value="500000">
        </div>
      </div>
      
      <div class="form-group">
        <label for="currentValue">Current Market Value / Selling Price</label>
        <div class="input-wrapper">
          <span class="currency-symbol">$</span>
          <input type="number" id="currentValue" value="600000">
        </div>
      </div>
      
      <div class="form-group">
        <label for="improvementCosts">Improvement Costs After Inheritance</label>
        <div class="input-wrapper">
          <span class="currency-symbol">$</span>
          <input type="number" id="improvementCosts" value="20000">
        </div>
      </div>
      
      <div class="form-group">
        <label for="sellingCosts">Real Estate Commission & Closing Costs</label>
        <div class="input-wrapper">
          <span class="currency-symbol">$</span>
          <input type="number" id="sellingCosts" value="36000">
        </div>
        <div class="form-helper">Typically 6-7% of selling price in Texas</div>
      </div>
      
      <div class="form-group">
        <label for="countyProperty">Texas County</label>
        <select id="countyProperty">
          <option value="harris">Harris County (Houston)</option>
          <option value="dallas">Dallas County</option>
          <option value="bexar">Bexar County (San Antonio)</option>
          <option value="travis">Travis County (Austin)</option>
          <option value="tarrant">Tarrant County (Fort...

CSS

/* Calculator Styles */
.calculator-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  max-width: 1000px;
  margin: 30px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 25px;
}

.calculator-title {
  font-size: 24px;
  font-weight: 600;
  color: #0073aa;
  text-align: center;
  margin-bottom: 25px;
  position: relative;
}

.calculator-title:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: #0073aa;
}

.calculator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

@media (max-width: 768px) {
  .calculator-grid {
    grid-template-columns: 1fr;
  }
}

.calculator-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 6px;
}

.calculator-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
  color: #0073aa;
  font-weight: 500;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}

.form-group {
  margin-bottom: 15px;
}

.form-helper {
  font-size: 12px;
  color: #666;
  margin-top: 3px;
  font-style: italic;
}

.year-group {
  display: flex;
  gap: 15px;
}

.half {
  flex: 1;
}

.form-group label {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.input-wrapper {
  position: relative;
}

.currency-symbol {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

input[type="number"], select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.input-wrapper input[type="number"] {
  padding-left: 25px;
}

input[type="number"]:focus, select:focus {
  outline: none;
  border-color: #0073aa;
}

.form-check {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.form-check input[type="checkbox"]...

JavaScript

// Texas Capital Gains Calculator JavaScript
document.addEventListener('DOMContentLoaded', function() {
  // Get all the input elements
  const inheritedValueInput = document.getElementById('inheritedValue');
  const currentValueInput = document.getElementById('currentValue');
  const improvementCostsInput = document.getElementById('improvementCosts');
  const sellingCostsInput = document.getElementById('sellingCosts');
  const yearInheritedInput = document.getElementById('yearInherited');
  const yearSoldInput = document.getElementById('yearSold');
  const countyPropertySelect = document.getElementById('countyProperty');
  const filingStatusSelect = document.getElementById('filingStatus');
  const otherIncomeInput = document.getElementById('otherIncome');
  const residentialCheck = document.getElementById('residentialCheck');
  const yearsAsResidenceInput = document.getElementById('yearsAsResidence');
  const residentialYearsDiv = document.getElementById('residentialYears');
  const section1031Check = document.getElementById('section1031Check');
  const section1031Message = document.getElementById('section1031Message');
  const exemptionMessage = document.getElementById('exemptionMessage');
  
  // Get all the result elements
  const yearsOwnedElement = document.getElementById('yearsOwned');
  const adjustedBasisElement = document.getElementById('adjustedBasis');
  const netSaleProceedsElement = document.getElementById('netSaleProceeds');
  const capitalGainElement = document.getElementById('capitalGain');
  const federalTaxElement = document.getElementById('federalTax');
  const stateTaxElement = document.getElementById('stateTax');
  const niitTaxElement = document.getElementById('niitTax');
  const totalTaxElement = document.getElementById('totalTax');
  const effectiveRateElement = document.getElementById('effectiveRate');
  const netProfitElement = document.getElementById('netProfit');
  const deferredAmountElement =...