Vue

by aschelch

HTML

<h1>Calculateur impôts 2020 (niveau 3)</h1>
<p>
Challenge JS proposé par Grafikart : <a href="https://github.com/Grafikart/Challenges/tree/master/JS/2-Impot.fr">Description du challenge</a>.
</p>
<div id="app">
  Revenu net : <input type="number" v-model="income"> €<br />
  Nombre de part : <input type="number" min="1" v-model="part"> part(s)<br />
  <hr />
  Impôts tranche 1 : <input type="number" readonly="readonly" v-model="tax_1"> € ({{amount_1}}€ x 0%)<br />
  Impôts tranche 2 : <input type="number" readonly="readonly" v-model="tax_2"> € ({{amount_2}}€ x 11%)<br />
  Impôts tranche 3 : <input type="number" readonly="readonly" v-model="tax_3"> € ({{amount_3}}€ x 30%)<br />
  Impôts tranche 4 : <input type="number" readonly="readonly" v-model="tax_4"> € ({{amount_4}}€ x 41%)<br />
  Impôts tranche 5 : <input type="number" readonly="readonly" v-model="tax_5"> € ({{amount_5}}€ x 45%)<br />
  <hr />
  Total impôts à payer : <input type="number" readonly="readonly" v-model="tax_total"> €<br />
  Revenu après impôts : <input type="number" readonly="readonly" v-model="income_after_tax"> € <br />
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: '#app',
  data: {
    income: '',
    part: 1,
    amount_1: 0, amount_2: 0, amount_3: 0, amount_4: 0, amount_5: 0,
    tax_1: 0, tax_2: 0, tax_3: 0, tax_4: 0, tax_5: 0,
    tax_total: 0,
    income_after_tax: 0
  },
  watch: {
    income: function () {
      this.calculateTax();
    },
    part: function () {
      this.calculateTax();
    }
  },
  methods: {
  	calculateTax: function() {
			income = parseInt(this.income);
			part = parseFloat(this.part);

			income = income/part;

			this.tax_1 = this.tax_2 = this.tax_3 = this.tax_4 = this.tax_5 = 0;
			this.amount_1 = this.amount_2 = this.amount_3 = this.amount_4 = this.amount_5 = 0;

			var tax = 0;
			if(income > 157806){
				tax+= this.tax_5 = Math.round(0.45 * (this.amount_5 = (income-157806)));
			}
			if(income > 73369){
				tax+= this.tax_4 = Math.round(0.41 * (this.amount_4 = (Math.min(income, 157806)-73369)));
			}
			if(income > 25659){
				tax+= this.tax_3 = Math.round(0.30 * (this.amount_3 = (Math.min(income, 73369)-25659)));
			}
			if(income > 10064){
				tax+= this.tax_2 = Math.round(0.11 * (this.amount_2 = (Math.min(income, 25659)-10064)));
			}
			tax+= this.tax_1 = Math.round(0 * (this.amount_1 = (Math.min(income, 10064))));

			tax = tax*part;
			this.tax_total = parseInt(tax);
			this.income_after_tax = parseInt(this.income) - parseInt(this.tax_total);
		}

  }
});