MASIGNASUKAv102
7345699749361123385

Cara Membuat Online Word Counter Di Website

Cara Membuat Online Word Counter Di Website
Add Comments
26 March 2020

Online Word Counter - Online word counter adalah suatu penghitung kata berbasis website yang dapat diakses secara online. Di dunia blogging atau penulisan, word counter dapat dipakai untuk menghitung jumlah kata di artikelnya. Bagi seorang penulis, biasanya memiliki standard artikel harus memiliki lebih dari sama dengan 500 kata. Untuk memonitor jumlah kata di tulisannya, maka diperlukan suatu penghitung kata atau word counter.

Dengan latar belakang tersebut, maka di artikel kali ini Kulo akan menulis dan membahas bagaimana cara membuat online word counter di website atau di blogspot. Tujuan pembuatan online word counter ini adalah sebagai acuan Kulo dalam menulis artikel di blog ini khususnya dan bisa digunakan oleh visitor atau pengunjung kulo.online pada umumnya.

Kita langsung ke topik. Untuk membuat online word counter seperti yang ada pada kulo.online, kita bisa menggunakan source code di bawah ini.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style type="text/css">
 /* border box */

html {
  box-sizing: border-box;
  -webkit-user-selectnone;
  /* Chrome all / Safari all */
  -moz-user-selectnone;
  /* Firefox all */
  -ms-user-selectnone;
  /* 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-shadow0px 1px 4px 0px rgba(0000.2);
  box-shadow: 0px 1px 4px 0px rgba(0000.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>
Online 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');


input.addEventListener('keyup'function() {

  console.clear();

  characterCount.innerHTML = input.value.length;

  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";
  }


  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 = 0i < words.lengthi++) {
      // 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 = 0i < nonStopWords.lengthi++) {
      // checking if the word(property) already exists
      // if it does increment the count otherwise set it to one
      if (nonStopWords[iin 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([keywordkeywords[keyword]])
    }
    sortedKeywords.sort(function(ab) {
      return b[1- a[1]
    });
    // console.log(sortedKeywords);

    // step-4: displaying top 4 keywords and their count
    topKeywords.innerHTML = "";
    for (var i = 0i < sortedKeywords.length && i < 4i++) {
      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>

Jika diterapkan dalam project website berbasis laravel, codeigniter atau yang lainnya, kita bisa menambahkan source code di atas pada file view.

Dan jika diterapkan di blogspot, untuk membuat halaman online word counter bisa dengan cara membuat halaman baru kemudian pilih tipe HTML dan pastekan source code di atas. Kemudian agar bisa diakses seperti di menu navbar kulo.online, kita perlu menambahkan menu baru dengan nama online word counter di Edit HTML kemudian arahkan ke url halaman yang baru dibuat. biasanya urlnya seperti ini https://kulo.online/p/word-counter.html. Selesai.

Download source code via google drive disini.
Hilmi Hidayat

"If something's important enough, you should try. Even if you - the probable outcome is failure." - Elon Musk