Skip to content

Instantly share code, notes, and snippets.

@kalai7m

kalai7m/index.html

Created June 11, 2020 12:49
Show Gist options
  • Save kalai7m/b8349d1e9085b6b9fd5045a3ec5663f0 to your computer and use it in GitHub Desktop.
Save kalai7m/b8349d1e9085b6b9fd5045a3ec5663f0 to your computer and use it in GitHub Desktop.
Download ZIP
Word Counter App
Raw
index.html
<head>
<title>Word Counter</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style type="text/css">
</style>
</head>
<body>
<!--NAV BAR-->
<div class="navbar navbar-expand-lg navbar-dark bg-nav" id="nav">
<div class="container">
<div class="navbar-brand">
<a href="#" id="brand">WORD COUNTER</a>
</div>
</div>
</div>
<!--WORD COUNTER-->
<div id="wordcounter">
<div class="jumbo">
<h1 class="jumbo-head">Counting words is quite easy !!!!</h1>
<p class="lead">Free Online character and word count tool</p>
</div>
<div class="container">
<div class="row" style="margin-top: 2rem;">
<div class="col-8">
<textarea maxlength="100" placeholder="Enter Text Here...." style="width: 100%;height: 100%;"></textarea>
</div>
<div class="col-4">
<div class="row">
<div class="table-card">
<table>
<tr>
<th class="bg-light">Word Count</th>
</tr>
<tr>
<td><strong><span id="wordcount">0</span></strong></td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="table-card">
<table>
<tr>
<th class="bg-light">Character Count</th>
</tr>
<tr>
<td><strong><span id="charactercount">0</span></strong></td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="table-card">
<table>
<tr>
<th class="bg-light">Remaining</th>
</tr>
<tr>
<td><strong><span id="remainingcount">100</span></strong></td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="table-card">
<table>
<tr>
<th class="bg-light">Set Max Character</th>
</tr>
<tr>
<td class="maxlen-input"><strong><input type="text" value="100" id="maxlen"></strong></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p style="color: #ddd;">Created By <i class="fa fa-bolt" style="color: yellow;"></i> Team</p>
</div>
</div>
<script type="text/javascript" src="wc.js"></script>
</body>
Raw
script.js
var input = document.querySelectorAll('textarea')[0],
character = document.querySelector('#charactercount'),
remain = document.querySelector('#remainingcount'),
word = document.querySelector('#wordcount'),
regex = /\b[-?\w+?]+\b/gi,
maxlength = document.querySelector('#maxlen');
input.addEventListener('keyup', function() {
console.clear();
character.innerHTML = input.value.length;
var maxlen = document.getElementById('maxlen').value;
console.log(maxlen);
remain.innerHTML = Number(maxlen)-input.value.length;
var words = input.value.match(regex);
console.log(words);
if(words)
{
word.innerHTML = words.length;
}
else{
word.innerHTML = 0;
}
});
maxlength.addEventListener('keyup', function() {
console.clear();
remain.innerHTML = maxlength.value;
});
Raw
style.css
#wordcounter{
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(https://img.huffingtonpost.com/asset/5e014b6d250000d00798f058.jpeg?cache=4DCk9zhAJs&ops=crop_0_1611_4552_3449%2Cscalefit_720_noupscale);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
#brand{
color: #fff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
text-decoration: none;
}
#nav{
border-bottom: 1px solid rgba(0, 26, 51, 0.25);
}
.bg-nav{
background-color: rgba(0,0,0);
}
.jumbo{
padding: 10px;
margin: auto;
width: 60%;
}
.jumbo-head{
font-family: 'Open Sans', sans-serif;
font-size: 30px;
font-weight: 400px;
text-align: center;
text-transform: uppercase;
color: #ccffff;
}
.lead{
text-align: center;
color: #ddd;
}
textarea{
font-size: larger!important;
padding: 15px!important;
}
.table-card{
width: 60%;
margin: auto;
margin-bottom: 10px;
}
table{
border: 1px solid #000;
width: 100%;
}
th, td{
padding: 10px;
text-align: center;
background: #fff;
color: #000;
}
th{
font-weight: 600;
text-transform: uppercase;
text-align: center!important;
border-bottom: 1px solid #000;
}
#maxlen{
width: 100%;
padding: 10px;
text-align: center;
font-weight: 700;
}
.maxlen-input{
margin: 0;
padding: 0;
}
.footer{
padding: 20px;
margin-top: 10px;
text-align: center;
}
Raw
word-counter-app.markdown

Word Counter App

This application is a free online tool to counter words and characters in your content and also limit the number of characters in your content

A Pen by kalai7m on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment