{"id":90,"date":"2026-03-17T18:33:22","date_gmt":"2026-03-17T18:33:22","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/c_menhart\/?p=90"},"modified":"2026-03-17T18:33:22","modified_gmt":"2026-03-17T18:33:22","slug":"free-work-i-think","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/c_menhart\/2026\/03\/17\/free-work-i-think\/","title":{"rendered":"free work I think"},"content":{"rendered":"\n<p>so I copied this video <a href=\"https:\/\/www.youtube.com\/watch?v=_sxoqRIbW0c\">https:\/\/www.youtube.com\/watch?v=_sxoqRIbW0c<\/a><\/p>\n\n\n\n<p>this is what I got from it <\/p>\n\n\n\n<p>for the html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\" \/>\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  &lt;title>Chat App&lt;\/title>\n  &lt;link rel=\"stylesheet\" href=\"style.css\" \/>\n&lt;\/head>\n&lt;body>\n  &lt;div class=\"container\">\n    &lt;div class=\"chat-header\">\n      &lt;h3>Chat App&lt;\/h3>\n    &lt;\/div>\n\n    &lt;div class=\"chat-body\" id=\"chat-body\">&lt;\/div>\n\n    &lt;div class=\"chat-input\">\n      &lt;input type=\"text\" id=\"message-input\" placeholder=\"Type a message...\" \/>\n      &lt;button id=\"send-btn\">Send&lt;\/button>\n    &lt;\/div>\n  &lt;\/div>\n\n  &lt;script src=\"script.js\">&lt;\/script>\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<p>i got this for the styles.css <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: Arial, sans-serif;\n}\n\nbody {\n  background: #f5f5f5;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n}\n\n.container {\n  width: 400px;\n  background: #fff;\n  border-radius: 10px;\n  overflow: hidden;\n  box-shadow: 0 0 10px rgba(0,0,0,0.1);\n}\n\n.chat-header {\n  background: #4a76fd;\n  color: #fff;\n  padding: 15px;\n  text-align: center;\n}\n\n.chat-body {\n  height: 400px;\n  padding: 15px;\n  overflow-y: auto;\n}\n\n.message {\n  margin-bottom: 15px;\n  padding: 10px;\n  background: #eaeaea;\n  border-radius: 5px;\n  width: fit-content;\n  max-width: 80%;\n}\n\n.message.you {\n  background: #4a76fd;\n  color: #fff;\n  margin-left: auto;\n}\n\n.chat-input {\n  display: flex;\n  border-top: 1px solid #ddd;\n}\n\n.chat-input input {\n  flex: 1;\n  padding: 15px;\n  border: none;\n  outline: none;\n}\n\n.chat-input button {\n  padding: 15px 20px;\n  background: #4a76fd;\n  color: #fff;\n  border: none;\n  cursor: pointer;\n}\n<\/code><\/pre>\n\n\n\n<p>and this for js <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const chatBody = document.getElementById(\"chat-body\");\nconst messageInput = document.getElementById(\"message-input\");\nconst sendBtn = document.getElementById(\"send-btn\");\n\nfunction addMessage(text, sender = \"you\") {\n  const message = document.createElement(\"div\");\n  message.classList.add(\"message\", sender);\n  message.textContent = text;\n  chatBody.appendChild(message);\n  chatBody.scrollTop = chatBody.scrollHeight;\n}\n\nsendBtn.addEventListener(\"click\", () => {\n  const text = messageInput.value.trim();\n  if (text !== \"\") {\n    addMessage(text, \"you\");\n    messageInput.value = \"\";\n  }\n});\n\nmessageInput.addEventListener(\"keypress\", (e) => {\n  if (e.key === \"Enter\") {\n    sendBtn.click();\n  }\n});\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>so I copied this video https:\/\/www.youtube.com\/watch?v=_sxoqRIbW0c this is what I got from it for the html i got this for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":91,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/90\/revisions\/91"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}