figbertmath

commit eef41832c917da77b1072fba7d9c6708fdb43b07
parent 2ad58cd5e9fa5464f3aeea80856a1ee10810fb46
Author: therealFIGBERT <figbertwelner@gmail.com>
Date:   Fri, 22 Nov 2019 09:19:22 -0800

Localize font, add PropTypes package, convert CSS calcOut id to subclass of CSS calc class, make calcOut a subclass of React.Component

Diffstat:
M
package.json
 | 
1
+
M
src/components/App.css
 | 
12
+++++++++---
M
src/components/App.js
 | 
7
++-----
A
src/components/calcOut.js
 | 
21
+++++++++++++++++++++
A
src/components/font/Tomorrow-Regular.ttf
 | 
0

5 files changed, 33 insertions(+), 8 deletions(-)
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.2.0"
diff --git a/src/components/App.css b/src/components/App.css
@@ -1,9 +1,15 @@
-@import url('https://fonts.googleapis.com/css?family=Tomorrow&display=swap');
+@font-face {
+    font-family: Tomorrow;
+    src: url("font/Tomorrow-Regular.ttf");
+}
 
-#calcOut {
+.calc {
     background: #ac1a2d;
     color: rgba(255, 255, 255, .7);
-    font-family: 'Tomorrow', -apple-system, sans-serif;
+    font-family: Tomorrow, -apple-system, sans-serif;
+}
+
+.calc__out {
     font-size: xx-large;
     text-align: right;
     line-height: 75%;
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './App.css';
+import { CalcOut } from "./calcOut";
 
 export class App extends React.Component {
   constructor(props) {
@@ -14,11 +15,7 @@ export class App extends React.Component {
   render() {
     return (
         <div>
-          <div id='calcOut'>
-            {this.state.output}
-            <br/>
-            <span style={{fontSize: 'large'}}>{this.state.input}</span>
-          </div>
+          <CalcOut output={this.state.output} input={this.state.input} />
         </div>
     );
   }
diff --git a/src/components/calcOut.js b/src/components/calcOut.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './App.css'
+
+export class CalcOut extends React.Component {
+    render() {
+        return (
+            <div className='calc calc__out'>
+                {this.props.output}
+                <br/>
+                <span style={{fontSize: 'large'}}>{this.props.input}</span>
+            </div>
+        );
+    }
+}
+
+CalcOut.propTypes = {
+    output: PropTypes.number.isRequired,
+    input: PropTypes.number.isRequired
+};
+\ No newline at end of file
diff --git a/src/components/font/Tomorrow-Regular.ttf b/src/components/font/Tomorrow-Regular.ttf
Binary files differ.