Word Counter mit Progress bar
Zeigt Rest Anzahl de Buchstaben in Prozent und Farblichen Prozess Balken an
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
}
main {
width: 300px;
margin: 0 auto;
padding: 50px;
}
#progress-helper {
width: 300px;
overflow: hidden;
border: 1px solid black;
background: linear-gradient(90deg, rgba(2, 255, 7, 1) 0%, rgba(2, 255, 0, 1) 99%);
margin-bottom: 20px;
}
#progress-helper:before {
content: attr(data-helper);
width: 300px;
border: 1px solid green;
position: absolute;
font-size: 24px;
text-align: center;
}
.progress-bar {
width: 0%;
display: block;
background: white;
border: 1px solid black;
height: 30px;
}
textarea {
width: 300px;
border: 2px solid grey;
border-radius: 4px;
height: 100px;
}
#chars {
text-align: center;
line-height: 22px;
height: 25px;
font-size: 20px;
}
</style>
</head>
<body>
<main>
<div data-helper='0%' id="progress-helper">
<div class="progress-bar"></div>
</div>
<div id="chars"></div>
<textarea id="new-post" maxlength="500"></textarea>
</main>
</body>
<script>
jQuery(document).ready(function() {
$('textarea').keyup(function() {
var string = $(this).val();
var word = string.split(" ");
var zeichen = string.length;
$('#chars').html("Wörter: " + word.length + " Zeichen: " + (zeichen));
let pro1 = (100 / 500) * zeichen;
if (pro1 <= 100) {
// $('.progress-bar').css('width', pro1 + '%');
$('#progress-helper').attr('data-helper', pro1 + '%');
var vor = 255 - (pro1 * 2.5);
var vor1 = pro1 * 2.5;
console.log(vor + ' =' + vor1);
$('#progress-helper').css('background', 'linear-gradient(90deg, rgba(' + vor1 + ', ' + vor + ', 7, 1) 0%, rgba(' + vor1 + ', ' + vor + ', 0, 1) 99%)');
}
});
});
</script>
</html>