From: Greg Hurrell <greg@hurrell.net>
Date: Sun, 2 Aug 2015 06:05:56 +0000 (-0700)
Subject: Show byte and bit counts next to title
X-Git-Url: https://git.wincent.com/hextrapolate.git/commitdiff_plain/ff9ba9af31b9ab11d0b507aa9d697eaadcc11a90?hp=b5f1b34bdb565835e580ab0714d63bd5ab3b674d

Show byte and bit counts next to title
---

diff --git a/src/App.js b/src/App.js
index 7009c03..c86273d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,6 +12,7 @@ import React from 'react';
 import type Value from './Field.react';
 import Field from './Field.react';
 import Label from './Label.react';
+import convert from './convert';
 
 import './App.css';
 
@@ -28,44 +29,58 @@ export default class App extends React.Component {
   }
 
   render() {
+    const {value} = this.state;
+    const bits = value ? convert(
+      value.value,
+      value.base,
+      16
+    ).length * 8 : 0;
+
     return (
       <div className="hextrapolate">
-        <h1>Hextrapolate</h1>
+        <h1>
+          Hextrapolate
+          &mdash;
+          {' '}
+          {bits / 8 } byte{bits / 8 === 1 ? '' : 's'},
+          {' '}
+          {bits} bits
+        </h1>
         <Label text="Hexadecimal">
           <Field
             base={16}
             onValueChange={this._onValueChange}
-            value={this.state.value}
+            value={value}
           />
         </Label>
         <Label text="Decimal">
           <Field
             onValueChange={this._onValueChange}
-            value={this.state.value}
+            value={value}
           />
         </Label>
         <Label text="Octal">
           <Field
             base={8}
             onValueChange={this._onValueChange}
-            value={this.state.value}
+            value={value}
           />
         </Label>
         <Label text="Binary">
           <Field
             base={2}
             onValueChange={this._onValueChange}
-            value={this.state.value}
+            value={value}
           />
         </Label>
         <DynamicField
           initialBase={32}
-          value={this.state.value}
+          value={value}
           onValueChange={this._onValueChange}
         />
         <DynamicField
           initialBase={36}
-          value={this.state.value}
+          value={value}
           onValueChange={this._onValueChange}
         />
       </div>