-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (111 loc) · 3.64 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
<html>
<head>
<meta charset="UTF-8">
<title>Sentiment Analysis Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
display: table-cell;
vertical-align: middle;
}
.bodyDiv{
margin-right: 300PX;
float:left;
}
.loader {
opacity: 0;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
border-right: 16px solid green;
border-bottom: 16px solid red;
border-left: 16px solid pink;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
float:left;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<div>
<p align="right">Data Mining - Final Project</p>
<P>
Welcome to the <b>Twitter Sentiment Analysis app.</b> <br>
What phrase would you like to analyze? (e.g: Trump, Kim, Justin ...)
</P>
<textarea name="message" rows="1" cols="20">trump</textarea> <br><br>
<p>
Num of tweeters to scan: <br><br>
<input type="number" value=500>
</p> <br>
<div class="bodyDiv">
<button> Run </button>
<div>
<h2 id="score">tweets:</h2>
</div>
</div>
<div class="loader" id="loader"></div>
</div>
<textarea id="tweets" rows="25" cols="150" placeholder="Here the tweets are going to be seen..."></textarea> <br><br>
<script>
var interval = false;
$(document).ready(function () {
$('#loader').css('opacity', '0');
$("button").click(function () {
interval = true;
$("#score").html('tweets:');
$("#tweets").val('');
$('#loader').css('opacity', '1');
var text = $("textarea").val();
var numOfTweets = $("input").val();
console.log(`text = ${text}, numOfTweets =${numOfTweets}`);
if (text.length != 0) {
$.post("http://localhost:3000" ,{phrase: text, numOfTweets: numOfTweets}, function (data) {
if (data.includes("already scan")) {
// $("#score").html(data);
// interval = false;
// $('#loader').css('opacity', '0');
// } else {
alert(data)
}
});
} else {
alert("please fill the phrase and then click on send button");
}
});
});
setInterval(function () {
if (interval) {
$.get("http://localhost:3000/getTweets", function (data) {
console.log("Data: " + JSON.stringify(data));
if(data.includes("finishScan")){
$("#score").html(data);
interval = false;
$('#loader').css('opacity', '0');
}else{
var score = data.split("<--score-->")[0];
console.log("score="+score);
$("#tweets").val($("#tweets").val() + data);
}
});
}
}, 100);
</script>
</body>
</html>