ShoppingListApplication/mainWindow.html at main · MillerSpil/ShoppingListApplication · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Shopping List</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
    <nav>
        <div class="nav-wrapper">
            <a class="brand-logo center">Shopping List</a>
        </div>
    </nav>
    <ul></ul>
    <script>
        const electron = require('electron');
        const {ipcRenderer} = electron;
        const ul = document.querySelector('ul');
        //catch add item
        ipcRenderer.on("item:add", function(e, item){
            ul.className = 'collection';
            const li = document.createElement('li');
            li.className = 'collection-item';
            const itemText = document.createTextNode(item);
            li.appendChild(itemText);
            ul.appendChild(li);
        });

        //catch item clear
        ipcRenderer.on("item:clear", function(e, item){
            ul.innerHTML = '';
            ul.className = '';
        });

        //Remove items on click
        ul.addEventListener('dblclick', removeItem);

        function removeItem(e){
            e.target.remove();
            if (ul.children.length == 0) {
                ul.className = '';
            }
        }
    </script>
</body>
</html>