-
Notifications
You must be signed in to change notification settings - Fork 2
/
set_diff.html
117 lines (102 loc) · 3.11 KB
/
set_diff.html
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<title>Set Difference Calculator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 1em;
height: 100vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 5em auto auto 5em;
grid-template-areas:
"header header header"
"left right output1"
"left right output2";
grid-gap: 10px;
}
h1 {
grid-area: header;
text-align: center;
}
textarea {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
#left-set {
grid-area: left;
}
#right-set {
grid-area: right;
}
#output {
grid-area: output;
background-color: #f2f2f2;
color: #333;
font-weight: bold;
}
#copy-btn {
grid-column: 3;
justify-self: end;
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Set Difference Calculator</h1>
<textarea id="left-set" title="left-set"></textarea>
<textarea id="right-set" title="right-set"></textarea>
<textarea id="output1" title="left minus right" readonly></textarea>
<textarea id="output2" title="right minus left" readonly></textarea>
<button onclick="calculate()">Calculate</button>
<div></div>
<button id="copy-btn" onclick="copyToClipboard()">Copy to clipboard</button>
<script>
function calculate() {
// Get the input values
const leftSet = document.getElementById('left-set').value;
const rightSet = document.getElementById('right-set').value;
// Split the input values into arrays of lines
const leftLines = leftSet.trim().split('\n').map(line => line.trim()).filter(line => line !== '');
const rightLines = rightSet.trim().split('\n').map(line => line.trim()).filter(line => line !== '');
// Convert the arrays to sets
const leftSetObj = new Set(leftLines);
const rightSetObj = new Set(rightLines);
// Calculate the difference
const difference = new Set([...leftSetObj].filter(x => !rightSetObj.has(x)));
const rightMinusLeft = new Set([...rightSetObj].filter(x => !leftSetObj.has(x)));
// Format the output
const output = [...difference].join('\n');
// Set the output value
document.getElementById('output1').value = output;
// Do same for right minus left
const output2 = [...rightMinusLeft].join('\n');
document.getElementById('output2').value = output2;
}
function copyToClipboard() {
// Select the text in the output textarea
const output = document.getElementById('output1');
output.select();
// Copy the text to the clipboard
document.execCommand('copy');
// Deselect the text
window.getSelection().removeAllRanges();
}
</script>
</body>
</html>