All files / src/app/components/countdown countdown.component.html

100% Statements 116/116
50% Branches 14/28
100% Functions 0/0
100% Lines 60/60

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 881x 788x   789x 1x   789x 1x 1x   789x 1x 1x   789x 1x 1x   789x 1x   1x   788x     1x 789x 1x   789x 1x 1x   789x 1x 1x   789x 1x 1x   789x 1x 1x   789x 1x 1x   789x 1x   1x       1x 1x 1x   789x 1x 1x   789x 1x 1x   789x 1x 1x   789x 1x 1x   789x 1x 1x   789x 1x   1x   1x  
<div class="countdown-container">
  <div class="countdown-line-container" *ngIf="targetDate">
    <div class="countdown-segment">
      <span class="value">{{ isPositiveTime ? 'T +' : 'T -' }}</span>
    </div>
    <div class="countdown-segment">
      <span class="value">{{ formatNumber(days) }}</span>
      <span class="label">DAYS</span>
    </div>
    <div class="countdown-segment">
      <span class="value">{{ formatNumber(hours) }}</span>
      <span class="label">HOURS</span>
    </div>
    <div class="countdown-segment">
      <span class="value">{{ formatNumber(minutes) }}</span>
      <span class="label">MINUTES</span>
    </div>
    <div class="countdown-segment">
      <span class="value">{{ formatNumber(seconds) }}</span>
      <span class="label">SECONDS</span>
    </div>
  </div>
 
  @if (!compactMode) {
    <div class="countdown-line-container">
      <div class="countdown-segment">
        <span class="value">Target</span>
        <span class="label">{{localTimeZone}}</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? targetDate.getFullYear() : '--' }}</span>
        <span class="label">YEAR</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? localMonth : '--' }}</span>
        <span class="label">MONTH</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? targetDate.getDate() : '--' }}</span>
        <span class="label">DAY</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? targetDate.getHours() : '--' }}</span>
        <span class="label">HOURS</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? targetDate.getMinutes() : '--' }}</span>
        <span class="label">MINUTES</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? targetDate.getSeconds() : '--' }}</span>
        <span class="label">SECONDS</span>
      </div>
    </div>
 
    <div class="countdown-line-container">
      <div class="countdown-segment">
        <span class="value">Target</span>
        <span class="label">UTC</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? targetDate.getUTCFullYear() : '--'}}</span>
        <span class="label">YEAR</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? UTCMonth : '--' }}</span>
        <span class="label">MONTH</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? targetDate.getUTCDate() : '--'}}</span>
        <span class="label">DAY</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? targetDate.getUTCHours() : '--'}}</span>
        <span class="label">HOURS</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? targetDate.getUTCMinutes() : '--'}}</span>
        <span class="label">MINUTES</span>
      </div>
      <div class="countdown-segment">
        <span class="value">{{ targetDate !== null ? targetDate.getUTCSeconds() : '--'}}</span>
        <span class="label">SECONDS</span>
      </div>
    </div>
  }
</div>