dynamically create rooms chatboxes

src/public/rooms.js

@@ -0,0 +1,45 @@
+import { create_listener } from "./chat.js";
+
+render_rooms_wrapper()
+
+async function render_rooms_wrapper() {
+    const room_ids = await request_rooms();
+    console.log(room_ids);
+    render_rooms(room_ids);
+}
+
+function render_rooms(room_id) {
+    const roomsContainer = document.getElementById('rooms');
+    roomsContainer.innerHTML= '';
+
+    room_id.forEach((roomId) => {
+        const roomDiv = document.createElement('div');
+        roomDiv.id = `room-${roomId}`;
+        const messagesUl = document.createElement('ul');
+        messagesUl.id = `messages-${roomId}`;
+        const form = document.createElement('form');
+        form.id = `form-${roomId}`;
+        form.action = '';
+        const input = document.createElement('input');
+        input.id = `input-${roomId}`;
+        input.autocomplete = 'off';
+        const button = document.createElement('button');
+        button.textContent = 'Send';
+
+        form.appendChild(input);
+        form.appendChild(button);
+        roomDiv.appendChild(messagesUl);
+        roomDiv.appendChild(form);
+
+        roomsContainer.appendChild(roomDiv);
+
+        create_listener(form, input);
+    });
+}
+
+async function request_rooms() {
+    const apiUrl = '/chat/rooms';
+    const response = await fetch(apiUrl, { method: 'GET' });
+    const { rooms } = await response.json();
+    return rooms;
+}