Skip to content

Commit

Permalink
Merge pull request #9 from over-engineer/master
Browse files Browse the repository at this point in the history
ES6 and minor improvements
  • Loading branch information
sakethramanujam authored Oct 28, 2019
2 parents ed653ac + c360d1e commit 93b6c07
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 64 deletions.
39 changes: 22 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,30 @@
# WC-Chrome-Extension
# WC-Chrome-Extension
[:floppy_disk:](https://github.com/sakethramanujam/WC-Chrome-Extension/tree/6ec648f2c9d2c3173ccd4df99851352218f609f3)
A simple java script based word count extension for Google Chrome. :bowtie:
A simple JavaScript based word count extension for Google Chrome. :bowtie:

### :bulb: What is WC-Chrome Extension?
###### WC stands for ***Word Counter***.

###### WC stands for ***Word Counter***.

- This an extension which I though would be useful for me while preparing for my language proficiency test where in we have to keep track of number of words used.
- It is quite common in various applications that we have to fill in say x number of words and in many cases there's no word counting software not available on such applications. So I decided to make an extension where in I could paste my text and know the no.of words.
- It is quite common in various applications that we have to fill in say x number of words and in many cases there's no word counting software not available on such applications. So I decided to make an extension where in I could paste my text and know the no. of words.

### :arrow_heading_down: Download and Usage!
You may want to clone this repository or [download](https://github.com/sakethramanujam/WC-Chrome-Extension/tree/6ec648f2c9d2c3173ccd4df99851352218f609f3) as a zip .

:beginner: To add this extension to your set of extensions,
- Unpack the extension into a location of your choice.
- Goto **More Tools** Option just below **Find** under the menu on your right side of the Chrome Browser and select **Extensions**
- Choose **Load Unpacked** and select the unpacked folder on your computer!<br>
![image](extension.gif)
:sparkles: You've now added the WC-Chrome-Extension into your set of extensions!

You may want to clone this repository or [download](https://github.com/sakethramanujam/WC-Chrome-Extension/tree/6ec648f2c9d2c3173ccd4df99851352218f609f3) as a zip.

:beginner: To add this extension to your set of extensions,

- Unpack the extension into a location of your choice.
- Goto **More Tools** Option just below **Find** under the menu on your right side of the Chrome Browser and select **Extensions**
- Choose **Load Unpacked** and select the unpacked folder on your computer!

![image](extension.gif)
:sparkles: You've now added the WC-Chrome-Extension into your set of extensions!

#### :clock1: Future Work
I wish to make this extension work asynchrnously with the text typed into the form area rather than paste it in the Box provided.<br>
:innocent:Thanks! Have a great time using this extension!<br>
:fork_and_knife:Fork to contribute!<br>
:star:Star this repo if you like it!
#### :clock1: Future Work
I wish to make this extension work asynchrnously with the text typed into the form area rather than paste it in the Box provided.

:innocent: Thanks! Have a great time using this extension!
:fork_and_knife: Fork to contribute!
:star: Star this repo if you like it!
21 changes: 10 additions & 11 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>Counter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" type="text/css">
<title>Counter</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div class="container">
<form class="text-area" aria-label="type some text" >
<input type="text" id="spaces">
<div class="container">
<form class="text-area" aria-label="type some text">
<input type="text" id="inputArea" />
</form>
<div class="button-area">
<button class="btn btn-primary" id="func">Count</button>
</div>

<p>Words : <span id="words"></span></p>
<p>Words: <span id="words"></span></p>
<p>Spaces: <span id="space"></span></p>
<p>Letters: <span id="chars"></span></p>
<p>Sentences: <span id="sentences"></span></p>
Expand Down
20 changes: 9 additions & 11 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
{
{
"name": "Words",
"description" : "A simple java script wordcounter for text placed within",
"description": "A simple JavaScript wordcounter for text placed within",
"version": "1.0",
"manifest_version": 2,

"browser_action": {
"default_icon":{
"32":"icon.png"
"default_icon": {
"32": "icon.png"
},
"default_popup": "index.html"

},

"content_scripts":[{
"matches":[
"content_scripts": [{
"matches": [
"*://*/*"
],
"js":["wordcount.js"],
"run_at":"document_end"

"js": ["wordcount.js"],
"run_at": "document_end"
}]
}
}
10 changes: 5 additions & 5 deletions styles.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
.text-area{
margin-top:25px;
.text-area {
margin-top: 25px;
}
.button-area{
.button-area {
padding: 5% 0;
}
input {
height: 50px;
width: 100px;
height: 50px;
width: 100px;
}
body {
background-color: rgb(226, 169, 63);
Expand Down
45 changes: 25 additions & 20 deletions wordcount.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,34 @@
var mouse = document.getElementById("func");
const inputArea = document.getElementById('inputArea');
const spaceElem = document.getElementById('space');
const charsElem = document.getElementById('chars');
const wordsElem = document.getElementById('words');
const sentencesElem = document.getElementById('sentences');

inputArea.addEventListener('keyup', () => {
console.log('Entered function');

mouse.onclick=function(){
console.log("Entered funtion");
var val = document.getElementById("spaces").value;
var wordcount =0;
var spacecount = 0;
var sentcount =0;
for(var i=0;i<val.length;i++){
console.log("Entered for");
if(val[i]==" "){
if(val[i+1]!=" ")
{
const val = inputArea.value;
let wordcount = 0;
let spacecount = 0;
let sentcount = 0;

for (let i = 0; i < val.length; i++) {
console.log('Entered for');

if (val[i] === ' ') {
if (val[i + 1] !== ' ') {
wordcount++;
}
spacecount++;
}
if(val[i]=="."){

if (val[i] === '.') {
sentcount++;
}
}

document.getElementById("space").innerHTML = spacecount;
document.getElementById("chars").innerHTML = val.length-spacecount-sentcount;
document.getElementById("words").innerHTML = wordcount+1;
document.getElementById("sentences").innerHTML = sentcount;
// console.log(count+1); commented this out because error shows up in the console
};

spaceElem.textContent = spacecount;
charsElem.textContent = val.length - spacecount - sentcount;
wordsElem.textContent = (val.length === 0) ? 0 : wordcount + 1;
sentencesElem.textContent = sentcount;
});

0 comments on commit 93b6c07

Please sign in to comment.