-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (102 loc) · 4.21 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
<!DOCTYPE html>
<html>
<head>
<title>Hometown parser</title>
<script type="module" src="index.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 1rem;
}
ul#location-list {
max-width: 47rem;
text-align: right;
width: fit-content;
list-style: none;
}
textarea {
display: block;
height: 6rem;
max-width: 50rem;
width: calc(100% - 5rem);
}
p {
width: calc(100% - 5rem);
max-width: 51rem;
}
.progress-display+div {
display: none;
}
.examples {
display: none;
}
.examples li.hide {
display: none;
}
.toggle-examples-input:checked+.examples {
display: unset;
}
</style>
</head>
<body>
<h1>Hometown Parser</h1>
<p>This project extracts town and city data from natural-language paragraphs.</p>
<p>Source code and more information:
<a href="https://github.com/rendall/hometown-parser-2">https://github.com/rendall/hometown-parser-2</a>
<p>
<div class="progress-display">
<progress id="data-download"></progress>
<p>City data is downloading... please wait</p>
</div>
<div>
<p>Enter a paragraph below that mentions a location (with over 15,000 residents). Or open 'show examples' and select one</p>
<textarea id="comment-box"></textarea>
<button id="comment-button">Analyze</button>
<label for="toggle-examples">Show examples</label>
<input type="checkbox" id="toggle-examples" name="toggle-examples" class="toggle-examples-input">
<ul class="examples">
<li>Here are examples of the kind of paragraph that might be entered above. They are not always successful in order to highlight the limitations of this approach</li>
<li><a href="#">Seattle and Vancouver, BC.</a></li>
<li><a href="#">New York and Paris</a></li>
<li><a href="#">West Coast U.S.A./ Canada</a></li>
<li><a href="#">Novato, CA - La Mesa, CA - Lincoln, CA</a></li>
<li><a href="#">Beijing, Tokyo, Shanghai, Seattle, New York City</a></li>
<li><a href="#">Cupertino, in the SF South Bay</a></li>
<li><a href="#">Cascadia: Eugene - Portland</a></li>
<li><a href="#">New York/ New Jersey</a></li>
<li><a href="#">Seattle, Ventura, Ithaca</a></li>
<li><a href="#">Petaluma, CA..Bellingham, WA..Calgary, Alberta..Tucson, AZ..Portland & Hillsboro, OR..Bolingbrook,
IL..Strongsville, OH..Vancouver, BC..Black Rock City, NV</a></li>
<li><a href="#">Palm Springs, Los Angeles, San Francisco</a></li>
<li><a href="#">Charlotte, NYC, SF, Seattle, Chicago, NOLA, London, Las Vegas, Philadelphia, etc.</a></li>
<li><a href="#">Bay Area/Santa Barbara/Seattle</a></li>
<li><a href="#">Nevada City, California</a></li>
<li><a href="#">Pequannock, NJ & London England</a></li>
<li><a href="#">Issaquah, Washington. Apart of the Greater Seattle Area.</a></li>
<li><a href="#">Joshua Tree and San Diego</a></li>
<li><a href="#">Taipei, New York, Kaapa, Los Angeles, San Francisco, Wilmington, and Kitty Hawk</a></li>
<li><a href="#">San Francisco, California and Springfield, Oregon, Ohio</a></li>
</ul>
</div>
<script>
const onAClick = (e) => {
const textarea = document.querySelector("textarea#comment-box")
const value = e.target.innerText
textarea.value = value
var evt = new KeyboardEvent('keyup')
textarea.dispatchEvent(evt);
const exampleToggle = document.querySelector("input#toggle-examples")
exampleToggle.dispatchEvent(new MouseEvent('click'))
}
const showRandom3 = () => {
const lis = Array.from(document.querySelectorAll("ul.examples li"))
const pickRandom3 = (arr = []) => arr.length === 3 ? arr : pickRandom3([...arr, Math.floor(Math.random() * lis.length)])
const random3 = pickRandom3()
lis.forEach(a => a.classList.add("hide"))
lis.filter((a,i) => random3.includes(i)).forEach(a => a.classList.remove("hide"))
}
const as = Array.from(document.querySelectorAll("ul.examples li a"))
as.forEach(a => a.addEventListener("click", onAClick))
</script>
</body>
</html>