53 lines
1.4 KiB
HTML
53 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ShoppingList</title>
|
|
|
|
<!-- Load css -->
|
|
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div class='nav-wrapper'>
|
|
<a class="brand-logo center">ShoppingList</a>
|
|
</div>
|
|
</nav>
|
|
<ul></ul>
|
|
|
|
<script>
|
|
const electron = require('electron');
|
|
const {ipcRenderer} = electron;
|
|
const ul = document.querySelector('ul')
|
|
|
|
// Catch add items
|
|
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 clear items
|
|
ipcRenderer.on('item:clear', function(){
|
|
ul.innerHTML = ''
|
|
ul.className = '';
|
|
});
|
|
|
|
// Remove item
|
|
ul.addEventListener('dblclick', removeItem);
|
|
|
|
function removeItem(e){
|
|
e.target.remove();
|
|
if(ul.children.length == 0){
|
|
ul.className = '';
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|