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!
Top comments (0)