life count down function added with ui

index.html

@@ -18,6 +18,7 @@
     <link href="style.css" rel="stylesheet">
     <link href="./favicon/icon.ico" rel="icon" type="image/x-icon">
     <style id="iconStyle"></style>
+
 
     <script defer src="languages.js"></script>
     <script defer src="script.js"></script>
@@ -465,6 +466,19 @@
                 <div id="userText" contenteditable="true" spellcheck="false">Click here to edit</div>
                 <div id="date"></div>
             </div>
+
+            <div id="death-date-container" style="overflow: hidden;">
+                <div id="death-container">
+                    <p>Set Your Lifetime Goal Date : </p>
+                    <input type="date" id="deathDate" name="deathDate" min="2025-01-01" max="2099-12-31">
+                    <button id="submitDate">Submit</button>
+                </div>
+
+                <div id="countdown" style="display:none;">
+
+                </div>
+
+            </div>
         </div>
         <!-- ---------end of leftDiv--------------- -->
 

script.js

@@ -2623,3 +2623,63 @@ document.addEventListener("DOMContentLoaded", function () {
     loadCheckboxState("fahrenheitCheckboxState", fahrenheitCheckbox);
     loadShortcuts();
 });
+
+// death to the console
+
+const deathContainer = document.getElementById('death-container');
+const countdownDiv = document.getElementById('countdown');
+const deathDateInput = document.getElementById('deathDate');
+const submitDateButton = document.getElementById('submitDate');
+
+// Function to calculate remaining time
+function calculateRemainingTime(endDate) {
+    const now = new Date();
+    const end = new Date(endDate);
+    const diff = end - now;
+
+    if (diff <= 0) return "Time is up!";
+
+    const years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
+    const months = Math.floor((diff % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24 * 30));
+    const days = Math.floor((diff % (1000 * 60 * 60 * 24 * 30)) / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+    return `${years} years, ${months} months<br>${days} days, ${hours}  hours <br/> ${minutes} minutes, ${seconds} seconds`;
+
+}
+
+// Function to update countdown
+function updateCountdown() {
+    const storedDate = localStorage.getItem('deathDate');
+    if (!storedDate) return;
+
+    countdownDiv.innerHTML = calculateRemainingTime(storedDate);
+}
+
+// Check if date is already stored in localStorage
+const savedDate = localStorage.getItem('deathDate');
+if (savedDate) {
+    deathContainer.style.display = 'none';
+    countdownDiv.style.display = 'block';
+    setInterval(updateCountdown, 1000); // Update every second
+}
+
+// Handle form submission
+submitDateButton.addEventListener('click', () => {
+    const deathDate = deathDateInput.value;
+    if (!deathDate) {
+        alert("Please select a valid date.");
+        return;
+    }
+
+    // Store the selected date in localStorage
+    localStorage.setItem('deathDate', deathDate);
+
+    // Switch to countdown mode
+    deathContainer.style.display = 'none';
+    countdownDiv.style.display = 'block';
+    setInterval(updateCountdown, 1000); // Update every second
+});
+

style.css

@@ -567,6 +567,8 @@ body {
 	transition: transform 1s;
 }
 
+
+
 #second::after {
 	content: "";
 	position: absolute;
@@ -578,23 +580,69 @@ body {
 }
 
 /* ---------------------- */
-.ttteexxtt {
+.ttteexxtt{
+	margin-top: 20px;
+	font-size: 1.2rem;
+	color: var(--textColorDark-blue);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 372px;
+	padding: 5px;
+}
+
+
+
+#deathDate{
+	margin-top: 10px;
+	font-size: 1.2rem;
+	color: var(--textColorDark-blue);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 372px;
+	border-radius: 10px;
+	border: 2px solid var(--darkColor-blue);
+	text-align: center;
+	text-decoration: none;
+	color: var(--textColorDark-blue);	
+	padding: 5px;
+}
+
+#countdown{
+	border-radius: 20px;
+
 	position: absolute;
-	/* background-color: yellow; */
- 	/*bottom: 18px; */
-	/*Because search engines has margin-bottom 20px*/
-	bottom: 8px;
-	left: 10px;
-	/* text-align: center; */
+	background: #E2EEFF;
+	padding: 20px;
+	overflow: hidden;
+
+
 }
 
-#userText {
-	font-family: "poppins", "Poppins", serif;
-	font-size: 1.4rem;
-	margin-bottom: 10px;
-	transition: text-shadow 0.3s ease-in-out;
+
+#submitDate{
+	font-family: "poppins", "Poppins", sans-serif;
+	font-size: 1.2rem;
+	color: white;
+	padding-left: 10px;
+	padding-right: 10px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 372px;
+	border-radius: 10px;
+	border: 2px solid var(--darkColor-blue);
+	text-align: center;
+	text-decoration: none;
+	background: var(--darkColor-blue);
+
+
 }
 
+
 #date {
 	font-size: 1.4rem;
 	transition: text-shadow 0.3s ease-in-out;