display when the target has passed

src/components/ResponsiveTimeUntil.vue

@@ -21,6 +21,7 @@ const targetDate = computed(() =>
 
 const {
   timeUntilTarget,
+  hasTargetPassed,
   isYearsDisplayed,
   isMonthsDisplayed,
   isDaysDisplayed,
@@ -85,8 +86,12 @@ const copyUrl = () => {
         <span class="moment">seconds</span>
       </div>
     </section>
-    <section v-else>No target set.</section>
+    <section v-else class="no-target">No target set.</section>
-    <section v-if="targetDate" class="target-date">{{ targetDate }}</section>
+    <section v-if="targetDate" class="target-date">
+      <div v-if="hasTargetPassed" class="has-target-passed">🎊</div>
+      <hr v-else />
+      {{ targetDate }}
+    </section>
     <form @submit.prevent>
       <div>
         <label for="title">Title:</label>
@@ -104,7 +109,7 @@ const copyUrl = () => {
 </template>
 
 <style scoped>
-div.responsive-time-until {
+.responsive-time-until {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -133,6 +138,14 @@ div.responsive-time-until {
   margin-bottom: 1rem;
 }
 
+.no-target {
+  padding: 1rem;
+}
+
+.has-target-passed {
+  font-size: 72px;
+}
+
 form {
   display: none;
   padding: 1rem;

src/hooks/useTimeUntil.hooks.ts

@@ -1,8 +1,11 @@
 import { ref, computed, onUnmounted, ComputedRef } from "vue"
-import { timeUntil } from "../services/time-until"
+import { hasTimePassed, timeUntil } from "../services/time-until"
 
 export const useTimeUntil = (target: ComputedRef<string | undefined>) => {
   const timeUntilTarget = target.value ? timeUntil(target.value) : null
+  const hasTargetPassed = timeUntilTarget
+    ? hasTimePassed(timeUntilTarget)
+    : false
 
   const yearsUntil = ref(timeUntilTarget?.years ?? 0)
   const monthsUntil = ref(timeUntilTarget?.months ?? 0)
@@ -46,6 +49,7 @@ export const useTimeUntil = (target: ComputedRef<string | undefined>) => {
 
   return {
     timeUntilTarget,
+    hasTargetPassed,
     isYearsDisplayed,
     isMonthsDisplayed,
     isDaysDisplayed,

src/services/time-until.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach, beforeEach } from "vitest"
-import { hasPassed, timeUntil } from "./time-until"
+import { hasTimePassed, timeUntil } from "./time-until"
 
 const noTime = () => ({
   days: 0,
@@ -57,9 +57,9 @@ describe("time until", () => {
 
 describe("has passed", () => {
   it("tells if the targed has passed", () => {
-    expect(hasPassed(noTime())).toBeTruthy()
+    expect(hasTimePassed(noTime())).toBeTruthy()
     expect(
-      hasPassed({
+      hasTimePassed({
         years: 0,
         months: 0,
         days: 0,

src/services/time-until.ts

@@ -38,5 +38,5 @@ export const timeUntil = (target: string): TimeUntilReturn => {
   }
 }
 
-export const hasPassed = (timeUntil: TimeUntilReturn): boolean =>
+export const hasTimePassed = (timeUntil: TimeUntilReturn): boolean =>
   Object.entries(timeUntil).every(([_, value]) => value === 0)