From 559423f51bc7e5725d2ceeed5aa085261f1c99a8 Mon Sep 17 00:00:00 2001
From: kitsera <sashakitsera16358@gmail.com>
Date: Wed, 12 Sep 2018 22:50:29 +0300
Subject: [PATCH 1/9] 1-Implemented basic view for calculator.

---
 .idea/calculator.iml |  11 ++
 .idea/misc.xml       |   7 ++
 .idea/modules.xml    |   8 ++
 .idea/vcs.xml        |   6 +
 .idea/workspace.xml  | 259 +++++++++++++++++++++++++++++++++++++++++++
 src/App.js           | 112 ++++++++++++++++---
 src/index.css        |  87 ++++++++++++++-
 src/index.js         |   8 +-
 8 files changed, 478 insertions(+), 20 deletions(-)
 create mode 100644 .idea/calculator.iml
 create mode 100644 .idea/misc.xml
 create mode 100644 .idea/modules.xml
 create mode 100644 .idea/vcs.xml
 create mode 100644 .idea/workspace.xml

diff --git a/.idea/calculator.iml b/.idea/calculator.iml
new file mode 100644
index 0000000..c3cd732
--- /dev/null
+++ b/.idea/calculator.iml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="RUBY_MODULE" version="4">
+  <component name="ModuleRunConfigurationManager">
+    <shared />
+  </component>
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..3c73ef2
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="JSX" />
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="RVM: ruby-2.5.1 [images]" project-jdk-type="RUBY_SDK" />
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..6aa3d5c
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/calculator.iml" filepath="$PROJECT_DIR$/.idea/calculator.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..f486468
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,259 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="6007df67-6767-4896-baaa-c881467aef80" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
+    </list>
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FUSProjectUsageTrigger">
+    <session id="-1357537340">
+      <usages-collector id="statistics.lifecycle.project">
+        <counts>
+          <entry key="project.open.time.9" value="1" />
+          <entry key="project.opened" value="1" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.extensions.open">
+        <counts>
+          <entry key="css" value="1" />
+          <entry key="gitignore" value="1" />
+          <entry key="js" value="2" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.types.open">
+        <counts>
+          <entry key="CSS" value="1" />
+          <entry key="JavaScript" value="2" />
+          <entry key="PLAIN_TEXT" value="1" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.extensions.edit">
+        <counts>
+          <entry key="css" value="48" />
+          <entry key="gitignore" value="12" />
+          <entry key="js" value="192" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.types.edit">
+        <counts>
+          <entry key="CSS" value="48" />
+          <entry key="JavaScript" value="192" />
+          <entry key="PLAIN_TEXT" value="12" />
+        </counts>
+      </usages-collector>
+    </session>
+  </component>
+  <component name="FileEditorManager">
+    <leaf>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/App.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="544">
+              <caret line="56" column="40" selection-start-line="56" selection-start-column="40" selection-end-line="56" selection-end-column="40" />
+              <folding>
+                <element signature="e#0#41#0" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/index.css">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="669">
+              <caret line="67" column="22" selection-start-line="67" selection-start-column="22" selection-end-line="67" selection-end-column="22" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/index.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="204">
+              <caret line="12" lean-forward="true" selection-start-line="12" selection-end-line="12" />
+              <folding>
+                <element signature="e#0#26#0" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/.gitignore">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="102">
+              <caret line="6" column="9" lean-forward="true" selection-start-line="6" selection-start-column="9" selection-end-line="6" selection-end-column="9" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+    </leaf>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="IdeDocumentHistory">
+    <option name="CHANGED_PATHS">
+      <list>
+        <option value="$PROJECT_DIR$/.gitignore" />
+        <option value="$PROJECT_DIR$/src/index.js" />
+        <option value="$PROJECT_DIR$/src/App.js" />
+        <option value="$PROJECT_DIR$/src/index.css" />
+      </list>
+    </option>
+  </component>
+  <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
+  <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
+  <component name="JsGulpfileManager">
+    <detection-done>true</detection-done>
+    <sorting>DEFINITION_ORDER</sorting>
+  </component>
+  <component name="NodeModulesDirectoryManager">
+    <handled-path value="$PROJECT_DIR$/node_modules" />
+  </component>
+  <component name="NodePackageJsonFileManager">
+    <packageJsonPaths>
+      <path value="$PROJECT_DIR$/package.json" />
+    </packageJsonPaths>
+  </component>
+  <component name="ProjectFrameBounds" extendedState="6">
+    <option name="x" value="946" />
+    <option name="y" value="80" />
+    <option name="width" value="926" />
+    <option name="height" value="912" />
+  </component>
+  <component name="ProjectView">
+    <navigator proportions="" version="1">
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="Scope" />
+      <pane id="ProjectPane">
+        <subPane>
+          <expand>
+            <path>
+              <item name="calculator" type="b2602c69:ProjectViewProjectNode" />
+              <item name="calculator" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="calculator" type="b2602c69:ProjectViewProjectNode" />
+              <item name="calculator" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+            </path>
+          </expand>
+          <select />
+        </subPane>
+      </pane>
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
+    <property name="nodejs_npm_path_reset_for_default_project" value="true" />
+    <property name="settings.editor.selected.configurable" value="org.jetbrains.plugins.ruby.settings.RubyActiveModuleSdkConfigurable" />
+  </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="6007df67-6767-4896-baaa-c881467aef80" name="Default Changelist" comment="" />
+      <created>1536779576428</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1536779576428</updated>
+      <workItem from="1536779579517" duration="2177000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TimeTrackingManager">
+    <option name="totallyTimeSpent" value="2177000" />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="49" y="24" width="1871" height="1056" extended-state="6" />
+    <editor active="true" />
+    <layout>
+      <window_info id="Favorites" side_tool="true" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24986301" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Database Changes" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" />
+      <window_info anchor="bottom" id="Terminal" />
+      <window_info anchor="bottom" id="Event Log" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Find" order="1" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
+      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
+      <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="right" id="Database" />
+      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+    </layout>
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="1" />
+  </component>
+  <component name="VcsContentAnnotationSettings">
+    <option name="myLimit" value="2678400000" />
+  </component>
+  <component name="editorHistoryManager">
+    <entry file="file://$PROJECT_DIR$/src/index.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="204">
+          <caret line="12" lean-forward="true" selection-start-line="12" selection-end-line="12" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/.gitignore">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="102">
+          <caret line="6" column="9" lean-forward="true" selection-start-line="6" selection-start-column="9" selection-end-line="6" selection-end-column="9" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/App.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="544">
+          <caret line="56" column="40" selection-start-line="56" selection-start-column="40" selection-end-line="56" selection-end-column="40" />
+          <folding>
+            <element signature="e#0#41#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/index.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="669">
+          <caret line="67" column="22" selection-start-line="67" selection-start-column="22" selection-end-line="67" selection-end-column="22" />
+        </state>
+      </provider>
+    </entry>
+  </component>
+</project>
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 203067e..380b579 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,101 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
-  }
+class Digit extends React.Component {
+    render() {
+        return (
+            <button className="square">
+                {this.props.value}
+            </button>
+        );
+    }
 }
 
-export default App;
+class Clear extends React.Component {
+    render() {
+        return (
+            <button className="clear">
+                {this.props.value}
+            </button>
+        );
+    }
+}
+
+class Sqreen extends React.Component {
+    render() {
+        return (
+            <button className="sqreen">
+                {this.props.value}
+            </button>
+        );
+    }
+}
+
+class Board extends React.Component {
+    renderDigit(i) {
+        return <Digit value={i}/>;
+    }
+    renderClear(i) {
+        return <Clear value={i}/>;
+    }
+    renderSqreen(i) {
+        return <Sqreen value={i}/>;
+    }
+
+    render() {
+        const status = 'Next player: X';
+
+        return (
+            <div>
+                <div className="board-row">
+                    {this.renderSqreen(0)}
+                </div>
+                <div className="board-row">
+                    {this.renderDigit(1)}
+                    {this.renderDigit(2)}
+                    {this.renderDigit(3)}
+                    {this.renderDigit('÷')}
+                </div>
+                <div className="board-row">
+                    {this.renderDigit(4)}
+                    {this.renderDigit(5)}
+                    {this.renderDigit(6)}
+                    {this.renderDigit('-')}
+                </div>
+                <div className="board-row">
+                    {this.renderDigit(7)}
+                    {this.renderDigit(8)}
+                    {this.renderDigit(9)}
+                    {this.renderDigit('+')}
+                </div>
+                <div className="board-row">
+                    {this.renderDigit(0)}
+                    {this.renderClear('clear')}
+                    {this.renderDigit('=')}
+                </div>
+            </div>
+        );
+    }
+}
+
+class Game extends React.Component {
+    render() {
+        return (
+            <div className="game">
+                <div className="game-board">
+                    <Board />
+                </div>
+                <div className="game-info">
+                    <div>{/* status */}</div>
+                    <ol>{/* TODO */}</ol>
+                </div>
+            </div>
+        );
+    }
+}
+
+// ========================================
+
+
+
+export default Game;
diff --git a/src/index.css b/src/index.css
index b4cc725..78872f4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,88 @@
 body {
-  margin: 0;
+  font: 14px "Century Gothic", Futura, sans-serif;
+  margin: 20px;
+}
+
+ol, ul {
+  padding-left: 30px;
+}
+
+.board-row:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.square:focus {
+  outline: none;
+}
+
+.clear {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
   padding: 0;
-  font-family: sans-serif;
+  text-align: center;
+  width: 67px;
+}
+
+.clear:focus {
+  outline: none;
+}
+
+.sqreen {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding-right: 10px;
+  text-align: right;
+  width: 133px;
+}
+
+.sqreen:focus {
+  outline: none;
+}
+
+.kbd-navigation .square:focus {
+  background: #ddd;
+}
+
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
 }
diff --git a/src/index.js b/src/index.js
index fae3e35..2855f9d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import Game from './App';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+    <Game />,
+    document.getElementById('root')
+);
+
 registerServiceWorker();

From af26795169cd9d013b47ef695c0583d23ebc3b0b Mon Sep 17 00:00:00 2001
From: oleksandrkits <oleksandrkit@tahometer.com>
Date: Thu, 13 Sep 2018 10:07:17 +0300
Subject: [PATCH 2/9] Added click handlers for digits and operations.

---
 .idea/workspace.xml | 100 +++++++++++++++++++++++++++-----------------
 src/App.js          |  62 ++++++++++++++-------------
 src/index.css       |   4 +-
 3 files changed, 96 insertions(+), 70 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f486468..0751169 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,6 @@
     <list default="true" id="6007df67-6767-4896-baaa-c881467aef80" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -49,26 +48,48 @@
         </counts>
       </usages-collector>
     </session>
+    <session id="-81091790">
+      <usages-collector id="statistics.lifecycle.project">
+        <counts>
+          <entry key="project.open.time.2" value="1" />
+          <entry key="project.opened" value="1" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.extensions.edit">
+        <counts>
+          <entry key="css" value="2" />
+          <entry key="js" value="588" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.types.edit">
+        <counts>
+          <entry key="CSS" value="2" />
+          <entry key="JavaScript" value="588" />
+        </counts>
+      </usages-collector>
+    </session>
   </component>
   <component name="FileEditorManager">
-    <leaf>
-      <file pinned="false" current-in-tab="false">
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
+      <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/App.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="544">
-              <caret line="56" column="40" selection-start-line="56" selection-start-column="40" selection-end-line="56" selection-end-column="40" />
+            <state relative-caret-position="375">
+              <caret line="31" column="8" lean-forward="true" selection-start-line="31" selection-start-column="8" selection-end-line="31" selection-end-column="8" />
               <folding>
                 <element signature="e#0#41#0" expanded="true" />
+                <element signature="n#!!block;n#handleClick#0;n#Board#0" />
+                <element signature="n#!!block;n#handleClearClick#0;n#Board#0" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/index.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="669">
-              <caret line="67" column="22" selection-start-line="67" selection-start-column="22" selection-end-line="67" selection-end-column="22" />
+            <state relative-caret-position="444">
+              <caret line="58" column="19" lean-forward="true" selection-start-line="58" selection-start-column="19" selection-end-line="58" selection-end-column="19" />
             </state>
           </provider>
         </entry>
@@ -76,8 +97,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="204">
-              <caret line="12" lean-forward="true" selection-start-line="12" selection-end-line="12" />
+            <state relative-caret-position="180">
+              <caret line="12" lean-forward="true" selection-start-line="3" selection-start-column="7" selection-end-line="3" selection-end-column="11" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
               </folding>
@@ -88,8 +109,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/.gitignore">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="102">
-              <caret line="6" column="9" lean-forward="true" selection-start-line="6" selection-start-column="9" selection-end-line="6" selection-end-column="9" />
+            <state relative-caret-position="90">
+              <caret line="6" column="9" selection-start-line="6" selection-start-column="9" selection-end-line="6" selection-end-column="9" />
             </state>
           </provider>
         </entry>
@@ -104,8 +125,8 @@
       <list>
         <option value="$PROJECT_DIR$/.gitignore" />
         <option value="$PROJECT_DIR$/src/index.js" />
