formats timer to prevent changes glitching on screen, adds location t…

…o change date for timer (#92)
marinecoders · Jun 12, 2024 · 7bc0862 · 7bc0862
1 parent 50591a3
commit 7bc0862
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 51 deletions.
diff --git a/src/components/elements/Timer.svelte b/src/components/elements/Timer.svelte
@@ -1,53 +1,56 @@
 <script>
-    import { onMount, onDestroy } from 'svelte';
-  
-    let days = 41;
-    let hours = 14;
-    let minutes = 54;
-    let seconds = 19;
-  
-    onMount(() => {
-      const countDownDate = new Date('August 1, 2024 23:59:59').getTime();
-  
-      const interval = setInterval(() => {
-        const now = new Date().getTime();
-        const distance = countDownDate - now;
-  
-        days = Math.floor(distance / (1000 * 60 * 60 * 24));
-        hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-        minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-        seconds = Math.floor((distance % (1000 * 60)) / 1000);
-  
-        if (distance < 0) {
-          clearInterval(interval);
-          days = 0;
-          hours = 0;
-          minutes = 0;
-          seconds = 0;
-        }
-      }, 1000);
-  
-      onDestroy(() => {
+  import { onMount, onDestroy } from 'svelte';
+  import { timerCountdown } from '@content/externalLinks.js';
+
+  let days = 41;
+  let hours = 14;
+  let minutes = 54;
+  let seconds = 19;
+
+  onMount(() => {
+    const countDownDate = new Date(timerCountdown.formatedDate).getTime();
+
+    const interval = setInterval(() => {
+      const now = new Date().getTime();
+      const distance = countDownDate - now;
+
+      days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+      if (distance < 0) {
         clearInterval(interval);
-      });
+        days = 0;
+        hours = 0;
+        minutes = 0;
+        seconds = 0;
+      }
+    }, 1000);
+
+    onDestroy(() => {
+      clearInterval(interval);
     });
-  </script>
-
-  <div class="grid w-full grid-cols-1 gap-3 mt-8 lg:grid-cols-4 lg:inline-flex sm:justify-between">
-    <div class="hidden my-auto bg-red-600 w-42 lg:w-60 md:block">
-      <hr class="h-[1px] bg-white border-none" />
-    </div>
-    {#each [days, hours, minutes, seconds] as time, index}
-      <div class="items-center text-center" key={index}>
-        <div class="mt-8 sm:mt-4">
-          <h3 class="text-8xl md:text-6xl font-extrabold font-menobanner">{time}</h3>
-          <p class="font-bold text-xl md:text-base text-mcswf-gold">
-            {index === 0 ? 'DAYS' : index === 1 ? 'HOURS' : index === 2 ? 'MINUTES' : 'SECONDS'}
-          </p>
-        </div>
+  });
+</script>
+
+<div class="grid w-full grid-cols-1 gap-3 mt-8 lg:grid-cols-4 lg:inline-flex sm:justify-between">
+  <div class="invisible my-auto w-42 lg:w-60 lg:visible">
+    <hr class="h-1 bg-[#62040A] border-none" />
+  </div>
+  {#each [days, hours, minutes, seconds] as time, index}
+    <div
+      class="items-center text-center"
+      key={index}>
+      <div class="mt-8 sm:mt-4 m-auto md:w-36">
+        <h3 class="text-[100px] font-extrabold font-menobanner">{time}</h3>
+        <p class="font-semibold text-2xl md:text-[18px] text-mcswf-gold">
+          {index === 0 ? 'DAYS' : index === 1 ? 'HOURS' : index === 2 ? 'MINUTES' : 'SECONDS'}
+        </p>
       </div>
-    {/each}
-    <div class="hidden my-auto w-42 lg:w-60 md:block">
-      <hr />
     </div>
-  </div>
+  {/each}
+  <div class="invisible lg:visible my-auto w-42 lg:w-60">
+    <hr class="h-1 bg-[#62040A] border-none" />
+  </div>
+</div>
diff --git a/src/content/externalLinks.js b/src/content/externalLinks.js
@@ -8,3 +8,7 @@ export const externalLinks = {
   deputyCommandantForInformation: 'https://www.information.marines.mil/',
   marinesDotCom: 'https://www.marines.com/',
 };
+
+export const timerCountdown = {
+  formatedDate: 'August 1, 2024 23:59:59',
+};
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -64,7 +64,7 @@ products.sort((a, b) => a.data.order - b.data.order);
           title="WHAT WE DO"
           titleClasses="text-mcswf-white text-2xl font-bold md:text-3xl lg:text-4xl"
           content="Marines are taught to develop mission-specific software for operational units to use in weeks or months, not years. Marines at the Marine Corps Software Factory (MCSWF) are trained by working with industry experts to build the software Marines need."
-          imageClasses="lg:w-550"
+          imageClasses="w-full lg:w-550"
         />
       </div>
       <div class="h-fit py-10 lg:py-20">
@@ -76,7 +76,7 @@ products.sort((a, b) => a.data.order - b.data.order);
           title="THE IMPACT"
           titleClasses="text-mcswf-white text-2xl font-bold md:text-3xl lg:text-4xl"
           content="By combining traditional military training and modern technology skills, it enables tactical advantage for Marines across the service. The MCSWF pilot will evaluate the demand signal from Fleet Marine Forces, develop a way forward on career paths for technical experts, and evaluate the proper blend of civilian-Marine teaming."
-          imageClasses="lg:w-550"
+          imageClasses="w-full lg:w-550"
         />
       </div>
       <!-- <div class="h-fit pt-20">

diff --git a/src/pages/products/[...product].astro b/src/pages/products/[...product].astro
@@ -32,7 +32,7 @@ const bgString = 'background-image:url(' + entry.data.background.src + ')';
     title={entry.data.product}
     description={entry.data.description}
     descriptionClasses="font-light lg:w-[1000px]"
-    link={externalLinks.recruitingApplication}
+    link={`mailto:${externalLinks.mcswfEmail}?subject=${externalLinks.mcswfEmailSubject}`}
     linkText="REQUEST APP DEMO"
     externalLink={true}
     backgroundImg={entry.data.background.src}