Skip to content

Instantly share code, notes, and snippets.

@Kazunari-h

Kazunari-h/index.html

Created November 4, 2021 07:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kazunari-h/40e618901c3e9971ce7c771733ffff53 to your computer and use it in GitHub Desktop.
Save Kazunari-h/40e618901c3e9971ce7c771733ffff53 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自習室時間割</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="w-9/12 mx-auto p-4">
<h1 class="text-center">自習室の時間割</h1>
<!-- 曜日ごとの時間割 -->
<div class="grid grid-cols-7 gap-1">
<div class="text-white font-bold bg-black"></div>
<div class="text-gray-700 font-bold text-center">月</div>
<div class="text-gray-700 font-bold text-center">火</div>
<div class="text-gray-700 font-bold text-center">水</div>
<div class="text-gray-700 font-bold text-center">木</div>
<div class="text-gray-700 font-bold text-center">金</div>
<div class="text-gray-700 font-bold text-center">土</div>
</div>
<div id="timetable">
<div class="grid grid-cols-7 gap-1">
<div class="text-gray-700 text-center">1限</div>
</div>
<div class="grid grid-cols-7 gap-1">
<div class="text-gray-700 text-center">2限</div>
</div>
<div class="grid grid-cols-7 gap-1">
<div class="text-gray-700 text-center">3限</div>
</div>
<div class="grid grid-cols-7 gap-1">
<div class="text-gray-700 text-center">4限</div>
</div>
<div class="grid grid-cols-7 gap-1">
<div class="text-gray-700 text-center">5限</div>
</div>
<div class="grid grid-cols-7 gap-1">
<div class="text-gray-700 text-center">6限</div>
</div>
</div>
</div>
</body>
<script>
// 時間割APIにアクセス
// axios
// {
// "月": [["202", "202", "202"], [], [], [],],
// "火": [],
// "水": [],
// };
axios.get("https://self-study-room.hal2016.com/").then((response) => {
console.log(response.data.data);
const data = response.data.data.map((item) => {
return item.timetable.map((timeItem) => {
return timeItem.available.concat(timeItem.noAvailable);
});
});
function createTableContent(text) {
const p = document.createElement("p");
p.classList.add("text-gray-700", "text-center");
p.innerHTML = text;
return p;
}
data.map((item, index) => {
const div = document.createElement("div");
div.classList.add("grid", "grid-cols-7", "gap-1");
div.appendChild(createTableContent(`${index + 1}限`));
return div;
});
console.log(data);
});
// それぞれのタグに取得した部屋番号を入力
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment