diff --git a/src/App.css b/src/App.css
index 9cf71fd..6232e37 100644
--- a/src/App.css
+++ b/src/App.css
@@ -10,6 +10,10 @@
   margin-top: 16px;
 }
 
+.result {
+  margin-top: 16px;
+}
+
 .table>thead>tr>th,
 .table-centered>tbody>tr>td{text-align:center}
 
diff --git a/src/components/Gearbox.js b/src/components/Gearbox.js
deleted file mode 100644
index 027ee9f..0000000
--- a/src/components/Gearbox.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Component } from 'react';
-
-class Gearbox extends Component {
-  render() {
-    return (
-      <div>
-        {' '}
-Gearbox
-        {' '}
-      </div>
-    );
-  }
-}
-
-export default Gearbox;
diff --git a/src/components/Gearbox/index.js b/src/components/Gearbox/index.js
new file mode 100644
index 0000000..ada6153
--- /dev/null
+++ b/src/components/Gearbox/index.js
@@ -0,0 +1,397 @@
+import React, { Component } from 'react';
+import {
+  Container, Row, Col, Table, FormGroup, Input, Button, Label
+} from 'reactstrap';
+import Results from './results'
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../../App.css';
+
+class Gearbox extends Component {
+  state = {};
+
+  constructor(props) {
+    super(props);
+
+    const sizes = [];
+    for (let i = 10; i <= 24; i += 1) {
+      sizes.push(i);
+    }
+
+    this.state = {
+      sizes,
+      showResult: false,
+      wheelDiameter: 14,
+      tyreWidth: 175,
+      tyreHeight: 65,
+      oldGearBoxOne: '11/37',
+      oldGearBoxSecond: '22/41',
+      oldGearBoxThird: '28/37',
+      oldGearBoxFourth: '34/35',
+      oldGearBoxFifth: '39/32',
+      oldGearBoxSixth: '',
+      oldGearBoxGate: '15/61',
+      oldGearBoxReverse: '11/39',
+      newGearBoxOne: '11/41',
+      newGearBoxSecond: '21/43',
+      newGearBoxThird: '28/37',
+      newGearBoxFourth: '30/29',
+      newGearBoxFifth: '39/31',
+      newGearBoxSixth: '',
+      newGearBoxGate: '14/63',
+      newGearBoxReverse: '11/39',
+      rpm: 2500,
+      speed: 90
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.submit = this.submit.bind(this);
+  }
+
+  handleChange(event) {
+    const target = event.target;
+     const value = target.type === 'checkbox' ? target.checked : target.value;
+     const name = target.name;
+
+     this.setState({
+       [name]: value,
+       showResult: false
+     });
+ }
+
+  submit() {
+    this.setState({
+      showResult: true
+    })
+  }
+
+  render() {
+    return (
+      <Container>
+        <Row>
+          <Col xs="12">
+            <h1>Calculez vos rapports de boîte</h1>
+          </Col>
+          <Col xs="12">
+            <h2>Roue</h2>
+          </Col>
+          <Col xs="12">
+            <Table bordered>
+                <thead>
+                  <tr>
+                      <th>Diamètre</th>
+                      <th>Largeur du pneu</th>
+                      <th>Hauteur du flanc</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                      <td className="align-middle col-xs-4">
+                        <FormGroup>
+                          <Input
+                            type="select"
+                            name="wheelDiameter"
+                            value={this.state.wheelDiameter}
+                            onChange={this.handleChange}>
+                          { this.state.sizes.map( item => (
+                            <option value={item} key={`select_old_diametre_${item}`}>
+                            {`${item}"`}
+                            </option>
+                          ))}
+                          </Input>
+                        </FormGroup>
+                      </td>
+                      <td className="align-middle col-xs-4">
+                        <FormGroup>
+                          <Input
+                            type="number"
+                            name="tyreWidth"
+                            step="5"
+                            placeholder="Largeur du pneu"
+                            value={this.state.tyreWidth}
+                            onChange={this.handleChange}
+                          />
+                        </FormGroup>
+                      </td>
+                      <td className="align-middle col-xs-4">
+                        <FormGroup>
+                          <Input
+                            type="number"
+                            name="tyreHeight"
+                            step="5"
+                            placeholder="Hauteur du pneu"
+                            value={this.state.tyreHeight}
+                            onChange={this.handleChange}
+                          />
+                        </FormGroup>
+                      </td>
+                  </tr>
+                </tbody>
+            </Table>
+          </Col>
+          <Col xs="12">
+            <h2>Boîte de vitesse</h2>
+          </Col>
+          <Col xs="12">
+            <Table bordered>
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>1<sup>ère</sup></th>
+                  <th>2<sup>ère</sup></th>
+                  <th>3<sup>ère</sup></th>
+                  <th>4<sup>ère</sup></th>
+                  <th>5<sup>ère</sup></th>
+                  <th>6<sup>ère</sup></th>
+                  <th>Pont</th>
+                  <th>Marche arrière</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td className="align-middle">
+                    Actuelle
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="oldGearBoxOne"
+                        value={this.state.oldGearBoxOne}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="oldGearBoxSecond"
+                        value={this.state.oldGearBoxSecond}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="oldGearBoxThird"
+                        value={this.state.oldGearBoxThird}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="oldGearBoxFourth"
+                        value={this.state.oldGearBoxFourth}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="oldGearBoxFifth"
+                        value={this.state.oldGearBoxFifth}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="oldGearBoxSixth"
+                        value={this.state.oldGearBoxSixth}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="oldGearBoxGate"
+                        value={this.state.oldGearBoxGate}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="oldGearBoxReverse"
+                        value={this.state.oldGearBoxReverse}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                </tr>
+                <tr>
+                  <td className="align-middle">
+                    Nouvelle
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="newGearBoxOne"
+                        value={this.state.newGearBoxOne}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="newGearBoxSecond"
+                        value={this.state.newGearBoxSecond}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="newGearBoxThird"
+                        value={this.state.newGearBoxThird}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="newGearBoxFourth"
+                        value={this.state.newGearBoxFourth}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="newGearBoxFifth"
+                        value={this.state.newGearBoxFifth}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="newGearBoxSixth"
+                        value={this.state.newGearBoxSixth}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="newGearBoxGate"
+                        value={this.state.newGearBoxGate}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                  <td className="align-middle col-xs-4">
+                    <FormGroup>
+                      <Input
+                        type="text"
+                        name="newGearBoxReverse"
+                        value={this.state.newGearBoxReverse}
+                        onChange={this.handleChange}
+                      />
+                    </FormGroup>
+                  </td>
+                </tr>
+              </tbody>
+            </Table>
+          </Col>
+          <Col xs="12">
+            <h2>Bonus</h2>
+          </Col>
+          <Col xs="12">
+            <Row>
+              <Col xs="12" md="6">
+                <FormGroup>
+                  <Label for="rpm">Afficher la vitesse pour le régime moteur suivant (tr/min) :</Label>
+                  <Input
+                    type="number"
+                    id="rpm"
+                    name="rpm"
+                    step="50"
+                    value={this.state.rpm}
+                    onChange={this.handleChange}
+                  />
+                </FormGroup>
+              </Col>
+              <Col xs="12" md="6">
+                <FormGroup>
+                  <Label for="speed">Afficher le régime moteur pour la vitesse suivante (km/h) :</Label>
+                  <Input
+                    type="number"
+                    step="1"
+                    id="speed"
+                    name="speed"
+                    value={this.state.speed}
+                    onChange={this.handleChange}
+                  />
+                </FormGroup>
+              </Col>
+            </Row>
+          </Col>
+          <Col xs="12">
+            <Button onClick={this.submit}>Calculer</Button>
+          </Col>
+        </Row>
+        {
+          this.state.showResult ?
+            <Results
+              wheelDiameter={this.state.wheelDiameter}
+              tyreWidth={this.state.tyreWidth}
+              tyreHeight={this.state.tyreHeight}
+
+              oldGearBoxOne={this.state.oldGearBoxOne}
+              oldGearBoxSecond={this.state.oldGearBoxSecond}
+              oldGearBoxThird={this.state.oldGearBoxThird}
+              oldGearBoxFourth={this.state.oldGearBoxFourth}
+              oldGearBoxFifth={this.state.oldGearBoxFifth}
+              oldGearBoxSixth={this.state.oldGearBoxSixth}
+              oldGearBoxGate={this.state.oldGearBoxGate}
+              oldGearBoxReverse={this.state.oldGearBoxReverse}
+
+              newGearBoxOne={this.state.newGearBoxOne}
+              newGearBoxSecond={this.state.newGearBoxSecond}
+              newGearBoxThird={this.state.newGearBoxThird}
+              newGearBoxFourth={this.state.newGearBoxFourth}
+              newGearBoxFifth={this.state.newGearBoxFifth}
+              newGearBoxSixth={this.state.newGearBoxSixth}
+              newGearBoxGate={this.state.newGearBoxGate}
+              newGearBoxReverse={this.state.newGearBoxReverse}
+
+              rpm={this.state.rpm}
+              speed={this.state.speed}
+            />
+          :
+          (null)
+        }
+      </Container>
+    )
+  }
+}
+
+export default Gearbox;
diff --git a/src/components/Gearbox/results.js b/src/components/Gearbox/results.js
new file mode 100644
index 0000000..86ffc58
--- /dev/null
+++ b/src/components/Gearbox/results.js
@@ -0,0 +1,543 @@
+import React, { Component } from 'react';
+import { Table, Row, Col } from 'reactstrap';
+
+import { formatNumber } from '../../numbers';
+
+class Results extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      wheelDiameter: this.props.wheelDiameter,
+      tyreWidth: this.props.tyreWidth,
+      tyreHeight: this.props.tyreHeight,
+
+      oldGearBoxOne: this.props.oldGearBoxOne,
+      oldGearBoxSecond: this.props.oldGearBoxSecond,
+      oldGearBoxThird: this.props.oldGearBoxThird,
+      oldGearBoxFourth: this.props.oldGearBoxFourth,
+      oldGearBoxFifth: this.props.oldGearBoxFifth,
+      oldGearBoxSixth: this.props.oldGearBoxSixth,
+      oldGearBoxGate: this.props.oldGearBoxGate,
+      oldGearBoxReverse: this.props.oldGearBoxReverse,
+
+      newGearBoxOne: this.props.newGearBoxOne,
+      newGearBoxSecond: this.props.newGearBoxSecond,
+      newGearBoxThird: this.props.newGearBoxThird,
+      newGearBoxFourth: this.props.newGearBoxFourth,
+      newGearBoxFifth: this.props.newGearBoxFifth,
+      newGearBoxSixth: this.props.newGearBoxSixth,
+      newGearBoxGate: this.props.newGearBoxGate,
+      newGearBoxReverse: this.props.newGearBoxReverse,
+
+      rpm: this.props.rpm,
+      speed: this.props.speed,
+
+      labels: {
+        1: 'One',
+        2: 'Second',
+        3: 'Third',
+        4: 'Fourth',
+        5: 'Fifth',
+        6: 'Sixth',
+        reverse: 'Reverse',
+      },
+
+      results: {
+        1000: {
+          1: {
+            old: 0,
+            new: 0,
+          },
+          2: {
+            old: 0,
+            new: 0,
+          },
+          3: {
+            old: 0,
+            new: 0,
+          },
+          4: {
+            old: 0,
+            new: 0,
+          },
+          5: {
+            old: 0,
+            new: 0,
+          },
+          6: {
+            old: 0,
+            new: 0,
+          },
+          reverse: {
+            old: 0,
+            new: 0,
+          },
+        },
+        2000: {
+          1: {
+            old: 0,
+            new: 0,
+          },
+          2: {
+            old: 0,
+            new: 0,
+          },
+          3: {
+            old: 0,
+            new: 0,
+          },
+          4: {
+            old: 0,
+            new: 0,
+          },
+          5: {
+            old: 0,
+            new: 0,
+          },
+          6: {
+            old: 0,
+            new: 0,
+          },
+          reverse: {
+            old: 0,
+            new: 0,
+          },
+        },
+        3000: {
+          1: {
+            old: 0,
+            new: 0,
+          },
+          2: {
+            old: 0,
+            new: 0,
+          },
+          3: {
+            old: 0,
+            new: 0,
+          },
+          4: {
+            old: 0,
+            new: 0,
+          },
+          5: {
+            old: 0,
+            new: 0,
+          },
+          6: {
+            old: 0,
+            new: 0,
+          },
+          reverse: {
+            old: 0,
+            new: 0,
+          },
+        },
+        4000: {
+          1: {
+            old: 0,
+            new: 0,
+          },
+          2: {
+            old: 0,
+            new: 0,
+          },
+          3: {
+            old: 0,
+            new: 0,
+          },
+          4: {
+            old: 0,
+            new: 0,
+          },
+          5: {
+            old: 0,
+            new: 0,
+          },
+          6: {
+            old: 0,
+            new: 0,
+          },
+          reverse: {
+            old: 0,
+            new: 0,
+          },
+        },
+        5000: {
+          1: {
+            old: 0,
+            new: 0,
+          },
+          2: {
+            old: 0,
+            new: 0,
+          },
+          3: {
+            old: 0,
+            new: 0,
+          },
+          4: {
+            old: 0,
+            new: 0,
+          },
+          5: {
+            old: 0,
+            new: 0,
+          },
+          6: {
+            old: 0,
+            new: 0,
+          },
+          reverse: {
+            old: 0,
+            new: 0,
+          },
+        },
+        6000: {
+          1: {
+            old: 0,
+            new: 0,
+          },
+          2: {
+            old: 0,
+            new: 0,
+          },
+          3: {
+            old: 0,
+            new: 0,
+          },
+          4: {
+            old: 0,
+            new: 0,
+          },
+          5: {
+            old: 0,
+            new: 0,
+          },
+          6: {
+            old: 0,
+            new: 0,
+          },
+          reverse: {
+            old: 0,
+            new: 0,
+          },
+        },
+        7000: {
+          1: {
+            old: 0,
+            new: 0,
+          },
+          2: {
+            old: 0,
+            new: 0,
+          },
+          3: {
+            old: 0,
+            new: 0,
+          },
+          4: {
+            old: 0,
+            new: 0,
+          },
+          5: {
+            old: 0,
+            new: 0,
+          },
+          6: {
+            old: 0,
+            new: 0,
+          },
+          reverse: {
+            old: 0,
+            new: 0,
+          },
+        },
+        rpm: {
+          1: {
+            old: 0,
+            new: 0,
+          },
+          2: {
+            old: 0,
+            new: 0,
+          },
+          3: {
+            old: 0,
+            new: 0,
+          },
+          4: {
+            old: 0,
+            new: 0,
+          },
+          5: {
+            old: 0,
+            new: 0,
+          },
+          6: {
+            old: 0,
+            new: 0,
+          },
+          reverse: {
+            old: 0,
+            new: 0,
+          },
+        },
+        speed: {
+          1: {
+            old: 0,
+            new: 0,
+          },
+          2: {
+            old: 0,
+            new: 0,
+          },
+          3: {
+            old: 0,
+            new: 0,
+          },
+          4: {
+            old: 0,
+            new: 0,
+          },
+          5: {
+            old: 0,
+            new: 0,
+          },
+          6: {
+            old: 0,
+            new: 0,
+          },
+          reverse: {
+            old: 0,
+            new: 0,
+          },
+        },
+      },
+    };
+  }
+
+  componentDidMount() {
+    const Pi = Math.PI;
+    const C = Pi * (Number(this.state.wheelDiameter.toString().replace('"', '')) * 25.4 + 2 * Number(this.state.tyreWidth) * Number(this.state.tyreHeight) / 100) / 1000;
+
+    const results = {};
+
+    Object.keys(this.state.results).map((rpm) => {
+      results[rpm] = {};
+      Object.keys(this.state.results[rpm]).map((gear) => {
+        results[rpm][gear] = {};
+        Object.keys(this.state.results[rpm][gear]).map((type) => {
+          let V = 0;
+          let f = 0;
+          let vitesseRoue = '-';
+          const currentRpm = rpm === 'rpm' ? this.state.rpm : rpm;
+          const rapportBoite = this.convertRapport(this.state[`${type}GearBox${this.state.labels[gear]}`]);
+          const rapportPont = this.convertRapport(this.state[`${type}GearBoxGate`]);
+
+          if (rapportBoite > 0 && rapportPont > 0) {
+            if (rpm !== 'speed') {
+              f = currentRpm * rapportBoite * rapportPont;
+              V = f * C * 60 / 1000;
+              vitesseRoue = `${formatNumber(V, 2, ',', ' ')}km/h`;
+            } else {
+              V = Number(this.state.speed);
+              f = V / (C * 60 / 1000);
+              const currentSpeedRpm = f / (rapportBoite * rapportPont);
+              vitesseRoue = `${formatNumber(currentSpeedRpm, 2, ',', ' ')}tr/min`;
+            }
+          }
+
+          results[rpm][gear][type] = vitesseRoue;
+          return true;
+        });
+        return true;
+      });
+      return true;
+    });
+
+    this.setState({ results });
+  }
+
+
+  convertRapport(value) {
+    if (value) {
+      const _rapport = value.split('/');
+      if (Number(value)) {
+        return value;
+      } if (_rapport.length === 2) {
+        return Number(_rapport[0]) / Number(_rapport[1]);
+      }
+    }
+
+    return -1;
+  }
+
+  render() {
+    return (
+      <Row className="result">
+        <Col xs="12">
+          <h2>
+  Résultat
+          </h2>
+        </Col>
+        <Col xs="12">
+          <Table bordered>
+            <thead>
+              <tr>
+                <th colSpan="2" />
+                <th>
+    1
+                  <sup>
+    ère
+                  </sup>
+                </th>
+                <th>
+    2
+                  <sup>
+    ème
+                  </sup>
+                </th>
+                <th>
+    3
+                  <sup>
+    ème
+                  </sup>
+                </th>
+                <th>
+    4
+                  <sup>
+    ème
+                  </sup>
+                </th>
+                <th>
+    5
+                  <sup>
+    ème
+                  </sup>
+                </th>
+                <th>
+    6
+                  <sup>
+    ème
+                  </sup>
+                </th>
+                <th>
+    Marche arrière
+                </th>
+              </tr>
+            </thead>
+            {Object.keys(this.state.results).map((tpm, index) => (
+              <tbody key={`rpm_${index}`}>
+                <tr>
+                  <td className="align-middle" rowSpan="2">
+                    {
+                      tpm === 'speed'
+                        ? this.state.speed
+                        : tpm === 'rpm'
+                          ? this.state.rpm
+                          : tpm
+                    }
+                    {
+                      tpm === 'speed'
+                        ? (
+                          'km/h'
+                        )
+                        : (
+                          'tr/min'
+                        )
+                    }
+
+                  </td>
+                  <td className="align-middle">
+                    <strong>
+    Actuelle
+                    </strong>
+                  </td>
+                  {Object.keys(this.state.results[tpm]).map((values, indexValues) => (
+                    <td className="align-middle" key={`rpm_values_old_${index}_${indexValues}`}>
+                      {this.state.results[tpm][values].old}
+                    </td>
+                  ))}
+                </tr>
+                <tr>
+                  <td className="align-middle">
+                    <strong>
+    Nouvelle
+                    </strong>
+                  </td>
+                  {Object.keys(this.state.results[tpm]).map((values, indexValues) => (
+                    <td className="align-middle" key={`rpm_values_new_${index}_${indexValues}`}>
+                      {this.state.results[tpm][values].new}
+                    </td>
+                  ))}
+                </tr>
+              </tbody>
+            ))}
+          </Table>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+export default Results;
+//
+// function number_format(number, decimals, dec_point, thousands_sep) {
+//   number = (`${number}`).replace(/[^0-9+\-Ee.]/g, '');
+//   let n = !isFinite(+number) ? 0 : +number,
+//     prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
+//     sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
+//     dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
+//     s = '',
+//     toFixedFix = function (n, prec) {
+//       const k = Math.pow(10, prec);
+//       return `${(Math.round(n * k) / k).toFixed(prec)}`;
+//     };
+//
+//   s = (prec ? toFixedFix(n, prec) : `${Math.round(n)}`).split('.');
+//
+//   if (s[0].length > 3) {
+//     s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
+//   }
+//
+//   if ((s[1] || '').length < prec) {
+//     s[1] = s[1] || '';
+//     s[1] += new Array(prec - s[1].length + 1).join('0');
+//   }
+//
+//   return s.join(dec);
+// }
+//
+// function formValidation() {
+//   let result = true;
+//
+//   $('.bvcalculotor :input.required').each(function () {
+//     let isOk = false;
+//     if ($(this).hasClass('divide')) {
+//       const _rapport = $(this).val().split('/');
+//       if ($(this).val() == '' || $(this).val() == '-' || Number($(this).val()) || _rapport.length == 2 && Number(_rapport[0]) / Number(_rapport[1]) > 0) {
+//         isOk = true;
+//       }
+//     } else if (Number($(this).val()) > 0) {
+//       isOk = true;
+//     }
+//
+//     if (isOk === false) {
+//       $(this).parent().addClass('has-error');
+//       result = false;
+//     } else {
+//       $(this).parent().removeClass('has-error');
+//     }
+//   });
+//
+//   return result;
+// }
+//
+//
+// $().ready(() => {
+//   $('.bvcalculator').submit((e) => {
+//
+//   });
+// });
diff --git a/src/components/Wheels/results.js b/src/components/Wheels/results.js
index 2dc7717..a0bb4d4 100644
--- a/src/components/Wheels/results.js
+++ b/src/components/Wheels/results.js
@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 
+import { formatNumber } from '../../numbers';
+
 class Results extends Component {
   state = {};
 
@@ -150,30 +152,6 @@ class Results extends Component {
     this.drawET(diamRimOld,diamRimNew,tyreHOld,tyreHNew);
   }
 
-  toFixedFix(n,prec){
-    var k=Math.pow(10,prec);
-    return''+(Math.round(n*k)/k).toFixed(prec);
-  }
-
-  number_format(number,decimals,dec_point,thousands_sep){
-    number=(number+'').replace(/[^0-9+\-Ee.]/g,'');
-    const n=!isFinite(+number)?0:+number;
-    const prec=!isFinite(+decimals)?0:Math.abs(decimals);
-    const sep=(typeof thousands_sep==='undefined')?',':thousands_sep;
-    const dec=(typeof dec_point==='undefined')?'.':dec_point;
-    let s='';
-
-    s=(prec?this.toFixedFix(n,prec):''+Math.round(n)).split('.');
-    if(s[0].length>3){
-      s[0]=s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g,sep);
-    }
-    if((s[1]||'').length<prec){
-      s[1]=s[1]||'';
-      s[1]+=new Array(prec-s[1].length+1).join('0');
-    }
-    return s.join(dec);
-  }
-
   drawWheel(diamWheelOld,diamWheelNew,diamRimOld,diamRimNew){
     let c = this.refs.roue_face;
     var ctx=c.getContext("2d");
@@ -489,22 +467,22 @@ class Results extends Component {
           <p>
             { this.state.diffET > 0 ?
               (
-                "Vos nouvelles jantes seront plus proches de votre pivot de " + this.number_format(this.state.diffET,2,',',' ') + " mm."
+                "Vos nouvelles jantes seront plus proches de votre pivot de " + formatNumber(this.state.diffET,2,',',' ') + " mm."
               )
               :
               (
-                "Vos nouvelles jantes seront plus éloignées de votre pivot de " + this.number_format(this.state.diffET,2,',',' ') + " mm."
+                "Vos nouvelles jantes seront plus éloignées de votre pivot de " + formatNumber(this.state.diffET,2,',',' ') + " mm."
               )
             }
             <br />
             {
               this.state.diffWay > 0 ?
               (
-                "Vos nouvelles jantes ressortiront de " + this.number_format( this.state.diffWay, 2, ',', ' ' ) + " mm par rapport à l'origine."
+                "Vos nouvelles jantes ressortiront de " + formatNumber( this.state.diffWay, 2, ',', ' ' ) + " mm par rapport à l'origine."
               )
               :
               (
-                "Vos nouvelles jantes rentreront de " + this.number_format(-(this.state.diffWay), 2, ',', ' ' ) + " mm par rapport à l'origine."
+                "Vos nouvelles jantes rentreront de " + formatNumber(-(this.state.diffWay), 2, ',', ' ' ) + " mm par rapport à l'origine."
               )
             }
           </p>
@@ -514,28 +492,28 @@ class Results extends Component {
               { this.state.diffDiam > 0 ?
                 (
                   <span>
-                    {`Votre nouveau pneu aura un diamètre plus petit de ${this.number_format(- (this.state.diffDiam),2,',',' ')} cm.`}
+                    {`Votre nouveau pneu aura un diamètre plus petit de ${formatNumber(- (this.state.diffDiam),2,',',' ')} cm.`}
                     <br />
-                    {`Votre véhicule sera ainsi rabaissé de ${this.number_format(- (this.state.diffRayon),2,',',' ')} cm.`}
+                    {`Votre véhicule sera ainsi rabaissé de ${formatNumber(- (this.state.diffRayon),2,',',' ')} cm.`}
                   </span>
                 )
                 :
                 (
                   <span>
-                    {`Votre nouveau pneu aura un diamètre plus grand de ${this.number_format( this.state.diffDiam,2,',',' ')} cm.`}
+                    {`Votre nouveau pneu aura un diamètre plus grand de ${formatNumber( this.state.diffDiam,2,',',' ')} cm.`}
                     <br />
-                    {`Votre véhicule sera ainsi réhaussé de ${this.number_format( this.state.diffRayon,2,',',' ')} cm.`}
+                    {`Votre véhicule sera ainsi réhaussé de ${formatNumber( this.state.diffRayon,2,',',' ')} cm.`}
                   </span>
                 )
               }
               <br />
               <span className='glyphicon glyphicon-link' aria-hidden='true'></span>
-              <a href={`http://tyrestretch.com/${this.number_format(this.state.newWheelWidth,1,'.','')}-${this.state.newTyreWidth}-${this.state.newTyreHeight}-R${this.state.newWheelDiameter}/`} target='_blank'>Aperçu</a> (Il se peut qu'il n'y ai aucun aperçu pour cette dimension)
+              <a href={`http://tyrestretch.com/${formatNumber(this.state.newWheelWidth,1,'.','')}-${this.state.newTyreWidth}-${this.state.newTyreHeight}-R${this.state.newWheelDiameter}/`} target='_blank'>Aperçu</a> (Il se peut qu'il n'y ai aucun aperçu pour cette dimension)
             </p>
 
           <h2>Vitesse</h2>
           <p>
-            Quand votre compteur indique <strong>{this.state.speed} km/h</strong> vous roulez en réalité à <strong>{this.number_format(this.state.vitesseNew,2,',',' ')} km/h</strong>
+            Quand votre compteur indique <strong>{this.state.speed} km/h</strong> vous roulez en réalité à <strong>{formatNumber(this.state.vitesseNew,2,',',' ')} km/h</strong>
           </p>
 
           <h2>Roue</h2>
@@ -550,10 +528,10 @@ class Results extends Component {
              </thead>
              <tbody>
                  <tr>
-                     <td className='col-xs-3'>{this.number_format(this.state.diamColA,2,',',' ')}</td>
-                     <td className='col-xs-3'>{this.number_format(this.state.diamColB,2,',',' ')}</td>
-                     <td className='col-xs-3'>{this.number_format(this.state.diamColC,2,',',' ')}</td>
-                     <td className='col-xs-3'>{this.number_format(this.state.diamColD,2,',',' ')}</td>
+                     <td className='col-xs-3'>{formatNumber(this.state.diamColA,2,',',' ')}</td>
+                     <td className='col-xs-3'>{formatNumber(this.state.diamColB,2,',',' ')}</td>
+                     <td className='col-xs-3'>{formatNumber(this.state.diamColC,2,',',' ')}</td>
+                     <td className='col-xs-3'>{formatNumber(this.state.diamColD,2,',',' ')}</td>
                  </tr>
              </tbody>
           </table>
diff --git a/src/numbers.js b/src/numbers.js
new file mode 100644
index 0000000..e1df4c7
--- /dev/null
+++ b/src/numbers.js
@@ -0,0 +1,24 @@
+
+  function toFixedFix (n,prec){
+    var k=Math.pow(10,prec);
+    return''+(Math.round(n*k)/k).toFixed(prec);
+  }
+
+export function formatNumber (number,decimals,dec_point,thousands_sep){
+  number=(number+'').replace(/[^0-9+\-Ee.]/g,'');
+  const n=!isFinite(+number)?0:+number;
+  const prec=!isFinite(+decimals)?0:Math.abs(decimals);
+  const sep=(typeof thousands_sep==='undefined')?',':thousands_sep;
+  const dec=(typeof dec_point==='undefined')?'.':dec_point;
+  let s='';
+
+  s=(prec?toFixedFix(n,prec):''+Math.round(n)).split('.');
+  if(s[0].length>3){
+    s[0]=s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g,sep);
+  }
+  if((s[1]||'').length<prec){
+    s[1]=s[1]||'';
+    s[1]+=new Array(prec-s[1].length+1).join('0');
+  }
+  return s.join(dec);
+};