Merge pull request #3 from M-AminAlizadeh/setup/UI

Setup/UI
M-AminAlizadeh · Aug 11, 2023 · 8a3ff39 · 8a3ff39
2 parents d37a84e + 45b06f4
commit 8a3ff39
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,13 +7,14 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "predeploy":"npm run build",
+    "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",

diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="shortcut icon" href="https://img.icons8.com/officel/16/calculator.png" type="image/x-icon">
     <title>Mathmagician</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -1,3 +1,6 @@
-const App = () => <>Mathmagician</>;
+import Calculator from './Components/Calculator';
+import './style.css';
+
+const App = () => <main className="container"><Calculator /></main>;
 
 export default App;
diff --git a/src/Components/Button.jsx b/src/Components/Button.jsx
@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+const Button = ({ value, className }) => <button type="button" className={className}>{value}</button>;
+
+Button.propTypes = {
+  value: PropTypes.string,
+  className: PropTypes.string,
+};
+
+Button.defaultProps = {
+  value: '',
+  className: '',
+};
+
+export default Button;
diff --git a/src/Components/Calculator.jsx b/src/Components/Calculator.jsx
@@ -0,0 +1,23 @@
+import Button from './Button';
+import Result from './Result';
+
+const Calculator = () => {
+  const btns = ['AC', '+/-', '%', '÷', '7', '8', '9', 'X', '4', '5', '6', '-',
+    '1', '2', '3', '+', '0', '.', '='];
+  return (
+    <section className="calculator">
+      <Result value="0" />
+      {btns.map((btn) => {
+        if (['÷', '-', '=', '+', 'X'].includes(btn)) {
+          return <Button key={btn} value={btn} className="btn border bg-2" />;
+        }
+        if (btn === '0') {
+          return <Button key={btn} value={btn} className="btn border zero-btn bg-1" />;
+        }
+        return <Button key={btn} value={btn} className="btn border bg-1" />;
+      })}
+    </section>
+  );
+};
+
+export default Calculator;
diff --git a/src/Components/Result.jsx b/src/Components/Result.jsx
@@ -0,0 +1,10 @@
+/* eslint-disable */
+const Result = ({ value }) => (
+  <>
+    <div className="result">
+      <span className="result__value">{value}</span>
+    </div>
+  </>
+);
+
+export default Result;
diff --git a/src/style.css b/src/style.css
@@ -1,5 +1,63 @@
+:root {
+  --primary-color: rgba(243, 243, 243, 0.897);
+  --secondary-dark-color: hsl(0, 0%, 54%);
+  --secondary-light-color: hsl(36, 90%, 49%);
+
+  font-size: 16px;
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+.container {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.calculator {
+  border: 1px solid var(--primary-color);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.result {
+  grid-column: 1 / 5;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 2rem 0.5rem;
+  background-color: var(--secondary-dark-color);
+}
+
+.result__value {
+  color: white;
+  font-size: 2.5rem;
+}
+
+.btn {
+  padding: 2.5rem 3rem;
+  cursor: pointer;
+  font-size: 1.5rem;
+}
+
+.zero-btn {
+  grid-column: 1 / 3;
+}
+
+.border {
+  border: 1px solid #e0e0e0;
+}
+
+.bg-1 {
+  background-color: var(--primary-color);
+}
+
+.bg-2 {
+  background-color: var(--secondary-light-color);
 }