├── 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 |
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 |
--------------------------------------------------------------------------------