DEV Community

Baldo Bo
Baldo Bo

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

And taht's it!

Top comments (0)