Defaults

Live as of .

Flip the switch. Notice the state it opens in.

switch by anand_4957, via Uiverse.io

Default

  • Go straight to scrolling when your morning alarm goes off
  • Not drinking enough water in the day
  • Lack of focus, spending all non work hours just sitting around
  • Skipping workouts or only showing up when inspired
  • Inconsistent bed times

Chosen

  • Start the day with gratitude
  • Prioritize protein intake and water to start the day
  • Connecting with people at lunch and off-work hours
  • Enjoying every minute with your wife and kids
  • Closing the day with an agenda for the next day

Red is common. Green is uncommon.

The unexamined life is not worth living. — Socrates

I love the design element of this pill switch. All the kudos to anand_4957. It made me think about being intentional rather than being random about everything including this blog series.

Building this

The switch isn't mine — it's a component by anand_4957 on Uiverse.io. The pill is the letter O, so the two F's spell OFF; on flip they fold into a single N. Both letters start as an F, and the arms are drawn with stroke-dasharray, so their visible length animates without the path ever changing. The first F's top arm extends and pivots into the diagonal of the N.

What I added was the wiring. The same :checked state reaches past the SVG to the lists below it:

.switch__input:checked ~ .demo-panels .panel-default {
  display: none;
}
.switch__input:not(:checked) ~ .demo-panels .panel-chosen {
  display: none;
}

Which means no wrapper div around the switch, or ~ can't see across to the panels. The browser already tracks on/off for a checkbox. No reason to keep a second copy of that in a script.

I built the switch first, before I knew what it would toggle. It sat in a file for a week defaulting to red until I noticed that was the post.