figbertmath

commit 097ac4cabd013f5cda289d85872a5b6dbdaf5c4e
parent 4feddc67fd9aced662be3ac47fa8869ceceefbeb
Author: therealFIGBERT <figbertwelner@gmail.com>
Date:   Sat, 23 Nov 2019 11:36:38 -0800

Make the buttons clickable, move the font out of the components folder, move basicPad to calcPads folder

Diffstat:
M
src/components/App.js
 | 
2
+-
M
src/components/calcButton.js
 | 
13
+++----------
D
src/components/calcPads.js
 | 
16
----------------
A
src/components/calcPads/basicPad.js
 | 
16
++++++++++++++++
R
src/components/font/Tomorrow-Regular.ttf -> src/font/Tomorrow-Regular.ttf
 | 
0

M
src/index.css
 | 
2
+-

6 files changed, 21 insertions(+), 28 deletions(-)
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import './App.css';
 import { CalcOut } from "./calcOut";
-import { BasicPad } from "./calcPads";
+import { BasicPad } from "./calcPads/basicPad";
 
 export class App extends React.Component {
   constructor(props) {
diff --git a/src/components/calcButton.js b/src/components/calcButton.js
@@ -2,18 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 class CalcButton extends React.Component {
-    buttonFlex = {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        fontSize: '3vw'
-    };
-
     render() {
         return (
-            <div style={this.buttonFlex} className='calc calc__button'>
-                {this.props.value}
-            </div>
+            <button type='button' className='calc calc__button' value={this.props.value}>
+                <span style={{fontSize: '2.5vw'}}>{this.props.value}</span>
+            </button>
         );
     }
 }
diff --git a/src/components/calcPads.js b/src/components/calcPads.js
@@ -1,15 +0,0 @@
-import React from "react";
-import { CalcButtonRow } from "./calcButton";
-
-export class BasicPad extends React.Component {
-    render() {
-        return (
-            <div className='calc calc__pad'>
-                <CalcButtonRow buttonValues={['AC', '±', '%', '÷']} />
-                <CalcButtonRow buttonValues={['4', '5', '6', '–']} />
-                <CalcButtonRow buttonValues={['1', '2', '3', '+']} />
-                <CalcButtonRow buttonValues={['0', '.', '=']} />
-            </div>
-        );
-    }
-}
-\ No newline at end of file
diff --git a/src/components/calcPads/basicPad.js b/src/components/calcPads/basicPad.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { CalcButtonRow } from "../calcButton";
+
+export class BasicPad extends React.Component {
+    render() {
+        return (
+            <div className='calc calc__pad'>
+                <CalcButtonRow buttonValues={['AC', '±', '%', '÷']} />
+                <CalcButtonRow buttonValues={['4', '5', '6', '–']} />
+                <CalcButtonRow buttonValues={['1', '2', '3', '+']} />
+                <CalcButtonRow buttonValues={['0', '.', '=']} />
+            </div>
+        );
+    }
+}
+\ No newline at end of file
diff --git a/src/components/font/Tomorrow-Regular.ttf b/src/font/Tomorrow-Regular.ttf
Binary files differ.
diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,6 @@
 @font-face {
     font-family: Tomorrow;
-    src: url("components/font/Tomorrow-Regular.ttf");
+    src: url("font/Tomorrow-Regular.ttf");
 }
 
 body {