|
|
@@ -1,25 +1,122 @@
|
|
|
-import logo from './logo.svg';
|
|
|
-import './App.css';
|
|
|
-
|
|
|
-function App() {
|
|
|
- return (
|
|
|
- <div className="App">
|
|
|
- <header className="App-header">
|
|
|
- <img src={logo} className="App-logo" alt="logo" />
|
|
|
- <p>
|
|
|
- Edit <code>src/App.js</code> and save to reload.
|
|
|
- </p>
|
|
|
- <a
|
|
|
- className="App-link"
|
|
|
- href="https://reactjs.org"
|
|
|
- target="_blank"
|
|
|
- rel="noopener noreferrer"
|
|
|
- >
|
|
|
- Learn React
|
|
|
- </a>
|
|
|
- </header>
|
|
|
+import './App.scss';
|
|
|
+
|
|
|
+const VerticalTilda = () => (<span className="tilda">~</span>)
|
|
|
+const Upperline = ({children}) => (<span className="upperline">{children}</span>)
|
|
|
+const Underline = ({children}) => (<span className="underline">{children}</span>)
|
|
|
+
|
|
|
+const ActionButton = ({className, children}) => (<div className={`button ${className}`} >{children}</div>)
|
|
|
+const ValueButton = ({className, children}) => (<div className={`button ${className}`} >{children}</div>)
|
|
|
+
|
|
|
+const Operator = ({className, children}) => (<ActionButton className={`operator ${className}`}>{children}</ActionButton>)
|
|
|
+const ScreenOperator = ({children}) => (<ActionButton className='screen_operator'>{children}</ActionButton>)
|
|
|
+const Bitwise = ({children}) => (<ActionButton className='bitwise'>{children}</ActionButton>)
|
|
|
+const NumeralSystem = ({children}) => (<ActionButton className='numeral_system'>{children}</ActionButton>)
|
|
|
+const Number = ({dataValue, children}) => (<ValueButton className='number'>{children}</ValueButton>)
|
|
|
+
|
|
|
+
|
|
|
+const Column = ({children}) => (
|
|
|
+ <div className="col">
|
|
|
+ {children}
|
|
|
+ </div>
|
|
|
+)
|
|
|
+
|
|
|
+const Keyboard = () => (
|
|
|
+ <div class="keyboard_field">
|
|
|
+
|
|
|
+ <div className="keyboard_left">
|
|
|
+
|
|
|
+ <Column>
|
|
|
+ <Operator className='double_tilda' dataAction="roundUp"> <VerticalTilda/> <VerticalTilda/> </Operator>
|
|
|
+ <Operator dataAction="power"> <span> x<Upperline>y</Upperline> </span> </Operator>
|
|
|
+ <Operator dataAction="log"> <span> log<Underline>x</Underline> </span> </Operator>
|
|
|
+ <Operator dataAction="tenPow"> <span> ×10<Upperline>x</Upperline> </span> </Operator>
|
|
|
+ <Operator dataAction="remainder"> .% </Operator>
|
|
|
+ </Column>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div className="keyboard_main">
|
|
|
+
|
|
|
+ <Column>
|
|
|
+ <ScreenOperator dataAction="deleteAll"> С </ScreenOperator>
|
|
|
+ <Number dataValue="7"> 7 </Number>
|
|
|
+ <Number dataValue="4"> 4 </Number>
|
|
|
+ <Number dataValue="1"> 1 </Number>
|
|
|
+ <Number dataValue="0"> 0 </Number>
|
|
|
+ </Column>
|
|
|
+
|
|
|
+ <Column>
|
|
|
+ <ScreenOperator dataAction="deleteChar"> <= </ScreenOperator>
|
|
|
+ <Number dataValue="8"> 8 </Number>
|
|
|
+ <Number dataValue="5"> 5 </Number>
|
|
|
+ <Number dataValue="2"> 2 </Number>
|
|
|
+ <Number dataValue="."> . </Number>
|
|
|
+ </Column>
|
|
|
+
|
|
|
+ <Column>
|
|
|
+ <Operator dataAction="rad"> √ </Operator>
|
|
|
+ <Number dataValue="9"> 9 </Number>
|
|
|
+ <Number dataValue="6"> 6 </Number>
|
|
|
+ <Number dataValue="3"> 3 </Number>
|
|
|
+ <Operator dataAction="sign"> ± </Operator>
|
|
|
+ </Column>
|
|
|
+
|
|
|
+ <Column>
|
|
|
+ <Operator dataAction="div"> ÷ </Operator>
|
|
|
+ <Operator dataAction="mul"> × </Operator>
|
|
|
+ <Operator dataAction="sub"> - </Operator>
|
|
|
+ <Operator dataAction="add"> + </Operator>
|
|
|
+ <Operator dataAction="eq"> = </Operator>
|
|
|
+ </Column>
|
|
|
+
|
|
|
</div>
|
|
|
- );
|
|
|
-}
|
|
|
+
|
|
|
+
|
|
|
+ <div className="keyboard_right">
|
|
|
+
|
|
|
+ <Column>
|
|
|
+ <NumeralSystem dataAction="toBinary">0b</NumeralSystem>
|
|
|
+ <Bitwise dataAction="bitwiseAnd">&</Bitwise>
|
|
|
+ <Bitwise dataAction="bitwiseOr">|</Bitwise>
|
|
|
+ <Bitwise dataAction="bitwiseXor">^</Bitwise>
|
|
|
+ <Bitwise dataAction="bitwiseNot">~</Bitwise>
|
|
|
+ </Column>
|
|
|
+
|
|
|
+ <Column>
|
|
|
+ <NumeralSystem dataAction="toHexadecimal">0x</NumeralSystem>
|
|
|
+ <NumeralSystem dataAction="toOctal">0o</NumeralSystem>
|
|
|
+ <Bitwise dataAction="leftShift"><<</Bitwise>
|
|
|
+ <Bitwise dataAction="rightShift">>></Bitwise>
|
|
|
+ <Bitwise dataAction="unsignedRightShift">>>></Bitwise>
|
|
|
+ </Column>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+)
|
|
|
+
|
|
|
+
|
|
|
+const Screen = () => (
|
|
|
+ <div class="screen_field">
|
|
|
+ <div className="screen"></div>
|
|
|
+ </div>
|
|
|
+)
|
|
|
+
|
|
|
+
|
|
|
+const App = () => (
|
|
|
+ <>
|
|
|
+ <div className="wrapper">
|
|
|
+ <div className="field">
|
|
|
+
|
|
|
+ <Screen/>
|
|
|
+
|
|
|
+ <Keyboard/>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+)
|
|
|
+
|
|
|
|
|
|
export default App;
|
Ivar
