{"id":19226,"date":"2024-02-16T16:53:31","date_gmt":"2024-02-16T07:53:31","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=19226"},"modified":"2024-02-16T16:53:32","modified_gmt":"2024-02-16T07:53:32","slug":"%e3%81%a4%e3%81%b6%e3%82%84%e3%81%8d%e3%82%a2%e3%83%97%e3%83%aa%e3%80%8celder%e3%80%8d","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=19226","title":{"rendered":"\u3064\u3076\u3084\u304d\u30a2\u30d7\u30ea\u300cELDER\u300d"},"content":{"rendered":"\n

index.html<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang="ja">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>ELDER<\/title>\n    <link rel="stylesheet" href="styles.css">\n<\/head>\n<body>\n    <header>\n        <h1>ELDER<\/h1>\n    <\/header>\n\n    <main>\n        <section id="post-form">\n            <h2>\u3064\u3076\u3084\u304f<\/h2>\n            <form id="tweet-form">\n                <input type="text" id="user-name" placeholder="\u30e6\u30fc\u30b6\u30fc\u540d">\n                <textarea id="tweet-content" placeholder="\u4eca\u4f55\u3092\u3064\u3076\u3084\u304f\uff1f" maxlength="280"><\/textarea>\n                <div id="counter">0 \/ 280<\/div>\n                <button type="submit">\u3064\u3076\u3084\u304f<\/button>\n            <\/form>\n        <\/section>\n\n        <section id="tweets">\n            <h2>\u3064\u3076\u3084\u304d<\/h2>\n            <!-- \u3064\u3076\u3084\u304d\u306e\u8868\u793a\u9818\u57df -->\n        <\/section>\n    <\/main>\n\n    <footer>\n        <p>© 2024 ELDER<\/p>\n    <\/footer>\n\n    <script src="script.js"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre><\/div>\n\n\n\n
styles.css<\/p>\n\n\n\n
\/* Reset CSS *\/\r\nbody, h1, h2, form, textarea, button, input {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\nbody {\r\n    font-family: Arial, sans-serif;\r\n    line-height: 1.6;\r\n    background-color: #f0f0f0;\r\n}\r\n\r\nheader {\r\n    background-color: #333;\r\n    color: #fff;\r\n    text-align: center;\r\n    padding: 10px 0;\r\n}\r\n\r\nmain {\r\n    margin-top: 20px;\r\n}\r\n\r\n#post-form, #tweets {\r\n    background-color: #fff;\r\n    padding: 20px;\r\n    margin-bottom: 20px;\r\n    border-radius: 5px;\r\n}\r\n\r\ninput[type="text"], textarea {\r\n    width: 100%;\r\n    padding: 10px;\r\n    margin-bottom: 10px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 3px;\r\n    resize: vertical;\r\n}\r\n\r\n#counter {\r\n    margin-bottom: 10px;\r\n    color: #666;\r\n}\r\n\r\nbutton {\r\n    padding: 10px 20px;\r\n    background-color: #333;\r\n    color: #fff;\r\n    border: none;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n}\r\n\r\nbutton:hover {\r\n    background-color: #555;\r\n}\r\n\r\n.tweet {\r\n    border-bottom: 1px solid #ccc;\r\n    padding: 10px 0;\r\n}\r\n\r\n.tweet-content {\r\n    margin-bottom: 5px;\r\n}\r\n\r\n.tweet-actions {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.like-button, .comment-button {\r\n    background-color: transparent;\r\n    border: none;\r\n    color: #666;\r\n    cursor: pointer;\r\n}\r\n\r\n.like-button:hover, .comment-button:hover {\r\n    color: #333;\r\n}\r\n\r\n.comments {\r\n    margin-top: 10px;\r\n    padding: 10px;\r\n    background-color: #f9f9f9;\r\n    border-radius: 3px;\r\n}\r\n\r\n.comment-input {\r\n    width: calc(100% - 80px);\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.comment-list {\r\n    list-style: none;\r\n    padding: 0;\r\n}\r\n\r\n.comment-item {\r\n    border-bottom: 1px solid #ccc;\r\n    padding: 5px 0;\r\n}\r\n\r\n.comment-author {\r\n    font-weight: bold;\r\n    margin-bottom: 5px;\r\n}\r\n\r\n.comment-content {\r\n    margin-left: 20px;\r\n}\r\n<\/code><\/pre><\/div>\n\n\n\n
script.js<\/p>\n\n\n\n
document.addEventListener("DOMContentLoaded", function() {\r\n    const tweetForm = document.getElementById("tweet-form");\r\n    const userNameInput = document.getElementById("user-name");\r\n    const tweetContent = document.getElementById("tweet-content");\r\n    const tweetsSection = document.getElementById("tweets");\r\n    const counter = document.getElementById("counter");\r\n\r\n    \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\r\n    let tweets = JSON.parse(localStorage.getItem("tweets")) || [];\r\n\r\n    \/\/ \u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\u306b\u4fdd\u5b58\u3055\u308c\u305f\u3064\u3076\u3084\u304d\u3092\u8868\u793a\r\n    tweets.forEach(function(tweet) {\r\n        displayTweet(tweet);\r\n    });\r\n\r\n    \/\/ \u3064\u3076\u3084\u304d\u3092\u6295\u7a3f\u3059\u308b\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\r\n    tweetForm.addEventListener("submit", function(event) {\r\n        event.preventDefault(); \/\/ \u30d5\u30a9\u30fc\u30e0\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u52d5\u4f5c\u3092\u30ad\u30e3\u30f3\u30bb\u30eb\r\n\r\n        const content = tweetContent.value.trim();\r\n        const userName = userNameInput.value.trim();\r\n        if (userName === "") {\r\n            alert("\u30e6\u30fc\u30b6\u30fc\u540d\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\uff01");\r\n            return;\r\n        }\r\n        if (content === "") {\r\n            alert("\u3064\u3076\u3084\u304d\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\uff01");\r\n            return;\r\n        }\r\n\r\n        if (content.length > 280) {\r\n            alert("\u3064\u3076\u3084\u304d\u306f280\u6587\u5b57\u4ee5\u5185\u3067\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\uff01");\r\n            return;\r\n        }\r\n\r\n        \/\/ \u3064\u3076\u3084\u304d\u3092\u8868\u793a\u3059\u308b\r\n        displayTweet({userName: userName, content: content, likes: 0});\r\n\r\n        \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u306b\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\r\n        tweets.push({userName: userName, content: content, likes: 0});\r\n        localStorage.setItem("tweets", JSON.stringify(tweets));\r\n\r\n        \/\/ \u30d5\u30a9\u30fc\u30e0\u3092\u30af\u30ea\u30a2\u3059\u308b\r\n        tweetContent.value = "";\r\n        userNameInput.value = "";\r\n        counter.textContent = "0 \/ 280";\r\n    });\r\n\r\n    \/\/ \u6587\u5b57\u6570\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u66f4\u65b0\r\n    tweetContent.addEventListener("input", function() {\r\n        const contentLength = tweetContent.value.length;\r\n        counter.textContent = contentLength + " \/ 280";\r\n    });\r\n\r\n    \/\/ \u3064\u3076\u3084\u304d\u3092\u8868\u793a\u3059\u308b\u95a2\u6570\r\n    function displayTweet(tweet) {\r\n        const tweetDiv = document.createElement("div");\r\n        tweetDiv.classList.add("tweet");\r\n\r\n        const tweetContentDiv = document.createElement("div");\r\n        tweetContentDiv.classList.add("tweet-content");\r\n        tweetContentDiv.textContent = tweet.content;\r\n\r\n        const tweetActionsDiv = document.createElement("div");\r\n        tweetActionsDiv.classList.add("tweet-actions");\r\n\r\n        const likeButton = document.createElement("button");\r\n        likeButton.classList.add("like-button");\r\n        likeButton.textContent = "\u3044\u3044\u306d";\r\n        likeButton.addEventListener("click", function() {\r\n            tweet.likes++;\r\n            localStorage.setItem("tweets", JSON.stringify(tweets));\r\n            updateTweet(tweet, tweetDiv);\r\n        });\r\n\r\n        const commentButton = document.createElement("button");\r\n        commentButton.classList.add("comment-button");\r\n        commentButton.textContent = "\u30b3\u30e1\u30f3\u30c8";\r\n\r\n        tweetActionsDiv.appendChild(likeButton);\r\n        tweetActionsDiv.appendChild(commentButton);\r\n\r\n        tweetDiv.appendChild(tweetContentDiv);\r\n        tweetDiv.appendChild(tweetActionsDiv);\r\n\r\n        updateTweet(tweet, tweetDiv);\r\n\r\n        tweetsSection.prepend(tweetDiv); \/\/ \u65b0\u3057\u3044\u3064\u3076\u3084\u304d\u3092\u4e0a\u306b\u8868\u793a\r\n    }\r\n\r\n    \/\/ \u3064\u3076\u3084\u304d\u306e\u8868\u793a\u3092\u66f4\u65b0\u3059\u308b\u95a2\u6570\r\n    function updateTweet(tweet, tweetDiv) {\r\n        tweetDiv.innerHTML = ""; \/\/ \u65e2\u5b58\u306e\u8868\u793a\u3092\u30af\u30ea\u30a2\r\n\r\n        const tweetContentDiv = document.createElement("div");\r\n        tweetContentDiv.classList.add("tweet-content");\r\n        tweetContentDiv.textContent = `${tweet.userName}: ${tweet.content}`;\r\n\r\n        const tweetActionsDiv = document.createElement("div");\r\n        tweetActionsDiv.classList.add("tweet-actions");\r\n        const likeButton = document.createElement("button");\r\n        likeButton.classList.add("like-button");\r\n        likeButton.textContent = `\u3044\u3044\u306d (${tweet.likes})`;\r\n        likeButton.addEventListener("click", function() {\r\n            tweet.likes++;\r\n            localStorage.setItem("tweets", JSON.stringify(tweets));\r\n            updateTweet(tweet, tweetDiv);\r\n        });\r\n\r\n        const commentButton = document.createElement("button");\r\n        commentButton.classList.add("comment-button");\r\n        commentButton.textContent = "\u30b3\u30e1\u30f3\u30c8";\r\n\r\n        tweetActionsDiv.appendChild(likeButton);\r\n        tweetActionsDiv.appendChild(commentButton);\r\n\r\n        tweetDiv.appendChild(tweetContentDiv);\r\n        tweetDiv.appendChild(tweetActionsDiv);\r\n    }\r\n});\r\n<\/code><\/pre><\/div>\n\n\n\n
http:\/\/tyosuke20xx.com\/ELDER\/index.html<\/p>\n","protected":false},"excerpt":{"rendered":"
index.html styles.css script.js http:\/\/tyosuke20xx.com\/ELDER\/index.html<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-19226","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/19226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19226"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/19226\/revisions"}],"predecessor-version":[{"id":19227,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/19226\/revisions\/19227"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=19226"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=19226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}