From 8d1731fcc688757525f8ec797dbcd4a3820b7bb1 Mon Sep 17 00:00:00 2001
From: Z3r0c0k3 <hackerj1128@gmail.com>
Date: Wed, 26 Jun 2024 17:06:53 +0900
Subject: [PATCH] add: script.js | modify: api, index, pre-csat.html

---
 api.html      | 22 +++++++++++-----------
 index.html    | 10 +++++-----
 pre-csat.html | 12 ++++++------
 script.js     | 39 +++++++++++++++++++++++++++++++++++++++
 style.css     |  4 ++--
 5 files changed, 63 insertions(+), 24 deletions(-)
 create mode 100644 script.js

diff --git a/api.html b/api.html
index 4de2559..518145a 100644
--- a/api.html
+++ b/api.html
@@ -39,7 +39,7 @@
           <div class="row">
             <div class="Vector-1"></div>
           </div>
-          <div class="CSAT-2025-text">2025학년도 대학수학능력시험</div>
+          <div class="CSAT-text">2025학년도 대학수학능력시험</div>
           <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
         </div>
         <!-- 3mo -->
@@ -56,8 +56,8 @@
           <div class="row">
             <div class="Vector-1"></div>
           </div>
-          <div class="CSAT-2025-text">2025학년도 3월 모의고사</div>
-          <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
+          <div class="CSAT-text">2025학년도 3월 모의고사</div>
+          <span class="D-Day-3mo"> 000 : 00 : 00 : 00 . 00 </span>
         </div>
       </div>
       <!-- 2026 -->
@@ -75,8 +75,8 @@
           <div class="row">
             <div class="Vector-1"></div>
           </div>
-          <div class="CSAT-2025-text">2026학년도 대학수학능력시험</div>
-          <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
+          <div class="CSAT-text">2026학년도 대학수학능력시험</div>
+          <span class="D-Day-2026"> 000 : 00 : 00 : 00 . 00 </span>
         </div>
         <!-- 6mo -->
         <div class="Rectangle-1">
@@ -92,8 +92,8 @@
           <div class="row">
             <div class="Vector-1"></div>
           </div>
-          <div class="CSAT-2025-text">2025학년도 6월 모의고사</div>
-          <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
+          <div class="CSAT-text">2025학년도 6월 모의고사</div>
+          <span class="D-Day-6mo"> 000 : 00 : 00 : 00 . 00 </span>
         </div>
       </div>
 
@@ -112,8 +112,8 @@
           <div class="row">
             <div class="Vector-1"></div>
           </div>
-          <div class="CSAT-2025-text">2027학년도 대학수학능력시험</div>
-          <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
+          <div class="CSAT-text">2027학년도 대학수학능력시험</div>
+          <span class="D-Day-2027"> 000 : 00 : 00 : 00 . 00 </span>
         </div>
         <!-- 9mo -->
         <div class="Rectangle-1">
@@ -129,8 +129,8 @@
           <div class="row">
             <div class="Vector-1"></div>
           </div>
-          <div class="CSAT-2025-text">2025학년도 9월 모의고사</div>
-          <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
+          <div class="CSAT-text">2025학년도 9월 모의고사</div>
+          <span class="D-Day-9mo"> 000 : 00 : 00 : 00 . 00 </span>
         </div>
       </div>
     </main>
diff --git a/index.html b/index.html
index 90b0094..73edaf1 100644
--- a/index.html
+++ b/index.html
@@ -41,7 +41,7 @@
           <div class="row">
             <div class="Vector-1"></div>
           </div>
-          <div class="CSAT-2025-text">2025학년도 대학수학능력시험</div>
+          <div class="CSAT-text">2025학년도 대학수학능력시험</div>
           <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
         </div>
         <!-- 응원에 한마디..! -->
@@ -62,8 +62,8 @@ <h1 class="victory_message">괜찮아요. 다 할 수 있어요.</h1>
           <div class="row">
             <div class="Vector-1"></div>
           </div>
-          <div class="CSAT-2025-text">2026학년도 대학수학능력시험</div>
-          <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
+          <div class="CSAT-text">2026학년도 대학수학능력시험</div>
+          <span class="D-Day-2026"> 000 : 00 : 00 : 00 . 00 </span>
         </div>
         <div class="timer">
           <a href="timer.html" target="_blank"><h1>수능 타이머</h1></a>
@@ -84,8 +84,8 @@ <h1 class="victory_message">괜찮아요. 다 할 수 있어요.</h1>
         <div class="row">
           <div class="Vector-1"></div>
         </div>
