mortgage-repayment/index.html 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wgt@0,200..800:2,200..800&display=swap"
    rel="stylesheet">

  <link rel="stylesheet" href="style.css">

  <title>Mortgage Repayment Calculator</title>
</head>

<body>
  <div class="mortgage-calculator">
    <div class="left">
      <div class="header">
        <h2>Mortgage Calculator</h2>
        <button id="clear-btn">Clear All</button>

      </div>

      <form id="mortgage-form">
        <div class="form-item">
          <label class="light-text" for="mortgage-amount">Mortgage Amount</label>
          <div class="form-flex" id="mortgage-amount-main">
            <p class="form-symbol">kr.</p>
            <input id="mortgage-amount" type="number" name="mortgage-amount" required>
          </div>

          <p class="form-alert" id="amount-alert">This field is required.</p>
        </div>

        <div class="form-item">
          <div class="form-col">
            <div class="form-item">
              <label class="light-text" for="mortgage-term">Mortgage Term</label>
              <div class="form-flex" id="mortgage-term-main">
                <input id="mortgage-term" type="number" name="mortgage-term" required>
                <p class="form-symbol">years</p>
              </div>

              <p class="form-alert" id="term-alert">This field is required.</p>
            </div>

            <div class="form-item">
              <label class="light-text" for="interest-rate">Interest Rate</label>
              <div class="form-flex" id="interest-rate-main">
                <input id="interest-rate" type="number" name="interest-rate" step="0.01" required>
                <p class="form-symbol">%</p>
              </div>

              <p class="form-alert" id="rate-alert">This field is required.</p>
            </div>

          </div>
        </div>

        <div class="form-item">
          <label class="light-text">Mortgage Type</label>

          <div class="radio-inputs">
            <input id="repayment" class="mortgage-type" type="radio" name="mortgage-type" value="repayment" required>
            <label for="repayment">Repayment</label>
          </div>

          <div class="radio-inputs">
            <input id="interest-only" class="mortgage-type" type="radio" name="mortgage-type" value="interest-only"
              required>
            <label for="interest-only">Interest Only</label>
          </div>

          <p class="form-alert" id="type-alert">This field is required.</p>
        </div>

        <div class="form-item">
          <button id="calculate-btn" class="calculate-btn" type="button"><svg xmlns="http://www.w3.org/2000/svg"
              width="24" height="24" viewBox="0 0 384 512">
              <path
                d="M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-384c0-35.3-28.7-64-64-64L64 0zM96 64l192 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L96 160c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32zm32 160a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zM96 352a32 32 0 1 1 0-64 32 32 0 1 1 0 64zM64 416c0-17.7 14.3-32 32-32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32zM192 256a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm32 64a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zm64-64a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm32 64a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zM288 448a32 32 0 1 1 0-64 32 32 0 1 1 0 64z" />
            </svg>
            Calculate Repayments</button>
        </div>

      </form>
    </div>

    <div class="right">
      <div id="default-text" class="default-text">
        <img src="images/illustration-empty.svg" alt="">

        <h2>Results shown here</h2>
        <p class="light-text">Complete the form and click "Calculate Repayments" to see what your monthly repayments
          would be.</p>
      </div>
      <div id="calculations-container" class="calculations-container">
        <h2>Your results</h2>

        <p class="light-text">Your results are shown below based on the information you provided. To adjust the results,
          edit the form and click "Calculate Repayments" again.</p>

        <div class="calculations">
          <div class="monthly">
            <p class="light-text">Your monthly payments</p>
            <span id="result" class="monthly-result"></span>
          </div>

          <div class="line"></div>

          <div class="total-term">
            <p class="light-text">Total you'll repay over the term</p>
            <span id="term-result" class="term-result"></span>
          </div>


        </div>
      </div>
    </div>
  </div>


  <script src="main.js"></script>
</body>

</html>