Skip to content

Commit 8b17102

Browse files
maxigoldymaxigoldy
authored
Add files via upload
1 parent 578ad33 commit 8b17102

File tree

3 files changed

+165
-142
lines changed

3 files changed

+165
-142
lines changed

‎index.html

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
<!DOCTYPE html>
2-
<html lang="de">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Code-Vergleich</title>
7-
<link rel="stylesheet" href="style.css">
8-
</head>
9-
<body>
10-
<div class="wrapper">
11-
<h2>Code-Vergleich</h2>
12-
<div class="container">
13-
<textarea id="text1" placeholder="Originaltext eingeben..."></textarea>
14-
<textarea id="text2" placeholder="Vergleichstext eingeben..."></textarea>
15-
</div>
16-
<button onclick="compareTexts()">Vergleichen</button>
17-
<div class="results">
18-
<div id="result1" class="result-box"></div>
19-
<div id="result2" class="result-box"></div>
20-
</div>
21-
</div>
22-
23-
<script src="script.js"></script>
24-
</body>
25-
</html>
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Code-Vergleich</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="wrapper">
11+
<h2>Code-Vergleich</h2>
12+
<div class="container">
13+
<textarea id="text1" placeholder="Originaltext eingeben..."></textarea>
14+
<textarea id="text2" placeholder="Vergleichstext eingeben..."></textarea>
15+
</div>
16+
<button onclick="compareTexts()">Vergleichen</button>
17+
<div class="results">
18+
<div id="result1" class="result-box"></div>
19+
<div id="result2" class="result-box"></div>
20+
</div>
21+
</div>
22+
23+
<script src="script.js"></script>
24+
</body>
25+
</html>

‎script.js

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,47 @@
1-
function compareTexts() {
2-
const text1 = document.getElementById("text1").value.split("\n");
3-
const text2 = document.getElementById("text2").value.split("\n");
4-
5-
let resultHTML1 = "";
6-
let resultHTML2 = "";
7-
let maxLength = Math.max(text1.length, text2.length);
8-
9-
for (let i = 0; i < maxLength; i++) {
10-
if (text1[i] === text2[i]) {
11-
resultHTML1 += text1[i] + "\n";
12-
resultHTML2 += text2[i] + "\n";
13-
} else if (text1[i] === undefined) {
14-
resultHTML2 += `<span class="added">+ ${text2[i]}</span>\n`;
15-
} else if (text2[i] === undefined) {
16-
resultHTML1 += `<span class="removed">- ${text1[i]}</span>\n`;
17-
} else {
18-
resultHTML1 += `<span class="removed">- ${text1[i]}</span>\n`;
19-
resultHTML2 += `<span class="added">+ ${text2[i]}</span>\n`;
20-
}
21-
}
22-
23-
document.getElementById("result1").innerHTML = resultHTML1;
24-
document.getElementById("result2").innerHTML = resultHTML2;
25-
}
1+
function compareTexts() {
2+
const text1 = document.getElementById("text1").value.split("\n");
3+
const text2 = document.getElementById("text2").value.split("\n");
4+
5+
let countMap1 = getCountMap(text1);
6+
let countMap2 = getCountMap(text2);
7+
8+
let resultHTML1 = "";
9+
let resultHTML2 = "";
10+
11+
let uniqueLines = new Set([...text1, ...text2]); // Alle vorkommenden Zeilen
12+
13+
uniqueLines.forEach(line => {
14+
let count1 = countMap1[line] || 0;
15+
let count2 = countMap2[line] || 0;
16+
17+
if (count1 > count2) {
18+
// Linke Seite hat mehr Instanzen als die rechte → Fehlende markieren
19+
for (let i = 0; i < count1 - count2; i++) {
20+
resultHTML1 += `<span class="removed">${line}</span>\n`;
21+
}
22+
}
23+
for (let i = 0; i < Math.min(count1, count2); i++) {
24+
// Gleich viele Instanzen → Normal anzeigen
25+
resultHTML1 += line + "\n";
26+
resultHTML2 += line + "\n";
27+
}
28+
if (count2 > count1) {
29+
// Rechte Seite hat mehr Instanzen als die linke → Hinzugefügte markieren
30+
for (let i = 0; i < count2 - count1; i++) {
31+
resultHTML2 += `<span class="added">${line}</span>\n`;
32+
}
33+
}
34+
});
35+
36+
document.getElementById("result1").innerHTML = resultHTML1;
37+
document.getElementById("result2").innerHTML = resultHTML2;
38+
}
39+
40+
// Erstellt eine Häufigkeitsmap für die Zeilen
41+
function getCountMap(textArray) {
42+
let countMap = {};
43+
textArray.forEach(line => {
44+
countMap[line] = (countMap[line] || 0) + 1;
45+
});
46+
return countMap;
47+
}

