version 1.21

index.html

@@ -17,7 +17,7 @@ <h1>Daily Watching Time Calculator</h1>
             <input type="number" id="daysToComplete" placeholder="Enter days to complete">
 
             <label for="completionDate">Completion Date:</label>
-            <input type="date" id="completionDate">
+            <input type="date" id="completionDate" placeholder="dd-mm-yyyy">
         </div>
 
         <label for="speed">Speed you are watching:</label>
@@ -26,6 +26,10 @@ <h1>Daily Watching Time Calculator</h1>
         <button onclick="calculateTime()">Calculate</button>
 
         <div id="result"></div>
+        <!-- Promotion section initialized with default content -->
+        <div id="promotion">
+            <p>Are you looking for Lecture Duration Calculator (+/-)? Check out <a href='https://ruizxzx.github.io/TimeCalculator/' target='_blank'>Lecture Duration Calculator</a>.</p>
+        </div>
     </div>
     <script src="script.js"></script>
 </body>

script.js

@@ -55,5 +55,10 @@ function calculateTime() {
 
         // Scroll to the top of the page
         window.scrollTo({ top: 0, behavior: 'smooth' });
+
+      // Promotion
+document.getElementById("promotion").innerHTML = "<p>Are you looking for Lecture Duration Calculator (+/-)? Check out <a href='https://ruizxzx.github.io/TimeCalculator/' target='_blank'>Lecture Duration Calculator</a>.</p>";
+
     }
+
 }

styles.css

@@ -67,4 +67,13 @@ th, td {
 
 th {
     background-color: #f2f2f2;
+    .container {
+        width: 80%;
+        margin: 0 auto;
+    }
+
+    #promotion {
+        margin-top: 20px;
+    }
+
 }