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 (
- logo -

- Edit - src/App.js - and save to reload. -

- - Learn React - +

Math Magicians

+
); } 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';