├── index.html ├── public └── vite.svg └── src ├── App.css ├── App.jsx ├── assets └── react.svg ├── index.css └── main.jsx /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 100vmax; 3 | height:100vh; 4 | background: whitesmoke; 5 | display:flex; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | 10 | .calculator{ 11 | background-image: linear-gradient(black, rgb(74, 70, 70)); 12 | padding: 20px; 13 | border-radius: 24px; 14 | height: 605px; 15 | width: 350px; 16 | } 17 | 18 | .display{ 19 | display: flex; 20 | justify-content: flex-end; 21 | margin:20px 0px; 22 | } 23 | 24 | .calculator form input{ 25 | border:1px solid rgb(89, 89, 89); 26 | outline:0; 27 | width: 65px; 28 | height:65px; 29 | background: transparent; 30 | border-radius: 50px; 31 | color:white; 32 | cursor:pointer; 33 | margin:10px; 34 | font-size: 30px; 35 | } 36 | 37 | form .display input{ 38 | text-align: right; 39 | flex-grow: 1; 40 | font-size: 45px; 41 | border:none; 42 | } 43 | 44 | .title{ 45 | color: white; 46 | display: flex; 47 | justify-content: center; 48 | font-size:larger; 49 | color: rgb(255, 98, 0); 50 | margin-top: -38px; 51 | } 52 | .under-title{ 53 | width:180px; 54 | margin-top: -24px; 55 | height:4px; 56 | background-color: rgb(255, 98, 0); 57 | border: none; 58 | } 59 | 60 | .r-1 .divide{ 61 | background-color: rgb(89, 89, 89); 62 | } 63 | .r-2 .multiply{ 64 | background-color: rgb(89, 89, 89); 65 | } 66 | .r-3 .plus{ 67 | background-color: rgb(89, 89, 89); 68 | } 69 | .r-4 .minus{ 70 | background-color: rgb(89, 89, 89); 71 | } 72 | .r-4 .point{ 73 | background-color: rgb(89, 89, 89); 74 | } 75 | form .r-4 .equal{ 76 | background-color: rgb(255, 98, 0); 77 | } 78 | 79 | .r-1 .divide:active{ 80 | background-color: rgb(255, 98, 0); 81 | } 82 | .r-2 .multiply:active{ 83 | background-color: rgb(255, 98, 0); 84 | } 85 | .r-3 .plus:active{ 86 | background-color: rgb(255, 98, 0); 87 | } 88 | .r-4 .minus:active{ 89 | background-color: rgb(255, 98, 0); 90 | } 91 | .r-4 .point:active{ 92 | background-color: rgb(255, 98, 0); 93 | } 94 | 95 | .r-1 input:active{ 96 | background-color: rgb(89, 89, 89); 97 | } 98 | .r-2 input:active{ 99 | background-color: rgb(89, 89, 89); 100 | } 101 | .r-3 input:active{ 102 | background-color: rgb(89, 89, 89); 103 | } 104 | .r-4 input:active{ 105 | background-color: rgb(89, 89, 89); 106 | } 107 | 108 | form .clear input{ 109 | width: 325px; 110 | border: 2px solid rgb(255, 98, 0); 111 | } 112 | 113 | form .clear input:active{ 114 | background-color: rgb(255, 98, 0); 115 | } -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import './App.css' 3 | 4 | function App() { 5 | const [result,setResult]=useState(""); 6 | 7 | const clickHandler = (event) =>{ 8 | setResult(result.concat(event.target.value)) 9 | } 10 | 11 | const clrDisplay = () =>{ 12 | setResult("") 13 | } 14 | 15 | const calculate = () =>{ 16 | setResult(eval(result)) 17 | } 18 | 19 | return ( 20 | <> 21 |
22 |
23 |

Calculator

24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 |
32 | 33 | 34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 | 42 |
43 |
44 | 45 | 46 | 47 | 48 |
49 |
50 | 51 | 52 | 53 | 54 |
55 |
56 | 57 |
58 |
59 |
60 |
61 | 62 | ) 63 | } 64 | 65 | export default App 66 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | button:hover { 51 | border-color: #646cff; 52 | } 53 | button:focus, 54 | button:focus-visible { 55 | outline: 4px auto -webkit-focus-ring-color; 56 | } 57 | 58 | @media (prefers-color-scheme: light) { 59 | :root { 60 | color: #213547; 61 | background-color: #ffffff; 62 | } 63 | a:hover { 64 | color: #747bff; 65 | } 66 | button { 67 | background-color: #f9f9f9; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------