Codex Grocery List

by JamesonSaunders

HTML

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {

var groceryList = document.createElement('ul');
document.body.appendChild(groceryList);

var groceryItem = document.createElement('li');
groceryItem.innerHTML = 'Milk';
groceryList.appendChild(groceryItem);

groceryItem = document.createElement('li');
groceryItem.innerHTML = 'Eggs';
groceryList.appendChild(groceryItem);

groceryItem = document.createElement('li');
groceryItem.innerHTML = 'Bread';
groceryList.appendChild(groceryItem);

var addButton = document.createElement('button');
addButton.innerHTML = 'Add';
document.body.appendChild(addButton);

var input = document.createElement('input');
input.type = 'text';
document.body.appendChild(input);

addButton.onclick = function() {
  var newItem = input.value;
  var groceryItem = document.createElement('li');
  groceryItem.innerHTML = newItem;
  groceryList.appendChild(groceryItem);
};

var deleteButtons = groceryList.getElementsByTagName('li');
for (var i = 0; i < deleteButtons.length; i++) {
  var deleteButton = document.createElement('button');
  deleteButton.innerHTML = 'Delete';
  deleteButtons[i].appendChild(deleteButton);
  deleteButton.onclick = function() {
    groceryList.removeChild(this.parentNode);
  };
}

var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].style.backgroundColor = '#f5f5f5';
  buttons[i].style.border = '1px solid #ccc';
  buttons[i].style.borderRadius = '3px';
  buttons[i].style.padding = '5px';
  buttons[i].style.margin = '5px';
}

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
  inputs[i].style.backgroundColor = '#f5f5f5';
  inputs[i].style.border = '1px solid #ccc';
  inputs[i].style.borderRadius = '3px';
  inputs[i].style.padding = '5px';
  inputs[i].style.margin = '5px';
}
});
        </script>
    </head>
    <body style="margin: 0;">
        <div style="background-color:...