-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
142 lines (114 loc) · 7.06 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
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font: Francois One-->
<link href="https://fonts.googleapis.com/css?family=Francois+One&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Your CSS-->
<link rel="stylesheet" href="styles.css">
<!-- Load the d3.js library( version 4 ) -->
<script src="d3.v4.js"></script>
<script src="myscripts.js">
</script>
<title>Planning Planned Parenthood</title>
<meta name="description" content="My website">
<meta name="author" content="Anika Rabenhorst">
</head>
<body>
<nav id="navbar" class="navbar fixed-top navbar-expand-md navbar-light" >
<a class="navbar-brand" href= "#"><img src="img/Planning Planned Parenthood Logo.jpg" alt="PPP Logo" height="66px" width="66px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="#algo">Use the Algorithm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#your-results">Your Results</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About the Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.plannedparenthood.org/">Planned Parenthood</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/anikarabenhorst/HackBeanpotCatAnika">GitHub Repo</a>
</li>
</ul>
</div>
</nav>
<div data-spy="scroll" class="infinite-scroll" data-target="#navbar" data-offset="0">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Planning Planned Parenthood</h1>
<p class="lead">Deciding where the next Massachusetts Planned Parenthood should go based on your inputs.</p>
</div>
</div>
<h4 id="algo">Use the Algorithm</h4>
<p>Drag and drop the following factors by what you think is most important for choosing a new Planned Parenthood Location.
Information is by individual counties of Massachusetts. Order by most important to least important from top to bottom.
</p>
<form action="#your-results" onsubmit="return(saveform())" >
<ul class="listbox">
<li class="option" draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">
New County</li>
<li class="option" draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">
Population</li>
<li class="option" draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">
Population of Women Aged 13-44</li>
<li class="option" draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">
Number of women who likely need public support for contraceptive services and supplies, aged 13-44</li>
<li class="option" draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)">
Number of women who likely need public support for contraceptive services and supplies, aged 20-44 and below the federal poverty level</li>
<li class="option" draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)">
Number of women who likely need public support for contraceptive services and supplies, younger than 20</li>
</ul>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<h4 id="your-results">Your Results</h4>
<p><strong>You should get funding for a new Planned Parenthood in</strong></p>
<p class="result-location" id="result-location"></p>
<div class="county-info">
<p><strong>Already has a Planned Parenthood:</strong></p>
<p id="result-pp"></p>
<p><strong>Population:</strong></p>
<p id="result-pop"></p>
<p><strong>Females Ages 13-44:</strong></p>
<p id="result-f-13-44"></p>
<p><strong>Number of women who likely need public support for contraceptive services and supplies, aged 13-44:</strong></p>
<p id="result-likely"></p>
<p><strong>Number of women who likely need public support for contraceptive services and supplies, aged 20-44 and below the federal poverty level:</strong></p>
<p id="result-poverty"></p>
<p><strong>Number of women who likely need public support for contraceptive services and supplies, younger than 20:</strong></p>
<p id="result-young"></p>
</div>
<h4 id="about">About The Project</h4>
<p> This project was created by <strong>Anika Rabenhorst</strong> and <strong>Caterina Wang</strong> for Hack Beanpot 2020.
The goal was to generate an algorithm for selecting a location to put a new Planned Parenthood
based on the user's personal preferrences for how it should be selected.
We then took those preferences and weighted them to choose the best possible county.
This would be a useful tool for Planned Parenthood if they were to recieve enough funding to open a fifth location within Massachusetts.
Additionally, it could demonstrate to local officials the need for more publicly funded health clinics in general.
</p>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>