Skip to content

Commit 269177d

Browse files
RadonCodingRadonCoding
committed
refactors
1 parent f56e07b commit 269177d

4 files changed

Lines changed: 379 additions & 258 deletions

File tree

‎index.html‎

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
<!doctype html>
12
<html lang="en">
23
<head>
34
<meta charset="UTF-8" />
45
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
56
<script type="module" src="src/main.ts"></script>
67
<script type="module" src="src/compiler"></script>
8+
<link rel="stylesheet" href="style.css" />
79
<link
810
rel="stylesheet"
911
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
@@ -16,62 +18,69 @@
1618
</head>
1719
<body>
1820
<main>
19-
<div class="portfolio">
21+
<section id="portfolio">
2022
<img
21-
class="profile"
23+
class="portfolio__profile"
2224
src="https://avatars.githubusercontent.com/u/86915746?v=4"
25+
alt="Profile"
2326
/>
24-
<div class="details">
25-
<h2>RadonCoding</h2>
26-
<pre class="comment">
27+
<div class="portfolio__details">
28+
<h1 class="portfolio__title">RadonCoding</h1>
29+
<pre class="portfolio__comment">
2730
/**
2831
* - Full-stack developer
2932
* - Reverse engineer
3033
*
3134
* - Languages I use often:
32-
* C/C++, C#, Rust, Java,
33-
* TypeScript, Python, Go
35+
* C/C++, C#, Rust, Java,
36+
* TypeScript, Python, Go
3437
*
3538
*/</pre
3639
>
3740
</div>
38-
<div class="contacts">
39-
<a class="tooltip" href="https://github.com/RadonCoding">
41+
<nav class="portfolio__contacts">
42+
<a class="portfolio__contact" href="https://github.com/RadonCoding">
4043
<i class="bi bi-github"></i>
41-
<span class="tooltip-text">Open GitHub</span>
44+
<span class="portfolio__contact-content">Open GitHub</span>
4245
</a>
43-
<a class="tooltip copy" data-text="radonreborn">
46+
<a
47+
class="portfolio__contact portfolio__contact--copy"
48+
data-copy="radonreborn"
49+
>
4450
<i class="bi bi-discord"></i>
45-
<span class="tooltip-text">Copy Username</span>
51+
<span class="portfolio__contact-content">Copy Username</span>
4652
</a>
47-
</div>
48-
</div>
49-
<div class="container">
53+
</nav>
54+
</section>
55+
56+
<section id="workspace">
5057
<div class="compiler">
51-
<header>
52-
Compiler
53-
<a id="compile-button"><i class="bi bi-gear-fill"></i></a>
58+
<header class="compiler__header">
59+
<span class="compiler__title">Compiler</span>
60+
<button id="compile-button" aria-label="Compile">
61+
<i class="bi bi-gear-fill"></i>
62+
</button>
5463
</header>
55-
<div id="error-tooltip" class="error-tooltip"></div>
56-
<div class="compiler-io">
57-
<pre
58-
id="compiler-input"
59-
contenteditable="true"
60-
spellcheck="false"
61-
class="io"
62-
></pre>
63-
<div class="output-section" id="output-section">
64-
<div class="output-header">
65-
<span class="output-title">Output</span>
66-
<button class="toggle" id="toggle-output">
67-
<i class="fas fa-chevron-down"></i>
68-
</button>
69-
</div>
70-
<div id="compiler-output" class="io" readonly></div>
64+
65+
<div id="error-tooltip"></div>
66+
67+
<pre
68+
id="compiler-input"
69+
contenteditable="true"
70+
spellcheck="false"
71+
></pre>
72+
73+
<div id="compiler-output" class="compiler__output">
74+
<div class="compiler__output-header">
75+
<span class="compiler__output-label">Output</span>
76+
<button id="toggle-output" aria-label="Toggle Output">
77+
<i class="bi bi-chevron-down"></i>
78+
</button>
7179
</div>
80+
<div id="compiler-console"></div>
7281
</div>
7382
</div>
74-
</div>
83+
</section>
7584
</main>
7685
</body>
7786
</html>

‎src/compiler/index.ts‎

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@ import { highlight, showErrorTooltip } from "./syntax";
66
import example from "../assets/example.rn?raw";
77

88
async function compile() {
9-
const inputElement = document.getElementById("compiler-input")!;
10-
const outputElement = document.getElementById("compiler-output")!;
9+
const input = document.getElementById("compiler-input")!;
10+
const output = document.getElementById("compiler-console")!;
1111

1212
function clearOutput() {
13-
outputElement.innerText = "";
13+
output.innerText = "";
1414
}
1515

1616
function writeToOutput(text: string) {
17-
outputElement.innerText += text;
18-
outputElement.innerText += "\n";
17+
output.innerText += text;
18+
output.innerText += "\n";
1919
}
2020

2121
clearOutput();
2222

23-
const code = inputElement.innerText!;
23+
const code = input.innerText;
2424

2525
try {
2626
const tokens = tokenize(code);
@@ -69,38 +69,35 @@ async function compile() {
6969
err instanceof WebAssembly.CompileError ||
7070
err instanceof WebAssembly.RuntimeError
7171
) {
72-
showErrorTooltip(inputElement, err.message, code.length - 1);
72+
showErrorTooltip(input, err.message, code.length - 1);
7373
}
7474

7575
if (err instanceof LanguageError) {
76-
showErrorTooltip(inputElement, err.message, err.offset);
76+
showErrorTooltip(input, err.message, err.offset);
7777
}
7878
}
7979
}
8080

8181
document.addEventListener("DOMContentLoaded", () => {
82-
document.getElementById("compile-button")!.addEventListener("click", compile);
82+
document.getElementById("compile-button")?.addEventListener("click", compile);
8383

84-
const inputElement = document.getElementById("compiler-input")!;
85-
inputElement.innerText = example;
84+
const input = document.getElementById("compiler-input");
8685

87-
highlight(inputElement);
86+
if (!input) return;
8887

89-
inputElement.addEventListener("input", () => highlight(inputElement));
88+
input.innerText = example;
9089

91-
let isCollapsed = false;
92-
const toggle = document.getElementById("toggle-output")!;
93-
toggle.addEventListener("click", () => {
94-
const output = document.getElementById("output-section")!;
90+
highlight(input);
9591

96-
isCollapsed = !isCollapsed;
92+
input.addEventListener("input", () => highlight(input));
9793

98-
if (isCollapsed) {
99-
output.classList.add("collapsed");
100-
toggle.innerHTML = '<i class="fas fa-chevron-up"></i>';
101-
} else {
102-
output.classList.remove("collapsed");
103-
toggle.innerHTML = '<i class="fas fa-chevron-down"></i>';
104-
}
94+
const toggle = document.getElementById("toggle-output")!;
95+
const container = document.getElementById("compiler-output")!;
96+
97+
toggle.addEventListener("click", () => {
98+
const collapsed = container.classList.toggle("compiler__output--collapsed");
99+
toggle.innerHTML = collapsed
100+
? '<i class="bi bi-chevron-up"></i>'
101+
: '<i class="bi bi-chevron-down"></i>';
105102
});
106103
});

‎src/main.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ for (const element of document.getElementsByClassName("copy")) {
44
if (!(element instanceof HTMLElement)) continue;
55

66
element.addEventListener("click", () => {
7-
const text = element.getAttribute("data-text");
7+
const content = element.getAttribute("data-copy");
88

9-
if (!text) return;
9+
if (!content) return;
1010

11-
navigator.clipboard.writeText(text);
11+
navigator.clipboard.writeText(content);
1212
});
1313
}

0 commit comments

Comments
 (0)