diff --git a/package-lock.json b/package-lock.json
index a11b99b..aad6563 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@testing-library/jest-dom": "^5.16.5",
"@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 c26fa22..f441f28 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.16.5",
"@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/src/App.css b/src/App.css
index 10e4996..3643471 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,39 +1,4 @@
-.App {
+h1 {
+ margin-left: 20px;
text-align: center;
}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
-
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/App.js b/src/App.js
index e97e374..0816982 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,13 @@
-import logo from './logo.svg';
import './App.css';
+import Calculator from './components/Calculator';
function App() {
return (
);
}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render();
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 0000000..95a76c8
--- /dev/null
+++ b/src/components/Button.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Button({ label, className }) {
+ return (
+
+ );
+}
+
+Button.propTypes = {
+ label: PropTypes.isRequired,
+ className: PropTypes.isRequired,
+};
+
+export default Button;
diff --git a/src/components/Calculator.css b/src/components/Calculator.css
new file mode 100644
index 0000000..240dff9
--- /dev/null
+++ b/src/components/Calculator.css
@@ -0,0 +1,52 @@
+.calculator {
+ display: grid;
+ height: 80%;
+ width: 28rem;
+ margin: 2% auto 0;
+ grid-template-columns: repeat(4, 7rem);
+ grid-template-rows: minmax(6rem, auto) repeat(5, 5rem);
+ font-family: cursive, sans-serif;
+ filter: drop-shadow(5px 3px 3px #3f3e3e);
+}
+
+.screen {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ margin-top: 5%;
+ margin-bottom: -20%;
+}
+
+button {
+ width: 100%;
+ padding: 10px;
+ background-color: rgb(243, 240, 240);
+ border: 1px solid rgb(151, 150, 150);
+ cursor: pointer;
+ font-size: 25px;
+}
+
+input[type='text'] {
+ width: 95%;
+ height: 30%;
+ color: white;
+ background-color: rgb(185, 182, 182);
+ padding: 0.7rem;
+ text-align: right;
+ font-size: 50px;
+ border: none;
+ border-bottom: 2px solid black;
+}
+
+input[type='text']::placeholder {
+ color: white;
+}
+
+.span-box {
+ grid-column: span 2;
+}
+
+.box-color {
+ background: #fa5b2f;
+}
diff --git a/src/components/Calculator.js b/src/components/Calculator.js
new file mode 100644
index 0000000..f7b8e22
--- /dev/null
+++ b/src/components/Calculator.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import './Calculator.css';
+import Screen from './Screen';
+import Button from './Button';
+
+function Calculator() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Calculator;
diff --git a/src/components/Screen.js b/src/components/Screen.js
new file mode 100644
index 0000000..16ae6b8
--- /dev/null
+++ b/src/components/Screen.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Screen() {
+ return (
+
+
+
+ );
+}
+
+export default Screen;
diff --git a/src/index.css b/src/index.css
index acbad23..26c7a48 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,27 +1,5 @@
body {
margin: 0;
- font-family:
- -apple-system,
- BlinkMacSystemFont,
- 'Segoe UI',
- 'Roboto',
- 'Oxygen',
- 'Ubuntu',
- 'Cantarell',
- 'Fira Sans',
- 'Droid Sans',
- 'Helvetica Neue',
- sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
-
-code {
- font-family:
- source-code-pro,
- Menlo,
- Monaco,
- Consolas,
- 'Courier New',
- monospace;
-}
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 8f2609b..0000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';