Skip to content

Commit 734d6ca

Browse files
Yuto299Yuto299
authored
Merge pull request #28 from study-basic-hackathon/feature/current_time_ja
現在時刻を表示する実装
2 parents 0565290 + 1712171 commit 734d6ca

File tree

3 files changed

+72
-23
lines changed

3 files changed

+72
-23
lines changed

‎docs/20251214_members/css/style.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,15 @@ header h1 {
7676
font-size: 1.1rem;
7777
}
7878

79+
.current-time {
80+
text-align: center;
81+
color: var(--accent-2);
82+
font-size: 1.2rem;
83+
font-weight: 600;
84+
margin-top: 0.5rem;
85+
letter-spacing: 0.5px;
86+
}
87+
7988
/* ========================================
8089
メインコンテンツ
8190
======================================== */
@@ -334,7 +343,7 @@ footer p {
334343
top: 50%;
335344
transform: translateY(-50%);
336345
background: transparent;
337-
border: 1px solid rgba(0,0,0,0.06);
346+
border: 1px solid rgba(0, 0, 0, 0.06);
338347
color: var(--text);
339348
font-size: 1rem;
340349
padding: 0.4rem 0.6rem;

‎docs/20251214_members/index.html‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,18 @@
2929
<body>
3030
<header>
3131
<div class="container">
32-
<button id="theme-toggle" class="theme-toggle" aria-pressed="false" aria-label="ダークモード切替">
32+
<button
33+
id="theme-toggle"
34+
class="theme-toggle"
35+
aria-pressed="false"
36+
aria-label="ダークモード切替"
37+
>
3338
<span class="label">切替</span>
3439
<span class="icon">🌙</span>
3540
</button>
3641
<h1>🚀 プログラミング初学者の会</h1>
3742
<p class="subtitle">Gitハンズオンセミナー 2025/12/14</p>
43+
<p id="current-time" class="current-time"></p>
3844
</div>
3945
</header>
4046

@@ -56,7 +62,10 @@ <h2>タグでフィルター</h2>
5662
<h2>おみくじ</h2>
5763
<p>今日の運勢を引いてみましょう！</p>
5864
<button id="draw-omikuji">おみくじを引く</button>
59-
<div id="omikuji-result" style="margin-top: 1rem; font-size: 1.5rem; font-weight: bold;"></div>
65+
<div
66+
id="omikuji-result"
67+
style="margin-top: 1rem; font-size: 1.5rem; font-weight: bold"
68+
></div>
6069
</section>
6170

6271
<section id="members" class="members-grid">

‎docs/20251214_members/js/members.js‎

Lines changed: 51 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,19 @@ const members = [
1414
message: "東京たのちぃ。。よろしくお願いします！",
1515
},
1616

17-
1817
// 下記に自分の情報を追加してください。
1918

20-
2119
{
2220
name: "いぐいぐ2",
2321
icon: "🐓",
2422
location: "東京都",
2523
experience: "10年",
2624
language: "Python",
2725
goal: "Gitを使いこなせるようになりたい！",
28-
hobbies: ["プログラミング", "もつ焼き探索", "ギター"],
26+
hobbies: ["プログラミング", "もつ焼き探索", "ギター"],
2927
message: "東京たのちぃ。。よろしくお願いします！",
3028
},
31-
{
29+
{
3230
name: "テクテク⭐️アキレス腱治療中",
3331
icon: "🩼",
3432
location: "東京都",
@@ -46,7 +44,7 @@ const members = [
4644
experience: "2ヶ月",
4745
language: "Java",
4846
goal: "Gitを理解できるようになりたい！",
49-
hobbies: ["ゲーム" , "ホラー映画鑑賞"],
47+
hobbies: ["ゲーム", "ホラー映画鑑賞"],
5048
message: "東京は人多いぃ。。よろしくお願いします！",
5149
},
5250
{
@@ -58,8 +56,8 @@ const members = [
5856
goal: "Gitを知ること",
5957
hobbies: ["画像生成", "タバコ"],
6058
message: "タバコは酸素",
61-
}
62-
// 下記に自分の情報を追加してください。
59+
},
60+
// 下記に自分の情報を追加してください。
6361
// 例：
6462
// {
6563
// name: "あなたの名前",
@@ -79,9 +77,9 @@ let activeFilter = null;
7977
// すべてのタグを取得する関数
8078
function getAllTags() {
8179
const tagSet = new Set();
82-
members.forEach(member => {
80+
members.forEach((member) => {
8381
tagSet.add(member.language);
84-
member.hobbies.forEach(hobby => tagSet.add(hobby));
82+
member.hobbies.forEach((hobby) => tagSet.add(hobby));
8583
});
8684
return Array.from(tagSet).sort();
8785
}
@@ -94,7 +92,7 @@ function generateTagButtons() {
9492
const tags = getAllTags();
9593
tagButtonsContainer.innerHTML = "";
9694

97-
tags.forEach(tag => {
95+
tags.forEach((tag) => {
9896
const button = document.createElement("button");
9997
button.className = "tag-button";
10098
button.textContent = tag;
@@ -109,7 +107,7 @@ function filterMembers(tag) {
109107

110108
// ボタンのアクティブ状態を更新
111109
const buttons = document.querySelectorAll(".tag-button");
112-
buttons.forEach(button => {
110+
buttons.forEach((button) => {
113111
if (button.textContent === tag) {
114112
button.classList.add("active");
115113
} else {
@@ -126,7 +124,7 @@ function clearFilter() {
126124

127125
// ボタンのアクティブ状態を解除
128126
const buttons = document.querySelectorAll(".tag-button");
129-
buttons.forEach(button => button.classList.remove("active"));
127+
buttons.forEach((button) => button.classList.remove("active"));
130128

131129
displayMembers();
132130
}
@@ -194,9 +192,10 @@ function displayMembers() {
194192

195193
// フィルタリングされたメンバーを取得
196194
const filteredMembers = activeFilter
197-
? members.filter(member =>
198-
member.language === activeFilter ||
199-
member.hobbies.includes(activeFilter)
195+
? members.filter(
196+
(member) =>
197+
member.language === activeFilter ||
198+
member.hobbies.includes(activeFilter)
200199
)
201200
: members;
202201

@@ -242,10 +241,36 @@ function updateMemberCount() {
242241
}
243242
}
244243

244+
/**
245+
* 日本時間で現在時刻を表示する関数
246+
*/
247+
function updateCurrentTime() {
248+
const timeElement = document.getElementById("current-time");
249+
if (!timeElement) return;
250+
251+
const now = new Date();
252+
const options = {
253+
timeZone: "Asia/Tokyo",
254+
year: "numeric",
255+
month: "2-digit",
256+
day: "2-digit",
257+
hour: "2-digit",
258+
minute: "2-digit",
259+
second: "2-digit",
260+
hour12: false,
261+
};
262+
263+
const formatter = new Intl.DateTimeFormat("ja-JP", options);
264+
const formattedTime = formatter.format(now);
265+
266+
timeElement.textContent = `🕐 ${formattedTime}`;
267+
}
245268
// 天気情報を取得する関数
246269
async function fetchWeather() {
247270
try {
248-
const response = await fetch('https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json');
271+
const response = await fetch(
272+
"https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json"
273+
);
249274
const data = await response.json();
250275
const currentForecast = data[0];
251276
const weatherArea = currentForecast.timeSeries[0].areas[0]; // 東京地方
@@ -254,14 +279,15 @@ async function fetchWeather() {
254279
const weather = weatherArea.weathers[0]; // 今日の天気
255280
const temp = tempArea.temps[0]; // 現在の気温
256281

257-
document.getElementById('weather-info').innerHTML = `
282+
document.getElementById("weather-info").innerHTML = `
258283
<p><strong>場所:</strong> 東京</p>
259284
<p><strong>今日の天気:</strong> ${weather}</p>
260285
<p><strong>現在の気温:</strong> ${temp}℃</p>
261286
`;
262287
} catch (error) {
263-
document.getElementById('weather-info').innerHTML = '<p>天気情報の取得に失敗しました。</p>';
264-
console.error('Error fetching weather:', error);
288+
document.getElementById("weather-info").innerHTML =
289+
"<p>天気情報の取得に失敗しました。</p>";
290+
console.error("Error fetching weather:", error);
265291
}
266292
}
267293

@@ -278,14 +304,19 @@ document.addEventListener("DOMContentLoaded", () => {
278304
clearFilterButton.addEventListener("click", clearFilter);
279305
}
280306

307+
// 現在時刻を表示し、1秒ごとに更新
308+
updateCurrentTime();
309+
setInterval(updateCurrentTime, 1000);
310+
281311
// おみくじのイベントリスナーを追加
282312
const drawButton = document.getElementById("draw-omikuji");
283313
const resultDiv = document.getElementById("omikuji-result");
284314

285315
if (drawButton && resultDiv) {
286316
drawButton.addEventListener("click", () => {
287317
const fortunes = ["大吉", "中吉", "小吉", "吉", "凶"];
288-
const randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
318+
const randomFortune =
319+
fortunes[Math.floor(Math.random() * fortunes.length)];
289320
resultDiv.textContent = `今日の運勢: ${randomFortune}`;
290321
});
291322
}

0 commit comments

Comments
 (0)