├── src ├── Calculator │ ├── Allcss.css │ ├── Header.jsx │ ├── mainCalculator.jsx │ └── Buttons.jsx ├── assets │ ├── th.jpg │ ├── deleteicon.png │ └── react.svg ├── src.url ├── App.jsx ├── main.jsx └── index.css └── index.html /src/Calculator/Allcss.css: -------------------------------------------------------------------------------- 1 | .mainBody{ 2 | height: 68vh; 3 | width: 45vh; 4 | } -------------------------------------------------------------------------------- /src/assets/th.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohiburrehmanniazi/React-Calculator/HEAD/src/assets/th.jpg -------------------------------------------------------------------------------- /src/assets/deleteicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohiburrehmanniazi/React-Calculator/HEAD/src/assets/deleteicon.png -------------------------------------------------------------------------------- /src/src.url: -------------------------------------------------------------------------------- 1 | [InternetShortcut] 2 | URL=https://github.com/Muzammil-Bilwani/MEAN-Stack-tutorial/tree/main/week-react/reactapp/src 3 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import Calculator from "./Calculator/mainCalculator" 2 | 3 | function App (){ 4 | 5 | return( 6 | 7 | 8 | ) 9 | } 10 | 11 | export default App -------------------------------------------------------------------------------- /src/Calculator/Header.jsx: -------------------------------------------------------------------------------- 1 | function Header() { 2 | return ( 3 |

4 | Mohib's Calculator 5 |

6 | ); 7 | } 8 | 9 | export default Header; 10 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import ReactDOM from "react-dom/client" 3 | import App from "./App.jsx" 4 | import "./index.css" 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | 4 | 5 | } 6 | 7 | body { 8 | background-color: #e3e9ff; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | } 15 | -------------------------------------------------------------------------------- /src/Calculator/mainCalculator.jsx: -------------------------------------------------------------------------------- 1 | import Header from "./Header"; 2 | import "./Allcss.css"; 3 | import Buttons from "./Buttons"; 4 | 5 | function Calculator() { 6 | return ( 7 |
8 |
9 | 10 | 11 |
12 | ); 13 | } 14 | export default Calculator; 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mohib's React Calculator 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Calculator/Buttons.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState } from "react"; 3 | 4 | function Buttons() { 5 | const [result, setResult] = useState(""); 6 | 7 | const HandleClick = (event) => { 8 | setResult(result.concat(event.target.value)); 9 | }; 10 | 11 | const HandleClear = () => { 12 | setResult(""); 13 | }; 14 | 15 | const HandleCalculate = () => { 16 | setResult(eval(result)); 17 | }; 18 | 19 | return ( 20 |
21 |
22 | 29 |
30 | 31 |
32 |
33 | 40 | 41 | 48 |
49 |
50 | 57 | 64 | 71 | 78 |
79 | 80 |
81 | 88 | 95 | 102 | 109 |
110 | 111 |
112 | 119 | 126 | 133 | 140 |
141 | 142 |
143 | 150 | 157 | 164 |
165 |
166 |
167 | ); 168 | } 169 | 170 | export default Buttons; 171 | --------------------------------------------------------------------------------