-        <option value="$PROJECT_DIR$/src/App.js" />
         <option value="$PROJECT_DIR$/src/index.css" />
+        <option value="$PROJECT_DIR$/src/App.js" />
       </list>
     </option>
   </component>
@@ -134,7 +155,6 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
-      <pane id="Scope" />
       <pane id="ProjectPane">
         <subPane>
           <expand>
@@ -151,6 +171,7 @@
           <select />
         </subPane>
       </pane>
+      <pane id="Scope" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -183,24 +204,20 @@
       <option name="presentableId" value="Default" />
       <updated>1536779576428</updated>
       <workItem from="1536779579517" duration="2177000" />
+      <workItem from="1536819292611" duration="3070000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="2177000" />
+    <option name="totallyTimeSpent" value="5247000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="49" y="24" width="1871" height="1056" extended-state="6" />
+    <frame x="67" y="25" width="1853" height="1055" extended-state="6" />
     <editor active="true" />
     <layout>
-      <window_info id="Favorites" side_tool="true" />
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24986301" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25290537" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
-      <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Database Changes" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Version Control" />
-      <window_info anchor="bottom" id="Terminal" />
-      <window_info anchor="bottom" id="Event Log" side_tool="true" />
+      <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
       <window_info anchor="bottom" id="Find" order="1" />
       <window_info anchor="bottom" id="Run" order="2" />
@@ -208,10 +225,15 @@
       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
       <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
       <window_info anchor="bottom" id="TODO" order="6" />
-      <window_info anchor="right" id="Database" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Database Changes" order="8" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="9" />
+      <window_info anchor="bottom" id="Terminal" order="10" />
+      <window_info anchor="bottom" id="Event Log" order="11" side_tool="true" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+      <window_info anchor="right" id="Database" order="3" />
     </layout>
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -221,39 +243,41 @@
     <option name="myLimit" value="2678400000" />
   </component>
   <component name="editorHistoryManager">
+    <entry file="file://$PROJECT_DIR$/.gitignore">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="90">
+          <caret line="6" column="9" selection-start-line="6" selection-start-column="9" selection-end-line="6" selection-end-column="9" />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="204">
-          <caret line="12" lean-forward="true" selection-start-line="12" selection-end-line="12" />
+        <state relative-caret-position="180">
+          <caret line="12" lean-forward="true" selection-start-line="3" selection-start-column="7" selection-end-line="3" selection-end-column="11" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/.gitignore">
+    <entry file="file://$PROJECT_DIR$/src/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="102">
-          <caret line="6" column="9" lean-forward="true" selection-start-line="6" selection-start-column="9" selection-end-line="6" selection-end-column="9" />
+        <state relative-caret-position="444">
+          <caret line="58" column="19" lean-forward="true" selection-start-line="58" selection-start-column="19" selection-end-line="58" selection-end-column="19" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/App.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="544">
-          <caret line="56" column="40" selection-start-line="56" selection-start-column="40" selection-end-line="56" selection-end-column="40" />
+        <state relative-caret-position="375">
+          <caret line="31" column="8" lean-forward="true" selection-start-line="31" selection-start-column="8" selection-end-line="31" selection-end-column="8" />
           <folding>
             <element signature="e#0#41#0" expanded="true" />
+            <element signature="n#!!block;n#handleClick#0;n#Board#0" />
+            <element signature="n#!!block;n#handleClearClick#0;n#Board#0" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.css">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="669">
-          <caret line="67" column="22" selection-start-line="67" selection-start-column="22" selection-end-line="67" selection-end-column="22" />
-        </state>
-      </provider>
-    </entry>
   </component>
 </project>
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 380b579..04880d5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,45 +1,47 @@
 import React, { Component } from 'react';
 import './App.css';
 
-class Digit extends React.Component {
+class Button extends React.Component {
     render() {
         return (
-            <button className="square">
+            <button className={this.props.class} onClick={() => this.props.onClick()}>
                 {this.props.value}
             </button>
         );
     }
 }
 
-class Clear extends React.Component {
-    render() {
-        return (
-            <button className="clear">
-                {this.props.value}
-            </button>
-        );
-    }
-}
-
-class Sqreen extends React.Component {
-    render() {
-        return (
-            <button className="sqreen">
-                {this.props.value}
-            </button>
-        );
-    }
-}
 
 class Board extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            digits: '',
+            operation: '',
+        }
+    }
+    handleDigitClick(value){
+        let digits = this.state.digits;
+        digits += value.toString();
+        this.setState({digits: digits});
+    }
+    handleClearClick(){
+        this.setState({digits: ''});
+    }
+    handleOperationClick(){
+        
+    }
     renderDigit(i) {
-        return <Digit value={i}/>;
+        return <Button value={i} class={'square'} onClick={()=>this.handleDigitClick(i)}/>;
+    }
+    renderOperation(i) {
+        return <Button value={i} class={'square'} onClick={()=>this.handleOperationClick(i)}/>;
     }
     renderClear(i) {
-        return <Clear value={i}/>;
+        return <Button value={i} class={'clear'} onClick={()=>this.handleClearClick()}/>;
     }
