Number converter: decimal to base(2-36) ReactJs

This is an app that converts decimal numbers to base(2-36). The user indicates both, the number you want it to be converted and the base.

You can find the code here

JavaScript

Javascript gives us as default decimal numbers but it has a method to convert them to base 2-36:

let number = 10;
console.log(number.toString(2));//1010

ReactJS

Let's see, our app will need:

2 user input: decimal and base
An event that makes the conversion
The result display on the screen

First

A basic structure of our app


const App = () => {
return(
<>
 <h2>Number converter</h2>
 //Decimal
  <input/>
  //Base
  <input/>
  //Display the result
  <p>{}</p>
</>
);
}

export default App;

Second:

We need to store the user and conversion data.

import React from 'react';
import { useState } from 'react';

const App = () => {
//Store decimal
const [decimal, setDecimal] = useState('');
//Store base
const [base, setBase] = useState('');
//store conversion data
const [convert, setConvert] = useState(0);
return(
<>
<h2>Number converter</h2>
//Decimal
<input/>
//Base
<input/>
//Display the result
<p>{}</p>
</>
);
}

export default App;

Third:

Let's track the user input

function App() {
  const [decimal, setDecimal] = useState('');
  const [base, setBase] = useState('');
  const [convert, setConvert] = useState(0);
  return (
    <div>
      <h2>Number converter</h2>
      <p>Decimal to base 2-36 </p>

      <form>
        <input
          type="text"
          placeholder="decimal"
          value={decimal}
          onChange={(event) => setDecimal(event.target.value)}
        />

        <input
          type="text"
          placeholder="base(2-36)"
          value={base}
          onChange={(event) => setBase(event.target.value)}
        />
        <button type="submit">Convert</button>
      </form>

      <p>{convert}</p>
    </div>
  );
}

export default App;

Fourth:

Add a form and the event that makes the conversion

function App() {
  const [decimal, setDecimal] = useState('');
  const [base, setBase] = useState('');
  const [convert, setConvert] = useState(0);

  const convertNumber = (event) => {
    event.preventDefault();
    setConvert(numberConverterBase(decimal, base));
  };

  const numberConverterBase = (decimal, base) => {
    return Number(decimal).toString(Number(base));
  };

  return (
    <div>
      <h2>Number converter</h2>
      <p>Decimal to base 2-36 </p>

      <form onSubmit={convertNumber}>
        <input
          type="text"
          placeholder="decimal"
          value={decimal}
          onChange={(event) => setDecimal(event.target.value)}
        />

        <input
          type="text"
          placeholder="base(2-36)"
          value={base}
          onChange={(event) => setBase(event.target.value)}
        />
        <button type="submit">Convert</button>
      </form>

      <p>{convert}</p>
    </div>
  );
}

export default App;

And taht's it!

Blog