fix(clock, countdown): Use globals utils functions

src/pages/widgets/clock.astro

@@ -1,8 +1,10 @@
 ---
 import Layout from '../../layouts/Layout.astro';
+
 export const data = {
-    name: "Clock ⏰"
-}
+  name: 'Clock ⏰',
+
+};
 ---
 <Layout title="Clock">
     <main class="h-screen w-screen flex flex-col gap-7 justify-center items-center">
@@ -12,11 +14,9 @@ export const data = {
 </Layout>
 
 <script is:inline>
-  const displayElement = document.getElementById('display');
-  const dayElement = document.getElementById('day');
-
-  const urlParams = new URLSearchParams(window.location.search);
-  const language = urlParams.get('language') ?? 'en-US';
+  const {language} = getUrlParams({language: 'en-US'});
+  const displayElement = $('#display');
+  const dayElement = $('#day');
 
   setInterval(() => {
     const now = new Date();

src/pages/widgets/countdown.astro

@@ -2,8 +2,8 @@
 import Layout from '../../layouts/Layout.astro';
 
 export const data = {
-    name: "Countdown ⌛️"
-}
+  name: 'Countdown ⌛️',
+};
 ---
 
 <Layout title="Countdown">
@@ -14,16 +14,13 @@ export const data = {
 </Layout>
 
 <script lang="ts" is:inline>
-  const titleElement = document.getElementById('title');
-  const displayElement = document.getElementById('display');
+  const {title, datetime} = getUrlParams({title: 'Event', datetime: ''});
+  const titleElement = $('#title');
+  const displayElement = $('#display');
 
-  const urlParams = new URLSearchParams(window.location.search);
-  const titleParam = urlParams.get('title') ?? 'Event';
-  const datetimeParam = urlParams.get('datetime') ?? '';
-
-  titleElement.innerText = titleParam;
-  const date = new Date(datetimeParam);
+  titleElement.innerText = title;
 
+  const date = new Date(datetime);
   const interval = setInterval(() => {
     const now = new Date();
     const diff = Math.floor(Math.abs(date.getTime() - now.getTime()) / 1000);