A counter that goes up in binary, decimal, and hexadecimal


#1

can anyone help me create one. Iv'e been looking everywhere trying to figure out how to create one with no luck. Thanks!


#2

We'll have to figure out some more code, but here is a skeleton I've just drafted up...

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Click Counter</title>
    <style>
    </style>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body>
    <form name="display" action="">
    <fieldset>
    <legend>Decimal : Binary : Hexadecimal</legend>
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
    </fieldset>
    </form>
    <script>
    //document.write(typeof jQuery);
    function dtob(d){
        return parseInt(d,10).toString(2);
    }
    function dtoh(d){
        return parseInt(d,10).toString(16).toUpperCase();
    }
    var $d, $b, $h;
    $d = $('textarea').first();
    $b = $d.next();
    $h = $b.next();
    $d.text('1023');
    //$b.text('1111111111');
    $b.text(dtob($d.text()));
    //$h.text('3FF');
    $h.text(dtoh($d.text()));
    </script>
    </body>
    </html>

#3

The above script may be replaced with this one:

    <script>
    //document.write(typeof jQuery);
    function dtob(d){
        return parseInt(d,10).toString(2);
    }
    function dtoh(d){
        return parseInt(d,10).toString(16).toUpperCase();
    }
    function dplus(d){
        return (parseInt(d,10)+1).toString(10);
    }
    function dminus(d){
        return (parseInt(d,10)-1).toString(10);
    }
    function update(d){
        $d.text(d);
        $b.text(dtob($d.text()));
        $h.text(dtoh($d.text()));
    }
    var $d, $b, $h, $t, $p, $m, $x;
    $t = $('textarea');
    $d = $t.first();
    $b = $d.next();
    $h = $b.next();
    $x = $('input[type=reset]');
    $p = $('#uptick');
    $m = $('#dntick');
    $x.click(function(){$t.text('0');});
    $p.click(function(){update(dplus($d.text()));});
    $m.click(function(){update(dminus($d.text()));});
    update(1023);
    </script>

Next we work on updating when inputs are directly in the textarea. A method will be needed that rejects all non-integers. That should be fun. Any input is invited, at this point.


#4

In the meantime, you'll be happy to know that we can control this program from the console. I'm using Chrome, which is Ctrl/Cmd + Shift + J.

> update(65535)
< undefined

Note the display is updated. We can click plus or minus from that point. Have fun!


#5

This line added to the event listeners group is unvalidated, but as a skeleton it works perfect:

    $d.change(function(){update($d.val());});

I've also disabled the second and third textareas so only the decimal box can receive input. We can close the console, now, or at most keep it open to spot error messages while we continue. The page can receive input. After changing the value, click outside of the textarea and the update takes effect.


#6

