Skip to content

Commit f4e6514

Browse files
dianprstydianprsty
committed
refactor : move dom code to adapter
1 parent 1c8d9c8 commit f4e6514

24 files changed

+1173
-1144
lines changed

‎pages/functional/adapter/factorial.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { countFactorial } from "../js/factorial.js";
2+
3+
document.getElementById("form").addEventListener("submit", function (event) {
4+
event.preventDefault();
5+
6+
try {
7+
const n = event.target["n"].value;
8+
const method = event.target["method"].value;
9+
10+
const result = countFactorial(n, method);
11+
12+
document.getElementById("result").textContent = result;
13+
} catch (error) {
14+
alert(error.message);
15+
console.error(error);
16+
}
17+
});

‎pages/functional/adapter/fibonacci.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { generateFibonacci } from "../js/fibonacci.js";
2+
3+
document.getElementById("form").addEventListener("submit", function (event) {
4+
event.preventDefault();
5+
6+
try {
7+
const sequence = event.target["sequence"].value;
8+
const method = event.target["method"].value;
9+
10+
const numbers = generateFibonacci(sequence, method);
11+
12+
document.getElementById("result").innerHTML = numbers
13+
.map(number => `<div class="result-item-fibonacci">${number}</div>`)
14+
.join("");
15+
} catch (error) {
16+
alert(error.message);
17+
console.error(error);
18+
}
19+
});

‎pages/functional/adapter/fizz-buzz.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { generateFizzBuzz } from "../js/fizz-buzz.js";
2+
3+
document.getElementById("form").addEventListener("submit", function (event) {
4+
event.preventDefault();
5+
6+
try {
7+
const sequence = event.target["sequence"].value;
8+
9+
const fizzBuzzs = generateFizzBuzz(sequence);
10+
11+
document.getElementById("result").innerHTML = fizzBuzzs
12+
.map(
13+
(fizzBuzz, index) =>
14+
`<div class="result-item-fizzbuzz bg-${
15+
{
16+
"fizz buzz": "red",
17+
fizz: "blue",
18+
buzz: "green",
19+
}[fizzBuzz]
20+
}">${index + 1} ${fizzBuzz}</div>`,
21+
)
22+
.join("");
23+
} catch (error) {
24+
alert(error.message);
25+
console.error(error);
26+
}
27+
});

‎pages/functional/adapter/palindrome.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { generatePalindromeStatus } from "../js/palindrome.js";
2+
3+
document.getElementById("form").addEventListener("submit", function (event) {
4+
event.preventDefault();
5+
6+
try {
7+
const word = event.target["word"].value;
8+
const method = event.target["method"].value;
9+
10+
const result = generatePalindromeStatus(word, method);
11+
12+
document.getElementById("result").textContent = result;
13+
} catch (error) {
14+
alert(error.message);
15+
console.error(error);
16+
}
17+
});

‎pages/functional/factorial.html‎

Lines changed: 68 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,68 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>RWID Git - Factorial</title>
7-
<link
8-
rel="shortcut icon"
9-
href="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
10-
type="image/x-icon"
11-
/>
12-
<link rel="stylesheet" href="../css/index.css" />
13-
</head>
14-
15-
<body>
16-
<main class="main-container">
17-
<h1>Factorial (Functional)</h1>
18-
<form id="form">
19-
<div class="input-number-container">
20-
<label for="n">Input the n number</label>
21-
<input
22-
type="number"
23-
name="n"
24-
id="n"
25-
min="0"
26-
step="1"
27-
required="required"
28-
/>
29-
</div>
30-
31-
<div class="method-container">
32-
<label>Choose the method</label>
33-
34-
<label for="method-loop" class="method-item">
35-
<input
36-
type="radio"
37-
name="method"
38-
id="method-loop"
39-
value="loop"
40-
required="required"
41-
/>
42-
<span>Loop</span></label
43-
>
44-
<label for="method-recursive" class="method-item">
45-
<input
46-
type="radio"
47-
name="method"
48-
id="method-recursive"
49-
value="recursive"
50-
required="required"
51-
/>
52-
<span>Recursive</span></label
53-
>
54-
</div>
55-
56-
<button type="submit">Count Factorial</button>
57-
</form>
58-
59-
<p>
60-
<strong>Result: <span id="result">-</span></strong>
61-
</p>
62-
63-
<p><a href="/">Back to Homepage</a></p>
64-
</main>
65-
66-
<script type="module" src="./js/factorial.js"></script>
67-
</body>
68-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>RWID Git - Factorial</title>
7+
<link
8+
rel="shortcut icon"
9+
href="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
10+
type="image/x-icon"
11+
/>
12+
<link rel="stylesheet" href="../css/index.css" />
13+
</head>
14+
15+
<body>
16+
<main class="main-container">
17+
<h1>Factorial (Functional)</h1>
18+
<form id="form">
19+
<div class="input-number-container">
20+
<label for="n">Input the n number</label>
21+
<input
22+
type="number"
23+
name="n"
24+
id="n"
25+
min="0"
26+
step="1"
27+
required="required"
28+
/>
29+
</div>
30+
31+
<div class="method-container">
32+
<label>Choose the method</label>
33+
34+
<label for="method-loop" class="method-item">
35+
<input
36+
type="radio"
37+
name="method"
38+
id="method-loop"
39+
value="loop"
40+
required="required"
41+
/>
42+
<span>Loop</span></label
43+
>
44+
<label for="method-recursive" class="method-item">
45+
<input
46+
type="radio"
47+
name="method"
48+
id="method-recursive"
49+
value="recursive"
50+
required="required"
51+
/>
52+
<span>Recursive</span></label
53+
>
54+
</div>
55+
56+
<button type="submit">Count Factorial</button>
57+
</form>
58+
59+
<p>
60+
<strong>Result: <span id="result">-</span></strong>
61+
</p>
62+
63+
<p><a href="/">Back to Homepage</a></p>
64+
</main>
65+
66+
<script type="module" src="./adapter/factorial.js"></script>
67+
</body>
68+
</html>

