Snippet en jQuery útil para testear pangramas.
Un pangrama es un texto que usa todas las letras posibles del alfabeto de un idioma.
Jovencillo emponzoñado de whisky: ¡qué figurota exhibe!
El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.
See the Pen
PANGRAMATOR by blanco (@_blanco)
on CodePen.
HTML
<div class="container">
<h1>PANGRAMATOR</h1>
<div class="border">
<textarea id="pangram" rows="3" placeholder="write here.."></textarea>
</div>
<div id="alphabet"></div>
</div>
jQuery
// jQuery
$(document).ready(function() {
$("#alphabet").append( renderAlphabet() );
$('#pangram').focus();
$('#pangram').keyup(function() {
checkText();
});
});
//global var
var alphabet = new Array ('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
// return alphabet html li
function renderAlphabet(){
var html = "<ul>";
for(var i=0;i< alphabet.length; i++){
html += '<li data-char="'+alphabet[i]+'">'+alphabet[i]+'</li>';
}
html += "</ul>";
return html;
}
// check text & mark char
function checkText(){
$("#alphabet li").removeClass('ok');
var text = $('#pangram').val();
var text_length = text.length;
for(var i=0;i< text_length; i++){
var val = text[i].toUpperCase();
if ( isInArray(val, alphabet) ){
$('#alphabet li[data-char="'+val+'"]').addClass('ok');
};
}
}
function isInArray(value, array) {
return array.indexOf(value) > -1;
}