add: add item window(only done the title bar)

PP-binding/frontend/web/script/index.js

@@ -6,12 +6,23 @@ function main() {
     const tableContainer = document.getElementById("table-outer-scrollable-container")
     const tableItems = tableContainer.children
     const backgroundColor = "rgba(164,168,157,0.16)"
+    const addItemButton = document.getElementById("add-item-button")
+    const addItemDialog = document.getElementById("add-item-dialog")
+    const addItemDialogCloseButton = document.getElementById("add-item-dialog-close-button")
 
     for (let i = 1; i < tableItems.length; i += 2) {
         if (hasSpecificClassNameByNode(tableItems[i], "table-items-container")) {
             tableItems[i].setAttribute("style", `background-color: ${backgroundColor};`)
         }
     }
+
+    addItemButton.addEventListener("click", () => {
+        addItemDialog.showModal()
+    })
+
+    addItemDialogCloseButton.addEventListener("click", ()=>{
+        addItemDialog.close()
+    })
 }
 
 function hasSpecificClassNameByNode(node, className) {