Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="char-remain widget-wrap" id="demo">
  <div id="hash"></div>
  <h1>Remaining Characters Counter</h1>

  <!-- (A) USUAL TEXT AREA -->
  <textarea maxlength="160" class="char-remain-txt"></textarea>

  <!-- (B) REMAINING COUNTER -->
  <div class="char-remain-count"></div>

  <!-- (X) VISIT CODE-BOXX -->
  <div id="code-boxx">
    Visit
    <a href="https://code-boxx.com/remaining-character-counter/"
       target="_blank">
      Code Boxx
    </a> for more details.
  </div>
</div>
              
            
!

CSS

              
                /* (X) CSS DOES NOT MATTER - FOR COSMETICS */
/* PAGE & BODY */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center; justify-content: center;
  min-height: 100vh;
  background-image: url(https://images.unsplash.com/photo-1587981860944-9bc9573ed9d4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MTc4MzU0MQ&ixlib=rb-1.2.1&q=85);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}

/* WIDGET */
.widget-wrap {
  max-width: 500px;
  padding: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
}
.char-remain-txt {
  display: block;
  width: 100%;
  height: 100px;
  padding: 10px;
  resize: none;
  border: 1px solid #ddd;
}
.char-remain-count {
  margin-top: 10px;
  text-align: right;
}

/* SVG */
#hash {
  width: 100%; height:100px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 448 512" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

/* FOOTER */
#code-boxx {
  font-weight: 600;
  margin-top: 30px;
}
#code-boxx a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  background: #b90a0a;
  color: #fff;
}
              
            
!

JS

              
                window.addEventListener("load", () => {
  // (A) GET TEXTAREA + REMAINING COUNTER
  let textarea = document.querySelector("#demo .char-remain-txt"),
      remain = document.querySelector("#demo .char-remain-count");

  // (B) INIT REMAINING CHARACTERS
  remain.innerHTML = textarea.maxLength;

  // (C) CALCULATE REMAINING CHARACTERS WHILE TYPING
  textarea.addEventListener("keyup", () => {
    remain.innerHTML = textarea.maxLength - textarea.value.length;
  });
});
              
            
!
999px

Console