Bootstrap Progressbar mit Javascript Fortschritt mit Zeichenanzahl über Textarea
Hallo liebes Forum! Ich habe mal wieder eine Frage an euch. [Blockierte Grafik: https://i.imgur.com/4bTLdlG.png] wie Ihr an dem Bild links sehen könnt, habe ich über eine Textarena einen Wort Counter geschrieben und über ein fertiges (leider etwas altes Snippet) erweitert sich die Progress bar bis 100 % wenn eine gewisse Zeichenanzahl erreicht wird.
Das Script ist auf 100 Zeichen ausgelegt und ich finde leider nichts anderes und keine Anleitung wie ich das ändern könnte und somit bin ich nun hier :).
Ich würde das Script von 100 Zeichen auf 500 Zeichen erweitern, sodass allerdings trotzdem 100 % angezeigt werden. Leider hab ich das auch alleine nicht hinbekommen.
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<script src="/js_webseite/jquery.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(41, 255, 7, 1) 0%, rgba(255, 7, 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: 100%;
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 + '%');
}
});
});
</script>
</html>