-        <div class="CSAT-2025-text">2027학년도 대학수학능력시험</div>
-        <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
+        <div class="CSAT-text">2027학년도 대학수학능력시험</div>
+        <span class="D-Day-2027"> 000 : 00 : 00 : 00 . 00 </span>
       </div>
     </main>
   </body>
diff --git a/pre-csat.html b/pre-csat.html
index d743e3b..49d92cb 100644
--- a/pre-csat.html
+++ b/pre-csat.html
@@ -41,8 +41,8 @@
           <div class="row">
             <div class="Vector-1"></div>
           </div>
-          <div class="CSAT-2025-text">2025학년도 3월 모의고사</div>
-          <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
+          <div class="CSAT-text">2025학년도 3월 모의고사</div>
+          <span class="D-Day-3mo"> 000 : 00 : 00 : 00 . 00 </span>
         </div>
         <!-- 응원에 한마디..! -->
         <h1 class="victory_message">괜찮아요. 다 잘 될거예요.</h1>
@@ -62,8 +62,8 @@ <h1 class="victory_message">괜찮아요. 다 잘 될거예요.</h1>
           <div class="row">
             <div class="Vector-1"></div>
           </div>
-          <div class="CSAT-2025-text">2025학년도 6월 모의고사</div>
-          <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
+          <div class="CSAT-text">2025학년도 6월 모의고사</div>
+          <span class="D-Day-6mo"> 000 : 00 : 00 : 00 . 00 </span>
         </div>
         <div class="timer">
           <a href="timer.html" target="_blank"><h1>모의고사 타이머</h1></a>
@@ -84,8 +84,8 @@ <h1 class="victory_message">괜찮아요. 다 잘 될거예요.</h1>
         <div class="row">
           <div class="Vector-1"></div>
         </div>
-        <div class="CSAT-2025-text">2025학년도 9월 모의고사</div>
-        <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span>
+        <div class="CSAT-text">2025학년도 9월 모의고사</div>
+        <span class="D-Day-9mo"> 000 : 00 : 00 : 00 . 00 </span>
       </div>
     </main>
   </body>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e54f2c5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,39 @@
+
+document.addEventListener('DOMContentLoaded', () => { // 문서 로드 후 실행
+  const targetDates = {
+    'D-Day-2025': new Date('2024-11-14T08:00:00').getTime(),
+    'D-Day-2026': new Date('2025-11-13T08:00:00').getTime(),
+    'D-Day-2027': new Date('2026-11-19T08:00:00').getTime(),
+    'D-Day-3mo': new Date('2024-03-28T08:00:00').getTime(),
+    'D-Day-6mo': new Date('2024-06-04T08:00:00').getTime(),
+    'D-Day-9mo': new Date('2024-09-04T08:00:00').getTime(),
+  };
+
+  function updateDday(className, targetDate) {
+    const ddaySpans = document.querySelectorAll(`.${className}`); // 여러 span 요소 선택
+
+    ddaySpans.forEach(ddaySpan => {
+      const now = new Date().getTime();
+      const timeDifference = targetDate - now;
+
+      if (timeDifference <= 0) {
+        console.log(`${className}: D-DAY!`);
+      }
+
+        const days = Math.max(0, Math.floor(timeDifference / (1000 * 60 * 60 * 24)));
+        const hours = Math.max(0, Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
+        const minutes = Math.max(0, Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)));
+        const seconds = Math.max(0, Math.floor((timeDifference % (1000 * 60)) / 1000));
+        const milliseconds = Math.max(0, timeDifference % 1000);
+
+        const formattedDday = `${days.toString().padStart(3, '0')} : ${hours.toString().padStart(2, '0')} : ${minutes.toString().padStart(2, '0')} : ${seconds.toString().padStart(2, '0')} . ${milliseconds.toString().padStart(2, '0')}`;
+
+        ddaySpan.innerText = formattedDday; 
+    });
+  }
+
+  for (const className in targetDates) {
+    updateDday(className, targetDates[className]);
+    setInterval(() => updateDday(className, targetDates[className]), 1);
+  }
+});
diff --git a/style.css b/style.css
index da995c8..3b5fa90 100644
--- a/style.css
+++ b/style.css
@@ -249,7 +249,7 @@ main {
   flex-grow: 0;
   background-color: #000;
 }
-.CSAT-2025-text {
+.CSAT-text {
   width: 100%;
   height: 15.6%;
   flex-grow: 0;
@@ -264,7 +264,7 @@ main {
   text-align: center;
   color: #000;
 }
-.D-Day-2025 {
+.D-Day-2025, .D-Day-2026, .D-Day-2027, .D-Day-3mo, .D-Day-6mo, .D-Day-9mo {
   width: 88.2%;
   height: 40%;
   flex-grow: 0;