TAMUhack/frontEnd.html at main · ankitdevalla/TAMUhack · 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
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
<!-- code for website -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  <body>
    <div id="banner">
      <h1 style="font-weight: 150">Safer Tomorrow</h1>
    </div>
    <title>Safer Tomorrow</title>
    </header>
    <a href="https://ucr.fbi.gov/crime-in-the-u.s/2018/crime-in-the-u.s.-2018/tables/table-8/table-8-state-cuts/texas.xls">DATA SOURCE: FBI</a>
    <a href="page2.html">LEARN MORE</a>
    <section id="home">
      <!-- <p style="text-align: center;">Welcome to <strong>Safer Tomorrow</strong>, a website that shows you the safeness of your city. The goal of the website
        is to show the safety trends of the cities that are input. Data from the website comes directly from the FBI's
        official data on criminal activity. As of right now, the database is limited to Texas cities only. Our algorithm, developed
        based off the justice system and criminal punishment in the US, takes in data and spits out a score. The higher the score, the safer the city!
      </p> -->

      <!-- <div id="text" style="text-align: center;">
        <strong>PROTECT YOUR FUTURE</strong>
      </div>  -->

      <p id="text">PLAN A SECURE FUTURE AT THE PUSH OF A BUTTON...</p>


      <script>
        // let text = document.querySelector('#text');
        // let words = text.innerHTML.split(" ");
        // text.innerHTML = "";
        // let delay = 0;
        // words.forEach((word) => {
        //   let letterIndex = 0;
        //   let wordInterval = setInterval(() => {
        //     text.innerHTML += word[letterIndex];
        //     letterIndex++;
        //     if (letterIndex === word.length) {
        //       text.innerHTML += " ";
        //       clearInterval(wordInterval);
        //     }
        //   }, 50 + delay);
        //   delay += 200;
        // });
//         var i = 0;
//         var txt = 'PROTECT YOUR FUTURE'; /* The text */
//         var speed = 50; /* The speed/duration of the effect in milliseconds */

// function typeWriter() {
//   if (i < txt.length) {
//     document.getElementById("text").innerHTML += txt.charAt(i);
//     i++;
//     setTimeout(typeWriter, speed);
//   }
// }

      </script>

      </script>
    </section>
  </body>

  <head>
    <title>Custom Search Bar</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQMHkBsnobysQDtn5PuEhmDKwgq404few&libraries=places"></script>
    </style>
    <script>
       var map, marker;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
	  center: {lat: 31.9686, lng: -99.9018},
zoom: 5
        });
        var input = document.getElementById('search');
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);
        marker = new google.maps.Marker({
          map: map,
          anchorPoint: new google.maps.Point(0, -29)
        });
        document.getElementById('search-btn').addEventListener('click', function() {
          marker.setVisible(false);
          var place = autocomplete.getPlace();
          if (!place.geometry) {
            window.alert("No details available for input: '" + place.name + "'");
            return;
          }
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(15);
          }
          marker.setPosition(place.geometry.location);
          marker.setVisible(true);
        });
      }
    </script>
  </head>
  <body onload="initMap()">
    <div id="search-bar">
      <input id="search" type="text" placeholder="Search City" style= "width: 200px; height: 30px;">
      <button id="search-btn">Search</button>
    </div>
    <div id="map" style="height:500px; width: 500px; float:left; margin-right: 100px; margin-left: 100px; margin-bottom: 200px; margin-top: 10px;"></div>
    <!-- <label for="score">Score:</label> -->
    <!-- <input type="textarea" id="score-box"  placeholder="The Safety Score of the city is: " style="height:400px; width: 400px; margin-top: 100px; margin-left: 20px;
    text-align: center; word-break: break-word;"> -->
    <textarea id="score-box" readonly placeholder="The Safety Score of the city is: " style="height:300px; width: 300px; float:left; margin-top: 100px; margin-left: 20px; display: inline-block; word-break: break-word; white-space: pre-wrap"></textarea>
    <!-- inserts a chart <canvas id="myChart"></canvas> -->


    <script>


const searchBar = document.getElementById("search");
const searchBtn = document.getElementById("search-btn");
const scoreBox = document.getElementById("score-box");