‎style.css

Lines changed: 93 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,93 @@
1-
* {
2-
box-sizing: border-box;
3-
margin: 0;
4-
padding: 0;
5-
}
6-
7-
body {
8-
font-family: Arial, sans-serif;
9-
background-color: #1e1e1e;
10-
color: white;
11-
display: flex;
12-
align-items: center;
13-
justify-content: center;
14-
height: 100vh;
15-
overflow: hidden; /* Verhindert das Verschieben der Seite */
16-
}
17-
18-
.wrapper {
19-
width: 90%;
20-
max-width: 1200px;
21-
text-align: center;
22-
}
23-
24-
h2 {
25-
margin-bottom: 20px;
26-
}
27-
28-
.container {
29-
display: flex;
30-
justify-content: space-between;
31-
gap: 10px;
32-
height: 35vh; /* Dynamische Höhe */
33-
}
34-
35-
textarea {
36-
width: 48%;
37-
height: 100%;
38-
background-color: #252526;
39-
color: #dcdcdc;
40-
border: 1px solid #3c3c3c;
41-
padding: 10px;
42-
font-family: monospace;
43-
border-radius: 5px;
44-
resize: none;
45-
overflow: auto; /* Falls der Text zu lang wird */
46-
}
47-
48-
button {
49-
padding: 10px 20px;
50-
background-color: #0078d4;
51-
color: white;
52-
border: none;
53-
border-radius: 5px;
54-
cursor: pointer;
55-
font-size: 16px;
56-
transition: 0.3s;
57-
margin-top: 10px;
58-
}
59-
60-
button:hover {
61-
background-color: #005ea6;
62-
}
63-
64-
.results {
65-
display: flex;
66-
justify-content: space-between;
67-
gap: 10px;
68-
height: 35vh; /* Gleiche Höhe wie die Textfelder */
69-
margin-top: 10px;
70-
}
71-
72-
.result-box {
73-
width: 48%;
74-
height: 100%;
75-
background-color: #252526;
76-
padding: 10px;
77-
border-radius: 5px;
78-
border: 1px solid #3c3c3c;
79-
white-space: pre-wrap;
80-
font-family: monospace;
81-
overflow: auto;
82-
text-align: left;
83-
}
84-
85-
.removed {
86-
background-color: rgba(255, 50, 50, 0.3);
87-
text-decoration: line-through;
88-
}
89-
90-
.added {
91-
background-color: rgba(50, 255, 50, 0.3);
92-
}
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
font-family: Arial, sans-serif;
9+
background-color: #1e1e1e;
10+
color: white;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100vh;
15+
overflow: hidden; /* Verhindert das Verschieben der Seite */
16+
}
17+
18+
.wrapper {
19+
width: 90%;
20+
max-width: 1200px;
21+
text-align: center;
22+
}
23+
24+
h2 {
25+
margin-bottom: 20px;
26+
}
27+
28+
.container {
29+
display: flex;
30+
justify-content: space-between;
31+
gap: 10px;
32+
height: 35vh; /* Dynamische Höhe */
33+
}
34+
35+
textarea {
36+
width: 48%;
37+
height: 100%;
38+
background-color: #252526;
39+
color: #dcdcdc;
40+
border: 1px solid #3c3c3c;
41+
padding: 10px;
42+
font-family: monospace;
43+
border-radius: 5px;
44+
resize: none;
45+
overflow: auto; /* Falls der Text zu lang wird */
46+
}
47+
48+
button {
49+
padding: 10px 20px;
50+
background-color: #0078d4;
51+
color: white;
52+
border: none;
53+
border-radius: 5px;
54+
cursor: pointer;
55+
font-size: 16px;
56+
transition: 0.3s;
57+
margin-top: 10px;
58+
}
59+
60+
button:hover {
61+
background-color: #005ea6;
62+
}
63+
64+
.results {
65+
display: flex;
66+
justify-content: space-between;
67+
gap: 10px;
68+
height: 35vh; /* Gleiche Höhe wie die Textfelder */
69+
margin-top: 10px;
70+
}
71+
72+
.result-box {
73+
width: 48%;
74+
height: 100%;
75+
background-color: #252526;
76+
padding: 10px;
77+
border-radius: 5px;
78+
border: 1px solid #3c3c3c;
79+
white-space: pre-wrap;
80+
font-family: monospace;
81+
overflow: auto;
82+
text-align: left;
83+
}
84+
85+
.removed {
86+
background-color: rgba(255, 50, 50, 0.3);
87+
text-decoration: line-through;
88+
}
89+
90+
.added {
91+
background-color: rgba(50, 255, 50, 0.3);
92+
}
93+

0 commit comments

Comments
 (0)