index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ELDER</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>ELDER</h1>
</header>
<main>
<section id="post-form">
<h2>つぶやく</h2>
<form id="tweet-form">
<input type="text" id="user-name" placeholder="ユーザー名">
<textarea id="tweet-content" placeholder="今何をつぶやく？" maxlength="280"></textarea>
<div id="counter">0 / 280</div>
<button type="submit">つぶやく</button>
</form>
</section>
<section id="tweets">
<h2>つぶやき</h2>
<!-- つぶやきの表示領域 -->
</section>
</main>
<footer>
<p>© 2024 ELDER</p>
</footer>
<script src="script.js"></script>
</body>
</html>
styles.css
/* Reset CSS */
body, h1, h2, form, textarea, button, input {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
main {
margin-top: 20px;
}
#post-form, #tweets {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
}
#counter {
margin-bottom: 10px;
color: #666;
}
button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
.tweet {
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.tweet-content {
margin-bottom: 5px;
}
.tweet-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.like-button, .comment-button {
background-color: transparent;
border: none;
color: #666;
cursor: pointer;
}
.like-button:hover, .comment-button:hover {
color: #333;
}
.comments {
margin-top: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 3px;
}
.comment-input {
width: calc(100% - 80px);
margin-bottom: 10px;
}
.comment-list {
list-style: none;
padding: 0;
}
.comment-item {
border-bottom: 1px solid #ccc;
padding: 5px 0;
}
.comment-author {
font-weight: bold;
margin-bottom: 5px;
}
.comment-content {
margin-left: 20px;
}
script.js
document.addEventListener("DOMContentLoaded", function() {
const tweetForm = document.getElementById("tweet-form");
const userNameInput = document.getElementById("user-name");
const tweetContent = document.getElementById("tweet-content");
const tweetsSection = document.getElementById("tweets");
const counter = document.getElementById("counter");
// ローカルストレージからデータを取得
let tweets = JSON.parse(localStorage.getItem("tweets")) || [];
// ページ読み込み時に保存されたつぶやきを表示
tweets.forEach(function(tweet) {
displayTweet(tweet);
});
// つぶやきを投稿するイベントリスナー
tweetForm.addEventListener("submit", function(event) {
event.preventDefault(); // フォームのデフォルトの動作をキャンセル
const content = tweetContent.value.trim();
const userName = userNameInput.value.trim();
if (userName === "") {
alert("ユーザー名を入力してください！");
return;
}
if (content === "") {
alert("つぶやきを入力してください！");
return;
}
if (content.length > 280) {
alert("つぶやきは280文字以内で入力してください！");
return;
}
// つぶやきを表示する
displayTweet({userName: userName, content: content, likes: 0});
// ローカルストレージにデータを保存
tweets.push({userName: userName, content: content, likes: 0});
localStorage.setItem("tweets", JSON.stringify(tweets));
// フォームをクリアする
tweetContent.value = "";
userNameInput.value = "";
counter.textContent = "0 / 280";
});
// 文字数カウンターの更新
tweetContent.addEventListener("input", function() {
const contentLength = tweetContent.value.length;
counter.textContent = contentLength + " / 280";
});
// つぶやきを表示する関数
function displayTweet(tweet) {
const tweetDiv = document.createElement("div");
tweetDiv.classList.add("tweet");
const tweetContentDiv = document.createElement("div");
tweetContentDiv.classList.add("tweet-content");
tweetContentDiv.textContent = tweet.content;
const tweetActionsDiv = document.createElement("div");
tweetActionsDiv.classList.add("tweet-actions");
const likeButton = document.createElement("button");
likeButton.classList.add("like-button");
likeButton.textContent = "いいね";
likeButton.addEventListener("click", function() {
tweet.likes++;
localStorage.setItem("tweets", JSON.stringify(tweets));
updateTweet(tweet, tweetDiv);
});
const commentButton = document.createElement("button");
commentButton.classList.add("comment-button");
commentButton.textContent = "コメント";
tweetActionsDiv.appendChild(likeButton);
tweetActionsDiv.appendChild(commentButton);
tweetDiv.appendChild(tweetContentDiv);
tweetDiv.appendChild(tweetActionsDiv);
updateTweet(tweet, tweetDiv);
tweetsSection.prepend(tweetDiv); // 新しいつぶやきを上に表示
}
// つぶやきの表示を更新する関数
function updateTweet(tweet, tweetDiv) {
tweetDiv.innerHTML = ""; // 既存の表示をクリア
const tweetContentDiv = document.createElement("div");
tweetContentDiv.classList.add("tweet-content");
tweetContentDiv.textContent = `${tweet.userName}: ${tweet.content}`;
const tweetActionsDiv = document.createElement("div");
tweetActionsDiv.classList.add("tweet-actions");
const likeButton = document.createElement("button");
likeButton.classList.add("like-button");
likeButton.textContent = `いいね (${tweet.likes})`;
likeButton.addEventListener("click", function() {
tweet.likes++;
localStorage.setItem("tweets", JSON.stringify(tweets));
updateTweet(tweet, tweetDiv);
});
const commentButton = document.createElement("button");
commentButton.classList.add("comment-button");
commentButton.textContent = "コメント";
tweetActionsDiv.appendChild(likeButton);
tweetActionsDiv.appendChild(commentButton);
tweetDiv.appendChild(tweetContentDiv);
tweetDiv.appendChild(tweetActionsDiv);
}
});
http://tyosuke20xx.com/ELDER/index.html