Name input component

client/src/App.css

@@ -1,11 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 
-.App {
-  font-family: "Tinos", serif;
-  font-weight: 400;
-  font-style: normal;
-}
-
 body,
 html,
 #root,
@@ -17,6 +11,9 @@ html,
 }
 
 .App {
+  font-family: "Tinos", serif;
+  font-weight: 400;
+  font-style: normal;
   text-align: center;
   position: relative;
   height: 100vh;
@@ -28,6 +25,10 @@ html,
   pointer-events: none;
 }
 
+.hidden {
+  visibility: hidden;
+}
+
 .header {
   font-size: 80px;
   margin: 8px;
@@ -41,8 +42,9 @@ html,
 }
 
 .sub-sub-header {
-  font-size: 32px;
-  margin-bottom: 12px;
+  font-size: 34px;
+  margin-top: 18px;
+  margin-bottom: 18px;
   font-weight: normal;
 }
 

client/src/components/NameInput.jsx

@@ -1,22 +1,62 @@
-import React from "react";
+import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
 function NameInput() {
+  const [name, setName] = useState("");
+  const [isNameMissing, setIsNameMissing] = useState(false);
+
+  function handleChange(e) {
+    const inputValue = e.target.value;
+    // Immediately transform the first character to uppercase if it's a letter
+    const updatedValue =
+      inputValue.length === 1
+        ? inputValue.toUpperCase()
+        : inputValue.charAt(0) + inputValue.slice(1);
+
+    setName(updatedValue);
+    if (updatedValue) {
+      setIsNameMissing(false);
+    }
+  }
+
+  function enterCouncil() {
+    if (name) {
+      console.log("Entering council...");
+      setIsNameMissing(false);
+    } else {
+      console.log("No name...");
+      setIsNameMissing(true);
+    }
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      enterCouncil();
+    }
+  }
+
   return (
     <div>
       <h3 className="sub-sub-header">please type your name to enter:</h3>
       <div className="input-icon-wrapper">
         <input
           className="name-input"
           type="text"
+          value={name}
           placeholder="your name"
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
         />
         <FontAwesomeIcon
           icon={faArrowRight}
           className="input-arrow"
+          onClick={enterCouncil}
         />
       </div>
+      <h3 className={`sub-sub-header ${!isNameMissing ? "hidden" : ""}`}>
+        please enter your name to proceed
+      </h3>
     </div>
   );
 }