{"id":25306,"date":"2024-04-02T14:26:28","date_gmt":"2024-04-02T05:26:28","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25306"},"modified":"2024-04-02T14:26:31","modified_gmt":"2024-04-02T05:26:31","slug":"social-networking-service","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25306","title":{"rendered":"Social Networking Service"},"content":{"rendered":"\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Social Networking Service<\/title>\r\n<link href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n<style>\r\n  body {\r\n    padding: 20px;\r\n  }\r\n  .card {\r\n    margin-bottom: 20px;\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n  <h1 class=\"text-center mb-4\">Social Networking Service<\/h1>\r\n\r\n  <!-- \u30ed\u30b0\u30a4\u30f3\u30d5\u30a9\u30fc\u30e0 -->\r\n  <div id=\"loginForm\" class=\"card w-50 mx-auto\">\r\n    <div class=\"card-body\">\r\n      <h2 class=\"card-title text-center mb-4\">Login<\/h2>\r\n      <div class=\"form-group\">\r\n        <input type=\"text\" id=\"loginUsername\" class=\"form-control\" placeholder=\"Username\">\r\n      <\/div>\r\n      <div class=\"form-group\">\r\n        <input type=\"password\" id=\"loginPassword\" class=\"form-control\" placeholder=\"Password\">\r\n      <\/div>\r\n      <button onclick=\"login()\" class=\"btn btn-primary btn-block\">Login<\/button>\r\n      <button onclick=\"registerForm()\" class=\"btn btn-secondary btn-block\">Register<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \u767b\u9332\u30d5\u30a9\u30fc\u30e0 -->\r\n  <div id=\"registerForm\" class=\"card w-50 mx-auto\" style=\"display: none;\">\r\n    <div class=\"card-body\">\r\n      <h2 class=\"card-title text-center mb-4\">Register<\/h2>\r\n      <div class=\"form-group\">\r\n        <input type=\"text\" id=\"registerName\" class=\"form-control\" placeholder=\"Full Name\">\r\n      <\/div>\r\n      <div class=\"form-group\">\r\n        <input type=\"text\" id=\"registerUsername\" class=\"form-control\" placeholder=\"Username\">\r\n      <\/div>\r\n      <div class=\"form-group\">\r\n        <input type=\"password\" id=\"registerPassword\" class=\"form-control\" placeholder=\"Password\">\r\n      <\/div>\r\n      <button onclick=\"register()\" class=\"btn btn-primary btn-block\">Register<\/button>\r\n      <button onclick=\"loginForm()\" class=\"btn btn-secondary btn-block\">Back to Login<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb -->\r\n  <div id=\"profile\" class=\"card w-50 mx-auto\" style=\"display: none;\">\r\n    <div class=\"card-body\">\r\n      <h2 class=\"card-title text-center mb-4\">Profile<\/h2>\r\n      <p><strong>Name:<\/strong> <span id=\"profileName\"><\/span><\/p>\r\n      <p><strong>Username:<\/strong> <span id=\"profileUsername\"><\/span><\/p>\r\n      <button onclick=\"logout()\" class=\"btn btn-danger btn-block\">Logout<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \u6295\u7a3f\u30d5\u30a9\u30fc\u30e0 -->\r\n  <div id=\"postForm\" class=\"card w-75 mx-auto\" style=\"display: none;\">\r\n    <div class=\"card-body\">\r\n      <h2 class=\"card-title text-center mb-4\">Create Post<\/h2>\r\n      <div class=\"form-group\">\r\n        <textarea id=\"postContent\" class=\"form-control\" rows=\"3\" placeholder=\"What's on your mind?\"><\/textarea>\r\n      <\/div>\r\n      <button onclick=\"createPost()\" class=\"btn btn-primary btn-block\">Post<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \u6295\u7a3f\u4e00\u89a7 -->\r\n  <div id=\"postList\" class=\"w-75 mx-auto mt-4\"><\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.slim.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.5.4\/dist\/umd\/popper.min.js\"><\/script>\r\n<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"><\/script>\r\n<script>\r\n  let currentUser = null; \/\/ \u73fe\u5728\u306e\u30ed\u30b0\u30a4\u30f3\u30e6\u30fc\u30b6\u30fc\r\n  let users = []; \/\/ \u30e6\u30fc\u30b6\u30fc\u306e\u914d\u5217\r\n  let posts = []; \/\/ \u6295\u7a3f\u306e\u914d\u5217\r\n\r\n  function login() {\r\n    const username = document.getElementById('loginUsername').value;\r\n    const password = document.getElementById('loginPassword').value;\r\n    const user = users.find(u => u.username === username && u.password === password);\r\n    if (user) {\r\n      currentUser = user;\r\n      showProfile();\r\n    } else {\r\n      alert('Invalid username or password.');\r\n    }\r\n  }\r\n\r\n  function logout() {\r\n    currentUser = null;\r\n    hideAll();\r\n    document.getElementById('loginForm').style.display = 'block';\r\n  }\r\n\r\n  function registerForm() {\r\n    hideAll();\r\n    document.getElementById('registerForm').style.display = 'block';\r\n  }\r\n\r\n  function register() {\r\n    const name = document.getElementById('registerName').value;\r\n    const username = document.getElementById('registerUsername').value;\r\n    const password = document.getElementById('registerPassword').value;\r\n    users.push({ name, username, password });\r\n    alert('Registration successful! Please login.');\r\n    loginForm();\r\n  }\r\n\r\n  function loginForm() {\r\n    hideAll();\r\n    document.getElementById('loginForm').style.display = 'block';\r\n  }\r\n\r\n  function showProfile() {\r\n    hideAll();\r\n    document.getElementById('profile').style.display = 'block';\r\n    document.getElementById('profileName').textContent = currentUser.name;\r\n    document.getElementById('profileUsername').textContent = currentUser.username;\r\n    document.getElementById('postForm').style.display = 'block';\r\n    displayPosts();\r\n  }\r\n\r\n  function createPost() {\r\n    const postContent = document.getElementById('postContent').value;\r\n    if (postContent.trim() !== '') {\r\n      const post = {\r\n        id: Date.now(),\r\n        content: postContent,\r\n        author: currentUser.name,\r\n        authorUsername: currentUser.username,\r\n        likes: 0,\r\n        comments: []\r\n      };\r\n      posts.unshift(post); \/\/ \u6700\u65b0\u306e\u6295\u7a3f\u3092\u5148\u982d\u306b\u8ffd\u52a0\r\n      displayPosts();\r\n      document.getElementById('postContent').value = ''; \/\/ \u6295\u7a3f\u5f8c\u3001\u5165\u529b\u6b04\u3092\u7a7a\u306b\u3059\u308b\r\n    }\r\n  }\r\n\r\n  function displayPosts() {\r\n    const postList = document.getElementById('postList');\r\n    postList.innerHTML = '';\r\n    posts.forEach(post => {\r\n      const postElement = document.createElement('div');\r\n      postElement.innerHTML = `\r\n        <div class=\"card mb-3\">\r\n          <div class=\"card-body\">\r\n            <p class=\"card-text\">${post.content}<\/p>\r\n            <small class=\"text-muted\">Posted by ${post.author} (@${post.authorUsername}) at ${new Date(post.id).toLocaleString()}<\/small><br>\r\n            <button onclick=\"likePost(${post.id})\" class=\"btn btn-primary btn-sm mt-2\">Like (${post.likes})<\/button>\r\n            <button onclick=\"showComments(${post.id})\" class=\"btn btn-secondary btn-sm mt-2\">Comments<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      `;\r\n      postList.appendChild(postElement);\r\n    });\r\n  }\r\n\r\n  function likePost(postId) {\r\n    const post = posts.find(p => p.id === postId);\r\n    post.likes++;\r\n    displayPosts();\r\n  }\r\n\r\n  function showComments(postId) {\r\n    const post = posts.find(p => p.id === postId);\r\n    const comments = prompt('Enter your comment:');\r\n    if (comments !== null && comments.trim() !== '') {\r\n      post.comments.push({ author: currentUser.name, content: comments });\r\n      displayPosts();\r\n    }\r\n  }\r\n\r\n  function hideAll() {\r\n    document.getElementById('loginForm').style.display = 'none';\r\n    document.getElementById('registerForm').style.display = 'none';\r\n    document.getElementById('profile').style.display = 'none';\r\n    document.getElementById('postForm').style.display = 'none';\r\n  }\r\n\r\n  users.push({ name: 'User One', username: 'user1', password: 'password1' });\r\n  users.push({ name: 'User Two', username: 'user2', password: 'password2' });\r\n\r\n  hideAll();\r\n  document.getElementById('loginForm').style.display = 'block';\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","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":[81,80,78],"tags":[30,42,41,3],"class_list":["post-25306","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-javascript","tag-css","tag-html","tag-javascript","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25306","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=25306"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25306\/revisions"}],"predecessor-version":[{"id":25307,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25306\/revisions\/25307"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25306"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}