Cara Membuat Aplikasi Word Counter berbasis HTML

Cara Membuat Aplikasi Word Counter Tool berbasis HTML / Membuat Character Counter
Word Counter atau Penghitung Kata merupakan tools yang digunakan untuk menghitung jumlah karakter, jumlah kata, dan jumlah paragraf pada tulisan atau artikel yang sedang ditulis. pada aplikasi word counter tools ini kamu juga dapat melihat empat kata kunci teratas pada artikel. jelas tool ini dapat membantu para blogger untuk menulis artikel dan mengetahui kualitasnya.

Cara Membuat Aplikasi Word Counter Tool berbasis HTML, Membuat Character Counter, Membuat Word Counter Tool di Blogger, Membuat Aplikasi Penghitung Jumlah Kata,

Membuat Word Counter Tool



Dibawah ini merupakan kode yang digunakan untuk membuat Word Counter Tool yang bisa kamu gunakan secara online atau offline baik untuk desktop atau untuk website. Simpan kode dibawah ini di Notepad, kemudian simpan dengan format ".HTML"

<style type="text/css">
 /* 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: 700x;
  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: 100%;
  }
  .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;
  }
}
</style>
 <br />
<div class="container">
<h1>
Word Counter</h1>
<textarea placeholder="Enter your text here..."></textarea>
  <br />
<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:
    <br />
<ul id="topKeywords">
    </ul>
</div>
</div>
<script type="text/javascript">
 /*
 **
 ** 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;
  }
}
</script>

Silahkan kreasikan kembali tampilan Aplikasi Word Counter sesuai dengan selera masing-masing.

Fitur
  • Character Counter
  • Word Counter
  • Paragraph Counter
  • Sentences
  • Reading Time
  • Top Keyword
  • Show readability score
  • Responsive

Cara Membuat Aplikasi Word Counter Tool berbasis HTML, Membuat Character Counter, Membuat Word Counter Tool di Blogger, Membuat Aplikasi Penghitung Jumlah Kata,
Contoh Halaman Word Counter


Membuat Word Counter Tool di Blogger

Word Counter Tool ini bisa kamu simpan di postingan atau halaman statis blogger. silahkan edit kembali kode CSS-nya agar kode tidak bertabrakan dengan kode CSS di template blogger yang digunakan.

Sekian mengenai Cara Membuat Aplikasi Word Counter berbasis HTML semoga bermanfaat untuk anda. terimakasih dan selamat mencoba.

1 komentar untuk "Cara Membuat Aplikasi Word Counter berbasis HTML"

Comment Author Avatar
sudah coba, tapi kok character dan word nya ngga terhitung ya?

Baca kebijakan berkomentar kami sebelum berkomentar.