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 / developersection / interviews / how to create pixel counter in javascipt?
Ask Question
Ravi Misra
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.

Message

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.

advertising
Markdown for AI

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

Open .md