Skip to content

Commit cb400b5

Browse files
bhattidevbhattidev
committed
practice file delete, some changing in calculator
1 parent ca2db99 commit cb400b5

File tree

9 files changed

+100
-301
lines changed

9 files changed

+100
-301
lines changed

‎React_Learning/17_Calculator/index.html

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React</title>
8-
</head>
9-
<body>
10-
<div id="root"></div>
11-
<script type="module" src="/src/main.jsx"></script>
12-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0" />
8+
<title>Calculator</title>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script
13+
type="module"
14+
src="/src/main.jsx"></script>
15+
</body>
1316
</html>

‎React_Learning/17_Calculator/src/App.jsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
import React from 'react';
2-
import Numeric from './components/Numeric';
3-
import Operators from './components/Operators';
4-
import Display from './components/Display';
2+
import Calculator from './components/Calculator';
53

64
function App() {
75
return (
8-
<div className="w-full h-80 mt-10 flex justify-center items-center">
9-
<div className="border p-5 w-60 bg-slate-50">
10-
<Display />
11-
<div className="flex gap-1">
12-
<Numeric />
13-
<Operators />
14-
</div>
15-
</div>
6+
<div className="flex justify-center items-center mt-10">
7+
<Calculator />
168
</div>
179
);
1810
}

‎React_Learning/17_Calculator/src/assets/react.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎React_Learning/17_Calculator/src/components/Buttons.jsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// Buttons.js
2+
import React from 'react';
3+
4+
function Buttons({ onButtonClick }) {
5+
const values = [
6+
7,
7+
8,
8+
9,
9+
'/',
10+
4,
11+
5,
12+
6,
13+
'x',
14+
1,
15+
2,
16+
3,
17+
'-',
18+
'.',
19+
0,
20+
'=',
21+
'+',
22+
'C',
23+
];
24+
25+
return (
26+
<div className="grid grid-cols-4 gap-2 m-2">
27+
{values.map((value, index) => (
28+
<div
29+
className="bg-slate-400 text-center active:bg-gray-800 py-3 px-5 rounded-xl shadow-2xl shadow-white hover:scale-110 hover:bg-blue-800 text-white cursor-pointer"
30+
key={index}
31+
onClick={() => onButtonClick(value)}>
32+
{value}
33+
</div>
34+
))}
35+
</div>
36+
);
37+
}
38+
39+
export default Buttons;

‎React_Learning/17_Calculator/src/components/Calculator.jsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Calculator.js
2+
import React, { useState } from 'react';
3+
import Buttons from './Buttons';
4+
import Display from './Display';
5+
6+
function Calculator() {
7+
const [content, setContent] = useState('');
8+
9+
// Function to handle button clicks
10+
const handleClick = (value) => {
11+
if (value === '=') {
12+
if (content.trim() === '') {
13+
// Prevent evaluating empty content
14+
setContent('');
15+
return;
16+
}
17+
try {
18+
// Evaluate the expression
19+
setContent(eval(content.replace('x', '*')).toString());
20+
} catch {
21+
setContent('Error');
22+
}
23+
} else if (value === 'C') {
24+
// Clear display
25+
setContent('');
26+
} else {
27+
// Append clicked value to the content
28+
setContent(content + value);
29+
}
30+
};
31+
32+
return (
33+
<div>
34+
<Display content={content} />
35+
<Buttons onButtonClick={handleClick} />
36+
</div>
37+
);
38+
}
39+
40+
export default Calculator;

‎React_Learning/17_Calculator/src/components/Display.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
// Display.js
12
import React from 'react';
23

3-
function Display() {
4+
function Display({ content }) {
45
return (
5-
<>
6-
<div className="border p-2 my-5 bg-white">Display</div>
7-
</>
6+
<div className="border py-2 px-5 text-right bg-gray-100 h-10">
7+
{content}
8+
</div>
89
);
910
}
1011

‎React_Learning/17_Calculator/src/components/Numeric.jsx

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎React_Learning/17_Calculator/src/components/Operators.jsx

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)