はじめに

今日はサマーウォーズのフィルムコンサートということもあり，日付から秒で曜日を算出し表示する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 = "有効な日付を入力してください。";
    }
}