つぶやきアプリ「ELDER」 - 長留裕平のブログ

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

投稿者: chosuke

趣味はゲームやアニメや漫画などです chosuke のすべての投稿を表示

投稿者: chosuke

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル