mortgage-repayment/main.js at main · karine-ine/mortgage-repayment · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
const defaultText = document.getElementById('default-text')
const calculationsContainer = document.getElementById('calculations-container')

document.querySelectorAll('.mortgage-type').forEach(input => {
  input.addEventListener('change', function() {
    document.querySelectorAll('.radio-inputs').forEach(div => {
      div.classList.remove('selected')
    })

    if (this.checked) {
      this.closest('.radio-inputs').classList.add('selected')
    }
  })
})

document.getElementById('calculate-btn').addEventListener('click', () => {
  const amount = parseFloat(document.getElementById('mortgage-amount').value)
  const term = parseFloat(document.getElementById('mortgage-term').value)
  const rate = parseFloat(document.getElementById('interest-rate').value) / 100
  const mortgageType = document.querySelector('input[name="mortgage-type"]:checked')

  let isValid = true

  document.querySelectorAll('.form-flex').forEach(el => {
    el.classList.remove('error')
  })

  if(isNaN(amount) || amount <= 0) {
    document.getElementById('amount-alert').style.display = 'block'
    document.getElementById('mortgage-amount-main').classList.add('error')
    isValid = false
  } else {
    document.getElementById('amount-alert').style.display = 'none'
  }

  if(isNaN(term) || term <= 0) {
    document.getElementById('term-alert').style.display = 'block'
    document.getElementById('mortgage-term-main').classList.add('error')
    isValid = false
  } else {
    document.getElementById('term-alert').style.display = 'none'
  }

  if(isNaN(rate) || rate <= 0) {
    document.getElementById('rate-alert').style.display = 'block'
    document.getElementById('interest-rate-main').classList.add('error')
    isValid = false
  } else {
    document.getElementById('rate-alert').style.display = 'none'
  }

  if (!mortgageType) {
    document.getElementById('type-alert').style.display = 'block'
    document.querySelectorAll('.radio-inputs').forEach(el => {
      el.classList.add('error')
    })
    isValid = false
  } else {
    document.getElementById('type-alert').style.display = 'none'
    document.querySelectorAll('.radio-inputs').forEach(el => {
      el.classList.remove('error')
    })
  }

  if (isValid) {
    let monthlyPayment = 0
    let totalRepayment = 0

    defaultText.classList.add('hide')
    calculationsContainer.classList.add('show')

    if (mortgageType.value === 'repayment') {
      const monthlyRate = rate / 12
      const n = term * 12
      monthlyPayment = (amount * monthlyRate) / (1 - Math.pow((1 + monthlyRate), -n))
      totalRepayment = monthlyPayment * n
    } else if (mortgageType.value === 'interest-only') {
      monthlyPayment = (amount * rate) / 12
      totalRepayment = monthlyPayment * term * 12
    }

    document.getElementById('result').innerText = `kr.${monthlyPayment.toFixed(2)}`
    document.getElementById('term-result').innerText = `kr.${totalRepayment.toFixed(2)}`

  } else {
    document.getElementById('result').innerText = ''
    document.getElementById('term-result').innerText = ''

    defaultText.classList.remove('hide')
    calculationsContainer.classList.remove('show')
  }
})

  document.getElementById('clear-btn').addEventListener('click', () => {
  document.getElementById('mortgage-form').reset()
  document.getElementById('result').innerText = ''
  document.getElementById('term-result').innerText = ''
  document.querySelectorAll('.form-alert').forEach(alert => {
    alert.style.display = 'none'
  })

  defaultText.classList.remove('hide')
  calculationsContainer.classList.remove('show')

  document.querySelectorAll('.radio-inputs').forEach(div => {
    div.classList.remove('selected')
  })

  document.querySelectorAll('form-flex').forEach(el => {
    el.classList.remove('error')
  })
})

document.querySelectorAll('.form-alert').forEach(alert => {
  alert.style.display = 'none'
})