Advertisement
Guest User

Untitled

a guest
Jan 30th, 2023
333
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.04 KB | Source Code | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <title>Advance Word Counter Tool Online</title>
  4. <head>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="Website word counter, Word count in Word, Word counter for books, Word frequency counter, Character counter, Word count Google Docs, SEO word counter, Word counter camera"/>
  7. <meta name="robots" content="index,follow" />
  8. <meta name="keywords" content="Website word counter, Word count in Word, Word counter for books, Word frequency counter, Character counter, Word count Google Docs, SEO word counter, Word counter camera" />
  9. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  10. <link href='https://digitalmustafa.com/scripts-for-blogger/' rel='canonical'/>
  11. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  13. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  14. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  15. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  16. <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
  17.  
  18. <style>
  19. /* border box */
  20. html {
  21. box-sizing: border-box;
  22. -webkit-user-select: none;
  23. /* Chrome all / Safari all */
  24. -moz-user-select: none;
  25. /* Firefox all */
  26. -ms-user-select: none;
  27. /* IE 10+ */
  28. user-select: none;
  29. /* Likely future */
  30. }
  31. *,
  32. *:before,
  33. *:after {
  34. box-sizing: inherit;
  35. }
  36. b {
  37. font-weight: bold;
  38. }
  39. /* main app styles */
  40. body {
  41. width: 700px;
  42. margin: 0 auto;
  43. background-color: #FAFAFA;
  44. font-family: 'Source Sans Pro', sans-serif;
  45. color: #111;
  46. }
  47. .container {
  48. margin: 2% auto;
  49. padding: 15px;
  50. background-color: #FFFFFF;
  51. -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  52. box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  53. }
  54. h1 {
  55. font-size: 3rem;
  56. font-weight: 900;
  57. text-align: center;
  58. margin: 1% 0 3%;
  59. }
  60. textarea {
  61. width: 100%;
  62. height: 250px;
  63. padding: 10px;
  64. border: 1px solid #d9d9d9;
  65. outline: none;
  66. font-size: 1rem;
  67. resize: none;
  68. line-height: 1.5rem;
  69. }
  70. textarea:hover {
  71. border-color: #C0C0C0;
  72. }
  73. textarea:focus {
  74. border-color: #4D90FE;
  75. }
  76. .output.row {
  77. width: 100%;
  78. border: 1px solid #DDD;
  79. font-size: 1.4rem;
  80. margin: 1% 0;
  81. background-color: #F9F9F9;
  82. }
  83. .output.row div {
  84. display: inline-block;
  85. width: 42%;
  86. padding: 10px 15px;
  87. margin: 1%;
  88. }
  89. .output.row span {
  90. font-weight: bold;
  91. font-size: 1.5rem;
  92. }
  93. #readability {
  94. width: 52%;
  95. font-weight: bold;
  96. }
  97. #readability:hover {
  98. background-color: #4D90FE;
  99. color: #FFF;
  100. border-radius: 2px;
  101. cursor: pointer;
  102. }
  103. #readability:active {
  104. background-color: #307AF3;
  105. }
  106. .keywords {
  107. display: none;
  108. margin: 4% 0 0;
  109. font-size: 2rem;
  110. font-weight: 900;
  111. }
  112. .keywords ul {
  113. font-weight: 400;
  114. border: 1px solid #DDD;
  115. font-size: 1.4rem;
  116. background-color: #F9F9F9;
  117. margin: 2% 0;
  118. }
  119. .keywords li {
  120. display: inline-block;
  121. width: 44%;
  122. padding: 10px;
  123. margin: 1%;
  124. }
  125. /*
  126. ** Making it responsive
  127. */
  128. @media (max-width: 750px) {
  129. body {
  130. width: 600px;
  131. }
  132. .output.row {
  133. font-size: 1.2rem;
  134. }
  135. .output.row span {
  136. font-size: 1.3rem;
  137. }
  138. .keywords ul {
  139. font-size: 1.2rem;
  140. }
  141. }
  142. @media (max-width: 600px) {
  143. /* rewriting old styles */
  144. body {
  145. width: 95%;
  146. }
  147. .output.row {
  148. border: none;
  149. background-color: #FFF;
  150. }
  151. .output.row div {
  152. display: block;
  153. width: 100%;
  154. padding: 10px 15px;
  155. margin: 2% auto;
  156. border: 1px solid #DDD;
  157. font-size: 1.8rem;
  158. background-color: #F9F9F9;
  159. }
  160. .output.row span {
  161. font-size: 2rem;
  162. }
  163. #readability {
  164. width: 100%;
  165. font-size: 1.6rem;
  166. font-weight: 400;
  167. }
  168. .keywords {
  169. margin: 10% auto;
  170. }
  171. .keywords ul {
  172. font-weight: 400;
  173. border: none;
  174. font-size: 1.8rem;
  175. background-color: #F9F9F9;
  176. margin: 5% 0;
  177. }
  178. .keywords li {
  179. display: block;
  180. width: 100%;
  181. padding: 10px;
  182. margin: 2% auto;
  183. border: 1px solid #DDD;
  184. }
  185. .ads {
  186. margin: auto;
  187. padding: 60px 0;
  188. max-width: 640px;
  189. box-shadow: 0 5px 15px rgba(0,0,0,.16);
  190. border-radius: 5px;
  191. margin-top: 1em;
  192. background: #fff;
  193. text-align: left;
  194. }
  195. </style>
  196. </head>
  197. <body style="background:#f20c4d;">
  198. <div class="container">
  199. <h1>Word Counter</h1>
  200. <textarea placeholder="Enter your text here..."></textarea>
  201. <div class="ads container">
  202. Place Your Ad Code
  203. </div>
  204. <div class="output row">
  205. <div>Characters: <span id="characterCount">0</span></div>
  206. <div>Words: <span id="wordCount">0</span></div>
  207. </div>
  208. <div class="output row">
  209. <div>Sentences: <span id="sentenceCount">0</span></div>
  210. <div>Paragraphs: <span id="paragraphCount">0</span></div>
  211. </div>
  212. <div class="output row">
  213. <div>Reading Time: <span id="readingTime">0</span></div>
  214. <div id="readability">Show readability score.</div>
  215. </div>
  216. <div class="keywords">
  217. Top keywords:
  218. <ul id="topKeywords">
  219. </ul>
  220. </div>
  221. </div>
  222. </div>
  223. <br>
  224. </body>
  225. <script>
  226. /*
  227.  **
  228.  ** User stories:
  229.  ** - Shows number of characters, words, sentences, paragraphs - Done
  230.  ** - Show reading time - Done
  231.  ** - Show keyword count - Done
  232.  ** - Show reading level (Optional - how?) - Done
  233.  ** - Above data should change/appear on every keypress - Done
  234.  **
  235.  */
  236. // Readability (Mashape) API Key for testing: PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE
  237. "use strict";
  238. var input = document.querySelectorAll('textarea')[0],
  239. characterCount = document.querySelector('#characterCount'),
  240. wordCount = document.querySelector('#wordCount'),
  241. sentenceCount = document.querySelector('#sentenceCount'),
  242. paragraphCount = document.querySelector('#paragraphCount'),
  243. readingTime = document.querySelector('#readingTime'),
  244. readability = document.querySelector('#readability'),
  245. keywordsDiv = document.querySelectorAll('.keywords')[0],
  246. topKeywords = document.querySelector('#topKeywords');
  247. // updating the displayed stats after every keypress
  248. input.addEventListener('keyup', function() {
  249. //keeping the console clean to make only the latest data visible
  250. console.clear();
  251. // character count
  252. // just displaying the input length as everything is a character
  253. characterCount.innerHTML = input.value.length;
  254. // word count using \w metacharacter - replacing this with .* to match anything between word boundaries since it was not taking 'a' as a word.
  255. // this is a masterstroke - to count words with any number of hyphens as one word
  256. // [-?(\w+)?]+ looks for hyphen and a word (we make both optional with ?). + at the end makes it a repeated pattern
  257. // \b is word boundary metacharacter
  258. var words = input.value.match(/\b[-?(\w+)?]+\b/gi);
  259. // console.log(words);
  260. if (words) {
  261. wordCount.innerHTML = words.length;
  262. } else {
  263. wordCount.innerHTML = 0;
  264. }
  265. // sentence count using ./!/? as sentense separators
  266. if (words) {
  267. var sentences = input.value.split(/[.|!|?]+/g);
  268. console.log(sentences);
  269. sentenceCount.innerHTML = sentences.length - 1;
  270. } else {
  271. sentenceCount.innerHTML = 0;
  272. }
  273. // paragraph count from http://stackoverflow.com/a/3336537
  274. if (words) {
  275. // \n$ takes care of empty lines: lines with no characters, and only \n are not paragraphs
  276. // and need to be replaced with empty string
  277. var paragraphs = input.value.replace(/\n$/gm, '').split(/\n/);
  278. paragraphCount.innerHTML = paragraphs.length;
  279. } else {
  280. paragraphCount.innerHTML = 0;
  281. }
  282. // console.log(paragraphs);
  283. // reading time based on 275 words/minute
  284. if (words) {
  285. var seconds = Math.floor(words.length * 60 / 275);
  286. // need to convert seconds to minutes and hours
  287. if (seconds > 59) {
  288. var minutes = Math.floor(seconds / 60);
  289. seconds = seconds - minutes * 60;
  290. readingTime.innerHTML = minutes + "m " + seconds + "s";
  291. } else {
  292. readingTime.innerHTML = seconds + "s";
  293. }
  294. } else {
  295. readingTime.innerHTML = "0s";
  296. }
  297. // finding out top keywords and their count
  298. // step-1: remove all the stop words
  299. // step-2: form an object with keywords and their count
  300. // step-3: sort the object by first converting it to a 2D array
  301. // step-4: display top 4 keywords and their count
  302. if (words) {
  303. // step-1: removing all the stop words
  304. var nonStopWords = [];
  305. var stopWords = ["a", "able", "about", "above", "abst", "accordance", "according", "accordingly", "across", "act", "actually", "added", "adj", "affected", "affecting", "affects", "after", "afterwards", "again", "against", "ah", "all", "almost", "alone", "along", "already", "also", "although", "always", "am", "among", "amongst", "an", "and", "announce", "another", "any", "anybody", "anyhow", "anymore", "anyone", "anything", "anyway", "anyways", "anywhere", "apparently", "approximately", "are", "aren", "arent", "arise", "around", "as", "aside", "ask", "asking", "at", "auth", "available", "away", "awfully", "b", "back", "be", "became", "because", "become", "becomes", "becoming", "been", "before", "beforehand", "begin", "beginning", "beginnings", "begins", "behind", "being", "believe", "below", "beside", "besides", "between", "beyond", "biol", "both", "brief", "briefly", "but", "by", "c", "ca", "came", "can", "cannot", "can't", "cause", "causes", "certain", "certainly", "co", "com", "come", "comes", "contain", "containing", "contains", "could", "couldnt", "d", "date", "did", "didn't", "different", "do", "does", "doesn't", "doing", "done", "don't", "down", "downwards", "due", "during", "e", "each", "ed", "edu", "effect", "eg", "eight", "eighty", "either", "else", "elsewhere", "end", "ending", "enough", "especially", "et", "et-al", "etc", "even", "ever", "every", "everybody", "everyone", "everything", "everywhere", "ex", "except", "f", "far", "few", "ff", "fifth", "first", "five", "fix", "followed", "following", "follows", "for", "former", "formerly", "forth", "found", "four", "from", "further", "furthermore", "g", "gave", "get", "gets", "getting", "give", "given", "gives", "giving", "go", "goes", "gone", "got", "gotten", "h", "had", "happens", "hardly", "has", "hasn't", "have", "haven't", "having", "he", "hed", "hence", "her", "here", "hereafter", "hereby", "herein", "heres", "hereupon", "hers", "herself", "hes", "hi", "hid", "him", "himself", "his", "hither", "home", "how", "howbeit", "however", "hundred", "i", "id", "ie", "if", "i'll", "im", "immediate", "immediately", "importance", "important", "in", "inc", "indeed", "index", "information", "instead", "into", "invention", "inward", "is", "isn't", "it", "itd", "it'll", "its", "itself", "i've", "j", "just", "k", "keep", "keeps", "kept", "kg", "km", "know", "known", "knows", "l", "largely", "last", "lately", "later", "latter", "latterly", "least", "less", "lest", "let", "lets", "like", "liked", "likely", "line", "little", "'ll", "look", "looking", "looks", "ltd", "m", "made", "mainly", "make", "makes", "many", "may", "maybe", "me", "mean", "means", "meantime", "meanwhile", "merely", "mg", "might", "million", "miss", "ml", "more", "moreover", "most", "mostly", "mr", "mrs", "much", "mug", "must", "my", "myself", "n", "na", "name", "namely", "nay", "nd", "near", "nearly", "necessarily", "necessary", "need", "needs", "neither", "never", "nevertheless", "new", "next", "nine", "ninety", "no", "nobody", "non", "none", "nonetheless", "noone", "nor", "normally", "nos", "not", "noted", "nothing", "now", "nowhere", "o", "obtain", "obtained", "obviously", "of", "off", "often", "oh", "ok", "okay", "old", "omitted", "on", "once", "one", "ones", "only", "onto", "or", "ord", "other", "others", "otherwise", "ought", "our", "ours", "ourselves", "out", "outside", "over", "overall", "owing", "own", "p", "page", "pages", "part", "particular", "particularly", "past", "per", "perhaps", "placed", "please", "plus", "poorly", "possible", "possibly", "potentially", "pp", "predominantly", "present", "previously", "primarily", "probably", "promptly", "proud", "provides", "put", "q", "que", "quickly", "quite", "qv", "r", "ran", "rather", "rd", "re", "readily", "really", "recent", "recently", "ref", "refs", "regarding", "regardless", "regards", "related", "relatively", "research", "respectively", "resulted", "resulting", "results", "right", "run", "s", "said", "same", "saw", "say", "saying", "says", "sec", "section", "see", "seeing", "seem", "seemed", "seeming", "seems", "seen", "self", "selves", "sent", "seven", "several", "shall", "she", "shed", "she'll", "shes", "should", "shouldn't", "show", "showed", "shown", "showns", "shows", "significant", "significantly", "similar", "similarly", "since", "six", "slightly", "so", "some", "somebody", "somehow", "someone", "somethan", "something", "sometime", "sometimes", "somewhat", "somewhere", "soon", "sorry", "specifically", "specified", "specify", "specifying", "still", "stop", "strongly", "sub", "substantially", "successfully", "such", "sufficiently", "suggest", "sup", "sure", "t", "take", "taken", "taking", "tell", "tends", "th", "than", "thank", "thanks", "thanx", "that", "that'll", "thats", "that've", "the", "their", "theirs", "them", "themselves", "then", "thence", "there", "thereafter", "thereby", "thered", "therefore", "therein", "there'll", "thereof", "therere", "theres", "thereto", "thereupon", "there've", "these", "they", "theyd", "they'll", "theyre", "they've", "think", "this", "those", "thou", "though", "thoughh", "thousand", "throug", "through", "throughout", "thru", "thus", "til", "tip", "to", "together", "too", "took", "toward", "towards", "tried", "tries", "truly", "try", "trying", "ts", "twice", "two", "u", "un", "under", "unfortunately", "unless", "unlike", "unlikely", "until", "unto", "up", "upon", "ups", "us", "use", "used", "useful", "usefully", "usefulness", "uses", "using", "usually", "v", "value", "various", "'ve", "very", "via", "viz", "vol", "vols", "vs", "w", "want", "wants", "was", "wasn't", "way", "we", "wed", "welcome", "we'll", "went", "were", "weren't", "we've", "what", "whatever", "what'll", "whats", "when", "whence", "whenever", "where", "whereafter", "whereas", "whereby", "wherein", "wheres", "whereupon", "wherever", "whether", "which", "while", "whim", "whither", "who", "whod", "whoever", "whole", "who'll", "whom", "whomever", "whos", "whose", "why", "widely", "willing", "wish", "with", "within", "without", "won't", "words", "world", "would", "wouldn't", "www", "x", "y", "yes", "yet", "you", "youd", "you'll", "your", "youre", "yours", "yourself", "yourselves", "you've", "z", "zero"];
  306. for (var i = 0; i < words.length; i++) {
  307. // filtering out stop words and numbers
  308. if (stopWords.indexOf(words[i].toLowerCase()) === -1 && isNaN(words[i])) {
  309. nonStopWords.push(words[i].toLowerCase());
  310. }
  311. }
  312. // console.log(nonStopWords);
  313. // step-2: forming an object with keywords and their count
  314. var keywords = {};
  315. for (var i = 0; i < nonStopWords.length; i++) {
  316. // checking if the word(property) already exists
  317. // if it does increment the count otherwise set it to one
  318. if (nonStopWords[i] in keywords) {
  319. keywords[nonStopWords[i]] += 1;
  320. } else {
  321. keywords[nonStopWords[i]] = 1;
  322. }
  323. }
  324. // step-3: sorting the object by first converting it to a 2D array
  325. var sortedKeywords = [];
  326. for (var keyword in keywords) {
  327. sortedKeywords.push([keyword, keywords[keyword]])
  328. }
  329. sortedKeywords.sort(function(a, b) {
  330. return b[1] - a[1]
  331. });
  332. // console.log(sortedKeywords);
  333. // step-4: displaying top 4 keywords and their count
  334. topKeywords.innerHTML = "";
  335. for (var i = 0; i < sortedKeywords.length && i < 4; i++) {
  336. var li = document.createElement('li');
  337. li.innerHTML = "<b>" + sortedKeywords[i][0] + "</b>: " + sortedKeywords[i][1];
  338. topKeywords.appendChild(li);
  339. }
  340. }
  341. // displaying top keywords only if there is a word in the text area
  342. if (words) {
  343. keywordsDiv.style.display = "block";
  344. } else {
  345. keywordsDiv.style.display = "none";
  346. }
  347. });
  348. // readability level using readability-metrics API from Mashape
  349. readability.addEventListener('click', function() {
  350. // placeholder until the API returns the score
  351. readability.innerHTML = "Fetching score...";
  352. var requestUrl = "https://ipeirotis-readability-metrics.p.mashape.com/getReadabilityMetrics?text=";
  353. var data = input.value;
  354. var request = new XMLHttpRequest();
  355. request.open('POST', encodeURI(requestUrl + data), true);
  356. request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  357. request.setRequestHeader("X-Mashape-Authorization", "PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE");
  358. request.send();
  359. request.onload = function() {
  360. if (this.status >= 200 && this.status < 400) {
  361. // Success!
  362. readability.innerHTML = readingEase(JSON.parse(this.response).FLESCH_READING);
  363. } else {
  364. // We reached our target server, but it returned an error
  365. readability.innerHTML = "Not available.";
  366. }
  367. };
  368. request.onerror = function() {
  369. // There was a connection error of some sort
  370. readability.innerHTML = "Not available.";
  371. };
  372. });
  373. // function to convert FLESCH READING SCORE into meaningful string.
  374. function readingEase(num) {
  375. switch (true) {
  376. case (num <= 30):
  377. return "Readability: College graduate.";
  378. break;
  379. case (num > 30 && num <= 50):
  380. return "Readability: College level.";
  381. break;
  382. case (num > 50 && num <= 60):
  383. return "Readability: 10th - 12th grade.";
  384. break;
  385. case (num > 60 && num <= 70):
  386. return "Readability: 8th - 9th grade.";
  387. break;
  388. case (num > 70 && num <= 80):
  389. return "Readability: 7th grade.";
  390. break;
  391. case (num > 80 && num <= 90):
  392. return "Readability: 6th grade.";
  393. break;
  394. case (num > 90 && num <= 100):
  395. return "Readability: 5th grade.";
  396. break;
  397. default:
  398. return "Not available.";
  399. break;
  400. }
  401. }
  402. </script>
  403. </html>
  404.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement