Style the input box

Author: benfoxall

index.html

@@ -10,8 +10,11 @@
 
 
     <form>
-      <textarea name="message" placeholder="What is populated with it"></textarea>
-      <input type="submit" /> 
+      <textarea name="message" placeholder="What's happening here" rows="1"></textarea>
+
+      <button>
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M440-400h80v-120h120v-80H520v-120h-80v120H320v80h120v120Zm40 214q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>
+      </button>
     </form>
 
     <ol>

src/main.ts

@@ -78,4 +78,17 @@ form?.addEventListener('submit', async e => {
 
   form.reset()
 
-})
+})
+
+
+// resize any text areas to fit content
+for(const textarea of document.querySelectorAll('textarea')) {
+
+  textarea.addEventListener('input', () => {
+      const padding = 12;
+
+      textarea.style.height = 'auto';
+      textarea.style.height = `${textarea.scrollHeight - (padding * 2)}px`;
+  })
+}
+

src/style.css

@@ -23,12 +23,9 @@ a:hover {
 }
 
 body {
-  margin: 3em;
-  /* display: flex; */
-  /* flex-direction: column; */
-  /* place-items: center; */
-  min-width: 320px;
-  min-height: 100vh;
+  max-width: 500px;
+  margin: auto ;
+  padding: 1em;
 }
 
 @media (prefers-color-scheme: light) {
@@ -39,7 +36,34 @@ body {
   a:hover {
     color: #747bff;
   }
-  button {
-    background-color: #f9f9f9;
-  }
+}
+
+
+form {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+button {
+  border-radius: 100%;
+  border: none;
+  height: 42px;
+  width: 42px;
+  display: flex;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  background-color: #7773;
+}
+
+textarea {
+  border-radius: 22px;
+  padding: 12px;
+  font-family: inherit;
+  resize: none;
+  border: none;
+  flex: 1;
+  font-weight: 600;
+  background-color: #7773;
 }