<section id="shopping-list">
  <h1>
    Shopping List
    <span class="total">(2 items)</span>
  </h1>
  <input class="new" />
  <button class="add">Add Item</button>
  <ul class="items">
    <li>Eggs</li>
    <li>Butter</li>
  </ul>
</section>
section {
  font-family: Helvetica, sans-serif;
  background-color: #add8e6;
  padding: 15px;
}

span.total {
  font-size: 16px;
  font-weight: normal;
}

button { font-size: 14px; }

ul { font-size: 20px; }
const button = document.querySelector('button.add');
const input = document.querySelector('input.new');
const itemsList = document.querySelector('ul.items');
const totalText = document.querySelector('span.total');

button.addEventListener('click', function() {
  const newItem = document.createElement('li');
  newItem.innerHTML = input.value;
  itemsList.appendChild(newItem);
  totalText.innerHTML = `(${itemsList.childElementCount} items)`;
  input.value = '';
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.