Table of Contents
Word Counter Html Css Javascript Code | Word Count Javascript Project
Welcome🎉 to Code With Random blog. This blog teaches us how we create a Word Counter. We use HTML, Css, and javascript for the Word Counter. I hope you enjoy our blog so let’s start with a basic HTML structure for the Word Counter.
HTML Code
<div class="container"> <h1>Word Counter</h1> <textarea placeholder="Enter your text here..."></textarea> <div class="output row"> <div>Characters: <span id="characterCount">0</span></div> <div>Words: <span id="wordCount">0</span></div> </div> <div class="output row"> <div>Sentences: <span id="sentenceCount">0</span></div> <div>Paragraphs: <span id="paragraphCount">0</span></div> </div> <div class="output row"> <div>Reading Time: <span id="readingTime">0</span></div> <div id="readability">Show readability score.</div> </div> <div class="keywords"> Top keywords: <ul id="topKeywords"> </ul> </div> </div>
There is all the HTML code for the Word Counter. Now, you can see an output with a Word Counter then we write javascript for the Word Counter.
Output
CSS Code
/* border box */ html { box-sizing: border-box; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ } *, *:before, *:after { box-sizing: inherit; } b { font-weight: bold; } /* main app styles */ body { width: 700px; margin: 0 auto; background-color: #FAFAFA; font-family: 'Source Sans Pro', sans-serif; color: #111; } .container { margin: 2% auto; padding: 15px; background-color: #FFFFFF; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); } h1 { font-size: 3rem; font-weight: 900; text-align: center; margin: 1% 0 3%; } textarea { width: 100%; height: 250px; padding: 10px; border: 1px solid #d9d9d9; outline: none; font-size: 1rem; resize: none; line-height: 1.5rem; } textarea:hover { border-color: #C0C0C0; } textarea:focus { border-color: #4D90FE; } .output.row { width: 100%; border: 1px solid #DDD; font-size: 1.4rem; margin: 1% 0; background-color: #F9F9F9; } .output.row div { display: inline-block; width: 42%; padding: 10px 15px; margin: 1%; } .output.row span { font-weight: bold; font-size: 1.5rem; } #readability { width: 52%; font-weight: bold; } #readability:hover { background-color: #4D90FE; color: #FFF; border-radius: 2px; cursor: pointer; } #readability:active { background-color: #307AF3; } .keywords { display: none; margin: 4% 0 0; font-size: 2rem; font-weight: 900; } .keywords ul { font-weight: 400; border: 1px solid #DDD; font-size: 1.4rem; background-color: #F9F9F9; margin: 2% 0; } .keywords li { display: inline-block; width: 44%; padding: 10px; margin: 1%; } /* ** Making it responsive */ @media (max-width: 750px) { body { width: 600px; } .output.row { font-size: 1.2rem; } .output.row span { font-size: 1.3rem; } .keywords ul { font-size: 1.2rem; } } @media (max-width: 600px) { /* rewriting old styles */ body { width: 95%; } .output.row { border: none; background-color: #FFF; } .output.row div { display: block; width: 100%; padding: 10px 15px; margin: 2% auto; border: 1px solid #DDD; font-size: 1.8rem; background-color: #F9F9F9; } .output.row span { font-size: 2rem; } #readability { width: 100%; font-size: 1.6rem; font-weight: 400; } .keywords { margin: 10% auto; } .keywords ul { font-weight: 400; border: none; font-size: 1.8rem; background-color: #F9F9F9; margin: 5% 0; } .keywords li { display: block; width: 100%; padding: 10px; margin: 2% auto; border: 1px solid #DDD; } }
CSS Updated Output
Javascript Code
/* ** ** User stories: ** - Shows number of characters, words, sentences, paragraphs - Done ** - Show reading time - Done ** - Show keyword count - Done ** - Show reading level (Optional - how?) - Done ** - Above data should change/appear on every keypress - Done ** */ // Readability (Mashape) API Key for testing: PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE "use strict"; var input = document.querySelectorAll('textarea')[0], characterCount = document.querySelector('#characterCount'), wordCount = document.querySelector('#wordCount'), sentenceCount = document.querySelector('#sentenceCount'), paragraphCount = document.querySelector('#paragraphCount'), readingTime = document.querySelector('#readingTime'), readability = document.querySelector('#readability'), keywordsDiv = document.querySelectorAll('.keywords')[0], topKeywords = document.querySelector('#topKeywords'); // updating the displayed stats after every keypress input.addEventListener('keyup', function() { //keeping the console clean to make only the latest data visible console.clear(); // character count // just displaying the input length as everything is a character characterCount.innerHTML = input.value.length; // word count using w metacharacter - replacing this with .* to match anything between word boundaries since it was not taking 'a' as a word. // this is a masterstroke - to count words with any number of hyphens as one word // [-?(w+)?]+ looks for hyphen and a word (we make both optional with ?). + at the end makes it a repeated pattern // b is word boundary metacharacter var words = input.value.match(/b[-?(w+)?]+b/gi); // console.log(words); if (words) { wordCount.innerHTML = words.length; } else { wordCount.innerHTML = 0; } // sentence count using ./!/? as sentense separators if (words) { var sentences = input.value.split(/[.|!|?]+/g); console.log(sentences); sentenceCount.innerHTML = sentences.length - 1; } else { sentenceCount.innerHTML = 0; } // paragraph count from http://stackoverflow.com/a/3336537 if (words) { // n$ takes care of empty lines: lines with no characters, and only n are not paragraphs // and need to be replaced with empty string var paragraphs = input.value.replace(/n$/gm, '').split(/n/); paragraphCount.innerHTML = paragraphs.length; } else { paragraphCount.innerHTML = 0; } // console.log(paragraphs); // reading time based on 275 words/minute if (words) { var seconds = Math.floor(words.length * 60 / 275); // need to convert seconds to minutes and hours if (seconds > 59) { var minutes = Math.floor(seconds / 60); seconds = seconds - minutes * 60; readingTime.innerHTML = minutes + "m " + seconds + "s"; } else { readingTime.innerHTML = seconds + "s"; } } else { readingTime.innerHTML = "0s"; } // finding out top keywords and their count // step-1: remove all the stop words // step-2: form an object with keywords and their count // step-3: sort the object by first converting it to a 2D array // step-4: display top 4 keywords and their count if (words) { // step-1: removing all the stop words var nonStopWords = []; 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"]; for (var i = 0; i < words.length; i++) { // filtering out stop words and numbers if (stopWords.indexOf(words[i].toLowerCase()) === -1 && isNaN(words[i])) { nonStopWords.push(words[i].toLowerCase()); } } // console.log(nonStopWords); // step-2: forming an object with keywords and their count var keywords = {}; for (var i = 0; i < nonStopWords.length; i++) { // checking if the word(property) already exists // if it does increment the count otherwise set it to one if (nonStopWords[i] in keywords) { keywords[nonStopWords[i]] += 1; } else { keywords[nonStopWords[i]] = 1; } } // step-3: sorting the object by first converting it to a 2D array var sortedKeywords = []; for (var keyword in keywords) { sortedKeywords.push([keyword, keywords[keyword]]) } sortedKeywords.sort(function(a, b) { return b[1] - a[1] }); // console.log(sortedKeywords); // step-4: displaying top 4 keywords and their count topKeywords.innerHTML = ""; for (var i = 0; i < sortedKeywords.length && i < 4; i++) { var li = document.createElement('li'); li.innerHTML = "<b>" + sortedKeywords[i][0] + "</b>: " + sortedKeywords[i][1]; topKeywords.appendChild(li); } } // displaying top keywords only if there is a word in the text area if (words) { keywordsDiv.style.display = "block"; } else { keywordsDiv.style.display = "none"; } }); // readability level using readability-metrics API from Mashape readability.addEventListener('click', function() { // placeholder until the API returns the score readability.innerHTML = "Fetching score..."; var requestUrl = "https://ipeirotis-readability-metrics.p.mashape.com/getReadabilityMetrics?text="; var data = input.value; var request = new XMLHttpRequest(); request.open('POST', encodeURI(requestUrl + data), true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request.setRequestHeader("X-Mashape-Authorization", "PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE"); request.send(); request.onload = function() { if (this.status >= 200 && this.status < 400) { // Success! readability.innerHTML = readingEase(JSON.parse(this.response).FLESCH_READING); } else { // We reached our target server, but it returned an error readability.innerHTML = "Not available."; } }; request.onerror = function() { // There was a connection error of some sort readability.innerHTML = "Not available."; }; }); // function to convert FLESCH READING SCORE into meaningful string. function readingEase(num) { switch (true) { case (num <= 30): return "Readability: College graduate."; break; case (num > 30 && num <= 50): return "Readability: College level."; break; case (num > 50 && num <= 60): return "Readability: 10th - 12th grade."; break; case (num > 60 && num <= 70): return "Readability: 8th - 9th grade."; break; case (num > 70 && num <= 80): return "Readability: 7th grade."; break; case (num > 80 && num <= 90): return "Readability: 6th grade."; break; case (num > 90 && num <= 100): return "Readability: 5th grade."; break; default: return "Not available."; break; } }
Final output
Now that we have completed our javascript section, our updated output with javascript. I hope you like the Word Counter. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
This post teaches us how to create a Word Counter using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Code By – Vikas Lalwani
Check out more…..
1