Archiv-Modus von Basti1012 Lösungspage

Zeigt Rest Anzahl de Buchstaben in Prozent und Farblichen Prozess Balken an

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>

basti1012.bplaced.net

Word Counter mit Progress bar

Code