<!DOCTYPE html>
<html>
<head>
<title>Schedule Visualizer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: #f2f2f2;
}
.container {
margin: 0 auto;
max-width: 600px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
margin-top: 0;
color: #333;
}
.form-group {
margin: 10px 0;
}
label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
input[type="text"] {
padding: 10px;
border-radius: 5px;
border: none;
background-color: #f2f2f2;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
}
.button {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
width: 100%;
margin-top: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
th {
background-color: #4CAF50;
color: #fff;
}
.warning {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Schedule Visualizer</h1>
<div class="form-group">
<label for="schedule">Enter your schedule:</label>
<input type="text" id="schedule" placeholder="e.g. Monday 9am-12pm Math class, Tuesday 1pm-3pm Gym, Wednesday 2pm-4pm History class">
</div>
<button class="button" onclick="visualizeSchedule()">Visualize Schedule</button>
<div id="scheduleTable"></div>
<div id="warning"></div>
</div>
<script>
function visualizeSchedule() {
const schedule = document.getElementById("schedule").value.trim();
if (schedule === "") {
document.getElementById("warning").innerHTML = "Please enter your schedule.";
document.getElementById("scheduleTable").innerHTML = "";
return;
}
const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const timeSlots = [
"12am-1am", "1am-2am", "2am-3am", "3am-4am", "4am-5am", "5am-6am",
"6am-7am", "7am-8am", "8am-9am", "9am-10am", "10am-11am", "11am-12pm",
"12pm-1pm", "1pm-2pm", "2pm-3pm", "3pm-4pm", "4pm-5pm", "5pm-6pm",
"6pm-7pm", "7pm-8pm", "8pm-9pm", "9pm-10pm", "10pm-11pm", "11pm-12am"
];
const scheduleTable = "<table><thead><tr><th></th>";
days.forEach(function(day) {
scheduleTable += "<th>" + day + "</th>";
});
scheduleTable += "</tr></thead><tbody>";
timeSlots.forEach(function(timeSlot) {
scheduleTable += "<tr><td>" + timeSlot + "</td>";
days.forEach(function(day) {
let regex = new RegExp(day + "\\s+\\d{1,2}[ap]m-\\d{1,2}[ap]m", "gi");
let result = regex.exec(schedule);
if (result) {
scheduleTable += "<td>" + result[0] + "</td>";
} else {
scheduleTable += "<td></td>";
}
});
scheduleTable += "</tr>";
});
scheduleTable += "</tbody></table>";
document.getElementById("warning").innerHTML = "";
document.getElementById("scheduleTable").innerHTML = scheduleTable;
}
</script>
</body>
</html>
※ジョークはありません。
