Merge pull request #2 from harlexkhal/components

Math magicians: Components

README.md

@@ -1,8 +1,8 @@
-# Mathemagician | M4Wx
+# Mathemagician | M3Wx
 
 > "Mathemagician" is a web app for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and read a random math-related quote.
 
-[//]:![screenshot](branding/demo.png)
+![screenshot](branding/demo.png)
 
 Our goal here is to Build a single page web application for mathematics weebs using the React library
 

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

src/App.css

@@ -1,39 +1,55 @@
-.App {
-  text-align: center;
+.main {
+  margin-right: auto;
+  margin-left: auto;
+  width: 50%;
+  margin-top: 10px;
+  border: 1px solid black;
+  background-color: #fcf6f6;
+  padding: 15px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.display {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  height: 120px;
+  background-color: #b2beb5;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.pixel {
+  color: white;
+  margin-right: 10px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.ctrls {
+  display: flex;
+}
+
+.ctrl-btn-row {
+  margin-right: 1px;
+  width: 25%;
+  height: 100px;
+  padding: 10px;
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  align-items: center;
 }
 
-.App-link {
-  color: #61dafb;
+.font {
+  font-size: xx-large;
+  font-family: 'Comic Sans MS', serif;
+  font-weight: 500;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
+.ctrl-btn-2-row {
+  width: 50%;
+}
+
+.bg-ash {
+  background-color: #f5f5f5;
+}
 
-  to {
-    transform: rotate(360deg);
-  }
+.bg-orange {
+  background-color: #ff8c00;
 }

src/App.js

@@ -1,28 +1,9 @@
-import logo from './logo.svg';
 import './App.css';
+import Calculator from './components/Calculator';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit
-          <code>
-            src/App.js
-          </code>
-          and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Calculator />
   );
 }
 

src/components/Button.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Button extends React.PureComponent {
+  render() {
+    const { ctrls, last } = this.props;
+    const listItems = ctrls.map((ctrl, index) => {
+      let cl = 'bg-ash';
+      let row = '';
+      let selectLast = 3;
+      if (last && index === 0) {
+        row = 'ctrl-btn-2-row';
+        selectLast = 2;
+      }
+      if (index === selectLast) {
+        cl = 'bg-orange';
+      }
+      return <button key={ctrl} type="button" className={`ctrl-btn-row ${row} ${cl} font`}>{ctrl}</button>;
+    }, last);
+    return (
+      <div className="ctrls">{listItems}</div>
+    );
+  }
+}
+
+Button.propTypes = {
+  ctrls: PropTypes.arrayOf(PropTypes.string).isRequired,
+  last: PropTypes.bool.isRequired,
+};
+
+export default Button;

src/components/Calculator.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Button from './Button';
+
+class Calculator extends React.PureComponent {
+  render() {
+    return (
+      <div className="main">
+        <div className="display">
+          <h1 className="pixel font">0</h1>
+        </div>
+        <Button ctrls={['AC', '+/-', '%', '÷']} last={false} />
+        <Button ctrls={['7', '8', '9', 'X']} last={false} />
+        <Button ctrls={['4', '5', '6', '-']} last={false} />
+        <Button ctrls={['1', '2', '3', '+']} last={false} />
+        <Button ctrls={['0', '.', '=']} last />
+      </div>
+    );
+  }
+}
+
+export default Calculator;

src/index.js

@@ -10,8 +10,4 @@ ReactDOM.render(
   </React.StrictMode>,
   document.getElementById('root'),
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();