fetch("cities.txt")
  .then(response => response.text())
  .then(data => {
    // Split the text file by newline
    const lines = data.split("\n");
    // Create an object to store the city-number pairs
    const cityScores1 = {}; // 2019
    const cityScores2 = {}; // 2018
    const cityScores3 = {}; // 2017

    var counter = 1;

    lines.forEach(line => {
    const [city, state, country, score] = line.split(", ");
    cityScores1[city + ", " + state + ", " + country] = score;
    if (counter % 3 == 0) {
        cityScores1[city + ", " + state + ", " + country] = score;
    }
    else if (counter % 3 == 1) {
        cityScores2[city + ", " + state + ", " + country] = score;
    }
    else {
        cityScores3[city + ", " + state + ", " + country] = score;
    }
    counter++;
    });


    // Loop through each line and add the city-number pairs to the object
    // for loop iterate by 3


    //   lines.forEach(line => {
    //   const [city, state, country, score] = line.split(", ");
    //   cityScores1[city + ", " + state + ", " + country] = score;
    // });


    // Listen for the click event on the search button
    searchBtn.addEventListener("click", e => {
      // scoreBox.value = "hi";
      // cityScores[searchBar.value] = 2;
      // scoreBox.value += " " + " hi " + cityScores[searchBar.value];
      var avg = 0.0;


      // Check if the city exists in the cityScores object
      if (cityScores1[searchBar.value]) {
        // If it does, update the score text box with the corresponding number
        // scoreBox.value += "inside if ";
        // scoreBox.value += cityScores1[searchBar.value] + " ";
        // scoreBox.value += cityScores2[searchBar.value] + " ";
        // scoreBox.value += cityScores3[searchBar.value];
        avg = parseFloat(cityScores1[searchBar.value]) + parseFloat(cityScores2[searchBar.value]) +
        parseFloat(cityScores3[searchBar.value]);
        avg /= 3;
        let newLine = "\n";
        scoreBox.value = searchBar.value;
        scoreBox.value += " \nAVERAGE SAFETY SCORE: \r\n";
        scoreBox.value += avg.toFixed(2);
        scoreBox.value += "\n\nSafety Score in 2020: " + parseFloat(cityScores2[searchBar.value]);
        scoreBox.value += "\nSafety Score in 2021: " + parseFloat(cityScores3[searchBar.value]);
        scoreBox.value += "\nSafety Score in 2022: " + parseFloat(cityScores1[searchBar.value]);

        if (cityScores2[searchBar.value] <= cityScores3[searchBar.value] && cityScores3[searchBar.value] <= cityScores1[searchBar.value]) {
          scoreBox.value += "\n\nBECOMING SAFER!";
        }
        else if (cityScores2[searchBar.value] >= cityScores3[searchBar.value] && cityScores3[searchBar.value] >= cityScores1[searchBar.value]) {
          scoreBox.value += "\n\nBECOMING MORE DANGEROUS!";
        }
        else {
          scoreBox.value += "\n\nTREND INCONSISTENT";
        }

        if (avg >= 75) {
          scoreBox.style.backgroundColor = "#48e040";
          scoreBox.value += "\n\nOVERALL VERY SAFE!";

        } else if (avg >= 50 && avg < 75) {
          scoreBox.style.backgroundColor = "#f1f12f";
          scoreBox.value += "\n\nOVERALL SAFE!";
        } else {
          scoreBox.style.backgroundColor = "#e04540";
          scoreBox.value += "\n\nOVERALL DANGEROUS!";
        }
        // scoreBox.value += searchBar.value;
      } else {
        // If it doesn't, clear the score text box
        scoreBox.value = "CITY NOT IN DATABASE";
      }
    });
  });

  </script>

  <!-- <body>
    <section>
    <div id="header4">
      <h4 style="text-align: center;"> Welcome to <strong>Safer Tomorrow</strong>, a website that shows you the safeness of your city. The goal of the website
        is to show the safety trends of the cities that are input. Data from the website comes directly from the FBI's
        official data on criminal activity. As of right now, the database is limited to Texas cities only. Our algorithm, developed
        based off the justice system and criminal punishment in the US, takes in data and spits out a score. The higher the score, the safer the city!</h4>
    </div>
  </section>
  </body> -->
  <!-- <script>
    const banner = document.querySelector("#banner");
const title = document.createElement("h1");
title.innerText = "Safer Tomorrow";
banner.appendChild(title);
</script> -->
  </html>