Visualize Your Day As 144 Rectangles – Rectangles

Preview:

Description:

Use JavaScript and CSS flexbox/grid to break your day down into smaller pieces: 10-minute blocks.

If you start your day by visualizing it as a collection of 144 ten-minute rectangles then you are going to have a much more successful day.

How to use it:

1. Create a container to hold the 10-minute blocks.

<section class="grid-container"></section>

2. The main JavaScript to generate blocks.

const createGrid = (rows, cols, container) => {
  for (let i = 0; i < (rows * cols); i++) {
    let gridItem = document.createElement('div');
    gridItem.classList.add('grid-item');
    container.appendChild(gridItem);
  };
};
const minutesSinceMidnight = () => {
  const now = new Date();
  const midnight = new Date().setHours(0, 0, 0, 0);
  return ((now - midnight) / 1000) / 60;
}
const fillGrid = () => {
  const minutesPassed = minutesSinceMidnight();
  const fullBlocks = Math.floor(minutesPassed / 10);
  document.querySelectorAll('.grid-container .grid-item').forEach((element, index) => {
    if (index + 1 <= fullBlocks) {
      element.classList.add('bg-time-passed');
    } else {
      element.classList.remove('bg-time-passed');
      element.style = 'background: transparent'
    }
  });
  const remainderBlock = (minutesPassed % 10) * 10;
  const lastUncoloredGridItem = document.querySelector('.grid-item:not(.bg-time-passed)');
  lastUncoloredGridItem.style = `background: linear-gradient(to right, var(--green) ${remainderBlock}%, transparent 0%)`;
}
document.addEventListener('DOMContentLoaded', () => {
  createGrid(12, 12, document.querySelector('.grid-container'));
  fillGrid();
  setInterval(fillGrid, 4000);
});

3. Style the blocks.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(5rem, 1fr));
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  width: 100%;
  max-width: 690px;
  margin: 1rem;
}
.grid-item {
  border: .25rem solid #a9aab1;
  border-radius: 0.4rem;
  margin: .15rem;
  height: 4.5rem;
  width: 4.6rem;
  transition: all .5s ease-in;
}