はじめに
今日はサマーウォーズのフィルムコンサートということもあり，日付から秒で曜日を算出し表示するWEBアプリケーションを作ってみたのでここに残します．
本当に最低限の機能なので，デザインとかうんぬんかんぬんはありません！
実際のWEBアプリはこちらです．
先週から，突発的にWEBサイトも作り始めたので，これは研究の息抜きに成長させていきます．
html，css，javascriptの３つのファイルをすべて同じフォルダに格納してください！
注意！
現在，PCではギリで数値を打ち込めるようになってますが，スマホ等だとカレンダーしか出てこなくてただのカレンダーアプリと化しています
HTML
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日付から曜日を求めるアプリ</title>
<title>Date2DayOfWeek</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>日付から曜日を求めるアプリ</h1>
<div id="app">
<label for="dateInput">日付を入力してください（例：2024-06-30）:</label>
<input type="date" id="dateInput" required>
<button onclick="calculateDay()">曜日を表示</button>
<div id="result"></div>
</div>
<h2><a href= "C:\Users\hiro_\git-box\park\index.html">HOMEへ戻る</a></h2>
<script src="script.js"></script>
</body>
</html>
CSS
style.css
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#app {
margin-top: 20px;
}
input[type="date"] {
margin: 10px 0;
padding: 8px;
}
button {
margin: 10px 0;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
Javascript
script.js
function calculateDay() {
const dateInput = document.getElementById('dateInput').value;
if (dateInput) {
const date = new Date(dateInput);
const weekdays = ["日", "月", "火", "水", "木", "金", "土"];
const day = date.getDay();
const resultText = weekdays[day] + "曜日";
document.getElementById('result').textContent = "入力された日付は " + resultText + " です。";
} else {
document.getElementById('result').textContent = "有効な日付を入力してください。";
}
}