-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (88 loc) · 3.56 KB
/
index.html
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
<!--
Title: Loan Calculator
Author: Giuseppe Garone
Description: This simple app allows you to determine the monthly payments on a loan,
given a certain amount, interest and term. It's based on many other loan calculator
available on the web.
Technologies: The app was made with HTML5, CSS3 and JavaScript. The main goal was to
practice some JavaScript, so I didn't use any library such as jQuery. The responsiveness
of the layout is made with media queries, and it's based on window's width.
Created: March 1, 2018
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loan Calculator</title>
<link rel="shortcut icon" href="res/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mukta+Mahee:400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton">
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<!-- HEADER -->
<header class="main-header fixed-width">
<h1 class="main-title">Loan Calculator</h1>
<p class="description">This loan calculator will help you determine the monthly payments on a loan. Complete the form below and click calculate. Click reset button to calculate another loan.</p>
</header>
<!-- MAIN SECTION -->
<section class="main-section fixed-width">
<div class="wrapper clearfix">
<!-- INPUT SECTION -->
<div class="input-section">
<fieldset>
<p class="input-field">
<label class="label" for="loan-amount">Loan amount</label>
<br>
<input id="loan-amount" class="user-input" type="text" placeholder="$5,000">
</p>
<p id="loan-error-message" class="error-msg"></p>
<p class="input-field">
<label class="label" for="loan-term">Loan term</label>
<br>
<input id="loan-term" class="user-input small" type="text" placeholder="24">
<select id="term-type" class="select-term-type">
<option value="year">Years</option>
<option value="month" selected="">Months</option>
</select>
</p>
<p id="term-error-message" class="error-msg"></p>
<p class="input-field">
<label class="label" for="interest-rate">Interest rate per year</label>
<br>
<input id="interest-rate" class="user-input" type="text" placeholder="5%">
</p>
<p id="interest-error-message" class="error-msg"></p>
<div class="buttons clearfix">
<button id="calculate-btn" class="btn">Calculate</button>
<button id="reset-btn" class="btn">Reset</button>
</div>
</fieldset>
</div>
<!-- OUTPUT SECTION -->
<div class="output-section">
<div class="output-section-contents">
<div class="output-section-header">
<p>Monthly payments</p>
<p id="monthly-payments">$0.00</p>
</div>
<div class="output-section-resume">
<p>Principal paid
<span id="principal-paid">$0.00</span>
</p>
<p>Interested paid
<span id="interested-paid">$0.00</span>
</p>
<p>Total paid
<span id="total-paid">$0.00</span>
</p>
</div>
</div>
</div>
</div>
</section>
<script src="main.js"></script>
</body>
</html>