diff --git a/package-lock.json b/package-lock.json
index 4c4c9ad..d293bbb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@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",
diff --git a/package.json b/package.json
index 9c22efd..f8e8710 100644
--- 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
index fa2de03..ef5f3b6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,7 @@
+
Mathmagician
diff --git a/src/App.js b/src/App.js
index 971fcf6..0dae6b8 100644
--- 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 = () => ;
export default App;
diff --git a/src/Components/Button.jsx b/src/Components/Button.jsx
new file mode 100644
index 0000000..25eb12b
--- /dev/null
+++ b/src/Components/Button.jsx
@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+const Button = ({ value, className }) => ;
+
+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
new file mode 100644
index 0000000..72a25ee
--- /dev/null
+++ 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 (
+
+
+ {btns.map((btn) => {
+ if (['÷', '-', '=', '+', 'X'].includes(btn)) {
+ return ;
+ }
+ if (btn === '0') {
+ return ;
+ }
+ return ;
+ })}
+
+ );
+};
+
+export default Calculator;
diff --git a/src/Components/Result.jsx b/src/Components/Result.jsx
new file mode 100644
index 0000000..0e4eb63
--- /dev/null
+++ b/src/Components/Result.jsx
@@ -0,0 +1,10 @@
+/* eslint-disable */
+const Result = ({ value }) => (
+ <>
+
+ {value}
+
+
+);
+
+export default Result;
diff --git a/src/style.css b/src/style.css
index cca57b3..b374db7 100644
--- 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);
}