Dejo el script completo y comentado, por si le es de ayuda a alguien.
Código Javascript
:
Ver original$(document).ready(function(){
//Previsualizar texto, caracteres restantes y cambio de color
$('#name').keyup(
function(){
var name = $(this).val(); //Valor del input
var count = name.length; //Numero de caracteres escritos
var max = parseInt($(this).attr('maxlength')); //Valor maximo del input
var countdown = max - count; //Resta eñ valor maximo del input al numero de caracteres escritos
if (countdown > 6){ //Si quedan más de seis caracteres cambia de color
$('#missing').css({color:'#2e2e2e'});
}
if (countdown < 7){ //Si quedan menos de siete caracteres cambia de color
$('#missing').css({color:'#f4fa58'});
}
if (countdown < 4){ //Si quedan menos de cuatro caracteres cambia de color
$('#missing').css({color:'#fe2e2e'});
}
$('#result').html(name); //Muestra el valor del input en #result
$('#count').html(countdown); //Muestra los caracteres restantes
});
//Cambiar color del texto previsualizado
$('#black').click(
function(){
$('#result').css({color:'#000000'});
});
$('#orange').click(
function(){
$('#result').css({color:'#f68e56'});
});
$('#blue').click(
function(){
$('#result').css({color:'#6dcff6'});
});
$('#white').click(
function(){
$('#result').css({color:'#ffffff'});
});
//Color seleccionado
$('#colors input').click(
function(){
$('span').removeClass('selected'); //Quita la clase selected a todos los span
$(this).next().find('span').addClass('selected'); //Agrega la clase selected al color seleccionado
});
});
Si alguien ve que se puede simplificar el script, agradecería que lo dijera.