-    renderSqreen(i) {
-        return <Sqreen value={i}/>;
+    renderScreen(i) {
+        return <Button value={i} class={'screen'}/>;
     }
 
     render() {
@@ -48,30 +50,30 @@ class Board extends React.Component {
         return (
             <div>
                 <div className="board-row">
-                    {this.renderSqreen(0)}
+                    {this.renderScreen(this.state.digits)}
                 </div>
                 <div className="board-row">
                     {this.renderDigit(1)}
                     {this.renderDigit(2)}
                     {this.renderDigit(3)}
-                    {this.renderDigit('÷')}
+                    {this.renderOperation('÷')}
                 </div>
                 <div className="board-row">
                     {this.renderDigit(4)}
                     {this.renderDigit(5)}
                     {this.renderDigit(6)}
-                    {this.renderDigit('-')}
+                    {this.renderOperation('-')}
                 </div>
                 <div className="board-row">
                     {this.renderDigit(7)}
                     {this.renderDigit(8)}
                     {this.renderDigit(9)}
-                    {this.renderDigit('+')}
+                    {this.renderOperation('+')}
                 </div>
                 <div className="board-row">
                     {this.renderDigit(0)}
                     {this.renderClear('clear')}
-                    {this.renderDigit('=')}
+                    {this.renderOperation('=')}
                 </div>
             </div>
         );
diff --git a/src/index.css b/src/index.css
index 78872f4..a43edd0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -55,7 +55,7 @@ ol, ul {
   outline: none;
 }
 
-.sqreen {
+.screen {
   background: #fff;
   border: 1px solid #999;
   float: left;
@@ -70,7 +70,7 @@ ol, ul {
   width: 133px;
 }
 
-.sqreen:focus {
+.screen:focus {
   outline: none;
 }
 

From 5e094af3633f5ec292678a82d774b540a534ac9b Mon Sep 17 00:00:00 2001
From: oleksandrkits <oleksandrkit@tahometer.com>
Date: Thu, 13 Sep 2018 11:19:51 +0300
Subject: [PATCH 3/9] Basic calculations implemented.

---
 .idea/workspace.xml | 17 ++++++++---------
 src/App.js          | 34 ++++++++++++++++++++++++++++++++--
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0751169..6446f28 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -3,7 +3,6 @@
   <component name="ChangeListManager">
     <list default="true" id="6007df67-6767-4896-baaa-c881467aef80" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.css" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -58,13 +57,13 @@
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
           <entry key="css" value="2" />
-          <entry key="js" value="588" />
+          <entry key="js" value="1155" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
           <entry key="CSS" value="2" />
-          <entry key="JavaScript" value="588" />
+          <entry key="JavaScript" value="1155" />
         </counts>
       </usages-collector>
     </session>
@@ -74,8 +73,8 @@
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/App.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="375">
-              <caret line="31" column="8" lean-forward="true" selection-start-line="31" selection-start-column="8" selection-end-line="31" selection-end-column="8" />
+            <state relative-caret-position="345">
+              <caret line="53" column="30" lean-forward="true" selection-start-line="53" selection-start-column="30" selection-end-line="53" selection-end-column="30" />
               <folding>
                 <element signature="e#0#41#0" expanded="true" />
                 <element signature="n#!!block;n#handleClick#0;n#Board#0" />
@@ -204,12 +203,12 @@
       <option name="presentableId" value="Default" />
       <updated>1536779576428</updated>
       <workItem from="1536779579517" duration="2177000" />
-      <workItem from="1536819292611" duration="3070000" />
+      <workItem from="1536819292611" duration="6900000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="5247000" />
+    <option name="totallyTimeSpent" value="9077000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="67" y="25" width="1853" height="1055" extended-state="6" />
@@ -269,8 +268,8 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/App.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="375">
-          <caret line="31" column="8" lean-forward="true" selection-start-line="31" selection-start-column="8" selection-end-line="31" selection-end-column="8" />
+        <state relative-caret-position="345">
+          <caret line="53" column="30" lean-forward="true" selection-start-line="53" selection-start-column="30" selection-end-line="53" selection-end-column="30" />
           <folding>
             <element signature="e#0#41#0" expanded="true" />
             <element signature="n#!!block;n#handleClick#0;n#Board#0" />
diff --git a/src/App.js b/src/App.js
index 04880d5..566a7d6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,6 +18,7 @@ class Board extends React.Component {
         this.state = {
             digits: '',
             operation: '',
+            lhs: null,
         }
     }
     handleDigitClick(value){
@@ -28,8 +29,37 @@ class Board extends React.Component {
     handleClearClick(){
         this.setState({digits: ''});
     }
-    handleOperationClick(){
-        
+    handleOperationClick(operation){
+        const digits = this.state.digits;
+        if (digits !== '') {
+            if (this.state.lhs == null) {
+                const lhs = parseInt(digits, 10);
+                this.setState({lhs: lhs, operation: operation, digits: ''});
+            }
+            else if (operation === '=') {
+                const lhs = this.state.lhs;
+                const rhs = parseInt(digits, 10);
+
+                let result;
+                switch (this.state.operation) {
+                    case '+':
+                        result = lhs + rhs;
+                        break;
+                    case '-':
+                        console.log('minus');
+                        result = lhs - rhs;
+                        break;
+                    case '*':
+                        result = lhs * rhs;
+                        break;
+                    case '÷':
+                        result = lhs / rhs;
+                        break;
+                }
+                this.setState({lhs: null, digits: result.toString()})
+            }
+        }
+
     }
     renderDigit(i) {
         return <Button value={i} class={'square'} onClick={()=>this.handleDigitClick(i)}/>;

From 3f9dbc8d331c9d603264a5ab40e024eaf4f6cd97 Mon Sep 17 00:00:00 2001
From: oleksandrkits <oleksandrkit@tahometer.com>
Date: Thu, 13 Sep 2018 14:32:33 +0300
Subject: [PATCH 4/9] Added multiplication. Maximum length of input digets is
 now 15.

---
 .idea/workspace.xml | 41 +++++++++++++++++++----------------------
 src/App.js          | 29 +++++++++++++++++++----------
 src/index.css       | 18 +++++++++---------
 3 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 6446f28..b32ea76 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -3,6 +3,7 @@
   <component name="ChangeListManager">
     <list default="true" id="6007df67-6767-4896-baaa-c881467aef80" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.css" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -56,14 +57,14 @@
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="css" value="2" />
-          <entry key="js" value="1155" />
+          <entry key="css" value="24" />
+          <entry key="js" value="1264" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
-          <entry key="CSS" value="2" />
-          <entry key="JavaScript" value="1155" />
+          <entry key="CSS" value="24" />
+          <entry key="JavaScript" value="1264" />
         </counts>
       </usages-collector>
     </session>
@@ -73,12 +74,10 @@
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/App.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="345">
-              <caret line="53" column="30" lean-forward="true" selection-start-line="53" selection-start-column="30" selection-end-line="53" selection-end-column="30" />
+            <state relative-caret-position="90">
+              <caret line="24" column="39" lean-forward="true" selection-start-line="24" selection-start-column="39" selection-end-line="24" selection-end-column="39" />
               <folding>
                 <element signature="e#0#41#0" expanded="true" />
-                <element signature="n#!!block;n#handleClick#0;n#Board#0" />
-                <element signature="n#!!block;n#handleClearClick#0;n#Board#0" />
               </folding>
             </state>
           </provider>
@@ -87,8 +86,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/index.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="444">
-              <caret line="58" column="19" lean-forward="true" selection-start-line="58" selection-start-column="19" selection-end-line="58" selection-end-column="19" />
+            <state relative-caret-position="407">
+              <caret line="54" column="16" lean-forward="true" selection-start-line="54" selection-start-column="16" selection-end-line="54" selection-end-column="16" />
             </state>
           </provider>
         </entry>
@@ -144,10 +143,10 @@
     </packageJsonPaths>
   </component>
   <component name="ProjectFrameBounds" extendedState="6">
-    <option name="x" value="946" />
-    <option name="y" value="80" />
-    <option name="width" value="926" />
-    <option name="height" value="912" />
+    <option name="x" value="301" />
+    <option name="y" value="126" />
+    <option name="width" value="1074" />
+    <option name="height" value="728" />
   </component>
   <component name="ProjectView">
     <navigator proportions="" version="1">
@@ -203,12 +202,12 @@
       <option name="presentableId" value="Default" />
       <updated>1536779576428</updated>
       <workItem from="1536779579517" duration="2177000" />
-      <workItem from="1536819292611" duration="6900000" />
+      <workItem from="1536819292611" duration="10833000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="9077000" />
+    <option name="totallyTimeSpent" value="13010000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="67" y="25" width="1853" height="1055" extended-state="6" />
@@ -261,19 +260,17 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="444">
-          <caret line="58" column="19" lean-forward="true" selection-start-line="58" selection-start-column="19" selection-end-line="58" selection-end-column="19" />
+        <state relative-caret-position="407">
+          <caret line="54" column="16" lean-forward="true" selection-start-line="54" selection-start-column="16" selection-end-line="54" selection-end-column="16" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/App.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="345">
-          <caret line="53" column="30" lean-forward="true" selection-start-line="53" selection-start-column="30" selection-end-line="53" selection-end-column="30" />
+        <state relative-caret-position="90">
+          <caret line="24" column="39" lean-forward="true" selection-start-line="24" selection-start-column="39" selection-end-line="24" selection-end-column="39" />
           <folding>
             <element signature="e#0#41#0" expanded="true" />
-            <element signature="n#!!block;n#handleClick#0;n#Board#0" />
-            <element signature="n#!!block;n#handleClearClick#0;n#Board#0" />
           </folding>
         </state>
       </provider>
diff --git a/src/App.js b/src/App.js
index 566a7d6..a2245b4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -23,16 +23,26 @@ class Board extends React.Component {
     }
     handleDigitClick(value){
         let digits = this.state.digits;
-        digits += value.toString();
-        this.setState({digits: digits});
+        if (digits.length < 15) {
+            digits += value.toString();
+            this.setState({digits: digits});
+        }
     }
     handleClearClick(){
-        this.setState({digits: ''});
+        this.setState({
+            digits: '',
+            operation: '',
+            lhs: null,
+        });
+
     }
+
+    handleScreenClick(){}
+
     handleOperationClick(operation){
         const digits = this.state.digits;
         if (digits !== '') {
-            if (this.state.lhs == null) {
+            if (this.state.lhs == null && operation !== '=') {
                 const lhs = parseInt(digits, 10);
                 this.setState({lhs: lhs, operation: operation, digits: ''});
             }
@@ -56,7 +66,7 @@ class Board extends React.Component {
                         result = lhs / rhs;
                         break;
                 }
-                this.setState({lhs: null, digits: result.toString()})
+                this.setState({lhs: null, digits: result.toString(), operation: null})
             }
         }
 
@@ -68,15 +78,13 @@ class Board extends React.Component {
         return <Button value={i} class={'square'} onClick={()=>this.handleOperationClick(i)}/>;
     }
     renderClear(i) {
-        return <Button value={i} class={'clear'} onClick={()=>this.handleClearClick()}/>;
+        return <Button value={i} class={'square'} onClick={()=>this.handleClearClick()}/>;
     }
     renderScreen(i) {
-        return <Button value={i} class={'screen'}/>;
+        return <Button value={i} class={'screen'} onClick={()=>this.handleScreenClick()}/>;
     }
 
     render() {
-        const status = 'Next player: X';
-
         return (
             <div>
                 <div className="board-row">
@@ -102,8 +110,9 @@ class Board extends React.Component {
                 </div>
                 <div className="board-row">
                     {this.renderDigit(0)}
-                    {this.renderClear('clear')}
+                    {this.renderClear('C')}
                     {this.renderOperation('=')}
+                    {this.renderOperation('*')}
                 </div>
             </div>
         );
diff --git a/src/index.css b/src/index.css
index a43edd0..adfe2d5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -23,13 +23,13 @@ ol, ul {
   float: left;
   font-size: 24px;
   font-weight: bold;
-  line-height: 34px;
-  height: 34px;
+  line-height: 68px;
+  height: 68px;
   margin-right: -1px;
   margin-top: -1px;
   padding: 0;
   text-align: center;
-  width: 34px;
+  width: 68px;
 }
 
 .square:focus {
@@ -42,13 +42,13 @@ ol, ul {
   float: left;
   font-size: 24px;
   font-weight: bold;
-  line-height: 34px;
-  height: 34px;
+  line-height: 68px;
+  height: 68px;
   margin-right: -1px;
   margin-top: -1px;
   padding: 0;
   text-align: center;
-  width: 67px;
+  width: 135px;
 }
 
 .clear:focus {
@@ -61,13 +61,13 @@ ol, ul {
   float: left;
   font-size: 24px;
   font-weight: bold;
-  line-height: 34px;
-  height: 34px;
+  line-height: 68px;
+  height: 68px;
   margin-right: -1px;
   margin-top: -1px;
   padding-right: 10px;
   text-align: right;
-  width: 133px;
+  width: 269px;
 }
 
 .screen:focus {

From 4d2e226e0084f6c5b4cf3488a66752478147fb47 Mon Sep 17 00:00:00 2001
From: oleksandrkits <oleksandrkit@tahometer.com>
Date: Thu, 13 Sep 2018 14:42:27 +0300
Subject: [PATCH 5/9] Added validation on result. If it's longer than 15
 digits, user will be informed.

---
 .idea/workspace.xml | 17 ++++++++---------
 src/App.js          |  3 +++
 src/index.css       |  2 +-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b32ea76..32d57b5 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -3,7 +3,6 @@
   <component name="ChangeListManager">
     <list default="true" id="6007df67-6767-4896-baaa-c881467aef80" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.css" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -58,13 +57,13 @@
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
           <entry key="css" value="24" />
-          <entry key="js" value="1264" />
+          <entry key="js" value="1367" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
           <entry key="CSS" value="24" />
-          <entry key="JavaScript" value="1264" />
+          <entry key="JavaScript" value="1367" />
         </counts>
       </usages-collector>
     </session>
@@ -74,8 +73,8 @@
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/App.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="90">
-              <caret line="24" column="39" lean-forward="true" selection-start-line="24" selection-start-column="39" selection-end-line="24" selection-end-column="39" />
+            <state relative-caret-position="467">
+              <caret line="70" column="17" selection-start-line="70" selection-start-column="17" selection-end-line="70" selection-end-column="17" />
               <folding>
                 <element signature="e#0#41#0" expanded="true" />
               </folding>
@@ -202,12 +201,12 @@
       <option name="presentableId" value="Default" />
       <updated>1536779576428</updated>
       <workItem from="1536779579517" duration="2177000" />
-      <workItem from="1536819292611" duration="10833000" />
+      <workItem from="1536819292611" duration="11373000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="13010000" />
+    <option name="totallyTimeSpent" value="13550000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="67" y="25" width="1853" height="1055" extended-state="6" />
@@ -267,8 +266,8 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/App.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="90">
-          <caret line="24" column="39" lean-forward="true" selection-start-line="24" selection-start-column="39" selection-end-line="24" selection-end-column="39" />
+        <state relative-caret-position="467">
+          <caret line="70" column="17" selection-start-line="70" selection-start-column="17" selection-end-line="70" selection-end-column="17" />
           <folding>
             <element signature="e#0#41#0" expanded="true" />
           </folding>
diff --git a/src/App.js b/src/App.js
index a2245b4..af5a785 100644
--- a/src/App.js
+++ b/src/App.js
@@ -66,6 +66,9 @@ class Board extends React.Component {
                         result = lhs / rhs;
                         break;
                 }
+                if (result.toString().length > 15){
+                    result = 'Result is too large'
+                }
                 this.setState({lhs: null, digits: result.toString(), operation: null})
             }
         }
diff --git a/src/index.css b/src/index.css
index adfe2d5..4ebdd9c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,7 +21,7 @@ ol, ul {
   background: #fff;
   border: 1px solid #999;
   float: left;
-  font-size: 24px;
+  font-size: 30px;
   font-weight: bold;
   line-height: 68px;
   height: 68px;

From 2b412d241f50f90214c17e074f0bda3c5ff8e68d Mon Sep 17 00:00:00 2001
From: oleksandrkits <oleksandrkit@tahometer.com>
Date: Fri, 14 Sep 2018 10:33:36 +0300
Subject: [PATCH 6/9] Removed components into diffetent files. Button is
 functional component now.

---
 .gitignore                            |   1 +
 .idea/workspace.xml                   | 186 ++++++++++++++++++++------
 README.md                             |   4 +-
 src/{ => css}/App.css                 |   0
 src/{ => css}/index.css               |   0
 src/index.js                          |   8 +-
 src/js/App.js                         |  17 +++
 src/{ => js}/App.test.js              |   0
 src/js/Button.js                      |  11 ++
 src/{App.js => js/Calculator.js}      |  45 +------
 src/js/Screen.js                      |   0
 src/{ => js}/registerServiceWorker.js |   0
 12 files changed, 185 insertions(+), 87 deletions(-)
 rename src/{ => css}/App.css (100%)
 rename src/{ => css}/index.css (100%)
 create mode 100644 src/js/App.js
 rename src/{ => js}/App.test.js (100%)
 create mode 100644 src/js/Button.js
 rename src/{App.js => js/Calculator.js} (77%)
 create mode 100644 src/js/Screen.js
 rename src/{ => js}/registerServiceWorker.js (100%)

diff --git a/.gitignore b/.gitignore
index d30f40e..704fa39 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.idea
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 32d57b5..7caac7f 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,7 +2,16 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="6007df67-6767-4896-baaa-c881467aef80" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/js/App.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/App.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.test.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/App.test.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/index.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/registerServiceWorker.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/registerServiceWorker.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -57,57 +66,68 @@
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
           <entry key="css" value="24" />
-          <entry key="js" value="1367" />
+          <entry key="gitignore" value="8" />
+          <entry key="js" value="1475" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
           <entry key="CSS" value="24" />
-          <entry key="JavaScript" value="1367" />
+          <entry key="JavaScript" value="1475" />
+          <entry key="PLAIN_TEXT" value="8" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.extensions.open">
+        <counts>
+          <entry key="js" value="7" />
+          <entry key="json" value="2" />
+          <entry key="md" value="1" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.types.open">
+        <counts>
+          <entry key="JSON" value="2" />
+          <entry key="JavaScript" value="7" />
+          <entry key="Markdown" value="1" />
         </counts>
       </usages-collector>
     </session>
   </component>
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/src/App.js">
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/js/Calculator.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="467">
-              <caret line="70" column="17" selection-start-line="70" selection-start-column="17" selection-end-line="70" selection-end-column="17" />
+            <state relative-caret-position="495">
+              <caret line="87" column="22" lean-forward="true" selection-start-line="87" selection-start-column="22" selection-end-line="87" selection-end-column="22" />
               <folding>
-                <element signature="e#0#41#0" expanded="true" />
+                <element signature="e#0#26#0" expanded="true" />
+                <element signature="n#!!block;n#constructor#0;n#Calculator#0" />
+                <element signature="n#!!block;n#handleDigitClick#0;n#Calculator#0" />
+                <element signature="n#!!block;n#handleClearClick#0;n#Calculator#0" />
+                <element signature="n#!!block;n#handleOperationClick#0;n#Calculator#0" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/index.css">
+        <entry file="file://$PROJECT_DIR$/src/js/App.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="407">
-              <caret line="54" column="16" lean-forward="true" selection-start-line="54" selection-start-column="16" selection-end-line="54" selection-end-column="16" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/index.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="180">
-              <caret line="12" lean-forward="true" selection-start-line="3" selection-start-column="7" selection-end-line="3" selection-end-column="11" />
+            <state relative-caret-position="225">
+              <caret line="15" selection-start-line="15" selection-end-line="15" />
               <folding>
-                <element signature="e#0#26#0" expanded="true" />
+                <element signature="e#0#41#0" expanded="true" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/.gitignore">
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/js/Button.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="90">
-              <caret line="6" column="9" selection-start-line="6" selection-start-column="9" selection-end-line="6" selection-end-column="9" />
+            <state relative-caret-position="165">
+              <caret line="11" lean-forward="true" selection-start-line="11" selection-end-line="11" />
             </state>
           </provider>
         </entry>
@@ -120,10 +140,13 @@
   <component name="IdeDocumentHistory">
     <option name="CHANGED_PATHS">
       <list>
-        <option value="$PROJECT_DIR$/.gitignore" />
-        <option value="$PROJECT_DIR$/src/index.js" />
         <option value="$PROJECT_DIR$/src/index.css" />
+        <option value="$PROJECT_DIR$/.gitignore" />
+        <option value="$PROJECT_DIR$/src/Button.js" />
+        <option value="$PROJECT_DIR$/src/Calculator.js" />
         <option value="$PROJECT_DIR$/src/App.js" />
+        <option value="$PROJECT_DIR$/src/index.js" />
+        <option value="$PROJECT_DIR$/src/js/App.js" />
       </list>
     </option>
   </component>
@@ -147,11 +170,15 @@
     <option name="width" value="1074" />
     <option name="height" value="728" />
   </component>
+  <component name="ProjectLevelVcsManager">
+    <ConfirmationsSetting value="1" id="Add" />
+  </component>
   <component name="ProjectView">
     <navigator proportions="" version="1">
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
+      <pane id="Scope" />
       <pane id="ProjectPane">
         <subPane>
           <expand>
@@ -164,11 +191,16 @@
               <item name="calculator" type="462c0819:PsiDirectoryNode" />
               <item name="src" type="462c0819:PsiDirectoryNode" />
             </path>
+            <path>
+              <item name="calculator" type="b2602c69:ProjectViewProjectNode" />
+              <item name="calculator" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="js" type="462c0819:PsiDirectoryNode" />
+            </path>
           </expand>
           <select />
         </subPane>
       </pane>
-      <pane id="Scope" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -178,6 +210,13 @@
     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
     <property name="settings.editor.selected.configurable" value="org.jetbrains.plugins.ruby.settings.RubyActiveModuleSdkConfigurable" />
   </component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src" />
+      <recent name="$PROJECT_DIR$/src/css" />
+      <recent name="$PROJECT_DIR$/src/js" />
+    </key>
+  </component>
   <component name="RunDashboard">
     <option name="ruleStates">
       <list>
@@ -190,6 +229,7 @@
       </list>
     </option>
   </component>
+  <component name="SpringUtil" SPRING_PRE_LOADER_OPTION="true" />
   <component name="SvnConfiguration">
     <configuration />
   </component>
@@ -206,17 +246,17 @@
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="13550000" />
+    <option name="totallyTimeSpent" value="15844000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="67" y="25" width="1853" height="1055" extended-state="6" />
     <editor active="true" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25290537" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.2584394" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
-      <window_info anchor="bottom" id="Find" order="1" />
+      <window_info anchor="bottom" id="Find" order="1" weight="0.32900432" />
       <window_info anchor="bottom" id="Run" order="2" />
       <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
@@ -240,39 +280,101 @@
     <option name="myLimit" value="2678400000" />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/.gitignore">
+    <entry file="file://$PROJECT_DIR$/src/js/Screen.js">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/package.json">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/package-lock.json">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/css/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="90">
-          <caret line="6" column="9" selection-start-line="6" selection-start-column="9" selection-end-line="6" selection-end-column="9" />
+        <state relative-caret-position="630">
+          <caret line="59" column="25" selection-start-line="59" selection-start-column="25" selection-end-line="59" selection-end-column="25" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/js/App.test.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="30">
+          <caret line="2" column="18" selection-start-line="2" selection-start-column="18" selection-end-line="2" selection-end-column="18" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/README.md">
+      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+        <state split_layout="SPLIT">
+          <first_editor relative-caret-position="-240">
+            <caret line="89" column="10" selection-start-line="89" selection-start-column="10" selection-end-line="89" selection-end-column="10" />
+            <folding>
+              <element signature="e#0#41#0" expanded="true" />
+              <element signature="e#0#41#0" expanded="true" />
+              <element signature="e#0#26#0" expanded="true" />
+              <element signature="e#0#42#0" expanded="true" />
+              <element signature="e#0#26#0" expanded="true" />
+              <element signature="e#0#35#0" expanded="true" />
+              <element signature="e#0#26#0" expanded="true" />
+              <element signature="e#0#26#0" expanded="true" />
+              <element signature="n#!!doc" expanded="true" />
+              <element signature="e#0#26#0" expanded="true" />
+              <element signature="e#0#26#0" expanded="true" />
+              <element signature="e#0#28#0" expanded="true" />
+              <element signature="e#0#28#0" expanded="true" />
+            </folding>
+          </first_editor>
+          <second_editor />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="180">
-          <caret line="12" lean-forward="true" selection-start-line="3" selection-start-column="7" selection-end-line="3" selection-end-column="11" />
+        <state relative-caret-position="105">
+          <caret line="7" column="12" lean-forward="true" selection-start-line="7" selection-start-column="12" selection-end-line="7" selection-end-column="12" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.css">
+    <entry file="file://$PROJECT_DIR$/.gitignore">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="105">
+          <caret line="7" lean-forward="true" selection-start-line="7" selection-end-line="7" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/js/Calculator.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="407">
-          <caret line="54" column="16" lean-forward="true" selection-start-line="54" selection-start-column="16" selection-end-line="54" selection-end-column="16" />
+        <state relative-caret-position="495">
+          <caret line="87" column="22" lean-forward="true" selection-start-line="87" selection-start-column="22" selection-end-line="87" selection-end-column="22" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+            <element signature="n#!!block;n#constructor#0;n#Calculator#0" />
+            <element signature="n#!!block;n#handleDigitClick#0;n#Calculator#0" />
+            <element signature="n#!!block;n#handleClearClick#0;n#Calculator#0" />
+            <element signature="n#!!block;n#handleOperationClick#0;n#Calculator#0" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/App.js">
+    <entry file="file://$PROJECT_DIR$/src/js/App.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="467">
-          <caret line="70" column="17" selection-start-line="70" selection-start-column="17" selection-end-line="70" selection-end-column="17" />
+        <state relative-caret-position="225">
+          <caret line="15" selection-start-line="15" selection-end-line="15" />
           <folding>
             <element signature="e#0#41#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/js/Button.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="165">
+          <caret line="11" lean-forward="true" selection-start-line="11" selection-end-line="11" />
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>
\ No newline at end of file
diff --git a/README.md b/README.md
index 5bbfc5f..1d9e24f 100644
--- a/README.md
+++ b/README.md
@@ -1863,7 +1863,7 @@ If your production web server does not support HTTPS, then the service worker
 registration will fail, but the rest of your web app will remain functional.
 
 1. Service workers are [not currently supported](https://jakearchibald.github.io/isserviceworkerready/)
-in all web browsers. Service worker registration [won't be attempted](src/registerServiceWorker.js)
+in all web browsers. Service worker registration [won't be attempted](src/js/registerServiceWorker.js)
 on browsers that lack support.
 
 1. The service worker is only enabled in the [production environment](#deployment),
@@ -1897,7 +1897,7 @@ app works offline!" message) and also let them know when the service worker has
 fetched the latest updates that will be available the next time they load the
 page (showing a "New content is available; please refresh." message). Showing
 this messages is currently left as an exercise to the developer, but as a
-starting point, you can make use of the logic included in [`src/registerServiceWorker.js`](src/registerServiceWorker.js), which
+starting point, you can make use of the logic included in [`src/registerServiceWorker.js`](src/js/registerServiceWorker.js), which
 demonstrates which service worker lifecycle events to listen for to detect each
 scenario, and which as a default, just logs appropriate messages to the
 JavaScript console.
diff --git a/src/App.css b/src/css/App.css
similarity index 100%
rename from src/App.css
rename to src/css/App.css
diff --git a/src/index.css b/src/css/index.css
similarity index 100%
rename from src/index.css
rename to src/css/index.css
diff --git a/src/index.js b/src/index.js
index 2855f9d..9ccc330 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import Game from './App';
-import registerServiceWorker from './registerServiceWorker';
+import './css/index.css';
+import App from './js/App';
+import registerServiceWorker from './js/registerServiceWorker';
 
 ReactDOM.render(
-    <Game />,
+    <App />,
     document.getElementById('root')
 );
 
diff --git a/src/js/App.js b/src/js/App.js
new file mode 100644
index 0000000..9661fd2
--- /dev/null
+++ b/src/js/App.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import '../css/App.css';
+import Calculator from "./Calculator";
+
+class App extends React.Component {
+    render() {
+        return (
+            <div className="game">
+                <div className="game-board">
+                    <Calculator />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default App;
diff --git a/src/App.test.js b/src/js/App.test.js
similarity index 100%
rename from src/App.test.js
rename to src/js/App.test.js
diff --git a/src/js/Button.js b/src/js/Button.js
new file mode 100644
index 0000000..cc8a232
--- /dev/null
+++ b/src/js/Button.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Button(props) {
+    return (
+        <button className={props.class} onClick={() => props.onClick()}>
+            {props.value}
+        </button>
+    );
+}
+
+export default Button
\ No newline at end of file
diff --git a/src/App.js b/src/js/Calculator.js
similarity index 77%
rename from src/App.js
rename to src/js/Calculator.js
index af5a785..b6bb0f1 100644
--- a/src/App.js
+++ b/src/js/Calculator.js
@@ -1,18 +1,7 @@
-import React, { Component } from 'react';
-import './App.css';
+import React from "react";
+import Button from "./Button";
 
-class Button extends React.Component {
-    render() {
-        return (
-            <button className={this.props.class} onClick={() => this.props.onClick()}>
-                {this.props.value}
-            </button>
-        );
-    }
-}
-
-
-class Board extends React.Component {
+class Calculator extends React.Component {
     constructor(props){
         super(props);
         this.state = {
@@ -37,8 +26,6 @@ class Board extends React.Component {
 
     }
 
-    handleScreenClick(){}
-
     handleOperationClick(operation){
         const digits = this.state.digits;
         if (digits !== '') {
@@ -66,7 +53,7 @@ class Board extends React.Component {
                         result = lhs / rhs;
                         break;
                 }
-                if (result.toString().length > 15){
+                if (result.toString().length > 20){
                     result = 'Result is too large'
                 }
                 this.setState({lhs: null, digits: result.toString(), operation: null})
@@ -84,7 +71,7 @@ class Board extends React.Component {
         return <Button value={i} class={'square'} onClick={()=>this.handleClearClick()}/>;
     }
     renderScreen(i) {
-        return <Button value={i} class={'screen'} onClick={()=>this.handleScreenClick()}/>;
+        return <Button value={i} class={'screen'} onClick={()=> {}}/>;
     }
 
     render() {
@@ -122,24 +109,4 @@ class Board extends React.Component {
     }
 }
 
-class Game extends React.Component {
-    render() {
-        return (
-            <div className="game">
-                <div className="game-board">
-                    <Board />
-                </div>
-                <div className="game-info">
-                    <div>{/* status */}</div>
-                    <ol>{/* TODO */}</ol>
-                </div>
-            </div>
-        );
-    }
-}
-
-// ========================================
-
-
-
-export default Game;
+export default Calculator
\ No newline at end of file
diff --git a/src/js/Screen.js b/src/js/Screen.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/registerServiceWorker.js b/src/js/registerServiceWorker.js
similarity index 100%
rename from src/registerServiceWorker.js
rename to src/js/registerServiceWorker.js

From 8d7c54ddbf7f689dcd2921f16cf982ded80b1e79 Mon Sep 17 00:00:00 2001
From: oleksandrkits <oleksandrkit@tahometer.com>
Date: Fri, 14 Sep 2018 12:50:17 +0300
Subject: [PATCH 7/9] Separated css files.

---
 .idea/workspace.xml  | 221 ++++++++++++++++++++++++++++++++-----------
 src/css/Button.css   |  27 ++++++
 src/css/Screen.css   |  19 ++++
 src/css/index.css    |  45 ---------
 src/js/Button.js     |   4 +-
 src/js/Calculator.js |   9 +-
 src/js/Screen.js     |  12 +++
 7 files changed, 233 insertions(+), 104 deletions(-)
 create mode 100644 src/css/Button.css
 create mode 100644 src/css/Screen.css

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 7caac7f..6a06fdb 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,16 +2,11 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="6007df67-6767-4896-baaa-c881467aef80" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/src/js/App.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/App.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/App.test.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/App.test.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/index.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/registerServiceWorker.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/registerServiceWorker.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/css/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/index.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/js/Button.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/Button.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/js/Calculator.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/Calculator.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/js/Screen.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/Screen.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -60,34 +55,37 @@
       <usages-collector id="statistics.lifecycle.project">
         <counts>
           <entry key="project.open.time.2" value="1" />
-          <entry key="project.opened" value="1" />
+          <entry key="project.open.time.7" value="1" />
+          <entry key="project.opened" value="2" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="css" value="24" />
+          <entry key="css" value="98" />
           <entry key="gitignore" value="8" />
-          <entry key="js" value="1475" />
+          <entry key="js" value="2233" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
-          <entry key="CSS" value="24" />
-          <entry key="JavaScript" value="1475" />
+          <entry key="CSS" value="98" />
+          <entry key="JavaScript" value="2233" />
           <entry key="PLAIN_TEXT" value="8" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
         <counts>
-          <entry key="js" value="7" />
+          <entry key="css" value="3" />
+          <entry key="js" value="8" />
           <entry key="json" value="2" />
           <entry key="md" value="1" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
+          <entry key="CSS" value="3" />
           <entry key="JSON" value="2" />
-          <entry key="JavaScript" value="7" />
+          <entry key="JavaScript" value="8" />
           <entry key="Markdown" value="1" />
         </counts>
       </usages-collector>
@@ -95,14 +93,46 @@
   </component>
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/js/App.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="225">
+              <caret line="15" selection-start-line="15" selection-end-line="15" />
+              <folding>
+                <element signature="e#0#41#0" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/js/Button.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="180">
+              <caret line="12" column="21" lean-forward="true" selection-start-line="12" selection-start-column="21" selection-end-line="12" selection-end-column="21" />
+              <folding>
+                <element signature="e#0#26#0" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/css/Button.css">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="300">
+              <caret line="20" column="17" selection-start-line="20" selection-start-column="17" selection-end-line="20" selection-end-column="17" />
+            </state>
+          </provider>
+        </entry>
+      </file>
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/js/Calculator.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="495">
-              <caret line="87" column="22" lean-forward="true" selection-start-line="87" selection-start-column="22" selection-end-line="87" selection-end-column="22" />
+            <state relative-caret-position="135">
+              <caret line="9" column="26" lean-forward="true" selection-start-line="9" selection-start-column="26" selection-end-line="9" selection-end-column="26" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
-                <element signature="n#!!block;n#constructor#0;n#Calculator#0" />
                 <element signature="n#!!block;n#handleDigitClick#0;n#Calculator#0" />
                 <element signature="n#!!block;n#handleClearClick#0;n#Calculator#0" />
                 <element signature="n#!!block;n#handleOperationClick#0;n#Calculator#0" />
@@ -112,28 +142,53 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/js/App.js">
+        <entry file="file://$PROJECT_DIR$/src/js/Screen.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="225">
-              <caret line="15" selection-start-line="15" selection-end-line="15" />
+            <state relative-caret-position="75">
+              <caret line="5" column="12" selection-start-line="5" selection-start-column="12" selection-end-line="5" selection-end-column="12" />
               <folding>
-                <element signature="e#0#41#0" expanded="true" />
+                <element signature="e#0#26#0" expanded="true" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/src/js/Button.js">
+        <entry file="file://$PROJECT_DIR$/src/css/Screen.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="165">
-              <caret line="11" lean-forward="true" selection-start-line="11" selection-end-line="11" />
+            <state relative-caret-position="60">
+              <caret line="4" column="16" lean-forward="true" selection-start-line="4" selection-start-column="16" selection-end-line="4" selection-end-column="16" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/css/index.css">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="510">
+              <caret line="34" selection-start-line="34" selection-end-line="34" />
             </state>
           </provider>
         </entry>
       </file>
     </leaf>
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="JavaScript File" />
+        <option value="CSS File" />
+      </list>
+    </option>
+  </component>
+  <component name="FindInProjectRecents">
+    <findStrings>
+      <find>Button</find>
+    </findStrings>
+    <replaceStrings>
+      <replace>Screen</replace>
+    </replaceStrings>
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
@@ -147,6 +202,12 @@
         <option value="$PROJECT_DIR$/src/App.js" />
         <option value="$PROJECT_DIR$/src/index.js" />
         <option value="$PROJECT_DIR$/src/js/App.js" />
+        <option value="$PROJECT_DIR$/src/js/Calculator.js" />
+        <option value="$PROJECT_DIR$/src/js/Button.js" />
+        <option value="$PROJECT_DIR$/src/css/Button.css" />
+        <option value="$PROJECT_DIR$/src/css/index.css" />
+        <option value="$PROJECT_DIR$/src/css/Screen.css" />
+        <option value="$PROJECT_DIR$/src/js/Screen.js" />
       </list>
     </option>
   </component>
@@ -164,11 +225,11 @@
       <path value="$PROJECT_DIR$/package.json" />
     </packageJsonPaths>
   </component>
-  <component name="ProjectFrameBounds" extendedState="6">
-    <option name="x" value="301" />
-    <option name="y" value="126" />
-    <option name="width" value="1074" />
-    <option name="height" value="728" />
+  <component name="ProjectFrameBounds" extendedState="4">
+    <option name="x" value="67" />
+    <option name="y" value="25" />
+    <option name="width" value="1262" />
+    <option name="height" value="1055" />
   </component>
   <component name="ProjectLevelVcsManager">
     <ConfirmationsSetting value="1" id="Add" />
@@ -191,6 +252,12 @@
               <item name="calculator" type="462c0819:PsiDirectoryNode" />
               <item name="src" type="462c0819:PsiDirectoryNode" />
             </path>
+            <path>
+              <item name="calculator" type="b2602c69:ProjectViewProjectNode" />
+              <item name="calculator" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="css" type="462c0819:PsiDirectoryNode" />
+            </path>
             <path>
               <item name="calculator" type="b2602c69:ProjectViewProjectNode" />
               <item name="calculator" type="462c0819:PsiDirectoryNode" />
@@ -206,6 +273,7 @@
   <component name="PropertiesComponent">
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="list.type.of.created.stylesheet" value="CSS" />
     <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
     <property name="settings.editor.selected.configurable" value="org.jetbrains.plugins.ruby.settings.RubyActiveModuleSdkConfigurable" />
@@ -242,17 +310,18 @@
       <updated>1536779576428</updated>
       <workItem from="1536779579517" duration="2177000" />
       <workItem from="1536819292611" duration="11373000" />
+      <workItem from="1536914952657" duration="3475000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="15844000" />
+    <option name="totallyTimeSpent" value="20972000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="67" y="25" width="1853" height="1055" extended-state="6" />
+    <frame x="67" y="25" width="1262" height="1055" extended-state="4" />
     <editor active="true" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.2584394" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25822368" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
@@ -272,6 +341,27 @@
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
       <window_info anchor="right" id="Database" order="3" />
     </layout>
+    <layout-to-restore>
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25822368" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info id="Favorites" order="2" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Find" order="1" weight="0.32900432" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
+      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
+      <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Database Changes" order="8" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="9" />
+      <window_info anchor="bottom" id="Terminal" order="10" />
+      <window_info anchor="bottom" id="Event Log" order="11" side_tool="true" />
+      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+      <window_info anchor="right" id="Database" order="3" />
+    </layout-to-restore>
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="1" />
@@ -280,22 +370,12 @@
     <option name="myLimit" value="2678400000" />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/src/js/Screen.js">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
     <entry file="file://$PROJECT_DIR$/package.json">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
     <entry file="file://$PROJECT_DIR$/package-lock.json">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/css/index.css">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="630">
-          <caret line="59" column="25" selection-start-line="59" selection-start-column="25" selection-end-line="59" selection-end-column="25" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/js/App.test.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="30">
@@ -345,16 +425,12 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/js/Calculator.js">
+    <entry file="file://$PROJECT_DIR$/src/js/Button.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="495">
-          <caret line="87" column="22" lean-forward="true" selection-start-line="87" selection-start-column="22" selection-end-line="87" selection-end-column="22" />
+        <state relative-caret-position="180">
+          <caret line="12" column="21" lean-forward="true" selection-start-line="12" selection-start-column="21" selection-end-line="12" selection-end-column="21" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
-            <element signature="n#!!block;n#constructor#0;n#Calculator#0" />
-            <element signature="n#!!block;n#handleDigitClick#0;n#Calculator#0" />
-            <element signature="n#!!block;n#handleClearClick#0;n#Calculator#0" />
-            <element signature="n#!!block;n#handleOperationClick#0;n#Calculator#0" />
           </folding>
         </state>
       </provider>
@@ -369,10 +445,47 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/js/Button.js">
+    <entry file="file://$PROJECT_DIR$/src/js/Calculator.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="135">
+          <caret line="9" column="26" lean-forward="true" selection-start-line="9" selection-start-column="26" selection-end-line="9" selection-end-column="26" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+            <element signature="n#!!block;n#handleDigitClick#0;n#Calculator#0" />
+            <element signature="n#!!block;n#handleClearClick#0;n#Calculator#0" />
+            <element signature="n#!!block;n#handleOperationClick#0;n#Calculator#0" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/css/Button.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="300">
+          <caret line="20" column="17" selection-start-line="20" selection-start-column="17" selection-end-line="20" selection-end-column="17" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/css/index.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="510">
+          <caret line="34" selection-start-line="34" selection-end-line="34" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/js/Screen.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="75">
+          <caret line="5" column="12" selection-start-line="5" selection-start-column="12" selection-end-line="5" selection-end-column="12" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/css/Screen.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="165">
-          <caret line="11" lean-forward="true" selection-start-line="11" selection-end-line="11" />
+        <state relative-caret-position="60">
+          <caret line="4" column="16" lean-forward="true" selection-start-line="4" selection-start-column="16" selection-end-line="4" selection-end-column="16" />
         </state>
       </provider>
     </entry>
diff --git a/src/css/Button.css b/src/css/Button.css
new file mode 100644
index 0000000..b1e98a8
--- /dev/null
+++ b/src/css/Button.css
@@ -0,0 +1,27 @@
+.square {
+    background: #fff;
+    border: 1px solid #999;
+    float: left;
+    font-size: 30px;
+    font-weight: bold;
+    line-height: 68px;
+    height: 68px;
+    margin-right: -1px;
+    margin-top: -1px;
+    padding: 0;
+    text-align: center;
+    width: 68px;
+}
+
+.square:focus {
+    outline: none;
+}
+
+.digit {
+    color: black;
+}
+
+.operation {
+    color: white;
+    background-color: salmon;
+}
\ No newline at end of file
diff --git a/src/css/Screen.css b/src/css/Screen.css
new file mode 100644
index 0000000..dbf3637
--- /dev/null
+++ b/src/css/Screen.css
@@ -0,0 +1,19 @@
+.screen {
+    background: #433437;
+    color: white;
+    border: 1px solid #999;
+    float: left;
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 68px;
+    height: 68px;
+    margin-right: -1px;
+    margin-top: -1px;
+    padding-right: 10px;
+    text-align: right;
+    width: 257px;
+}
+
+.screen:focus {
+    outline: none;
+}
\ No newline at end of file
diff --git a/src/css/index.css b/src/css/index.css
index 4ebdd9c..90fb4f1 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -13,29 +13,6 @@ ol, ul {
   display: table;
 }
 
-.status {
-  margin-bottom: 10px;
-}
-
-.square {
-  background: #fff;
-  border: 1px solid #999;
-  float: left;
-  font-size: 30px;
-  font-weight: bold;
-  line-height: 68px;
-  height: 68px;
-  margin-right: -1px;
-  margin-top: -1px;
-  padding: 0;
-  text-align: center;
-  width: 68px;
-}
-
-.square:focus {
-  outline: none;
-}
-
 .clear {
   background: #fff;
   border: 1px solid #999;
@@ -55,25 +32,6 @@ ol, ul {
   outline: none;
 }
 
-.screen {
-  background: #fff;
-  border: 1px solid #999;
-  float: left;
-  font-size: 24px;
-  font-weight: bold;
-  line-height: 68px;
-  height: 68px;
-  margin-right: -1px;
-  margin-top: -1px;
-  padding-right: 10px;
-  text-align: right;
-  width: 269px;
-}
-
-.screen:focus {
-  outline: none;
-}
-
 .kbd-navigation .square:focus {
   background: #ddd;
 }
@@ -83,6 +41,3 @@ ol, ul {
   flex-direction: row;
 }
 
-.game-info {
-  margin-left: 20px;
-}
diff --git a/src/js/Button.js b/src/js/Button.js
index cc8a232..d583e01 100644
--- a/src/js/Button.js
+++ b/src/js/Button.js
@@ -1,8 +1,10 @@
 import React from "react";
+import '../css/Button.css';
 
 function Button(props) {
+    const className = `square ${props.style}`;
     return (
-        <button className={props.class} onClick={() => props.onClick()}>
+        <button className={className} onClick={() => props.onClick()}>
             {props.value}
         </button>
     );
diff --git a/src/js/Calculator.js b/src/js/Calculator.js
index b6bb0f1..228c600 100644
--- a/src/js/Calculator.js
+++ b/src/js/Calculator.js
@@ -1,5 +1,6 @@
 import React from "react";
 import Button from "./Button";
+import Screen from "./Screen";
 
 class Calculator extends React.Component {
     constructor(props){
@@ -62,16 +63,16 @@ class Calculator extends React.Component {
 
     }
     renderDigit(i) {
-        return <Button value={i} class={'square'} onClick={()=>this.handleDigitClick(i)}/>;
+        return <Button value={i} style={'digit'} onClick={()=>this.handleDigitClick(i)}/>;
     }
     renderOperation(i) {
-        return <Button value={i} class={'square'} onClick={()=>this.handleOperationClick(i)}/>;
+        return <Button value={i} style={'operation'} onClick={()=>this.handleOperationClick(i)}/>;
     }
     renderClear(i) {
         return <Button value={i} class={'square'} onClick={()=>this.handleClearClick()}/>;
     }
-    renderScreen(i) {
-        return <Button value={i} class={'screen'} onClick={()=> {}}/>;
+    renderScreen(digits) {
+        return <Screen digits={digits} class={'screen'} />;
     }
 
     render() {
diff --git a/src/js/Screen.js b/src/js/Screen.js
index e69de29..7437b19 100644
--- a/src/js/Screen.js
+++ b/src/js/Screen.js
@@ -0,0 +1,12 @@
+import React from "react";
+import '../css/Screen.css';
+function Screen(props) {
+
+    return (
+        <div className='screen'>
+            {props.digits}
+        </div>
+    );
+}
+
+export default Screen
\ No newline at end of file

From 6baeb9e3e724aee25e767081d99e2f5895409f7a Mon Sep 17 00:00:00 2001
From: oleksandrkits <oleksandrkit@tahometer.com>
Date: Fri, 14 Sep 2018 17:37:47 +0300
Subject: [PATCH 8/9] Added styles for calculator

---
 .idea/workspace.xml  | 206 +++++++++++++++++++++++--------------------
 package-lock.json    |  72 +++++++++++++++
 package.json         |   3 +-
 src/index.js         |  10 ++-
 src/js/App.js        |  50 ++++++++++-
 src/js/BMI.js        |  63 +++++++++++++
 src/js/Calculator.js |  82 ++++++++++-------
 src/js/DataInput.js  |  12 +++
 src/js/Screen.js     |   1 +
 9 files changed, 363 insertions(+), 136 deletions(-)
 create mode 100644 src/js/BMI.js
 create mode 100644 src/js/DataInput.js

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 6a06fdb..1ce9b7e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,11 +2,7 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="6007df67-6767-4896-baaa-c881467aef80" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/css/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/index.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/js/Button.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/Button.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/js/Calculator.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/Calculator.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/js/Screen.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/Screen.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/js/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/App.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -54,38 +50,39 @@
     <session id="-81091790">
       <usages-collector id="statistics.lifecycle.project">
         <counts>
+          <entry key="project.open.time.1" value="1" />
           <entry key="project.open.time.2" value="1" />
-          <entry key="project.open.time.7" value="1" />
-          <entry key="project.opened" value="2" />
+          <entry key="project.open.time.7" value="2" />
+          <entry key="project.opened" value="4" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
           <entry key="css" value="98" />
           <entry key="gitignore" value="8" />
-          <entry key="js" value="2233" />
+          <entry key="js" value="3054" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
           <entry key="CSS" value="98" />
-          <entry key="JavaScript" value="2233" />
+          <entry key="JavaScript" value="3054" />
           <entry key="PLAIN_TEXT" value="8" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
         <counts>
           <entry key="css" value="3" />
-          <entry key="js" value="8" />
-          <entry key="json" value="2" />
+          <entry key="js" value="14" />
+          <entry key="json" value="3" />
           <entry key="md" value="1" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
           <entry key="CSS" value="3" />
-          <entry key="JSON" value="2" />
-          <entry key="JavaScript" value="8" />
+          <entry key="JSON" value="3" />
+          <entry key="JavaScript" value="14" />
           <entry key="Markdown" value="1" />
         </counts>
       </usages-collector>
@@ -94,58 +91,57 @@
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/js/App.js">
+        <entry file="file://$PROJECT_DIR$/src/js/Calculator.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="225">
-              <caret line="15" selection-start-line="15" selection-end-line="15" />
+            <state relative-caret-position="135">
+              <caret line="11" column="9" selection-end-line="128" selection-end-column="25" />
               <folding>
-                <element signature="e#0#41#0" expanded="true" />
+                <element signature="e#0#26#0" expanded="true" />
+                <element signature="n#!!block;n#handleDigitClick#0;n#Calculator#0" />
+                <element signature="n#!!block;n#handleClearClick#0;n#Calculator#0" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/js/Button.js">
+        <entry file="file://$PROJECT_DIR$/src/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="180">
-              <caret line="12" column="21" lean-forward="true" selection-start-line="12" selection-start-column="21" selection-end-line="12" selection-end-column="21" />
-              <folding>
-                <element signature="e#0#26#0" expanded="true" />
-              </folding>
+            <state relative-caret-position="45">
+              <caret line="3" column="27" selection-start-line="3" selection-start-column="27" selection-end-line="4" selection-end-column="48" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/css/Button.css">
+        <entry file="file://$PROJECT_DIR$/src/js/App.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="300">
-              <caret line="20" column="17" selection-start-line="20" selection-start-column="17" selection-end-line="20" selection-end-column="17" />
+            <state relative-caret-position="495">
+              <caret line="33" column="10" lean-forward="true" selection-start-line="33" selection-start-column="10" selection-end-line="33" selection-end-column="10" />
+              <folding>
+                <element signature="e#0#41#0" expanded="true" />
+              </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/js/Calculator.js">
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/js/BMI.js">
           <provider selected="true" editor-type-id="text-editor">
             <state relative-caret-position="135">
-              <caret line="9" column="26" lean-forward="true" selection-start-line="9" selection-start-column="26" selection-end-line="9" selection-end-column="26" />
+              <caret line="9" column="23" lean-forward="true" selection-start-line="9" selection-start-column="23" selection-end-line="9" selection-end-column="23" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
-                <element signature="n#!!block;n#handleDigitClick#0;n#Calculator#0" />
-                <element signature="n#!!block;n#handleClearClick#0;n#Calculator#0" />
-                <element signature="n#!!block;n#handleOperationClick#0;n#Calculator#0" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/js/Screen.js">
+        <entry file="file://$PROJECT_DIR$/src/js/DataInput.js">
           <provider selected="true" editor-type-id="text-editor">
             <state relative-caret-position="75">
-              <caret line="5" column="12" selection-start-line="5" selection-start-column="12" selection-end-line="5" selection-end-column="12" />
+              <caret line="6" selection-start-line="6" selection-end-line="6" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
               </folding>
@@ -153,20 +149,14 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/src/css/Screen.css">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="60">
-              <caret line="4" column="16" lean-forward="true" selection-start-line="4" selection-start-column="16" selection-end-line="4" selection-end-column="16" />
-            </state>
-          </provider>
-        </entry>
-      </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/css/index.css">
+        <entry file="file://$PROJECT_DIR$/src/js/Button.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="510">
-              <caret line="34" selection-start-line="34" selection-end-line="34" />
+            <state>
+              <caret selection-end-line="12" selection-end-column="21" />
+              <folding>
+                <element signature="e#0#26#0" expanded="true" />
+              </folding>
             </state>
           </provider>
         </entry>
@@ -176,14 +166,15 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="JavaScript File" />
         <option value="CSS File" />
+        <option value="JavaScript File" />
       </list>
     </option>
   </component>
   <component name="FindInProjectRecents">
     <findStrings>
       <find>Button</find>
+      <find>react</find>
     </findStrings>
     <replaceStrings>
       <replace>Screen</replace>
@@ -200,14 +191,16 @@
         <option value="$PROJECT_DIR$/src/Button.js" />
         <option value="$PROJECT_DIR$/src/Calculator.js" />
         <option value="$PROJECT_DIR$/src/App.js" />
-        <option value="$PROJECT_DIR$/src/index.js" />
-        <option value="$PROJECT_DIR$/src/js/App.js" />
-        <option value="$PROJECT_DIR$/src/js/Calculator.js" />
-        <option value="$PROJECT_DIR$/src/js/Button.js" />
         <option value="$PROJECT_DIR$/src/css/Button.css" />
         <option value="$PROJECT_DIR$/src/css/index.css" />
         <option value="$PROJECT_DIR$/src/css/Screen.css" />
         <option value="$PROJECT_DIR$/src/js/Screen.js" />
+        <option value="$PROJECT_DIR$/src/js/Button.js" />
+        <option value="$PROJECT_DIR$/src/js/Calculator.js" />
+        <option value="$PROJECT_DIR$/src/index.js" />
+        <option value="$PROJECT_DIR$/src/js/BMI.js" />
+        <option value="$PROJECT_DIR$/src/js/DataInput.js" />
+        <option value="$PROJECT_DIR$/src/js/App.js" />
       </list>
     </option>
   </component>
@@ -225,11 +218,11 @@
       <path value="$PROJECT_DIR$/package.json" />
     </packageJsonPaths>
   </component>
-  <component name="ProjectFrameBounds" extendedState="4">
-    <option name="x" value="67" />
-    <option name="y" value="25" />
-    <option name="width" value="1262" />
-    <option name="height" value="1055" />
+  <component name="ProjectFrameBounds" extendedState="6">
+    <option name="x" value="142" />
+    <option name="y" value="476" />
+    <option name="width" value="1084" />
+    <option name="height" value="728" />
   </component>
   <component name="ProjectLevelVcsManager">
     <ConfirmationsSetting value="1" id="Add" />
@@ -310,18 +303,20 @@
       <updated>1536779576428</updated>
       <workItem from="1536779579517" duration="2177000" />
       <workItem from="1536819292611" duration="11373000" />
-      <workItem from="1536914952657" duration="3475000" />
+      <workItem from="1536914952657" duration="4296000" />
+      <workItem from="1536924423052" duration="9018000" />
+      <workItem from="1537785451120" duration="322000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="20972000" />
+    <option name="totallyTimeSpent" value="31133000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="67" y="25" width="1262" height="1055" extended-state="4" />
+    <frame x="67" y="25" width="1853" height="1055" extended-state="6" />
     <editor active="true" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25822368" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.1776425" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
@@ -373,9 +368,6 @@
     <entry file="file://$PROJECT_DIR$/package.json">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/package-lock.json">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/js/App.test.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="30">
@@ -408,84 +400,104 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.js">
+    <entry file="file://$PROJECT_DIR$/.gitignore">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="105">
-          <caret line="7" column="12" lean-forward="true" selection-start-line="7" selection-start-column="12" selection-end-line="7" selection-end-column="12" />
-          <folding>
-            <element signature="e#0#26#0" expanded="true" />
-          </folding>
+          <caret line="7" lean-forward="true" selection-start-line="7" selection-end-line="7" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/.gitignore">
+    <entry file="file://$PROJECT_DIR$/src/css/Screen.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="105">
-          <caret line="7" lean-forward="true" selection-start-line="7" selection-end-line="7" />
+        <state relative-caret-position="60">
+          <caret line="4" column="16" lean-forward="true" selection-start-line="4" selection-start-column="16" selection-end-line="4" selection-end-column="16" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/js/Button.js">
+    <entry file="file://$PROJECT_DIR$/src/css/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="180">
-          <caret line="12" column="21" lean-forward="true" selection-start-line="12" selection-start-column="21" selection-end-line="12" selection-end-column="21" />
-          <folding>
-            <element signature="e#0#26#0" expanded="true" />
-          </folding>
+        <state relative-caret-position="510">
+          <caret line="34" selection-start-line="34" selection-end-line="34" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/js/App.js">
+    <entry file="file://$PROJECT_DIR$/src/css/Button.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="225">
-          <caret line="15" selection-start-line="15" selection-end-line="15" />
-          <folding>
-            <element signature="e#0#41#0" expanded="true" />
-          </folding>
+        <state relative-caret-position="300">
+          <caret line="20" column="17" selection-start-line="20" selection-start-column="17" selection-end-line="20" selection-end-column="17" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/js/Screen.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="30">
+          <caret line="2" selection-start-line="2" selection-end-line="2" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/package-lock.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="-111180">
+          <caret line="1092" column="32" selection-start-line="1092" selection-start-column="32" selection-end-line="1092" selection-end-column="32" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/js/Calculator.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="135">
-          <caret line="9" column="26" lean-forward="true" selection-start-line="9" selection-start-column="26" selection-end-line="9" selection-end-column="26" />
+          <caret line="11" column="9" selection-end-line="128" selection-end-column="25" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
             <element signature="n#!!block;n#handleDigitClick#0;n#Calculator#0" />
             <element signature="n#!!block;n#handleClearClick#0;n#Calculator#0" />
-            <element signature="n#!!block;n#handleOperationClick#0;n#Calculator#0" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/css/Button.css">
+    <entry file="file://$PROJECT_DIR$/src/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="300">
-          <caret line="20" column="17" selection-start-line="20" selection-start-column="17" selection-end-line="20" selection-end-column="17" />
+        <state relative-caret-position="45">
+          <caret line="3" column="27" selection-start-line="3" selection-start-column="27" selection-end-line="4" selection-end-column="48" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/css/index.css">
+    <entry file="file://$PROJECT_DIR$/src/js/DataInput.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="510">
-          <caret line="34" selection-start-line="34" selection-end-line="34" />
+        <state relative-caret-position="75">
+          <caret line="6" selection-start-line="6" selection-end-line="6" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/js/Screen.js">
+    <entry file="file://$PROJECT_DIR$/src/js/Button.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="75">
-          <caret line="5" column="12" selection-start-line="5" selection-start-column="12" selection-end-line="5" selection-end-column="12" />
+        <state>
+          <caret selection-end-line="12" selection-end-column="21" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/css/Screen.css">
+    <entry file="file://$PROJECT_DIR$/src/js/App.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="60">
-          <caret line="4" column="16" lean-forward="true" selection-start-line="4" selection-start-column="16" selection-end-line="4" selection-end-column="16" />
+        <state relative-caret-position="495">
+          <caret line="33" column="10" lean-forward="true" selection-start-line="33" selection-start-column="10" selection-end-line="33" selection-end-column="10" />
+          <folding>
+            <element signature="e#0#41#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/js/BMI.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="135">
+          <caret line="9" column="23" lean-forward="true" selection-start-line="9" selection-start-column="23" selection-end-line="9" selection-end-column="23" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
diff --git a/package-lock.json b/package-lock.json
index 92a7cc3..44451fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4655,6 +4655,28 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0="
     },
+    "history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "requires": {
+        "invariant": "2.2.4",
+        "loose-envify": "1.4.0",
+        "resolve-pathname": "2.2.0",
+        "value-equal": "0.4.0",
+        "warning": "3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "1.4.0"
+          }
+        }
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -4665,6 +4687,11 @@
         "minimalistic-crypto-utils": "1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+    },
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -8411,6 +8438,33 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.1.tgz",
       "integrity": "sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw=="
     },
+    "react-router": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
+      "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
+      "requires": {
+        "history": "4.7.2",
+        "hoist-non-react-statics": "2.5.5",
+        "invariant": "2.2.4",
+        "loose-envify": "1.4.0",
+        "path-to-regexp": "1.7.0",
+        "prop-types": "15.6.2",
+        "warning": "4.0.2"
+      }
+    },
+    "react-router-dom": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+      "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+      "requires": {
+        "history": "4.7.2",
+        "invariant": "2.2.4",
+        "loose-envify": "1.4.0",
+        "prop-types": "15.6.2",
+        "react-router": "4.3.1",
+        "warning": "4.0.2"
+      }
+    },
     "react-scripts": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.5.tgz",
@@ -8803,6 +8857,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
       "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY="
     },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -10163,6 +10222,11 @@
         "spdx-expression-parse": "3.0.0"
       }
     },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -10199,6 +10263,14 @@
         "makeerror": "1.0.11"
       }
     },
+    "warning": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+      "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+      "requires": {
+        "loose-envify": "1.4.0"
+      }
+    },
     "watch": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",
diff --git a/package.json b/package.json
index ac1cf36..f841cd3 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.5.0",
     "react-dom": "^16.5.0",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.5"
   },
   "scripts": {
@@ -13,4 +14,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
\ No newline at end of file
+}
diff --git a/src/index.js b/src/index.js
index 9ccc330..21c8de8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,11 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './css/index.css';
 import App from './js/App';
+import { BrowserRouter } from 'react-router-dom'
 import registerServiceWorker from './js/registerServiceWorker';
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('root')
-);
+ReactDOM.render((
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>
+), document.getElementById('root'));
 
 registerServiceWorker();
diff --git a/src/js/App.js b/src/js/App.js
index 9661fd2..89c1de8 100644
--- a/src/js/App.js
+++ b/src/js/App.js
@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import '../css/App.css';
 import Calculator from "./Calculator";
+import BMI from "./BMI";
+import {Switch, Route, Link } from 'react-router-dom';
 
-class App extends React.Component {
+class CalcWrapper extends React.Component {
     render() {
         return (
             <div className="game">
@@ -14,4 +16,50 @@ class App extends React.Component {
     }
 }
 
+class BmiWrapper extends React.Component {
+    render() {
+        return (
+            <div className="game">
+                <div className="game-board">
+                    <BMI />
+                </div>
+            </div>
+        );
+    }
+}
+
+const Home = () => (
+    <div>
+        <h1>Welcome to my calc!</h1>
+    </div>
+)
+
+const App = () => (
+    <div>
+        <Header />
+        <Main />
+    </div>
+);
+
+const Main = () => (
+    <main>
+        <Switch>
+            <Route exact path='/' component={Home}/>
+            <Route path='/simple' component={CalcWrapper}/>
+            <Route path='/bmi' component={BmiWrapper}/>
+        </Switch>
+    </main>
+);
+
+const Header = () => (
+    <header>
+        <nav>
+            <ul>
+                <li><Link to='/'>Home</Link></li>
+                <li><Link to='/simple'>Simple</Link></li>
+                <li><Link to='/bmi'>BMI</Link></li>
+            </ul>
+        </nav>
+    </header>
+);
 export default App;
diff --git a/src/js/BMI.js b/src/js/BMI.js
new file mode 100644
index 0000000..04d5748
--- /dev/null
+++ b/src/js/BMI.js
@@ -0,0 +1,63 @@
+import React from "react";
+import Button from "./Button";
+import Screen from "./Screen";
+import DataInput from "./DataInput";
+
+class BMI extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            digits: '',
+            operation: '',
+            lhs: '',
+        }
+    }
+    handleDigitClick(value){
+        let digits = this.state.digits;
+        if (digits.length < 15) {
+            digits += value.toString();
+            this.setState({digits: digits});
+        }
+    }
+    handleClearClick(){
+        this.setState({
+            digits: '',
+            operation: '',
+            lhs: null,
+        });
+
+    }
+
+    handleOperationClick(operation){
+
+    }
+    renderDataInput(label) {
+        return <DataInput label={label} />;
+    }
+    renderScreen(digits) {
+        return <Screen digits={digits} />;
+    }
+    // renderButton(label) {
+    //     <Button/>
+    // }
+    render() {
+        return (
+            <div>
+                <div className="board-row">
+                    {this.renderScreen(this.state.digits)}
+                </div>
+                <div className="board-row">
+                    {this.renderDataInput('kg')}
+                </div>
+                <div className="board-row">
+                    {this.renderDataInput('cm')}
+                </div>
+                {/*<div className="board-row">*/}
+                    {/*{this.renderButton('evaluate')}*/}
+                {/*</div>*/}
+            </div>
+        );
+    }
+}
+
+export default BMI
\ No newline at end of file
diff --git a/src/js/Calculator.js b/src/js/Calculator.js
index 228c600..8ff1926 100644
--- a/src/js/Calculator.js
+++ b/src/js/Calculator.js
@@ -8,7 +8,7 @@ class Calculator extends React.Component {
         this.state = {
             digits: '',
             operation: '',
-            lhs: null,
+            lhs: '',
         }
     }
     handleDigitClick(value){
@@ -28,39 +28,55 @@ class Calculator extends React.Component {
     }
 
     handleOperationClick(operation){
-        const digits = this.state.digits;
-        if (digits !== '') {
-            if (this.state.lhs == null && operation !== '=') {
-                const lhs = parseInt(digits, 10);
-                this.setState({lhs: lhs, operation: operation, digits: ''});
+        // const digits = this.state.digits;
+        // if (digits !== '') {
+        //     if (this.state.lhs == null && operation !== '=') {
+        //         const lhs = parseInt(digits, 10);
+        //         this.setState({lhs: lhs, operation: operation, digits: ''});
+        //     }
+        //     else if (operation === '=') {
+        //         const lhs = this.state.lhs;
+        //         const rhs = parseInt(digits, 10);
+        //
+        //         let result;
+        //         switch (this.state.operation) {
+        //             case '+':
+        //                 result = lhs + rhs;
+        //                 break;
+        //             case '-':
+        //                 console.log('minus');
+        //                 result = lhs - rhs;
+        //                 break;
+        //             case '*':
+        //                 result = lhs * rhs;
+        //                 break;
+        //             case '÷':
+        //                 result = lhs / rhs;
+        //                 break;
+        //         }
+        //         if (result.toString().length > 20){
+        //             result = 'Result is too large'
+        //         }
+        //         this.setState({lhs: null, digits: result.toString(), operation: null})
+        //     }
+        // }
+        let lhs = this.state.lhs;
+        if (lhs === ''){
+            return;
+        }
+        else {
+            if (['-', '*', '/', '+'].includes(lhs.slice(-1))) {
+                lhs = lhs.slice(0, -1);
             }
-            else if (operation === '=') {
-                const lhs = this.state.lhs;
-                const rhs = parseInt(digits, 10);
-
-                let result;
-                switch (this.state.operation) {
-                    case '+':
-                        result = lhs + rhs;
-                        break;
-                    case '-':
-                        console.log('minus');
-                        result = lhs - rhs;
-                        break;
-                    case '*':
-                        result = lhs * rhs;
-                        break;
-                    case '÷':
-                        result = lhs / rhs;
-                        break;
-                }
-                if (result.toString().length > 20){
-                    result = 'Result is too large'
-                }
-                this.setState({lhs: null, digits: result.toString(), operation: null})
+            if (operation === '=') {
+                const result = eval(lhs);
+                this.setState({digits: result, lhs: ''});
+            }
+            else {
+                lhs = lhs.concat(operation);
+                this.setState({lhs: lhs, digits: ''});
             }
         }
-
     }
     renderDigit(i) {
         return <Button value={i} style={'digit'} onClick={()=>this.handleDigitClick(i)}/>;
@@ -72,7 +88,7 @@ class Calculator extends React.Component {
         return <Button value={i} class={'square'} onClick={()=>this.handleClearClick()}/>;
     }
     renderScreen(digits) {
-        return <Screen digits={digits} class={'screen'} />;
+        return <Screen digits={digits} />;
     }
 
     render() {
@@ -85,7 +101,7 @@ class Calculator extends React.Component {
                     {this.renderDigit(1)}
                     {this.renderDigit(2)}
                     {this.renderDigit(3)}
-                    {this.renderOperation('÷')}
+                    {this.renderOperation('/')}
                 </div>
                 <div className="board-row">
                     {this.renderDigit(4)}
diff --git a/src/js/DataInput.js b/src/js/DataInput.js
new file mode 100644
index 0000000..3ba4ef0
--- /dev/null
+++ b/src/js/DataInput.js
@@ -0,0 +1,12 @@
+import React from "react";
+import '../css/Button.css';
+
+function DataInput(props) {
+    return (
+        <input type="number">ihkl<input/>
+
+
+    )
+}
+
+export default DataInput
\ No newline at end of file
diff --git a/src/js/Screen.js b/src/js/Screen.js
index 7437b19..f5b9604 100644
--- a/src/js/Screen.js
+++ b/src/js/Screen.js
@@ -1,5 +1,6 @@
 import React from "react";
 import '../css/Screen.css';
+
 function Screen(props) {
 
     return (

From 9b80359726e18316fc207a858ce7bd7f926aab44 Mon Sep 17 00:00:00 2001
From: oleksandrkits <oleksandrkit@tahometer.com>
Date: Mon, 24 Sep 2018 14:26:48 +0300
Subject: [PATCH 9/9] Added BMI calculator.

---
 .idea/workspace.xml  | 188 ++++++++++++++++++++++++++++++-------------
 src/css/Button.css   |   4 +
 src/js/BMI.js        |  79 ++++++++++--------
 src/js/Calculator.js |   2 +-
 src/js/Input.js      |  11 +++
 src/js/InputBlock.js |  25 ++++++
 src/js/Label.js      |  11 +++
 src/js/Screen.js     |   2 +-
 8 files changed, 230 insertions(+), 92 deletions(-)
 create mode 100644 src/js/Input.js
 create mode 100644 src/js/InputBlock.js
 create mode 100644 src/js/Label.js

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1ce9b7e..f9f3350 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,7 +2,11 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="6007df67-6767-4896-baaa-c881467aef80" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/src/js/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/App.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/css/Button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/Button.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/js/BMI.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/BMI.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/js/Calculator.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/Calculator.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/js/Screen.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/Screen.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -52,37 +56,38 @@
         <counts>
           <entry key="project.open.time.1" value="1" />
           <entry key="project.open.time.2" value="1" />
+          <entry key="project.open.time.5" value="1" />
           <entry key="project.open.time.7" value="2" />
-          <entry key="project.opened" value="4" />
+          <entry key="project.opened" value="5" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="css" value="98" />
+          <entry key="css" value="117" />
           <entry key="gitignore" value="8" />
-          <entry key="js" value="3054" />
+          <entry key="js" value="3095" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
-          <entry key="CSS" value="98" />
-          <entry key="JavaScript" value="3054" />
+          <entry key="CSS" value="117" />
+          <entry key="JavaScript" value="3095" />
           <entry key="PLAIN_TEXT" value="8" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
         <counts>
-          <entry key="css" value="3" />
-          <entry key="js" value="14" />
+          <entry key="css" value="4" />
+          <entry key="js" value="19" />
           <entry key="json" value="3" />
           <entry key="md" value="1" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
-          <entry key="CSS" value="3" />
+          <entry key="CSS" value="4" />
           <entry key="JSON" value="3" />
-          <entry key="JavaScript" value="14" />
+          <entry key="JavaScript" value="19" />
           <entry key="Markdown" value="1" />
         </counts>
       </usages-collector>
@@ -93,8 +98,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/js/Calculator.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="135">
-              <caret line="11" column="9" selection-end-line="128" selection-end-column="25" />
+            <state relative-caret-position="390">
+              <caret line="101" column="41" lean-forward="true" selection-start-line="101" selection-start-column="41" selection-end-line="101" selection-end-column="41" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
                 <element signature="n#!!block;n#handleDigitClick#0;n#Calculator#0" />
@@ -104,20 +109,11 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/index.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="45">
-              <caret line="3" column="27" selection-start-line="3" selection-start-column="27" selection-end-line="4" selection-end-column="48" />
-            </state>
-          </provider>
-        </entry>
-      </file>
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/js/App.js">
           <provider selected="true" editor-type-id="text-editor">
             <state relative-caret-position="495">
-              <caret line="33" column="10" lean-forward="true" selection-start-line="33" selection-start-column="10" selection-end-line="33" selection-end-column="10" />
+              <caret line="33" column="10" selection-start-line="33" selection-start-column="10" selection-end-line="33" selection-end-column="10" />
               <folding>
                 <element signature="e#0#41#0" expanded="true" />
               </folding>
@@ -128,8 +124,8 @@
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/js/BMI.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="135">
-              <caret line="9" column="23" lean-forward="true" selection-start-line="9" selection-start-column="23" selection-end-line="9" selection-end-column="23" />
+            <state relative-caret-position="392">
+              <caret line="51" column="5" lean-forward="true" selection-start-line="51" selection-start-column="5" selection-end-line="51" selection-end-column="5" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
               </folding>
@@ -137,10 +133,49 @@
           </provider>
         </entry>
       </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/js/InputBlock.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="240">
+              <caret line="16" column="17" lean-forward="true" selection-start-line="16" selection-start-column="17" selection-end-line="16" selection-end-column="17" />
+              <folding>
+                <element signature="e#1#27#0" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/js/Label.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="150">
+              <caret line="10" column="21" selection-start-line="10" selection-start-column="21" selection-end-line="10" selection-end-column="21" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/js/Input.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="150">
+              <caret line="10" column="21" lean-forward="true" selection-start-line="10" selection-start-column="21" selection-end-line="10" selection-end-column="21" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/js/Screen.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="165">
+              <caret line="12" column="21" lean-forward="true" selection-start-line="12" selection-start-column="21" selection-end-line="12" selection-end-column="21" />
+            </state>
+          </provider>
+        </entry>
+      </file>
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/js/DataInput.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="75">
+            <state relative-caret-position="90">
               <caret line="6" selection-start-line="6" selection-end-line="6" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
@@ -152,8 +187,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/js/Button.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state>
-              <caret selection-end-line="12" selection-end-column="21" />
+            <state relative-caret-position="75">
+              <caret line="5" column="12" lean-forward="true" selection-start-line="5" selection-start-column="12" selection-end-line="5" selection-end-column="12" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
               </folding>
@@ -161,6 +196,15 @@
           </provider>
         </entry>
       </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/css/Button.css">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="435">
+              <caret line="29" column="17" lean-forward="true" selection-start-line="29" selection-start-column="17" selection-end-line="29" selection-end-column="17" />
+            </state>
+          </provider>
+        </entry>
+      </file>
     </leaf>
   </component>
   <component name="FileTemplateManagerImpl">
@@ -191,16 +235,19 @@
         <option value="$PROJECT_DIR$/src/Button.js" />
         <option value="$PROJECT_DIR$/src/Calculator.js" />
         <option value="$PROJECT_DIR$/src/App.js" />
-        <option value="$PROJECT_DIR$/src/css/Button.css" />
         <option value="$PROJECT_DIR$/src/css/index.css" />
         <option value="$PROJECT_DIR$/src/css/Screen.css" />
-        <option value="$PROJECT_DIR$/src/js/Screen.js" />
         <option value="$PROJECT_DIR$/src/js/Button.js" />
-        <option value="$PROJECT_DIR$/src/js/Calculator.js" />
         <option value="$PROJECT_DIR$/src/index.js" />
-        <option value="$PROJECT_DIR$/src/js/BMI.js" />
         <option value="$PROJECT_DIR$/src/js/DataInput.js" />
         <option value="$PROJECT_DIR$/src/js/App.js" />
+        <option value="$PROJECT_DIR$/src/js/InputBlock.js" />
+        <option value="$PROJECT_DIR$/src/js/Label.js" />
+        <option value="$PROJECT_DIR$/src/js/Input.js" />
+        <option value="$PROJECT_DIR$/src/css/Button.css" />
+        <option value="$PROJECT_DIR$/src/js/Calculator.js" />
+        <option value="$PROJECT_DIR$/src/js/Screen.js" />
+        <option value="$PROJECT_DIR$/src/js/BMI.js" />
       </list>
     </option>
   </component>
@@ -306,17 +353,18 @@
       <workItem from="1536914952657" duration="4296000" />
       <workItem from="1536924423052" duration="9018000" />
       <workItem from="1537785451120" duration="322000" />
+      <workItem from="1537786403343" duration="1865000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="31133000" />
+    <option name="totallyTimeSpent" value="32998000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="67" y="25" width="1853" height="1055" extended-state="6" />
     <editor active="true" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.1776425" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.17985612" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
@@ -421,31 +469,62 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/package-lock.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="-111180">
+          <caret line="1092" column="32" selection-start-line="1092" selection-start-column="32" selection-end-line="1092" selection-end-column="32" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/index.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="45">
+          <caret line="3" column="27" selection-start-line="3" selection-start-column="27" selection-end-line="4" selection-end-column="48" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/js/DataInput.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="90">
+          <caret line="6" selection-start-line="6" selection-end-line="6" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/css/Button.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="300">
-          <caret line="20" column="17" selection-start-line="20" selection-start-column="17" selection-end-line="20" selection-end-column="17" />
+        <state relative-caret-position="435">
+          <caret line="29" column="17" lean-forward="true" selection-start-line="29" selection-start-column="17" selection-end-line="29" selection-end-column="17" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/js/Screen.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="30">
-          <caret line="2" selection-start-line="2" selection-end-line="2" />
+        <state relative-caret-position="165">
+          <caret line="12" column="21" lean-forward="true" selection-start-line="12" selection-start-column="21" selection-end-line="12" selection-end-column="21" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/package-lock.json">
+    <entry file="file://$PROJECT_DIR$/src/js/Input.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-111180">
-          <caret line="1092" column="32" selection-start-line="1092" selection-start-column="32" selection-end-line="1092" selection-end-column="32" />
+        <state relative-caret-position="150">
+          <caret line="10" column="21" lean-forward="true" selection-start-line="10" selection-start-column="21" selection-end-line="10" selection-end-column="21" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/js/Label.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="150">
+          <caret line="10" column="21" selection-start-line="10" selection-start-column="21" selection-end-line="10" selection-end-column="21" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/js/Calculator.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="135">
-          <caret line="11" column="9" selection-end-line="128" selection-end-column="25" />
+        <state relative-caret-position="390">
+          <caret line="101" column="41" lean-forward="true" selection-start-line="101" selection-start-column="41" selection-end-line="101" selection-end-column="41" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
             <element signature="n#!!block;n#handleDigitClick#0;n#Calculator#0" />
@@ -454,27 +533,20 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="45">
-          <caret line="3" column="27" selection-start-line="3" selection-start-column="27" selection-end-line="4" selection-end-column="48" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/js/DataInput.js">
+    <entry file="file://$PROJECT_DIR$/src/js/InputBlock.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="75">
-          <caret line="6" selection-start-line="6" selection-end-line="6" />
+        <state relative-caret-position="240">
+          <caret line="16" column="17" lean-forward="true" selection-start-line="16" selection-start-column="17" selection-end-line="16" selection-end-column="17" />
           <folding>
-            <element signature="e#0#26#0" expanded="true" />
+            <element signature="e#1#27#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/js/Button.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state>
-          <caret selection-end-line="12" selection-end-column="21" />
+        <state relative-caret-position="75">
+          <caret line="5" column="12" lean-forward="true" selection-start-line="5" selection-start-column="12" selection-end-line="5" selection-end-column="12" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
@@ -484,7 +556,7 @@
     <entry file="file://$PROJECT_DIR$/src/js/App.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="495">
-          <caret line="33" column="10" lean-forward="true" selection-start-line="33" selection-start-column="10" selection-end-line="33" selection-end-column="10" />
+          <caret line="33" column="10" selection-start-line="33" selection-start-column="10" selection-end-line="33" selection-end-column="10" />
           <folding>
             <element signature="e#0#41#0" expanded="true" />
           </folding>
@@ -493,8 +565,8 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/js/BMI.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="135">
-          <caret line="9" column="23" lean-forward="true" selection-start-line="9" selection-start-column="23" selection-end-line="9" selection-end-column="23" />
+        <state relative-caret-position="392">
+          <caret line="51" column="5" lean-forward="true" selection-start-line="51" selection-start-column="5" selection-end-line="51" selection-end-column="5" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
diff --git a/src/css/Button.css b/src/css/Button.css
index b1e98a8..3d6d8dc 100644
--- a/src/css/Button.css
+++ b/src/css/Button.css
@@ -24,4 +24,8 @@
 .operation {
     color: white;
     background-color: salmon;
+}
+
+.double {
+    width: 136px;
 }
\ No newline at end of file
diff --git a/src/js/BMI.js b/src/js/BMI.js
index 04d5748..7909570 100644
--- a/src/js/BMI.js
+++ b/src/js/BMI.js
@@ -1,63 +1,78 @@
 import React from "react";
 import Button from "./Button";
 import Screen from "./Screen";
-import DataInput from "./DataInput";
+import InputBlock from "./InputBlock";
 
 class BMI extends React.Component {
     constructor(props){
         super(props);
         this.state = {
-            digits: '',
-            operation: '',
-            lhs: '',
-        }
+            bmi_value: '',
+            kg: null,
+            cm: null,
+        };
     }
-    handleDigitClick(value){
-        let digits = this.state.digits;
-        if (digits.length < 15) {
-            digits += value.toString();
-            this.setState({digits: digits});
-        }
+    handleCalculateClick(){
+        let cm = this.state.cm;
+        let kg = this.state.kg;
+
+        cm = this.validateInputParams(cm);
+        kg = this.validateInputParams(kg);
+
+        cm = this.centimeterToMeter(cm);
+
+        const bmi_value = kg / cm ** 2;
+        this.setState({bmi_value: bmi_value.toFixed(2)});
     }
-    handleClearClick(){
-        this.setState({
-            digits: '',
-            operation: '',
-            lhs: null,
-        });
 
+    centimeterToMeter(cm){
+        return cm/100;
     }
 
-    handleOperationClick(operation){
+    validateInputParams(param){
+        try {
+            return parseInt(param)
+        }
+        catch (e) {
+            this.setState({bmi_value: 'Wrong input'})
+        }
+    }
+
+    handleWeightInput = e => this.setState({kg: e.target.value});
+    handleHeightInput = e => this.setState({cm: e.target.value});
 
+    renderInputBlock(label, onChange){
+        return <InputBlock label={label} class={'square'} onValueChange={onChange} />;
     }
-    renderDataInput(label) {
-        return <DataInput label={label} />;
+    renderButton(label) {
+        return <Button value={label}
+                       style={'double'}
+                       onClick={() => this.handleCalculateClick()}
+        />;
     }
-    renderScreen(digits) {
-        return <Screen digits={digits} />;
+    renderScreen(label) {
+        return <Screen value={label} class={'screen'} />;
     }
-    // renderButton(label) {
-    //     <Button/>
-    // }
+
     render() {
         return (
             <div>
                 <div className="board-row">
-                    {this.renderScreen(this.state.digits)}
+                    {this.renderScreen(this.state.bmi_value)}
                 </div>
                 <div className="board-row">
-                    {this.renderDataInput('kg')}
+                    {this.renderInputBlock('kg', this.handleWeightInput)}
                 </div>
                 <div className="board-row">
-                    {this.renderDataInput('cm')}
+                    {this.renderInputBlock('cm', this.handleHeightInput)}
                 </div>
-                {/*<div className="board-row">*/}
-                    {/*{this.renderButton('evaluate')}*/}
-                {/*</div>*/}
+                <div className="board-row">
+                    {this.renderButton("Calculate")}
+                </div>
+
             </div>
         );
     }
 }
 
-export default BMI
\ No newline at end of file
+export default BMI;
\ No newline at end of file
diff --git a/src/js/Calculator.js b/src/js/Calculator.js
index 8ff1926..6a9fda0 100644
--- a/src/js/Calculator.js
+++ b/src/js/Calculator.js
@@ -88,7 +88,7 @@ class Calculator extends React.Component {
         return <Button value={i} class={'square'} onClick={()=>this.handleClearClick()}/>;
     }
     renderScreen(digits) {
-        return <Screen digits={digits} />;
+        return <Screen value={digits} />;
     }
 
     render() {
diff --git a/src/js/Input.js b/src/js/Input.js
new file mode 100644
index 0000000..dca7bd2
--- /dev/null
+++ b/src/js/Input.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+class Input extends React.Component {
+    render() {
+        return (
+            <input type='text' onChange={this.props.onValueChange}/>
+        );
+    }
+}
+
+export default Input;
\ No newline at end of file
diff --git a/src/js/InputBlock.js b/src/js/InputBlock.js
new file mode 100644
index 0000000..52f9c81
--- /dev/null
+++ b/src/js/InputBlock.js
@@ -0,0 +1,25 @@
+import React from "react";
+import Label from "./Label";
+import Input from "./Input";
+
+class InputBlock extends React.Component {
+
+    renderLabel(label){
+        return <Label label={label}/>
+    }
+
+    renderInput(onValueChange){
+        return <Input onValueChange={onValueChange}/>
+    }
+
+    render() {
+        return (
+            <div>
+                {this.renderInput(this.props.onValueChange)}
+                {this.renderLabel(this.props.label)}
+            </div>
+        );
+    }
+}
+
+export default InputBlock;
\ No newline at end of file
diff --git a/src/js/Label.js b/src/js/Label.js
new file mode 100644
index 0000000..4fc9c29
--- /dev/null
+++ b/src/js/Label.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+class Label extends React.Component {
+    render() {
+        return (
+            <label >{this.props.label}</label>
+        );
+    }
+}
+
+export default Label;
\ No newline at end of file
diff --git a/src/js/Screen.js b/src/js/Screen.js
index f5b9604..315ac0d 100644
--- a/src/js/Screen.js
+++ b/src/js/Screen.js
@@ -5,7 +5,7 @@ function Screen(props) {
 
     return (
         <div className='screen'>
-            {props.digits}
+            {props.value}
         </div>
     );
 }