Skip to content

Commit 582da11

Browse files
kshitija-2001kshitija-2001
authored
Add files via upload
1 parent f8d0edb commit 582da11

File tree

3 files changed

+463
-0
lines changed

3 files changed

+463
-0
lines changed

‎word counter/word.css

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
2+
3+
html, div, span, applet, object, iframe,
4+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
5+
a, abbr, acronym, address, big, cite, code,
6+
del, dfn, em, img, ins, kbd, q, s, samp,
7+
small, strike, strong, sub, sup, tt, var,
8+
b, u, i, center,
9+
dl, dt, dd, ol, ul, li,
10+
fieldset, form, label, legend,
11+
table, caption, tbody, tfoot, thead, tr, th, td,
12+
article, aside, canvas, details, embed,
13+
figure, figcaption, footer, header, hgroup,
14+
menu, nav, output, ruby, section, summary,
15+
time, mark, audio, video {
16+
margin: 0;
17+
padding: 0;
18+
border: 0;
19+
font-size: 100%;
20+
font: inherit;
21+
vertical-align: baseline;
22+
23+
}
24+
body{
25+
background-image: linear-gradient(#fec8d8, #ffdfd3);
26+
}
27+
article, aside, details, figcaption, figure,
28+
footer, header, hgroup, menu, nav, section {
29+
display: block;
30+
}
31+
body {
32+
line-height: 1;
33+
}
34+
ol, ul {
35+
list-style: none;
36+
}
37+
blockquote, q {
38+
quotes: none;
39+
}
40+
blockquote:before, blockquote:after,
41+
q:before, q:after {
42+
content: '';
43+
content: none;
44+
}
45+
table {
46+
border-collapse: collapse;
47+
border-spacing: 0;
48+
}
49+
/* End of reset CSS */
50+
51+
52+
/* border box */
53+
html {
54+
box-sizing: border-box;
55+
-webkit-user-select: none; /* Chrome all / Safari all */
56+
-moz-user-select: none; /* Firefox all */
57+
-ms-user-select: none; /* IE 10+ */
58+
user-select: none; /* Likely future */
59+
}
60+
*, *:before, *:after {
61+
box-sizing: inherit;
62+
}
63+
b {
64+
font-weight: bold;
65+
}
66+
67+
/* main app styles */
68+
body {
69+
width: 700px;
70+
margin: 0 auto;
71+
background-color: #FAFAFA;
72+
font-family: 'Source Sans Pro', sans-serif;
73+
color: #111;
74+
}
75+
76+
.container {
77+
margin: 2% auto;
78+
padding: 15px;
79+
background-color: #FFFFFF;
80+
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
81+
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
82+
}
83+
84+
h1 {
85+
font-size: 3rem;
86+
font-weight: 900;
87+
text-align: center;
88+
margin: 1% 0 3%;
89+
}
90+
91+
textarea {
92+
width: 100%;
93+
height: 250px;
94+
padding: 10px;
95+
border: 1px solid #d9d9d9;
96+
outline: none;
97+
font-size: 1rem;
98+
resize: none;
99+
line-height: 1.5rem;
100+
}
101+
102+
textarea:hover {
103+
border-color: #C0C0C0;
104+
}
105+
106+
textarea:focus {
107+
border-color: #4D90FE;
108+
}
109+
110+
.output.row {
111+
width: 100%;
112+
border: 1px solid #DDD;
113+
font-size: 1.4rem;
114+
margin: 1% 0;
115+
background-color: #F9F9F9;
116+
}
117+
118+
.output.row div {
119+
display: inline-block;
120+
width: 42%;
121+
padding: 10px 15px;
122+
margin: 1%;
123+
}
124+
125+
.output.row span {
126+
font-weight: bold;
127+
font-size: 1.5rem;
128+
}
129+
130+
#readability {
131+
width: 52%;
132+
font-weight: bold;
133+
}
134+
135+
#readability:hover {
136+
background-color: #4D90FE;
137+
color: #FFF;
138+
border-radius: 2px;
139+
cursor: pointer;
140+
}
141+
142+
#readability:active {
143+
background-color: #307AF3;
144+
}
145+
146+
.keywords {
147+
display: none;
148+
margin: 4% 0 0;
149+
font-size: 2rem;
150+
font-weight: 900;
151+
}
152+
153+
.keywords ul {
154+
font-weight: 400;
155+
border: 1px solid #DDD;
156+
font-size: 1.4rem;
157+
background-color: #F9F9F9;
158+
margin: 2% 0;
159+
}
160+
161+
.keywords li {
162+
display: inline-block;
163+
width: 44%;
164+
padding: 10px;
165+
margin: 1%;
166+
}
167+
168+
169+
/*
170+
** Making it responsive
171+
*/
172+
173+
174+
@media (max-width: 750px) {
175+
body {
176+
width: 600px;
177+
}
178+
.output.row {
179+
font-size: 1.2rem;
180+
}
181+
.output.row span {
182+
font-size: 1.3rem;
183+
}
184+
.keywords ul {
185+
font-size: 1.2rem;
186+
}
187+
}
188+
189+
@media (max-width: 600px) {
190+
191+
/* rewriting old styles */
192+
body {
193+
width: 95%;
194+
}
195+
.output.row {
196+
border: none;
197+
background-color: #FFF;
198+
}
199+
.output.row div {
200+
display: block;
201+
width: 100%;
202+
padding: 10px 15px;
203+
margin: 2% auto;
204+
border: 1px solid #DDD;
205+
font-size: 1.8rem;
206+
background-color: #F9F9F9;
207+
}
208+
.output.row span {
209+
font-size: 2rem;
210+
}
211+
#readability {
212+
width: 100%;
213+
font-size: 1.6rem;
214+
font-weight: 400;
215+
}
216+
217+
.keywords {
218+
margin: 10% auto;
219+
}
220+
221+
.keywords ul {
222+
font-weight: 400;
223+
border: none;
224+
font-size: 1.8rem;
225+
background-color: #F9F9F9;
226+
margin: 5% 0;
227+
}
228+
229+
.keywords li {
230+
display: block;
231+
width: 100%;
232+
padding: 10px;
233+
margin: 2% auto;
234+
border: 1px solid #DDD;
235+
}
236+
237+
}

‎word counter/word.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Word Counter</title>
6+
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900' rel='stylesheet' type='text/css'>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" type="text/css" href="word.css">
9+
<meta name="description" content="A word counter built in HTML/CSS/JS. Shows number of characters, words, reading time and readability score. Also generates a list of top keywords.">
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<h1>Word Counter</h1>
15+
<textarea placeholder="Enter your text here..."></textarea>
16+
<div class="output row">
17+
<div>Characters: <span id="characterCount">0</span></div>
18+
<div>Words: <span id="wordCount">0</span></div>
19+
</div>
20+
<div class="output row">
21+
<div>Sentences: <span id="sentenceCount">0</span></div>
22+
<div>Paragraphs: <span id="paragraphCount">0</span></div>
23+
</div>
24+
<div class="output row">
25+
<div>Reading Time: <span id="readingTime">0</span></div>
26+
<div id="readability">Show readability score.</div>
27+
</div>
28+
<div class="keywords">
29+
Top keywords:
30+
<ul id="topKeywords">
31+
</ul>
32+
</div>
33+
</div>
34+
<script type="text/javascript" src="word.js"></script>
35+
</body>
36+
37+
</html>

0 commit comments

Comments
 (0)