Add a new atom to the state

assign(socket, guess_string: "")
# or with pipes
|> assign(guess_string: "") # This stores the current state of the word being entered

Update the render logic

<.input type="text" value={@guess_string} label="Guess" disabled name="no-input" />
<.input type="hidden" field={@form[:guess]} value={@guess_string} />

Render keyboard buttons with events

<%= for key <- [:q, :w, :e, :r, :t, :y, :u, :i, :o, :p] do %>
  <div
    phx-click="add_letter"
    phx-value-letter={Atom.to_string(key)}
    class={"cursor-pointer w-8 sm:w-10 p-1 sm:p-2 text-center rounded " <> @keyboard[key]}>
    <%= Atom.to_string(key) |> String.upcase() %>
  </div>
<% end %>

Add the “add_letter” event

def handle_event("add_letter", %{"letter" => letter}, socket) do
  current = socket.assigns.guess_string || ""

  if String.length(current) < 5 do
    {:noreply, assign(socket, guess_string: current <> letter)}
  else
    {:noreply, socket}
  end
end

Ensure assigns are reset after submit

|> assign(guess_string: "")
|> assign(form: to_form(%{"guess" => ""}))

# Add a delete button in the keyboard UI
<div class="mt-2 grid grid-cols-3 gap-1 sm:gap-2">
  <div
    phx-click="delete_letter"
    class="col-span-1 p-2 text-center rounded bg-red-200 cursor-pointer"
  >
    Delete
  </div>
</div>

Handle the delete_letter event

def handle_event("delete_letter", _, socket) do
  updated = socket.assigns.guess_string |> String.slice(0..-2//-1)
  {:noreply, assign(socket, guess_string: updated)}
end