Author: | jmstfv |
---|---|
Views Total: | 35 views |
Official Page: | Go to website |
Last Update: | April 7, 2022 |
License: | MIT |
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; }