Which led to this debugged version that actually does work 'perfect' this time. (I spoke too soon, earlier.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Click Counter</title>
    <style>
    textarea { resize: none; }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>
  <body>
    <form name="display" action="">
      <fieldset>
        <legend>Decimal : Binary : Hexadecimal</legend>
        <textarea></textarea>
        <textarea disabled></textarea>
        <textarea disabled></textarea>
      </fieldset>
      <label for="uptick">Click to change</label>
      <input id="uptick" type="button" value="+">
      <input id="dntick" type="button" value="-">
      <input type="reset">
    </form>
    <script>
    function dtob(d){
        return parseInt(d,10).toString(2);
    }
    function dtoh(d){
        return parseInt(d,10).toString(16).toUpperCase();
    }
    function dplus(d){
        return (parseInt(d,10)+1).toString(10);
    }
    function dminus(d){
        return (parseInt(d,10)-1).toString(10);
    }
    function update(d){
        $d.val(d);
        $b.text(dtob($d.val()));
        $h.text(dtoh($d.val()));
    }        
    var $d, $b, $h, $t, $p, $m, $x;
    $t = $('textarea');
    $d = $t.first();
    $b = $d.next();
    $h = $b.next();
    $x = $('input[type=reset]');
    $p = $('#uptick');
    $m = $('#dntick');
    $d.change(function(){update($d.val());});
    $x.click(function(){$t.text('0');});
    $p.click(function(){update(dplus($d.val()));});
    $m.click(function(){update(dminus($d.val()));});
    update(1023);
    </script>
  </body>
</html>

We're getting there. I'm going to step back and let the guru's take over from here.


#7

Of course we can still use the console for command line responses...

update(parseInt('ffff',16))

or

update(parseInt('10101010',2))

#8

Number validation is now in the mix.

function update(d){
    c = d;
    $d.val(c);
    $b.text(dtob($d.val()));
    $h.text(dtoh($d.val()));
}

c is a copy of the value of d. It is global and remains in scope when the method is finished.

var re = /^\d+$/;
var c, $d, $b, $h, $t, $p, $m, $x;

The regex has the final say on accepted inputs. We're looking for integers only. This is our listener/handler...

    $d.change(function(){
        var d = $(this).val();
	update(re.test(d) ? d : c)
    });

#9

Where we are, so far...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Click Counter</title>
    <style>
    textarea { resize: none; }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>
  <body>
    <form name="display" action="">
      <fieldset>
        <legend>Decimal : Binary : Hexadecimal</legend>
        <textarea></textarea>
        <textarea disabled></textarea>
        <textarea disabled></textarea>
      </fieldset>
      <label for="uptick">Click to change</label>
      <input id="uptick" type="button" value="+">
      <input id="dntick" type="button" value="-">
      <input type="reset">
    </form>
    <script>
    function dtob(d){
        return parseInt(d,10).toString(2);
    }
    function dtoh(d){
        return parseInt(d,10).toString(16).toUpperCase();
    }
    function dplus(d){
        return (parseInt(d,10)+1).toString(10);
    }
    function dminus(d){
        return (parseInt(d,10)-1).toString(10);
    }
    function update(d){
        c = d;
        $d.val(c);
        $b.text(dtob($d.val()));
        $h.text(dtoh($d.val()));
    }
    var re = /^\d+$/;
    var c, $d, $b, $h, $t, $p, $m, $x;
    $t = $('textarea');
    $d = $t.first();
    $b = $d.next();
    $h = $b.next();
    $x = $('input[type=reset]');
    $p = $('#uptick');
    $m = $('#dntick');
    $d.change(function(){
        var d = $(this).val();
        update(re.test(d) ? d : c);
    });
    $x.click(function(){$t.text('0');});
    $p.click(function(){update(dplus($d.val()));});
    $m.click(function(){update(dminus($d.val()));});
    update(1023);
    </script>
  </body>
</html>

Still moving forward and awaiting some input. It wasn't me who started this topic.


#11

So sorry about not replying, haven't had internet for a few days and recently just got it back. Thank you so much for replying and putting your time into this. I will try it as soon as possible and tell you what happens. Again, sorry and thank you very much!

EDIT: It works perfectly! Again, thank you so much for using your time to help me with this. I'm really grateful. Thank you!


#12

It's always fun to sit down and work out a solution from scratch. As we can see, the 'engine' is very simple given the tools we have. More effort is spent on the interface than anything else (which is why I stress HTML and CSS as being so important to master).

This is the working version we have to this point. It is not responsive, but that can be worked on.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Click Counter</title>
    <style>
    body { font-size: 100%; width: auto; }
    form { width: 90%; margin: 0 auto; }
    fieldset { margin: 1em auto; }
    textarea { resize: none; font: normal 1.4em/2em Arial, sans-serif; height: 2em; margin-left: 0.5em;}
    textarea:first-of-type { width: 26%; }
    textarea:nth-of-type(2) { width: 20%; }
    textarea:nth-of-type(3) { width: 48%; }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>
  <body>
    <form name="display" action="">
      <fieldset>
        <legend>Decimal : Hexadecimal : Binary</legend>
        <textarea></textarea>
        <textarea disabled></textarea>
        <textarea disabled></textarea>
      </fieldset>
      <label for="uptick">Click to change</label>
      <input id="uptick" type="button" value="+">
      <input id="dntick" type="button" value="-">
      <input type="reset">
    </form>
    <script>
    function dtob(d){
        return parseInt(d,10).toString(2);
    }
    function dtoh(d){
        return parseInt(d,10).toString(16).toUpperCase();
    }
    function dplus(d){
        return (parseInt(d,10)+1).toString(10);
    }
    function dminus(d){
        return (parseInt(d,10)-1).toString(10);
    }
    function update(d){
        c = d;
        $d.val(c);
        $b.text(dtob($d.val()));
        $h.text(dtoh($d.val()));
    }
    var re = /^\d+$/;
    var c, $d, $h, $b, $t, $p, $m, $x;
    $t = $('textarea');
    $d = $t.first();
    $h = $d.next();
    $b = $h.next();
    $x = $('input[type=reset]');
    $p = $('#uptick');
    $m = $('#dntick');
    $d.change(function(){
        var d = $(this).val();
        update(re.test(d) ? d : c);
    });
    $x.click(function(){$t.text('0');});
    $p.click(function(){update(dplus($d.val()));});
    $m.click(function(){update(dminus($d.val()));});
    update(1023);
    </script>
  </body>
</html>

#13

While the user interface is interesting, I'm finding a particular fascination with the command line approach. A sufficient engine would need to be added to the interface to emulate the already existing underlying behavior of the command line.

>> ev = Math.E * 1e15
<- 2718281828459045
>> pv = Math.PI * 1e15
<- 3141592653589793
>> update(ev&pv)
>> update(ev|pv)
>> update(ev^pv)