-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcalculator.html
135 lines (123 loc) · 8.4 KB
/
calculator.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
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
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cost Of Living Helper || Calculator</title>
<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=Nixie+One&family=Parisienne&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid text-center">
<!--Banner-->
<div id="banner" class="row">
<div class="col-3"><img class="w-75" src="./images/CoLlogo.png" alt="cost of living logo"/></div>
<div class="col-6"><h1 id="banner-text" class="display-1 mt-5">Calculator</h1></div>
<div class="col-3"><img class="w-75" src="./images/logophone.png" alt="call us logo"/></div>
</div>
<!--Navbar-->
<div class="row">
<nav class="navbar navbar-expand-lg ">
<div class="container-fluid" style="background-color: #dfd8d8">
<!-- <a class="navbar-brand"></a> -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="benefits.html">Benefits</a></li>
<li class="nav-item"><a class="nav-link" href="calculator.html">Calculator</a></li>
<li class="nav-item"><a class="nav-link" href="charities.html">Charities</a></li>
<li class="nav-item"><a class="nav-link" href="clothing.html">Clothing</a></li>
<li class="nav-item"><a class="nav-link" href="education.html">Education</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Food
</a>
<ul class="dropdown-menu" style="background-color: #dfd8d8">
<li><a class="dropdown-item dropdown-style" href="buying.html">Buying food</a></li>
<li><a class="dropdown-item dropdown-style" href="making.html">Making food</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="health.html">Health</a></li>
<li class="nav-item"><a class="nav-link" href="kids.html">Kids</a></li>
<li class="nav-item"><a class="nav-link" href="money.html">Make money</a></li>
<li class="nav-item"><a class="nav-link" href="pets.html">Pets</a></li>
<li class="nav-item"><a class="nav-link" href="travel.html">Travel</a></li>
<li class="nav-item"><a class="nav-link" href="utilities.html">Utilities</a></li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit" onClick="searchFunction()">Search</button>
</form>
</div>
</div>
</nav>
</div>
<!--Main body-->
<div class="row pt-5 main-body">
<div class="col-sm-7 col-md-9 main-body">
<p class="fs-4 main-body ms-3">Below you will find a budget calculator, it will take your income and subtract all of your bills so you know how much money you have left over each month to spend on fun things, days out, eating out, luxuries or saving for holidays</p>
<p class="fs-4 main-body ms-3">Please enter all of the amounts asked for (if not relevant to you please enter 0) in a monthly format, so for example if you spend around £150 a week on food then please enter £600 under food</p>
</div>
<div class="cols-sm-5 col-md-3 main-body"><img class="w-75" src="./images/calculatorimage.png" alt="calculator"/></div>
<!--calculator-->
</div>
<div class="row main-body pt-4">
<!--column1-->
<form class="main-body" name="calculatorForm" action="" method="GET">
<!--column 1-->
<div class="formColumn main-body">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="income" value="" placeholder="Income after tax/NI" aria-describedby="income">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="rent" value="" placeholder="Rent/Mortgage" aria-describedby="rent or mortgage">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="energy" value="" placeholder="Energy(Gas/Electricity)" aria-describedby="gas and electricity">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="water" value="" placeholder="Water" aria-describedby="water">
</div>
<!--column 2-->
<div class="formColumn main-body">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="tax" value="" placeholder="Council Tax" aria-describedby="council tax">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="food" value="" placeholder="Food" aria-describedby="food">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="phone" value="" placeholder="Phone/Broadband" aria-describedby="phone and broadband">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="fuel" value="" placeholder="Car Fuel" aria-describedby="car fuel">
</div>
<!--column 4-->
<div class="formColumn main-body">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="insurance" value="" placeholder="Car Insurance" aria-describedby="car insurance">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="tvLic" value="" placeholder="TV License" aria-describedby="television license">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="tvSub" value="" placeholder="TV subcriptions" aria-describedby="television subscriptions">
<input class="m-2 p-2 rounded text-bg-light fst-italic" type="text" name="other" value="" placeholder="Any other outgoings" aria-describedby="other">
</div>
<input class="mt-5 p-2 rounded display-4" type="button" id="submitButton" name="button" value="Calculate" onClick="calculateExtra(this.form)">
</form>
<div class="formColumn main-body">
<h2 class="pt-4 pb-5 main-body">Your total disposable income is £<span class="main-body" id="extra"></span></h2>
<div class="main-body" id="resultsInfo">
</div>
</div>
</div>
<!--Footer-->
<div id="footer" class="row pt-2 text-center">
<div class="col-sm-5 col-md-4 float-start">
<p>Registered charity number 897564231</p>
<p>© Copyright Cost Of Living Helper <span id="year"></span></p>
</div>
<div class="col-sm-2 col-md-4">
<img src="./images/facebook.png" class="social-media img-fluid" alt="facebook logo"/>
<img src="./images/twitter.png" class="social-media img-fluid" alt="twitter logo"/>
<img src="./images/instagram.png" class="social-media img-fluid" alt="instagram logo"/>
</div>
<div class="col-sm-5 col-md-4 float-end">
<p>Tel: 01223 344 556</p>
<p>Email: [email protected]</p>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
</body>
</html>