Add 'Why?' button and improve button layout

api.js

@@ -0,0 +1,59 @@
+/**
+ * October Today API
+ * Simple client-side API that returns the current October day count
+ */
+
+// Calculate days since October 1, 2019
+function calculateOctoberDay() {
+    const startDate = new Date(2019, 9, 1); // Month is 0-indexed, so 9 is October
+    const today = new Date();
+    
+    // Calculate difference in days
+    const diffTime = Math.abs(today - startDate);
+    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+    
+    return diffDays;
+}
+
+// Set ordinal suffix (st, nd, rd, th)
+function getOrdinalSuffix(number) {
+    const j = number % 10;
+    const k = number % 100;
+    
+    if (j === 1 && k !== 11) {
+        return "st";
+    }
+    if (j === 2 && k !== 12) {
+        return "nd";
+    }
+    if (j === 3 && k !== 13) {
+        return "rd";
+    }
+    return "th";
+}
+
+// Handle requests for the API
+document.addEventListener('DOMContentLoaded', () => {
+    // Check if this is an API request from the URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const isApiRequest = urlParams.get('api');
+    
+    if (isApiRequest === 'json') {
+        const octoberDay = calculateOctoberDay();
+        const suffix = getOrdinalSuffix(octoberDay);
+        
+        // Create the response object
+        const response = {
+            day: octoberDay,
+            ordinal: suffix,
+            formatted: `${octoberDay}${suffix}`,
+            text: `happy october ${octoberDay}${suffix}`
+        };
+        
+        // Display as JSON and prevent normal page rendering
+        document.body.innerHTML = `<pre>${JSON.stringify(response, null, 2)}</pre>`;
+        document.body.style.fontFamily = 'monospace';
+        document.body.style.padding = '20px';
+        document.body.style.backgroundColor = '#f5f5f5';
+    }
+}); 

index.html

@@ -18,14 +18,25 @@
             <h2>October <span id="october-day">??</span><sup id="ordinal">th</sup></h2>
             <p class="year">2019.</p>
         </div>
-        <button id="share-button" class="share-button">
+        <div class="buttons">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <button id="share-button" class="share-button">
-                <path d="M7 11l5-5 5 5"/>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M12 6v13"/>
+                    <path d="M7 11l5-5 5 5"/>
-            </svg>
+                    <path d="M12 6v13"/>
-            Share via SMS
+                </svg>
-        </button>
+                Share via SMS
+            </button>
+            <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" class="why-button">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10"/>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+                    <path d="M12 17h.01"/>
+                </svg>
+                Why?
+            </a>
+        </div>
     </div>
     <script src="script.js"></script>
+    <script src="api.js"></script>
 </body>
 </html> 

style.css

@@ -226,6 +226,13 @@ footer {
     z-index: 10;
 }
 
+.buttons {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    margin-top: 24px;
+}
+
 .share-button {
     display: inline-flex;
     align-items: center;
@@ -239,7 +246,6 @@ footer {
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
-    margin-top: 24px;
 }
 
 .share-button:hover {
@@ -259,6 +265,39 @@ footer {
     transform: translateY(-2px);
 }
 
+.why-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    border: none;
+    border-radius: var(--radius);
+    padding: 10px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-decoration: none;
+}
+
+.why-button:hover {
+    opacity: 0.9;
+    transform: translateY(-2px);
+}
+
+.why-button:active {
+    transform: translateY(0);
+}
+
+.why-button svg {
+    transition: transform 0.2s ease;
+}
+
+.why-button:hover svg {
+    transform: rotate(12deg);
+}
+
 @media (max-width: 600px) {
     .container {
         padding: 30px;
@@ -272,8 +311,13 @@ footer {
         font-size: 2.5rem;
     }
     
-    .share-button {
+    .share-button, .why-button {
-        padding: 8px 14px;
+        padding: 8px 12px;
         font-size: 13px;
     }
+    
+    .buttons {
+        flex-direction: column;
+        gap: 8px;
+    }
 }