interview

home / developersection / interviews / how to create pixel counter in javascipt?

Ask Question
Ravi Misra

Student

Ravi is a very ambitious student and hard working too. I have a passion for software development and am also eager to learn new languages of the computer world.

Follow
Can you answer this question?
Answer

1 Answers

Ravi Misra

Ravi Misra

16-Dec-2022

I am write code in JavaScript and HTML language.

<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://getbootstrap.com/docs/5.2/assets/css/docs.css' rel='stylesheet'>
    <title> 'Bootstrap Example'</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js'></script>
  </head>
  <body class='container mt-5'>



    <!-- Example Code -->
    <div class='row g-2'>

      <p>&nbsp; Is ravan exit in th world?</p>

      <div class='col-12 text-center'>
          <h1>Pixel Counter</h1>
      </div>

      <div class='col-12'>
        <label for='exampleFormControlTextarea1' class='form-label fw-bold d-flex'>
          Enter Text
          <span class='ms-auto text-danger word-conter'>0</span>
        </label>
        <textarea class='form-control' id='' rows='3'></textarea>
      </div>

      <div class='col-12'>
        <label class='form-label fw-bold'>
          Pixel Width : <span class='in-pixel'>0</span>
        </label>
      </div>
      
      <div class='col-12'>
        <label for='exampleFormControlTextarea1' class='form-label fw-bold d-flex'>
          Font Size
        </label>
        <select class='form-select'>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
            <option value='13'>13</option>
            <option value='14'>14</option>
            <option value='15'>15</option>
            <option value='16'>16</option>
            <option value='17'>17</option>
            <option value='18'>18</option>
            <option value='19'>19</option>
            <option value='20'>20</option>
        </select>
      </div>
    </div>

    
  </body>
  <script type='text/javascript'>

    var font_size = 10;

    $(document).ready(function(){
      $('textarea').on('keyup', function(e){
        $('.form-label .word-conter').html($(this).val().length);
          printPixel($(this).val());
      });

      $('select').on('change', function(e){
        font_size = this.value;
        printPixel($('textarea').val());
      });

    });



    function  printPixel(str)
    {
      $('.in-pixel').html(PixelConuter(str));
    }

    function PixelConuter(str)
    {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      ctx.font = font_size +'px Arial';        
      return ctx.measureText(str).width;
    }

  </script>
</html>

Thanks for reading.

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy