<div id="root"></div>
body {
background: #202020;
box-sizing: border-box;
font-family: Menlo, Monaco, sans-serif;
}
#root {
padding: 30px;
display: flex;
}
.blue-wrapper {
display: flex;
min-width: 300px;
max-width: 300px;
flex-wrap: wrap;
margin: auto;
background: #066ace;
padding: 15px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipse;
input {
margin: 15px;
border-radius: 3px;
border: none;
font-size: 30px;
font-weight: bold;
height: 40px;
text-align: center;
}
.base {
max-width: 100px;
flex: 0 0 100px;
margin: 60px auto;
font-size: 50px;
height: 60px;
}
.exponent {
max-width: 60px;
flex: 0 0 30px;
margin: auto;
margin: 15px auto auto 0;
}
.result {
flex: 1 0 100%;
margin-top: 15px;
text-align: center;
color: #fdca40;
font-size: 40px;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
}
}
View Compiled
const ExponentCalculator = () => {
const [base, setBase] = React.useState(4);
const [exponent, setExponent] = React.useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
}
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
}
return (
<div className="blue-wrapper">
<input
type="number"
className="base"
onChange={handleBaseChange}
placeholder="Base"
value={base}
/>
<input
type="number"
className="exponent"
onChange={handleExponentChange}
placeholder="Exp."
value={exponent}
/>
<h1 className="result">
{result}
</h1>
</div>
);
};
ReactDOM.render(<ExponentCalculator />, document.getElementById('root'));
View Compiled
This Pen doesn't use any external CSS resources.