interview

Home / DeveloperSection / Interviews / How to create Pixel Counter in JavaScipt?

How to create Pixel Counter in JavaScipt?

Ravi Misra 108 16-Dec-2022

javascript

Ravi Misra

Ravi Misra

Follow

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.

Can you answer this question?

1 Answers

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.