generated from OpenMaine/Project-Template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
273 lines (243 loc) · 16.2 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
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Portland Maine Rent Control Calculator</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/2fde56496b.js" crossorigin="anonymous"></script>
<meta name="theme-color" content="#fafafa">
</head>
<body>
<header>
<div class="content-wrapper">
<h1>Welcome to the Portland, Maine <br> Rent Control Calculator</h1>
</div>
</header>
<main>
<div class="content-wrapper">
<div class="intro">
<p>In November 2020, Portland, Maine passed a new ordinance to limit increases in rent. The purpose of the ordinance is to promote community stability and protect tenants, while ensuring landlords receive a fair return on investment. Full text of the ordinance can be found
<a href="https://www.portlandmaine.gov/DocumentCenter/View/1070/Chapter-6-Buildings-and-Building-Regulations---Revised-1132020" target="_BLANK">here</a>.</p>
<p>This calculator is a resource to help tenants and landlords calculate the new allowed yearly rent increase for their unit(s).</p>
<section class="formWizard">
<!-- circles indicating form steps -->
<div class="circleDiv">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
<!-- tabs cycle each form step -->
<div class="tab">
<div id="selectUser">
<p>
<label for="dropdown">I am a:</label>
<select id="userSelection" name="dropdown" oninput="this.className = ''">
<option value="tenant">Tenant</option>
<option value="landlord">Landlord</option>
</select>
</p>
</div>
<div class="form-buttons">
<button type="button" id="nextBtn" onclick="navTab(1), coverage()">Get Started</button>
</div>
</div>
<div class="tab">
<span id="displayUser"></span>
<div id="tenantElig">
<div>
<h3 class="blue-text">Do any of these apply to you?</h3>
<ul>
<li> Your building has more than four units</li>
<li> (<strong>If no to above</strong>) Your landlord lives in the building</li>
<li> You live in a dorm or other school housing, or in a building owned by the Portland Public School system</li>
<li> Your unit is owned or operated by a municipal housing authority (such as Portland Housing Authority)</li>
<li> Your unit is funded or controlled by a government agency, such as Section 8 housing (Note: this excludes Section 8 vouchers. If you are using a Section 8 voucher, this item does not apply to you)</li>
<li> You live in an accessory dwelling
<button class="tool-tip" id="aduTipBtn"><i class="fas fa-question-circle fa-md"></i></button></h5>
<!--tool tip content -->
<div id="ttADU" style="display: none;">
<p>Accessory dwelling units are smaller, independent living units on the same land as a single-family home. Common examples are an apartment above a garage, or an "in-law" unit. See a full definition at the <a href="https://planning.org/knowledgebase/accessorydwellings/" target="_blank">American Planning Association</a></p>
</div>
</li>
<li> You live in a church, hospital convent, religious facility, or extended care facility</li><!--hospital convent?-->
</ul>
</div>
</div>
<div id="landlordElig">
<div>
<span id="displayUser"></span>
<h3 class="blue-text">Do any of these apply to you?</h3>
<ul>
<li> Your rental property has <strong>more than four</strong> units</li>
<li> Your rental property has <strong>four units or fewer</strong>, AND one of the units is your primary residence</li>
<li> Your rental property is an accessory dwelling
<button class="tool-tip" id="LLaduTipBtn"><i class="fas fa-question-circle fa-md"></i></button></h5>
<!--tool tip content -->
<div id="LLttADU" style="display: none;">
<p>Accessory dwelling units are smaller, independent living units on the same land as a single-family home. Common examples are an apartment above a garage, or an "in-law" unit. See a full definition at the <a href="https://planning.org/knowledgebase/accessorydwellings/" target="_blank">American Planning Association</a></p>
</div>
</li>
</ul>
</div>
</div>
<div class="form-buttons">
<button type="button" class="start-over" onclick="navTab(-1), startOver()">Start Over</button>
<button type="button" id="yesButton" onclick="notElig()">Yes, One Or More Applies</button>
<button type="button" id="noButton" onclick="showCalculator()">None of These Apply To Me</button>
</div>
</div>
<div class= "tab">
<div id="notElig">
<div class="expl-elig">
<p>Based on your response, the rent control ordinance doesn't appear to apply to your apartment/unit (more help text)</p>
<p>See the <a href="https://www.portlandmaine.gov/DocumentCenter/View/29758/Rent-Control-FAQs" target="_BLANK">FAQ</a>, or Section 6-231 of the <a href="https://www.portlandmaine.gov/DocumentCenter/View/1070/Chapter-6-Buildings-and-Building-Regulations---Revised-1132020" target="_BLANK">Ordinance</a> for term definitions and exemptions in more detail.</p>
</div>
</div>
<div id="viewCalc">
<div class = "calculator">
<h3 class="blue-text">Current Monthly Rent:<button class="tool-tip" id="ttBaseRent"><i class="fas fa-question-circle fa-lg"></i></button>
</h3>
<div class="content-wrapper">
<div>
<label for="currency-field">$</label>
<input type="number" name="currency-field" class="currency-input" id="baseRentInput" placeholder="0,000">
<button id="calculateButton">Enter</button>
</div>
</div>
<!-- <span id="noAmtError">Please enter an amount to calculate</span> -->
<section id="outputDiv">
<p>
<span id="tenP1">The basic increase allowed in a 12 month period is your current rent multiplied by the Allowable Increase Percentage (AIP).</span><span id="landP1">The basic increase allowed in a 12 month period is the current monthly rent multiplied by the Allowable Increase Percentage (AIP).</span> <h5>As of September, 2021, the current AIP is 4.0%
<button class="tool-tip" id="aipTipBtn"><i class="fas fa-question-circle fa-md"></i></button></h5>
<!--tool tip content -->
<div id="ttAIP" style="display: none;">
<p>AIP is based on the change in the Consumer Price Index for Greater Boston Metro Area, as published by the <a href="https://www.bls.gov/regions/new-england/news-release/consumerpriceindex_boston.htm" target="_BLANK">United States Bureau of Labor Statistics</a>. The City of Portland's Housing Safety Office will publish an updated AIP each year on September 1, beginning September 1, 2021.</p>
</div>
</p>
<p>
Based on the <span id="rentAmt">(rent amount)</span> rent you entered above, the increase amount calculated from the AIP is <span id="increaseOutput"></span>. <br> Added to the current rent, the new amount with AIP increase would be <span id="newTotal"></span>.
</p>
<div>
<div id="tenAddAmts">
<h5 class="blue-text">Other Amounts May Affect Your Increase Total</h5>
<p>Additional increase amounts may be allowed for factors such as:
<ul>
<li>Tax-Rate Adjustment</li>
<li>New Tenancy</li>
<li>Banked Rent</li>
<li>Board Approved Improvements</li>
</ul>
These additional factors may or may not apply to your situation. In the event of an increase, your landlord is required to notify you of the specific reasons for your rent increase. More information and a definition of terms can be found in the City of Portland Rent Control <a href="https://www.portlandmaine.gov/DocumentCenter/View/29758/Rent-Control-FAQs" target="_BLANK">FAQ</a> and the <a href="https://www.portlandmaine.gov/DocumentCenter/View/1070/Chapter-6-Buildings-and-Building-Regulations---Revised-1132020" target="_BLANK">Ordinance</a>
</p>
</div>
<div id="landAddAmts">
<h5 class="blue-text">Add Additional Qualified Amounts:</h5>
<p>Additional increase amounts may be allowed for factors such as:
<ul>
<li>Tax-Rate Adjustment</li>
<li>New Tenancy</li>
<li>Banked Rent</li>
<li>Board Approved Property Improvements</li>
</ul>
</p>
<div class="content-wrapper">
<section class="flex-column">
<div>
<label for="currency-field">Tax-Rate Adjustment:</label>
<input type="number" name="currency-field" class="currency-input" id="taxRateInput" placeholder="$0,000" onkeyup="addToTotal()">
</div>
<div>
<label for="currency-field">Banked Rent:</label>
<input type="number" name="currency-field" class="currency-input" id="bankedRentInput" placeholder="$0,000" onkeyup="addToTotal()">
</div>
<div>
<label for="currency-field">Improvements:</label>
<input type="number" name="currency-field" class="currency-input" id="boardAprInput" placeholder="$0,000" onkeyup="addToTotal()">
</div>
<div class="row">
<h4>Adjusted Total:</h4>
<span id="landAddAmtsTotal"></span>
</div>
</section>
</div>
<p>These additional factors may or may not apply to your situation. As a landlord you are required to notify tenants (in writing) of the specific reasons for any rent increase. More information and a definition of terms can be found in the City of Portland Rent Control <a href="https://www.portlandmaine.gov/DocumentCenter/View/29758/Rent-Control-FAQs" target="_BLANK">FAQ</a> and the <a href="https://www.portlandmaine.gov/DocumentCenter/View/1070/Chapter-6-Buildings-and-Building-Regulations---Revised-1132020" target="_BLANK">Ordinance</a>
</p>
</div>
<p>A unit's rent may only be increased once in a 12 month period. Combining all factors, the total rent increase in 12 months cannot be more than 10% of the current rent. Based on the inputed rent above, 10% would be <span id="tenPercent"></span>. <br> <strong>At maximum possible increase, the new rent amount should not be more than <span id="maxIncAmt"></span></strong><button class="tool-tip" id="maxIncBtn"><i class="fas fa-question-circle fa-md"></i></button>
</p>
<!--tool tip content -->
<div id="ttMaxIncrease" style="display: none;">
<p>Any allowed amount above the max increase may be "banked" and applied to the following year. See the <a href="https://www.portlandmaine.gov/DocumentCenter/View/29758/Rent-Control-FAQs" target="_BLANK">FAQ</a> and <a href="https://www.portlandmaine.gov/DocumentCenter/View/1070/Chapter-6-Buildings-and-Building-Regulations---Revised-1132020" target="_BLANK">Ordinance</a> for more info on Banked Rent.</p>
</div>
</div>
<div class="help-text notice">
<p><i class="fas fa-exclamation-circle"></i>Landlords are required to give at least 75 days advance notice of an increase in rent by sending a signed document to the tenant. The letter must include the date tenancy began, date of rent increase, and justifications for increase. (See section 6.234-d of the <a href="https://www.portlandmaine.gov/DocumentCenter/View/1070/Chapter-6-Buildings-and-Building-Regulations---Revised-1132020" target="_BLANK">Ordinance</a> or the City of Portland's <a href="https://www.portlandmaine.gov/DocumentCenter/View/29758/Rent-Control-FAQs" target="_BLANK">FAQ)</a>
</p>
</div>
</section>
</div>
</div>
<div>
<button type="button" class="start-over" onclick="navTab(1), startOver()">Start Over</button>
</div>
</div>
</section>
</div>
<div class="help-text">
<p>***Placeholder***</p>
<p>Suggestions for display:
<ul>
<li>Additional help/resources</li>
<li>Legal guides/references</li>
</ul>
</p>
</div>
</div>
</main>
<footer>
<div class="content-wrapper">
<div class="page-author">
<p>This page is brought to you by volunteers from <a href="https://openmaine.org/" target="_BLANK">OpenMaine</a>, an official <a href="https://brigade.codeforamerica.org/" target="_BLANK">Code for America Brigade</a>.</p>
</div>
<div class="social">
<p>
<a href="https://www.meetup.com/OpenMaine/" target="_BLANK">
<img src="img/meetup.svg" alt="meetup logo">
</a>
</p>
<p>
<a href="https://www.facebook.com/openmaine/" target="_BLANK">
<img src="img/facebook.svg" alt="facebook logo">
</a>
</p>
</div>
<div class="contact">
<p>Got questions about this page? <a href="mailto:[email protected]">Contact us.</a></p>
</div>
</div>
</footer>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>