index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Web Page</title>
<style>
.highlight {
color: blue;
font-weight: bold;
}
.listItem {
cursor: pointer;
}
#inputField::placeholder {
color: #999; /* ヒントテキストの色を設定 */
}
</style>
</head>
<body>
<h1>Interactive Web Page</h1>
<p>Type something in the input box below and click 'Add' to add it to the list:</p>
<input type="text" id="inputField" placeholder="Type here...">
<span id="charCount">0</span> characters
<button id="addButton">Add</button>
<ul id="listContainer">
<!-- Items will be dynamically added here -->
</ul>
<script src="script.js"></script>
</body>
</html>
script.js
document.addEventListener("DOMContentLoaded", function() {
var inputField = document.getElementById("inputField");
var charCount = document.getElementById("charCount");
var addButton = document.getElementById("addButton");
var listContainer = document.getElementById("listContainer");
inputField.addEventListener("input", function() {
// 入力された文字数を更新
charCount.textContent = inputField.value.length;
});
inputField.addEventListener("focus", function() {
// 入力フォームがフォーカスされたときにヒントテキストを非表示にする
inputField.placeholder = "";
});
inputField.addEventListener("blur", function() {
// 入力フォームがフォーカスを失ったときにヒントテキストを再表示する
inputField.placeholder = "Type here...";
});
addButton.addEventListener("click", function() {
var userInput = inputField.value.trim();
if (userInput !== "") {
var listItem = document.createElement("li");
var now = new Date(); // 現在の日時を取得
listItem.textContent = userInput + " - " + now.toLocaleString(); // テキストと日時を結合して表示
listItem.classList.add("listItem");
// リストアイテムを追加する際にアニメーションを付ける
listItem.style.opacity = "0"; // 最初は透明に設定
listContainer.appendChild(listItem);
listItem.style.transition = "opacity 0.5s"; // アニメーションの設定
listItem.offsetHeight; // レンダリングをトリガーするためのダミー
listItem.style.opacity = "1"; // 透明度を元に戻す
inputField.value = "";
charCount.textContent = "0"; // 文字数をリセット
listItem.addEventListener("click", function() {
listItem.classList.toggle("highlight"); // リストアイテムがクリックされたときに強調表示を切り替える
});
}
});
});
