I used frame: false to make the title bar disappear and then I try to make the button's function from others respond but it doesn't work
index.html:
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>my app</title><link rel="stylesheet" href="index.css" /></head><body><div class="title-container"><img src="res/applogo.png" style="width: 22px; height: 22px;"><div style="width: 5px; height: 22px;"></div><p class="title-text">my app - some page</p><a href="#" style="text-decoration: none;"><p class="title-button" id="min-btn">-</p></a><a href="#" style="text-decoration: none;"><p class="title-button" id="max-btn">◻</p></a><a href="#" style="text-decoration: none;"><p class="title-button" id="close-btn">×</p></a></div><div class="application-container"> ...</div><script> document.querySelector('button[data-title="Developer Tool"]').addEventListener('click', () => { window.open('devTool.html', "_blank", "width=1200,height=714,resizable=false,,autoHideMenuBar=true"); // local file }) const remote = require('electron').remote; document.getElementById("min-btn").addEventListener("click", function (e) { var window = remote.getCurrentWindow(); window.minimize(); }); document.getElementById("max-btn").addEventListener("click", function (e) { var window = remote.getCurrentWindow(); if (!window.isMaximized()) { window.maximize(); } else { window.unmaximize(); } }); document.getElementById("close-btn").addEventListener("click", function (e) { var window = remote.getCurrentWindow(); window.close(); }); </script><script src="index.js"></script></body></html>index.js is a blank file
how can I make the buttons work? Please reply in details if you can as I'm still quite new to JavaScript, thank you. If anything unclear please tell me below and I'll try to provide it.