Gerador de Avaliação por Estrelas HTML

Voce tem uma nota de 4,5 para mostrar num card de produto, num e-mail ou numa tabela do painel interno, e nao quer carregar uma biblioteca de icones inteira por causa de cinco simbolos. A saida mais barata e usar os proprios caracteres de estrela do Unicode. O trabalho chato e contar quantas ficam cheias, quantas vazias e o que fazer com a fracao no meio.

A pagina tem dois campos: a nota e o maximo. O calculo e direto: a parte inteira vira estrelas cheias, a fracao vira meia estrela quando chega a 0,5, e o que sobra ate o maximo vira estrela vazia. O resultado sai embrulhado num span com o atributo title no formato nota/maximo, para quem passa o mouse ler o numero exato. Nao e imagem nem SVG, e texto puro que voce cola em qualquer lugar.

Tres coisas para conferir. Use ponto como separador decimal: digitar 4,5 faz a conversao virar zero e a barra fica toda vazia. A nota nao e limitada pelo maximo, entao 8 de 5 devolve oito estrelas cheias sem reclamar. E o glifo de meia estrela e o U+2BE8, um meio-circulo preto que nem toda fonte tem instalada, entao teste no destino real antes de publicar. Nao existe botao de copiar: selecione o bloco e use Ctrl+C. Todo o calculo acontece no seu navegador.