Merge pull request #2 from torobucci/components

Math magicians :Components
torobucci · Mar 29, 2023 · adf2bb5 · adf2bb5
2 parents cc5c5e4 + 7ba9072
commit adf2bb5
Show file tree

Hide file tree

Showing 18 changed files with 135 additions and 171 deletions.
diff --git a/README.md b/README.md
@@ -3,22 +3,23 @@
 
 # 📗 Table of Contents
 
-- [📖 About the Project](#about-project)
-  - [🛠 Built With](#built-with)
-    - [Tech Stack](#tech-stack)
-    - [Key Features](#key-features)
-- [💻 Getting Started](#getting-started)
-  - [Setup](#setup)
-  - [Prerequisites](#prerequisites)
-  - [Install](#install)
-  - [Usage](#usage)
-  - [Run tests](#run-tests)
-- [👥 Authors](#authors)
-- [🔭 Future Features](#future-features)
-- [🤝 Contributing](#contributing)
-- [⭐️ Show your support](#support)
-- [🙏 Acknowledgements](#acknowledgements)
-- [📝 License](#license)
+- [📗 Table of Contents](#-table-of-contents)
+- [📖 **Math Magicians** ](#-math-magicians-)
+  - [🛠 Built With ](#-built-with-)
+    - [Tech Stack ](#tech-stack-)
+    - [Key Features ](#key-features-)
+  - [💻 Getting Started ](#-getting-started-)
+    - [Prerequisites](#prerequisites)
+    - [Setup](#setup)
+    - [Install](#install)
+    - [Usage](#usage)
+    - [Run tests](#run-tests)
+  - [👥 Author Kevin Toro](#-author-kevin-toro)
+  - [🔭 Future Features ](#-future-features-)
+  - [🤝 Contributing ](#-contributing-)
+  - [⭐️ Show your support ](#️-show-your-support-)
+  - [🙏 Acknowledgments ](#-acknowledgments-)
+  - [📝 License ](#-license-)
 
 <!-- PROJECT DESCRIPTION -->
 
@@ -127,7 +128,7 @@ To run tests, run the following command:
 
 Contributions, issues, and feature requests are welcome!
 
-Feel free to check the [math-magicians](https://github.com/torobucci/math-magicians.git).
+Feel free to check the [math-magicians](https://github.com/torobucci/math-magicians/issues).
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -143,7 +144,7 @@ If you like this project hit the star button on our github repo
 
 ## 🙏 Acknowledgments <a name="acknowledgements"></a>
 
-I would like to thank the Lets Code team that hepled us in every problem we had.
+I would like to thank Microverseinc organization for designing the project
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Calculator App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -40,4 +40,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-</html>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,27 +1,9 @@
-import logo from './logo.svg';
-import './App.css';
+import DisplayCalculator from './components/DisplayCalculator';
 
 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 className="app">
+      <DisplayCalculator />
     </div>
   );
 }

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/Buttons.js b/src/components/Buttons.js
@@ -0,0 +1,26 @@
+function Buttons() {
+  return (
+    <>
+      <button type="button" className="button">A/C</button>
+      <button type="button" className="button">+/-</button>
+      <button type="button" className="button">%</button>
+      <button type="button" className="button operator">÷</button>
+      <button type="button" className="button">7</button>
+      <button type="button" className="button">8</button>
+      <button type="button" className="button">9</button>
+      <button type="button" className="button operator">x</button>
+      <button type="button" className="button">4</button>
+      <button type="button" className="button">5</button>
+      <button type="button" className="button">6</button>
+      <button type="button" className="button operator">-</button>
+      <button type="button" className="button">1</button>
+      <button type="button" className="button">2</button>
+      <button type="button" className="button">3</button>
+      <button type="button" className="button operator">+</button>
+      <button type="button" className="button zero">0</button>
+      <button type="button" className="button">.</button>
+      <button type="button" className="button operator">=</button>
+    </>
+  );
+}
+export default Buttons;
diff --git a/src/components/DisplayCalculator.js b/src/components/DisplayCalculator.js
@@ -0,0 +1,11 @@
+import Buttons from './Buttons';
+
+function DisplayCalculator() {
+  return (
+    <div className="calculator">
+      <input type="text" placeholder="0" className="input" />
+      <Buttons />
+    </div>
+  );
+}
+export default DisplayCalculator;
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import './style.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
 );
-
-// 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();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
diff --git a/src/setupTests.js b/src/setupTests.js
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,73 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #928d8d;
+}
+
+.calculator {
+  width: 35vw;
+  margin: 12vh auto;
+  background-color: #d4cfcf;
+  border-radius: 3px;
+  padding: 2px 4px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 2px;
+}
+
+.input {
+  grid-column: 1 / span 4;
+  background-color: #6b6974;
+  font-size: 26px;
+  color: white;
+  padding: 20px 5px;
+  border-radius: 2px;
+  height: 30%;
+  border: none;
+  margin-bottom: -14px;
+}
+
+input:focus {
+  outline: none;
+}
+
+.input::placeholder {
+  text-align: right;
+  color: white;
+}
+
+.button {
+  height: 10vh;
+  font-size: 1.5rem;
+  background-color: #e6dfdf;
+  border-radius: 2px;
+  cursor: pointer;
+  border: none;
+}
+
+.button:hover {
+  background-color: #faf5f5;
+}
+
+.button:active {
+  background-color: #aaa;
+}
+
+.button.operator {
+  background-color: #ee9954;
+}
+
+.button.operator:hover {
+  background-color: #ee7d1b;
+}
+
+.button.operator:active {
+  background-color: #a34d17;
+}
+
+.button.zero {
+  grid-column: 1 / span 2;
+}
+
+.button.equals {
+  grid-row: span 2;
+}