Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

Home Interviews How to create Pixel Counter in JavaScipt? – MindStick
Ask Question

1 Answers

Ravi Misra
Ravi Misra 16 Dec 2022
Report Abuse

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.

MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md