your haru

your haru is a productivity web app built in HTML, CSS, and Vanilla JS only.

"haru" is pronounced hah-roo and means "day" in Korean.

Features

Date & Clock

To-Do List

Settings

Fade transitions

I implemented the fade-in and out transitions in pure CSS and Vanilla JS.

See:

• CSS
• JavaScript

Example:

function showGreeting(username) {
  setTimeout(() => {
    fadeOut(GREETING);

    setTimeout(() => {
      GREETING.innerText = `Hello, ${username}!`;
      fadeIn(GREETING, { isAfterOut: true });
    }, TRANSITION_DURATION);
  }, TRANSITION_DURATION);
}

Tip

If you press F11 (Windows) or Control + Command + F (Mac), you can go full-screen.

Notes

Thanks to this project, I learned that I'm not a fan of CSS.