API tools faq
paste
Advertisement
HasanXLD

Trickbd code

HasanXLD
Jun 4th, 2025
156
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.81 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. .container {
  3. font-family: serif;
  4.  
  5. }
  6.  
  7. textarea {
  8.  
  9. width: 100%;
  10.  
  11. height: 250px;
  12.  
  13. padding: 10px;
  14.  
  15. border: 1px solid #000;
  16.  
  17. outline: none;
  18.  
  19. font-size: 1rem;
  20.  
  21. resize: none;
  22.  
  23. line-height: 1.5rem;
  24. font-family: serif;
  25.  
  26. }
  27.  
  28. textarea:hover {
  29.  
  30. border-color: #000;
  31.  
  32. }
  33. textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  34. color: #999;
  35. font-style: serif;
  36. }
  37. textarea::-moz-placeholder { /* Firefox 19+ */
  38. color: #999;
  39. font-style: serif;
  40. opacity: 1;
  41. }
  42. textarea:-ms-input-placeholder { /* IE 10+ */
  43. color: #999;
  44. font-style: serif;
  45. }
  46. textarea:-moz-placeholder { /* Firefox 18- */
  47. color: #999;
  48. font-style: serif;
  49. opacity: 1;
  50. }
  51.  
  52. textarea:focus {
  53.  
  54. border-color: #4D90FE;
  55.  
  56. }
  57.  
  58. .output.row {
  59.  
  60. width: 100%;
  61.  
  62. border: 1px solid #DDD;
  63.  
  64. font-size: 1.4rem;
  65.  
  66. margin: 1% 0;
  67.  
  68. background-color: #F9F9F9;
  69.  
  70. }
  71.  
  72. .output.row div {
  73.  
  74. display: inline-block;
  75.  
  76. width: 42%;
  77.  
  78. padding: 10px 15px;
  79.  
  80. margin: 1%;
  81.  
  82. }
  83.  
  84. .output.row span {
  85.  
  86. font-weight: bold;
  87.  
  88. font-size: 1.5rem;
  89.  
  90. }
  91.  
  92. #readability {
  93.  
  94. width: 52%;
  95.  
  96. font-weight: bold;
  97.  
  98. }
  99.  
  100. #readability:hover {
  101.  
  102. background-color: #4D90FE;
  103.  
  104. color: #FFF;
  105.  
  106. border-radius: 2px;
  107.  
  108. cursor: pointer;
  109.  
  110. }
  111.  
  112. #readability:active {
  113.  
  114. background-color: #307AF3;
  115.  
  116. }
  117.  
  118. .keywords {
  119.  
  120. display: none;
  121.  
  122. margin: 4% 0 0;
  123.  
  124. font-size: 2rem;
  125.  
  126. font-weight: 900;
  127.  
  128. }
  129.  
  130. .keywords ul {
  131.  
  132. font-weight: 400;
  133.  
  134. border: 1px solid #DDD;
  135.  
  136. font-size: 1.4rem;
  137.  
  138. background-color: #F9F9F9;
  139.  
  140. margin: 2% 0;
  141.  
  142. }
  143.  
  144. .keywords li {
  145.  
  146. display: inline-block;
  147.  
  148. width: 44%;
  149.  
  150. padding: 10px;
  151.  
  152. margin: 1%;
  153.  
  154. }
  155.  
  156. /*
  157.  
  158. ** Making it responsive
  159.  
  160. */
  161.  
  162. @media (max-width: 750px) {
  163.  
  164. body {
  165.  
  166. width: 600px;
  167.  
  168. }
  169.  
  170. .output.row {
  171.  
  172. font-size: 1.2rem;
  173.  
  174. }
  175.  
  176. .output.row span {
  177.  
  178. font-size: 1.3rem;
  179.  
  180. }
  181.  
  182. .keywords ul {
  183.  
  184. font-size: 1.2rem;
  185.  
  186. }
  187.  
  188. }
  189.  
  190. @media (max-width: 600px) {
  191.  
  192. /* rewriting old styles */
  193.  
  194. body {
  195.  
  196. width: 95%;
  197.  
  198. }
  199.  
  200. .output.row {
  201.  
  202. border: none;
  203.  
  204. background-color: #FFF;
  205.  
  206. }
  207.  
  208. .output.row div {
  209.  
  210. display: block;
  211.  
  212. width: 100%;
  213.  
  214. padding: 10px 15px;
  215.  
  216. margin: 2% auto;
  217.  
  218. border: 1px solid #DDD;
  219.  
  220. font-size: 1.8rem;
  221.  
  222. background-color: #F9F9F9;
  223.  
  224. }
  225.  
  226. .output.row span {
  227.  
  228. font-size: 2rem;
  229.  
  230. }
  231.  
  232. #readability {
  233.  
  234. width: 100%;
  235.  
  236. font-size: 1.6rem;
  237.  
  238. font-weight: 400;
  239.  
  240. }
  241.  
  242. .keywords {
  243.  
  244. margin: 10% auto;
  245.  
  246. }
  247.  
  248. .keywords ul {
  249.  
  250. font-weight: 400;
  251.  
  252. border: none;
  253.  
  254. font-size: 1.8rem;
  255.  
  256. background-color: #F9F9F9;
  257.  
  258. margin: 5% 0;
  259.  
  260. }
  261.  
  262. .keywords li {
  263.  
  264. display: block;
  265.  
  266. width: 100%;
  267.  
  268. padding: 10px;
  269.  
  270. margin: 2% auto;
  271.  
  272. border: 1px solid #DDD;
  273.  
  274. }
  275.  
  276. }
  277.  
  278. </style>
  279.  
  280.  
  281. <div class="container">
  282.  
  283. <h1>Word Counter</h1>
  284.  
  285. <textarea placeholder="Enter your text here..."></textarea>
  286.  
  287. <div class="output row">
  288.  
  289. <div>Characters: <span id="characterCount">0</span></div>
  290.  
  291. <div>Words: <span id="wordCount">0</span></div>
  292.  
  293. </div>
  294.  
  295. <div class="output row">
  296.  
  297. <div>Sentences: <span id="sentenceCount">0</span></div>
  298.  
  299. <div>Paragraphs: <span id="paragraphCount">0</span></div>
  300.  
  301. </div>
  302.  
  303. <div class="output row">
  304.  
  305. <div>Reading Time: <span id="readingTime">0</span></div>
  306.  
  307. <div id="readability">Show readability score.</div>
  308.  
  309. </div>
  310.  
  311. <div class="keywords">
  312.  
  313. Top keywords:
  314.  
  315. <ul id="topKeywords">
  316.  
  317. </ul>
  318.  
  319. </div>
  320.  
  321. </div>
  322.  
  323. <script>
  324.  
  325. /*
  326.  
  327. **
  328.  
  329. ** User stories:
  330.  
  331. ** - Shows number of characters, words, sentences, paragraphs - Done
  332.  
  333. ** - Show reading time - Done
  334.  
  335. ** - Show keyword count - Done
  336.  
  337. ** - Show reading level (Optional - how?) - Done
  338.  
  339. ** - Above data should change/appear on every keypress - Done
  340.  
  341. **
  342.  
  343. */
  344.  
  345. // Readability (Mashape) API Key for testing: PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE
  346.  
  347. "use strict";
  348.  
  349. var input = document.querySelectorAll('textarea')[0],
  350.  
  351. characterCount = document.querySelector('#characterCount'),
  352.  
  353. wordCount = document.querySelector('#wordCount'),
  354.  
  355. sentenceCount = document.querySelector('#sentenceCount'),
  356.  
  357. paragraphCount = document.querySelector('#paragraphCount'),
  358.  
  359. readingTime = document.querySelector('#readingTime'),
  360.  
  361. readability = document.querySelector('#readability'),
  362.  
  363. keywordsDiv = document.querySelectorAll('.keywords')[0],
  364.  
  365. topKeywords = document.querySelector('#topKeywords');
  366.  
  367. // updating the displayed stats after every keypress
  368.  
  369. input.addEventListener('keyup', function() {
  370.  
  371. //keeping the console clean to make only the latest data visible
  372.  
  373. console.clear();
  374.  
  375. // character count
  376.  
  377. // just displaying the input length as everything is a character
  378.  
  379. characterCount.innerHTML = input.value.length;
  380.  
  381. // word count using \w metacharacter - replacing this with .* to match anything between word boundaries since it was not taking 'a' as a word.
  382.  
  383. // this is a masterstroke - to count words with any number of hyphens as one word
  384.  
  385. // [-?(\w+)?]+ looks for hyphen and a word (we make both optional with ?). + at the end makes it a repeated pattern
  386.  
  387. // \b is word boundary metacharacter
  388.  
  389. var words = input.value.match(/\b[-?(\w+)?]+\b/gi);
  390.  
  391. // console.log(words);
  392.  
  393. if (words) {
  394.  
  395. wordCount.innerHTML = words.length;
  396.  
  397. } else {
  398.  
  399. wordCount.innerHTML = 0;
  400.  
  401. }
  402.  
  403. // sentence count using ./!/? as sentense separators
  404.  
  405. if (words) {
  406.  
  407. var sentences = input.value.split(/[.|!|?]+/g);
  408.  
  409. console.log(sentences);
  410.  
  411. sentenceCount.innerHTML = sentences.length - 1;
  412.  
  413. } else {
  414.  
  415. sentenceCount.innerHTML = 0;
  416.  
  417. }
  418.  
  419. // paragraph count from http://stackoverflow.com/a/3336537
  420.  
  421. if (words) {
  422.  
  423. // \n$ takes care of empty lines: lines with no characters, and only \n are not paragraphs
  424.  
  425. // and need to be replaced with empty string
  426.  
  427. var paragraphs = input.value.replace(/\n$/gm, '').split(/\n/);
  428.  
  429. paragraphCount.innerHTML = paragraphs.length;
  430.  
  431. } else {
  432.  
  433. paragraphCount.innerHTML = 0;
  434.  
  435. }
  436.  
  437. // console.log(paragraphs);
  438.  
  439. // reading time based on 275 words/minute
  440.  
  441. if (words) {
  442.  
  443. var seconds = Math.floor(words.length * 60 / 275);
  444.  
  445. // need to convert seconds to minutes and hours
  446.  
  447. if (seconds > 59) {
  448.  
  449. var minutes = Math.floor(seconds / 60);
  450.  
  451. seconds = seconds - minutes * 60;
  452.  
  453. readingTime.innerHTML = minutes + "m " + seconds + "s";
  454.  
  455. } else {
  456.  
  457. readingTime.innerHTML = seconds + "s";
  458.  
  459. }
  460.  
  461. } else {
  462.  
  463. readingTime.innerHTML = "0s";
  464.  
  465. }
  466.  
  467. // finding out top keywords and their count
  468.  
  469. // step-1: remove all the stop words
  470.  
  471. // step-2: form an object with keywords and their count
  472.  
  473. // step-3: sort the object by first converting it to a 2D array
  474.  
  475. // step-4: display top 4 keywords and their count
  476.  
  477. if (words) {
  478.  
  479. // step-1: removing all the stop words
  480.  
  481. var nonStopWords = [];
  482.  
  483. 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"];
  484.  
  485. for (var i = 0; i < words.length; i++) {
  486.  
  487. // filtering out stop words and numbers
  488.  
  489. if (stopWords.indexOf(words[i].toLowerCase()) === -1 && isNaN(words[i])) {
  490.  
  491. nonStopWords.push(words[i].toLowerCase());
  492.  
  493. }
  494.  
  495. }
  496.  
  497. // console.log(nonStopWords);
  498.  
  499. // step-2: forming an object with keywords and their count
  500.  
  501. var keywords = {};
  502.  
  503. for (var i = 0; i < nonStopWords.length; i++) {
  504.  
  505. // checking if the word(property) already exists
  506.  
  507. // if it does increment the count otherwise set it to one
  508.  
  509. if (nonStopWords[i] in keywords) {
  510.  
  511. keywords[nonStopWords[i]] += 1;
  512.  
  513. } else {
  514.  
  515. keywords[nonStopWords[i]] = 1;
  516.  
  517. }
  518.  
  519. }
  520.  
  521. // step-3: sorting the object by first converting it to a 2D array
  522.  
  523. var sortedKeywords = [];
  524.  
  525. for (var keyword in keywords) {
  526.  
  527. sortedKeywords.push([keyword, keywords[keyword]])
  528.  
  529. }
  530.  
  531. sortedKeywords.sort(function(a, b) {
  532.  
  533. return b[1] - a[1]
  534.  
  535. });
  536.  
  537. // console.log(sortedKeywords);
  538.  
  539. // step-4: displaying top 4 keywords and their count
  540.  
  541. topKeywords.innerHTML = "";
  542.  
  543. for (var i = 0; i < sortedKeywords.length && i < 4; i++) {
  544.  
  545. var li = document.createElement('li');
  546.  
  547. li.innerHTML = "<b>" + sortedKeywords[i][0] + "</b>: " + sortedKeywords[i][1];
  548.  
  549. topKeywords.appendChild(li);
  550.  
  551. }
  552.  
  553. }
  554.  
  555. // displaying top keywords only if there is a word in the text area
  556.  
  557. if (words) {
  558.  
  559. keywordsDiv.style.display = "block";
  560.  
  561. } else {
  562.  
  563. keywordsDiv.style.display = "none";
  564.  
  565. }
  566.  
  567. });
  568.  
  569. // readability level using readability-metrics API from Mashape
  570.  
  571. readability.addEventListener('click', function() {
  572.  
  573. // placeholder until the API returns the score
  574.  
  575. readability.innerHTML = "Fetching score...";
  576.  
  577. var requestUrl = "https://ipeirotis-readability-metrics.p.mashape.com/getReadabilityMetrics?text=";
  578.  
  579. var data = input.value;
  580.  
  581. var request = new XMLHttpRequest();
  582.  
  583. request.open('POST', encodeURI(requestUrl + data), true);
  584.  
  585. request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  586.  
  587. request.setRequestHeader("X-Mashape-Authorization", "PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE");
  588.  
  589. request.send();
  590.  
  591. request.onload = function() {
  592.  
  593. if (this.status >= 200 && this.status < 400) {
  594.  
  595. // Success!
  596.  
  597. readability.innerHTML = readingEase(JSON.parse(this.response).FLESCH_READING);
  598.  
  599. } else {
  600.  
  601. // We reached our target server, but it returned an error
  602.  
  603. readability.innerHTML = "Not available.";
  604.  
  605. }
  606.  
  607. };
  608.  
  609. request.onerror = function() {
  610.  
  611. // There was a connection error of some sort
  612.  
  613. readability.innerHTML = "Not available.";
  614.  
  615. };
  616.  
  617. });
  618.  
  619. // function to convert FLESCH READING SCORE into meaningful string.
  620.  
  621. function readingEase(num) {
  622.  
  623. switch (true) {
  624.  
  625. case (num <= 30):
  626.  
  627. return "Readability: College graduate.";
  628.  
  629. break;
  630.  
  631. case (num > 30 && num <= 50):
  632.  
  633. return "Readability: College level.";
  634.  
  635. break;
  636.  
  637. case (num > 50 && num <= 60):
  638.  
  639. return "Readability: 10th - 12th grade.";
  640.  
  641. break;
  642.  
  643. case (num > 60 && num <= 70):
  644.  
  645. return "Readability: 8th - 9th grade.";
  646.  
  647. break;
  648.  
  649. case (num > 70 && num <= 80):
  650.  
  651. return "Readability: 7th grade.";
  652.  
  653. break;
  654.  
  655. case (num > 80 && num <= 90):
  656.  
  657. return "Readability: 6th grade.";
  658.  
  659. break;
  660.  
  661. case (num > 90 && num <= 100):
  662.  
  663. return "Readability: 5th grade.";
  664.  
  665. break;
  666.  
  667. default:
  668.  
  669. return "Not available.";
  670.  
  671. break;
  672.  
  673. }
  674.  
  675. }
  676.  
  677. </script>
  678.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!