‎pages/functional/fibonacci.html‎

Lines changed: 67 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,67 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>RWID Git - Fibonacci</title>
7-
<link
8-
rel="shortcut icon"
9-
href="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
10-
type="image/x-icon"
11-
/>
12-
<link rel="stylesheet" href="../css/index.css" />
13-
</head>
14-
15-
<body>
16-
<main class="main-container">
17-
<h1>Fibonacci (Functional)</h1>
18-
19-
<form id="form">
20-
<div class="input-number-container">
21-
<label for="sequence">Input the length of the array</label>
22-
<input
23-
type="number"
24-
name="sequence"
25-
id="sequence"
26-
min="1"
27-
step="1"
28-
required="required"
29-
/>
30-
</div>
31-
32-
<label>Choose the method</label>
33-
<div class="method-container">
34-
<label for="method-loop" class="method-item">
35-
<input
36-
type="radio"
37-
name="method"
38-
id="method-loop"
39-
value="loop"
40-
required="required"
41-
/>
42-
<span>Loop</span></label
43-
>
44-
<label for="method-recursive" class="method-item">
45-
<input
46-
type="radio"
47-
name="method"
48-
id="method-recursive"
49-
value="recursive"
50-
required="required"
51-
/>
52-
<span>Recursive</span></label
53-
>
54-
</div>
55-
56-
<button type="submit">Generate Fibonacci</button>
57-
</form>
58-
59-
<p><strong>Result:</strong></p>
60-
<div class="result-container-fibonacci" id="result"></div>
61-
62-
<p><a href="/">Back to Homepage</a></p>
63-
</main>
64-
65-
<script type="module" src="./js/fibonacci.js"></script>
66-
</body>
67-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>RWID Git - Fibonacci</title>
7+
<link
8+
rel="shortcut icon"
9+
href="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
10+
type="image/x-icon"
11+
/>
12+
<link rel="stylesheet" href="../css/index.css" />
13+
</head>
14+
15+
<body>
16+
<main class="main-container">
17+
<h1>Fibonacci (Functional)</h1>
18+
19+
<form id="form">
20+
<div class="input-number-container">
21+
<label for="sequence">Input the length of the array</label>
22+
<input
23+
type="number"
24+
name="sequence"
25+
id="sequence"
26+
min="1"
27+
step="1"
28+
required="required"
29+
/>
30+
</div>
31+
32+
<label>Choose the method</label>
33+
<div class="method-container">
34+
<label for="method-loop" class="method-item">
35+
<input
36+
type="radio"
37+
name="method"
38+
id="method-loop"
39+
value="loop"
40+
required="required"
41+
/>
42+
<span>Loop</span></label
43+
>
44+
<label for="method-recursive" class="method-item">
45+
<input
46+
type="radio"
47+
name="method"
48+
id="method-recursive"
49+
value="recursive"
50+
required="required"
51+
/>
52+
<span>Recursive</span></label
53+
>
54+
</div>
55+
56+
<button type="submit">Generate Fibonacci</button>
57+
</form>
58+
59+
<p><strong>Result:</strong></p>
60+
<div class="result-container-fibonacci" id="result"></div>
61+
62+
<p><a href="/">Back to Homepage</a></p>
63+
</main>
64+
65+
<script type="module" src="./adapter/fibonacci.js"></script>
66+
</body>
67+
</html>

0 commit comments

Comments
 (0)