Pickup Log

by Morgan Gilroy

HTML

<div id="log" class="log"></div>
 <button onclick="addLog('New entry')">Add</button>

CSS

.log {
  display: grid;
  gap: 0.5rem;
  max-height: 340px; /* \~10 lines */
  overflow: hidden;
  padding: 1rem;
  background: #111;
  color: #0f0;
  font-family: monospace;
}
.log-entry {
  background: #222;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: opacity .5s, height .5s, transform .5s;
  transform-origin: bottom;
}
.log-entry.removing {
  opacity: 0;
  height: 0;
}
@starting-style {
  .log-entry {
    opacity: 0;
    height: 0;
  }
}

JavaScript

const log = document.getElementById('log');
const MAX = 5;

function addLog(msg) {
  const e = document.createElement('div');
  e.className = 'log-entry';
  e.textContent = msg;
  log.appendChild(e);
  if (log.children.length > MAX) {                                            const top = log.children[0];
  top.classList.add('removing');
  setTimeout(() => top.remove(), 500);
  }
}