Skip to content

Commit 5da170c

Browse files
nakatermnakaterm
authored
プロジェクトの章を改訂 (#21)
1 parent 0fc4b5b commit 5da170c

20 files changed

Lines changed: 422 additions & 105 deletions

File tree

‎docs/11-project/_samples/counter-minus-styled/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="stylesheet" href="./style.css" />
6+
<title>Title</title>
7+
</head>
8+
<body>
9+
<p id="counter-value">0</p>
10+
<button id="count-down-button" type="button">-</button>
11+
<button id="count-up-button" type="button">+</button>
12+
<script src="./script.js"></script>
13+
</body>
14+
</html>

‎docs/11-project/_samples/counter-minus-styled/script.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
let counter = 0;
2+
3+
function countUp() {
4+
counter = counter + 1;
5+
document.getElementById("counter-value").textContent = counter;
6+
}
7+
8+
function countDown() {
9+
counter = counter - 1;
10+
document.getElementById("counter-value").textContent = counter;
11+
}
12+
13+
document.getElementById("count-up-button").onclick = countUp;
14+
document.getElementById("count-down-button").onclick = countDown;

‎docs/11-project/_samples/counter-minus-styled/style.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
#counter-value {
2+
width: 160px;
3+
font-size: 48px;
4+
text-align: center; /* テキストが中央揃えになるよう指定 */
5+
}
6+
7+
#count-down-button {
8+
width: 80px;
9+
border: none;
10+
font-size: 24px;
11+
border-radius: 20px; /* 角が丸くなるよう指定 */
12+
background-color: royalblue;
13+
color: white;
14+
}
15+
16+
#count-up-button {
17+
width: 80px;
18+
border: none;
19+
font-size: 24px;
20+
border-radius: 20px;
21+
color: white;
22+
background-color: orangered;
23+
}

docs/11-project/_samples/stopwatch/index.html renamed to docs/11-project/_samples/counter-minus/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<title>Title</title>
66
</head>
77
<body>
8-
<p id="timer">0</p>
9-
<button id="start-button" type="button">スタート</button>
10-
<button id="stop-button" type="button">ストップ</button>
8+
<p id="counter-value">0</p>
9+
<button id="count-down-button" type="button">-</button>
10+
<button id="count-up-button" type="button">+</button>
1111
<script src="./script.js"></script>
1212
</body>
1313
</html>

‎docs/11-project/_samples/counter-minus/script.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
let counter = 0;
2+
3+
function countUp() {
4+
counter = counter + 1;
5+
document.getElementById("counter-value").textContent = counter;
6+
}
7+
8+
function countDown() {
9+
counter = counter - 1;
10+
document.getElementById("counter-value").textContent = counter;
11+
}
12+
13+
document.getElementById("count-up-button").onclick = countUp;
14+
document.getElementById("count-down-button").onclick = countDown;

‎docs/11-project/_samples/counter/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<p id="counter-value">0</p>
9+
<button id="count-up-button" type="button">+</button>
10+
<script src="./script.js"></script>
11+
</body>
12+
</html>

‎docs/11-project/_samples/counter/script.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
let counter = 0;
2+
3+
function countUp() {
4+
counter = counter + 1;
5+
document.getElementById("counter-value").textContent = counter;
6+
}
7+
8+
document.getElementById("count-up-button").onclick = countUp;

‎docs/11-project/_samples/omikuji-styled/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="stylesheet" href="./style.css" />
6+
<title>Title</title>
7+
</head>
8+
<body>
9+
<p id="result">結果</p>
10+
<button id="omikuji-button" type="button">おみくじを引く</button>
11+
<script src="./script.js"></script>
12+
</body>
13+
</html>

‎docs/11-project/_samples/omikuji-styled/script.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
function omikuji() {
2+
let r = Math.random();
3+
if (r < 0.2) {
4+
document.getElementById("result").textContent = "大吉";
5+
document.getElementById("result").style.color = "red";
6+
} else if (r < 0.7) {
7+
document.getElementById("result").textContent = "吉";
8+
document.getElementById("result").style.color = "black";
9+
} else {
10+
document.getElementById("result").textContent = "凶";
11+
document.getElementById("result").style.color = "blue";
12+
}
13+
}
14+
15+
document.getElementById("omikuji-button").onclick = omikuji;

‎docs/11-project/_samples/omikuji-styled/style.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#result {
2+
width: 60px;
3+
height: 120px;
4+
font-size: 48px;
5+
font-family: serif;
6+
text-align: center; /* テキストが中央揃えになるよう指定 */
7+
writing-mode: vertical-rl; /* テキストが縦書きになるよう指定 */
8+
}
9+
10+
#omikuji-button {
11+
width: 160px;
12+
height: 36px;
13+
border: none;
14+
border-radius: 10px; /* 角が丸くなるよう指定 */
15+
color: white;
16+
background-color: gray;
17+
}

0 commit comments

Comments
 (0)