Skip to content

Instantly share code, notes, and snippets.

@rfprod

rfprod/Text Input Stats.markdown

Last active June 1, 2017 14:26
Show Gist options
  • Save rfprod/315d6e6795e7e05e8050217fe257d56b to your computer and use it in GitHub Desktop.
Save rfprod/315d6e6795e7e05e8050217fe257d56b to your computer and use it in GitHub Desktop.
Download ZIP
Text Input Stats
Raw
index.html
<html ng-app="appModule">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/0.9.0/angular-chart.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/0.9.0/angular-chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.min.js"></script>
</head>
<body ng-controller="textInput">
<div class="info">
<a class="btn" ng-click="help()"><span class="glyphicon glyphicon-question-sign"></span> {{buttons[0]}}</a>
<a class="btn" href="https://gist.github.com/rfprod/315d6e6795e7e05e8050217fe257d56b" target=_blank><span class="glyphicon glyphicon-download-alt"></span> {{buttons[1]}}</a>
</div>
<div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form id="input" name="inputForm" class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
<legend>{{title}}</legend>
<textarea id="text" type="text" class="form-control" ng-model="textInput" autofocus></textarea>
<div id="counters">
<span ng-repeat="key in countersKeys">{{key}} <span class="label" ng-class="{ 'label-danger': counters[key] === 0, 'label-default': counters[key] > 0 && counters[key] < 10, 'label-info': counters[key] === 10, 'label-success': counters[key] > 10 }">{{counters[key]}}</span></span>
</div>
</form>
<div id="stats" class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
<canvas id="chart" class="chart chart-pie" chart-data="chartData" chart-labels="chartLabels" ng-if="counters.TOTAL"></canvas>
</div>
</div>
</body>
</html>
Raw
script.es6.js
var app = angular.module('appModule', ['ngSanitize', 'chart.js', 'ui.bootstrap']);
app.controller('textInput', ['$scope', '$uibModal', ($scope, $uibModal) => {
$scope.title = 'Text Input';
$scope.buttons = ['Help', 'GIST'];
$scope.textInput = 'Type text here';
$scope.counters = { TOTAL: 0, a: 0, b: 0, c: 0 };
$scope.regX = { a: /a/g, b: /b/g, c: /c/g };
$scope.countersKeys = Object.keys($scope.counters);
$scope.$watch(() => $scope.textInput, (newVal, oldVal) => {
console.log('text input change:', oldVal, newVal);
$scope.counters.TOTAL = newVal.length;
const matchA = newVal.match($scope.regX.a);
const matchB = newVal.match($scope.regX.b);
const matchC = newVal.match($scope.regX.c);
$scope.counters.a = (matchA) ? matchA.length : 0;
$scope.counters.b = (matchB) ? matchB.length : 0;
$scope.counters.c = (matchC) ? matchC.length : 0;
});
$scope.chartLabels = Object.keys($scope.counters);
$scope.chartData = $scope.chartLabels.slice(0).map(item => $scope.counters[item]);
$scope.$watchCollection('counters', (newVal, oldVal) => {
console.log('counters changed:', newVal, '|', oldVal);
$scope.chartData = $scope.chartLabels.map(item => newVal[item]);
});
$scope.modalInstance;
$scope.help = () => {
$scope.modalInstance = $uibModal.open({
animation: true,
template: `
<div class="modal-header"><h4>{{title}}<button type="button" ng-click="close()" class="close" title="Close"><span aria-hidden="true">&times;</span></button></h4></div>
<div class="modal-body">
<ul>
<li ng-repeat="story in userStories" ng-bind-html="story"></li>
</ul>
</div>
`,
controller: 'help',
resolve: {
textInput: () => $scope.textInput
}
});
$scope.modalInstance.result.then((confirmedData) => {
console.log('modal data:', confirmedData);
}, (dismissedData) => {
console.log('modal dismissed at', new Date().getTime(), 'with data:', dismissedData);
}
);
};
}]);
app.controller('help', ['$scope', '$uibModalInstance', 'textInput', ($scope, $uibModalInstance, textInput ) => {
$scope.title = 'User Stories';
$scope.userStories = [
'User can input text in <code>textarea</code> with text: \'' + textInput + '\'.',
'User can see statistics in numerical form on text input beneath <code>textarea</code>: <code>TOTAL</code> number of characters, number of <code>a</code> characters, number of <code>b</code> characters, number of <code>c</code> characters.',
'User can see numerical statistics visualized with pie chart.'
];
$scope.close = () => {
$uibModalInstance.close('ok');
};
}]);
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/0.9.0/angular-chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.min.js"></script>
Raw
style.scss
html {
height: 100%;
body {
legend {
&:hover {
cursor: default;
}
}
a {
&:hover {
text-decoration: none;
}
}
.info {
position: relative;
top: 0;
text-align: center;
display: flex;
width: 100%;
align-items: center;
z-index: 200;
a {
flex: 1;
}
}
#input {
z-index: 100;
padding: 0.5em 0.5em 0.5em 0.5em;
#text {
width: 100%;
resize: vertical;
max-height: 65vh;
margin-bottom: 0.5em;
}
#counters {
flex: 1;
display: flex;
justify-content: center;
font-size: 1.2em;
&:hover {
cursor: default;
}
.label {
font-size: 0.9em;
}
span {
flex: 1;
text-align: center;
}
}
}
#stats {
z-index: 100;
display: block;
position: relative;
padding: 0.5em 0 0.5em 0;
text-align: center;
}
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/0.9.0/angular-chart.min.css" rel="stylesheet" />
Raw
Text Input Stats.markdown

Text Input Stats

User stories

  • User can input text in textarea
  • User can see statistics in numerical form on text input beneath textarea: TOTAL number of characters, number of a characters, number of b characters, number of c characters
  • User can see numerical statistics visualized with pie chart.

A Pen by V on CodePen.

License.

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