altChip

Untitled

Nov 30th, 2020
510
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2.   ...
  3.  
  4.   let timeZones = [
  5.     { id: 1, timeZone: "America/Argentina/Buenos_Aires" },
  6.     { id: 2, timeZone: "Europe/Oslo" },
  7.     { id: 3, timeZone: "Australia/Sydney" },
  8.   ];
  9.   let totalTimeZones = timeZones.length;
  10.  
  11.   //const timeZone = "America/Argentina/Buenos_Aires";
  12.   const pattern = "HH:mm:ss";
  13.   // Get the last name of the full TZ name
  14.   // and replace the underscore with a space
  15.   $: formattedTimeZone = timeZone
  16.     .split("/")
  17.     .slice(-1)
  18.     .pop()
  19.     .replace(/_/g, " ");
  20.  
  21.   $: zonedDate = utcToZonedTime(date, timeZone);
  22.   $: output = format(zonedDate, pattern, { timeZone: timeZone });
  23.  
  24.   $: timeDiff = differenceInHours(date, zonedDate);
  25.  
  26.   $: if (timeDiff > 0) {
  27.     displayedTimeDiff = `${timeDiff} Hour(s) Behind`;
  28.   } else if (timeDiff < 0) {
  29.    // Math.abs() inverts the number to be positive
  30.    // https://stackoverflow.com/a/4652112
  31.    displayedTimeDiff = `${Math.abs(timeDiff)} Hour(s) Ahead`;
  32.  } else {
  33.    displayedTimeDiff = "No Time Difference";
  34.  }
  35. </script>
  36.  
  37. <ul role="list" class="datetime-list stack-large">
  38.   <!-- datetime-1 -->
  39.   <li class="datetime">
  40.     <div class="cards">
  41.       <div class="card">
  42.         {#each timeZones as timeZone, index (timeZones.id)}
  43.           <span class="time-elsewhere label-wrapper">
  44.             <label for="datetime-1" class="datetime-label">
  45.               <span>
  46.                 <span
  47.                  class="location">{timeZone.timeZone}</span>
  48.                 <br />
  49.                 <span class="hours-behind">{displayedTimeDiff}</span>
  50.               </span>
  51.               <span class="world-time">{output}</span>
  52.             </label>
  53.           </span>
  54.           ...
  55.         {/each}
  56.       </div>
  57.     </div>
  58.   </li>
  59. </ul>
RAW Paste Data