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

100% Statements 117/117
53.33% Branches 16/30
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 88 89 901x 804x     805x 1x   805x 1x 1x   805x 1x 1x   805x 1x 1x   805x 1x   1x     804x     1x 805x 1x   805x 1x 1x   805x 1x 1x   805x 1x 1x   805x 1x 1x   805x 1x 1x   805x 1x   1x       1x 1x 1x   805x 1x 1x   805x 1x 1x   805x 1x 1x   805x 1x 1x   805x 1x 1x   805x 1x   1x   1x  
<div class="countdown-container">
  @if (targetDate) {
    <div class="countdown-line-container">
      <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>