<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動画共有サイト</title>
<style>
/* スタイルは省略 */
</style>
</head>
<body>
<header>
<h1>動画共有サイト</h1>
</header>
<main>
<section id="video-container">
<!-- 動画を表示 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/Qkls4DCX_9I" frameborder="0" allowfullscreen></iframe>
</section>
<section id="comments-container">
<!-- コメントを表示 -->
</section>
<section id="comment-form-container">
<!-- コメントを投稿するフォーム -->
<form id="comment-form">
<textarea id="comment-input" rows="3" placeholder="コメントを入力してください"></textarea>
<button type="submit">コメントを投稿</button>
</form>
</section>
<section id="categories">
<!-- カテゴリ一覧 -->
<h2>カテゴリ</h2>
<ul>
<li><a href="#">音楽</a></li>
<li><a href="#">スポーツ</a></li>
<li><a href="#">ゲーム</a></li>
<li><a href="#">ニュース</a></li>
</ul>
</section>
</main>
<footer>
<!-- お気に入りボタン -->
<button id="favorite-button">お気に入り</button>
<!-- 検索フォーム -->
<input type="text" id="search-input" placeholder="動画を検索">
<button id="search-button">検索</button>
</footer>
<script>
// コメントを追加する関数
function addComment(comment) {
var commentsContainer = document.getElementById('comments-container');
var commentElement = document.createElement('div');
commentElement.textContent = comment;
commentsContainer.appendChild(commentElement);
}
// フォームの送信イベントを処理する
document.getElementById('comment-form').addEventListener('submit', function(event) {
event.preventDefault(); // フォームのデフォルトの動作を停止
var commentInput = document.getElementById('comment-input');
var commentText = commentInput.value.trim(); // 入力されたコメントを取得
if (commentText !== '') {
addComment(commentText); // コメントを追加
commentInput.value = ''; // 入力欄をクリア
}
});
// お気に入りボタンのクリックイベントを処理する
document.getElementById('favorite-button').addEventListener('click', function() {
alert('動画をお気に入りに追加しました！');
});
// 検索ボタンのクリックイベントを処理する
document.getElementById('search-button').addEventListener('click', function() {
var searchInput = document.getElementById('search-input').value.trim();
alert('「' + searchInput + '」で検索しました！');
});
</script>
</body>
</html>
