-
Notifications
You must be signed in to change notification settings - Fork 19
Expand file tree
/
Copy pathApp.js
More file actions
75 lines (71 loc) · 1.99 KB
/
Copy pathApp.js
File metadata and controls
75 lines (71 loc) · 1.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
66
67
68
69
70
71
72
73
74
75
import React, { useState } from "react";
const App = () => {
const [value1, setValue1] = useState('');
const [value2, setValue2] = useState('');
const [result, setResult] = useState(null);
const calculateSum = () => {
const sum = parseFloat(value1 || 0) + parseFloat(value2 || 0);
setResult(sum);
};
return (
<div style={{ margin: '20px', fontFamily: 'Arial, sans-serif' }}>
<img src="logo192.png" width="64" height="64"></img>
<h2>WebUI React Example</h2>
<div style={{ marginBottom: '10px' }}>
<label>
<strong>Input 1:</strong>
</label>
<input
type="number"
value={value1}
onChange={(e) => setValue1(e.target.value)}
style={{ marginLeft: '10px', padding: '5px', fontSize: '16px' }}
/>
</div>
<div style={{ marginBottom: '10px' }}>
<label>
<strong>Input 2:</strong>
</label>
<input
type="number"
value={value2}
onChange={(e) => setValue2(e.target.value)}
style={{ marginLeft: '10px', padding: '5px', fontSize: '16px' }}
/>
</div>
<button
onClick={calculateSum}
style={{
padding: '10px 20px',
backgroundColor: '#4CAF50',
color: 'white',
fontSize: '16px',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
marginRight: '10px',
}}
>
Calculate (React Frontend)
</button>
<button
id="Exit"
style={{
padding: '10px 20px',
backgroundColor: '#f44336',
color: 'white',
fontSize: '16px',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
}}
>
Exit (WebUI Backend)
</button>
<div style={{ marginTop: '20px', fontSize: '18px' }}>
<strong>Result:</strong> {result !== null ? result : 'N/A'}
</div>
</div>
);
};
export default App;