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/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..f9f3350
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,577 @@
+<?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$/.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" />
+    <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>
+    <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.5" value="1" />
+          <entry key="project.open.time.7" value="2" />
+          <entry key="project.opened" value="5" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.extensions.edit">
+        <counts>
+          <entry key="css" value="117" />
+          <entry key="gitignore" value="8" />
+          <entry key="js" value="3095" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.types.edit">
+        <counts>
+          <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="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="4" />
+          <entry key="JSON" value="3" />
+          <entry key="JavaScript" value="19" />
+          <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="false">
+        <entry file="file://$PROJECT_DIR$/src/js/Calculator.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <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" />
+                <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/App.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="495">
+              <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>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <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="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>
+            </state>
+          </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="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>
+      </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="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>
+            </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="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">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <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>
+    </replaceStrings>
+  </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$/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/css/index.css" />
+        <option value="$PROJECT_DIR$/src/css/Screen.css" />
+        <option value="$PROJECT_DIR$/src/js/Button.js" />
+        <option value="$PROJECT_DIR$/src/index.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>
+  <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="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" />
+  </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>
+            <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" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="js" 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="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" />
+  </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>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="SpringUtil" SPRING_PRE_LOADER_OPTION="true" />
+  <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" />
+      <workItem from="1536819292611" duration="11373000" />
+      <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="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.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" />
+      <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>
+    <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" />
+  </component>
+  <component name="VcsContentAnnotationSettings">
+    <option name="myLimit" value="2678400000" />
+  </component>
+  <component name="editorHistoryManager">
+    <entry file="file://$PROJECT_DIR$/package.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">
+          <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$/.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/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>
+    <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$/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="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="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$/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>
+    <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="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" />
+            <element signature="n#!!block;n#handleClearClick#0;n#Calculator#0" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <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>
+    <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" 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>
+        </state>
+      </provider>
+    </entry>
+    <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" 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="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>
+        </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/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/App.js b/src/App.js
deleted file mode 100644
index 203067e..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,21 +0,0 @@
-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>
-    );
-  }
-}
-
-export default App;
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/css/Button.css b/src/css/Button.css
new file mode 100644
index 0000000..3d6d8dc
--- /dev/null
+++ b/src/css/Button.css
@@ -0,0 +1,31 @@
+.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;
+}
+
+.double {
+    width: 136px;
+}
\ 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
new file mode 100644
index 0000000..90fb4f1
--- /dev/null
+++ b/src/css/index.css
@@ -0,0 +1,43 @@
+body {
+  font: 14px "Century Gothic", Futura, sans-serif;
+  margin: 20px;
+}
+
+ol, ul {
+  padding-left: 30px;
+}
+
+.board-row:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.clear {
+  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: 0;
+  text-align: center;
+  width: 135px;
+}
+
+.clear:focus {
+  outline: none;
+}
+
+.kbd-navigation .square:focus {
+  background: #ddd;
+}
+
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index b4cc725..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,5 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}
diff --git a/src/index.js b/src/index.js
index fae3e35..21c8de8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import './css/index.css';
+import App from './js/App';
+import { BrowserRouter } from 'react-router-dom'
+import registerServiceWorker from './js/registerServiceWorker';
+
+ReactDOM.render((
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>
+), document.getElementById('root'));
 
-ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();
diff --git a/src/js/App.js b/src/js/App.js
new file mode 100644
index 0000000..89c1de8
--- /dev/null
+++ b/src/js/App.js
@@ -0,0 +1,65 @@
+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 CalcWrapper extends React.Component {
+    render() {
+        return (
+            <div className="game">
+                <div className="game-board">
+                    <Calculator />
+                </div>
+            </div>
+        );
+    }
+}
+
+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/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/BMI.js b/src/js/BMI.js
new file mode 100644
index 0000000..7909570
--- /dev/null
+++ b/src/js/BMI.js
@@ -0,0 +1,78 @@
+import React from "react";
+import Button from "./Button";
+import Screen from "./Screen";
+import InputBlock from "./InputBlock";
+
+class BMI extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            bmi_value: '',
+            kg: null,
+            cm: null,
+        };
+    }
+    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)});
+    }
+
+    centimeterToMeter(cm){
+        return cm/100;
+    }
+
+    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} />;
+    }
+    renderButton(label) {
+        return <Button value={label}
+                       style={'double'}
+                       onClick={() => this.handleCalculateClick()}
+        />;
+    }
+    renderScreen(label) {
+        return <Screen value={label} class={'screen'} />;
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="board-row">
+                    {this.renderScreen(this.state.bmi_value)}
+                </div>
+                <div className="board-row">
+                    {this.renderInputBlock('kg', this.handleWeightInput)}
+                </div>
+                <div className="board-row">
+                    {this.renderInputBlock('cm', this.handleHeightInput)}
+                </div>
+                <div className="board-row">
+                    {this.renderButton("Calculate")}
+                </div>
+
+            </div>
+        );
+    }
+}
+
+export default BMI;
\ No newline at end of file
diff --git a/src/js/Button.js b/src/js/Button.js
new file mode 100644
index 0000000..d583e01
--- /dev/null
+++ b/src/js/Button.js
@@ -0,0 +1,13 @@
+import React from "react";
+import '../css/Button.css';
+
+function Button(props) {
+    const className = `square ${props.style}`;
+    return (
+        <button className={className} onClick={() => props.onClick()}>
+            {props.value}
+        </button>
+    );
+}
+
+export default Button
\ No newline at end of file
diff --git a/src/js/Calculator.js b/src/js/Calculator.js
new file mode 100644
index 0000000..6a9fda0
--- /dev/null
+++ b/src/js/Calculator.js
@@ -0,0 +1,129 @@
+import React from "react";
+import Button from "./Button";
+import Screen from "./Screen";
+
+class Calculator 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){
+        // 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);
+            }
+            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)}/>;
+    }
+    renderOperation(i) {
+        return <Button value={i} style={'operation'} onClick={()=>this.handleOperationClick(i)}/>;
+    }
+    renderClear(i) {
+        return <Button value={i} class={'square'} onClick={()=>this.handleClearClick()}/>;
+    }
+    renderScreen(digits) {
+        return <Screen value={digits} />;
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="board-row">
+                    {this.renderScreen(this.state.digits)}
+                </div>
+                <div className="board-row">
+                    {this.renderDigit(1)}
+                    {this.renderDigit(2)}
+                    {this.renderDigit(3)}
+                    {this.renderOperation('/')}
+                </div>
+                <div className="board-row">
+                    {this.renderDigit(4)}
+                    {this.renderDigit(5)}
+                    {this.renderDigit(6)}
+                    {this.renderOperation('-')}
+                </div>
+                <div className="board-row">
+                    {this.renderDigit(7)}
+                    {this.renderDigit(8)}
+                    {this.renderDigit(9)}
+                    {this.renderOperation('+')}
+                </div>
+                <div className="board-row">
+                    {this.renderDigit(0)}
+                    {this.renderClear('C')}
+                    {this.renderOperation('=')}
+                    {this.renderOperation('*')}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Calculator
\ No newline at end of file
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/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
new file mode 100644
index 0000000..315ac0d
--- /dev/null
+++ b/src/js/Screen.js
@@ -0,0 +1,13 @@
+import React from "react";
+import '../css/Screen.css';
+
+function Screen(props) {
+
+    return (
+        <div className='screen'>
+            {props.value}
+        </div>
+    );
+}
+
+export default Screen
\ No newline at end of file
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