Working frontend!! No download progress yet, and no cool CSS

frontend/index.html

@@ -24,7 +24,7 @@
     </div>
     <div id="items-container"></div>
     <div>
-      <button type="button">Download</button>
+      <button type="button" id="dl-btn">Download</button>
     </div>
     <div>
       <label>Progress: <span id="progress">not implemented</span></label>

frontend/script.js

@@ -15,4 +15,57 @@ addEventListener('DOMContentLoaded', () => {
       site.value = 'yandex'
     }
   })
+
+  const socket = new WebSocket('ws://127.0.0.1:4009')
+
+  const itemsDiv = document.getElementById('items-container')
+  let items = []
+
+  document.getElementById('items-btn').addEventListener('click', () => {
+    socket.send(JSON.stringify({
+      action: 'list',
+      site: site.value,
+      url: urlField.value,
+    }))
+  })
+
+  document.getElementById('dl-btn').addEventListener('click', () => {
+    socket.send(JSON.stringify({
+      action: 'download',
+      site: site.value,
+      url: urlField.value,
+      items: items,
+    }))
+    items = []
+  })
+
+  socket.addEventListener('message', ev => {
+    const msg = JSON.parse(ev.data)
+    switch (msg.type) {
+      case 'items':
+        itemsDiv.textContent = '' // clear
+        const len = msg.data.length
+        for (let i = 1; i <= len; i++) {
+          const itemElem = document.createElement('label')
+          const itemCheckbox = document.createElement('input')
+          itemCheckbox.type = 'checkbox'
+          itemCheckbox.addEventListener('change', () => {
+            if (itemCheckbox.checked) {
+              items.push(i)
+            } else {
+              items.splice(items.indexOf(i), 1)
+            }
+          })
+          itemElem.append(itemCheckbox)
+          itemText = document.createTextNode(msg.data[i - 1])
+          itemElem.append(itemText)
+          itemsDiv.append(itemElem)
+        }
+        break
+      case 'dl_progress':
+        break
+      case 'dl_end':
+        break
+    }
+  })
 })