updated

AsheelAhmedSiddiqui · Jun 4, 2024 · 1faae0d · 1faae0d
1 parent abed61b
commit 1faae0d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -21,7 +21,9 @@ <h1>Todo List</h1>
         <ol id="ol"></ol>
       </div>
     </div>
-
+    <footer>
+      <p>CopyRight &copy; <span id="year"></span> Asheel Ahmed Siddiqui</p>
+    </footer>
     <script src="main.js"></script>
   </body>
 </html>
diff --git a/main.css b/main.css
@@ -10,10 +10,7 @@
 }
 
 body {
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin-top: 50px;
   background-color: #352f5b;
   color: #fff;
 }
@@ -30,10 +27,31 @@ body {
   font-size: 2.6rem;
 }
 
-.show-box{
-    border: 1px solid #fff;
-    border-radius: 5px;
-    margin-top: 20px;
+.show-box {
+  border: 1px solid #fff;
+  border-radius: 5px;
+  margin-top: 20px;
+  height: 350px;
+  overflow-y: scroll;
+}
+
+.show-box::-webkit-scrollbar {
+  width: 6px;
+}
+
+/* Track */
+.show-box::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+.show-box::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+/* Handle on hover */
+.show-box::-webkit-scrollbar-thumb:hover {
+  background: #555;
 }
 
 .input-box {
@@ -52,12 +70,11 @@ body {
   border-radius: 5px;
 }
 
-
 .input-box button {
-    font-size: 1.4rem;
-    padding: 14px 20px;
-    border: none;
-    border-radius: 5px;
+  font-size: 1.4rem;
+  padding: 14px 20px;
+  border: none;
+  border-radius: 5px;
 }
 
 ol {
@@ -94,8 +111,16 @@ ol li .btn-container button {
   border: none;
   padding: 10px 20px;
   border-radius: 20px;
+  cursor: pointer;
 }
 
 ol li input {
   padding: 0 10px;
 }
+
+/* footer Style */
+footer {  
+  margin-top: 30px;
+  font-size: 1.2rem;
+  text-align: center;
+}
diff --git a/main.js b/main.js
@@ -2,6 +2,7 @@
 let userValue = document.getElementById("userValue");
 let addBtn = document.getElementById("add");
 let ol = document.getElementById("ol");
+let show = document.getElementsByClassName("show-box");
 
 addBtn.addEventListener("click", () => {
   let li = document.createElement("li");
@@ -69,3 +70,9 @@ userValue.addEventListener("keydown", (e) => {
     li.appendChild(newDiv);
   }
 });
+
+
+let now = new Date();
+let currYear = now.getFullYear();
+let span =  document.getElementById('year');
+span.textContent = `2024 - ${currYear}`;