-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
169 lines (159 loc) · 4.96 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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Text editor</title>
<style>
body{
overflow-x:hidden;
overflow-y:hidden;
}
textarea:focus, input:focus{
outline: none;
}
.text_edit {
padding: 2%;
width: 100%;
height: 90%;
resize: none;
border-width: 0;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
.text_edit:focus {
outline: none;
}
#view_count {
float:left;
padding: 5px;
margin: 5px;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
#marks {
float:left;
padding: 5px;
margin: 5px;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
#theme {
float:right;
padding: 5px;
margin: 5px;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
.fontcolor {
border-width: 0;
outline: none;
}
.bgcolor {
border-width: 0;
outline: none;
}
.fontcolor:focus {
outline: none;
}
.bgcolor:focus {
outline: none;
}
</style>
<script type="text/javascript">
// Function to count the number of words in the text box.
function view_count () {
// Find html elements.
var textArea = document.getElementById('my_text');
var div = document.getElementById('view_count');
// Put the text in a variable so we can manipulate it.
var text = textArea.value;
//remove whitespace before and after end of text
text = text.replace(/(^\s*)|(\s*$)/gi,"");
// replace newline if it occurs at least once with single whitespace
text = text.replace(/\n{1,}/gi," ");
// replace whitespace if it occurs at least twice with single whitespace
text = text.replace(/\s{2,}/gi," ");
var words = text.split(" ");
var len = 0;
for (i = 0 ; i < words.length; i++)
{
if (words[i] != " " && words[i] != ""){
len += 1 ;
}
}
if (text != undefined)
document.getElementById("view_count").innerHTML = "Words: " + len ;
if ( len >= 50000 ) {
document.getElementById ("marks").innerHTML = "You did it! You hit the 50000 words mark! Congratulations!";
}
else if ( len >= 40000 ) {
document.getElementById ("marks").innerHTML = "You hit the 40000 words mark. Awesome!";
}
else if ( len >= 25000 ) {
document.getElementById ("marks").innerHTML = "You hit the 25000 words mark. Nice work!";
}
else if ( len >= 10000 ) {
document.getElementById ("marks").innerHTML = "You hit the 10000 words mark. Keep it up!";
}
else if ( len >= 5000 ) {
document.getElementById ("marks").innerHTML = "You hit the 5000 words mark. Congrats!";
}
else if ( len >= 1667 ) {
document.getElementById ("marks").innerHTML = "You hit the 1667 words mark. Great job for today!";
}
else
document.getElementById ("marks").innerHTML = "";
// To keep updating the word count by calling the function repeatedly
setTimeout(view_count, 1000);
}
// View Count function ends.
// change theme function
function changecolor() {
font = document.getElementById("fontval").value;
bg = document.getElementById("bgval").value;
fontfamily = document.getElementById("fontfamily").value;
fontsize = document.getElementById("fontsize").value;
document.body.style.color = font ;
document.getElementById("my_text").style.color = font ;
document.body.style.background = bg ;
document.getElementById("my_text").style.background = bg ;
document.getElementById("my_text").style.font = ("normal " + fontsize + " " + fontfamily) ;
}
</script>
</head>
<body onload="view_count()">
<!-- Text area -->
<textarea class="text_edit" id="my_text" placeholder="Start typing..."></textarea>
<br />
<hr/>
<!-- Empty div to put the count in -->
<div id="view_count">
</div>
<!-- Empty div to put encouraging remarks when author hits a new milestone-->
<div id="marks">
</div>
<!-- Div to change themes -->
<div id="theme">
<input type = text name="fontcolor" id="fontval" placeholder = "Font color, eg: #7D3C98">
<input type = text name="bgcolor" id="bgval" placeholder = "Bg color, eg: black">
<input type = text name="fontfamily" id="fontfamily" placeholder = "Font name, eg: Arial">
<input type = text name="fontsize" id="fontsize" placeholder = "Font size, default is 24px">
<button id = "themechange" onclick="changecolor()">Get New Theme </button>
</div>
</body>
</html>