junaid-secondary · Wake-cloud · Nov 24, 2024
diff --git a/TDL-main/CONTRIBUTING.md b/TDL-main/CONTRIBUTING.md
@@ -0,0 +1,5 @@
+1. Fork the repository
+2. Clone the repository
+3. Make changes and push the code
+4. Make a Pull Request to this repository 
+5. Wait for the response
diff --git a/TDL-main/LICENSE b/TDL-main/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 junaid-secondary
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/TDL-main/README.md b/TDL-main/README.md
@@ -0,0 +1,2 @@
+# TDL
+This is a simple todo list using html and css. Please help me to make it functional and beautiful
diff --git a/TDL-main/app.js b/TDL-main/app.js
@@ -0,0 +1,55 @@
+// Create a "close" button and append it to each list item
+var myNodelist = document.getElementsByTagName("LI");
+var i;
+for (i = 0; i < myNodelist.length; i++) {
+  var span = document.createElement("SPAN");
+  var txt = document.createTextNode("\u00D7");
+  span.className = "close";
+  span.appendChild(txt);
+  myNodelist[i].appendChild(span);
+}
+
+// Click on a close button to hide the current list item
+var close = document.getElementsByClassName("close");
+var i;
+for (i = 0; i < close.length; i++) {
+  close[i].onclick = function() {
+    var div = this.parentElement;
+    div.style.display = "none";
+  }
+}
+
+// Add a "checked" symbol when clicking on a list item
+var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if (ev.target.tagName === 'LI') {
+    ev.target.classList.toggle('checked');
+  }
+}, false);
+
+// Create a new list item when clicking on the "Add" button
+function newElement() {
+  var li = document.createElement("li");
+  var inputValue = document.getElementById("myInput").value;
+  var t = document.createTextNode(inputValue);
+  li.appendChild(t);
+  if (inputValue === '') {
+    alert("You must write something!");
+  } else {
+    document.getElementById("myUL").appendChild(li);
+  }
+  document.getElementById("myInput").value = "";
+
+  var span = document.createElement("SPAN");
+  var txt = document.createTextNode("\u00D7");
+  span.className = "close";
+  span.appendChild(txt);
+  li.appendChild(span);
+
+  for (i = 0; i < close.length; i++) {
+    close[i].onclick = function() {
+      var div = this.parentElement;
+      div.style.display = "none";
+    }
+  }
+}
diff --git a/TDL-main/index.html b/TDL-main/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="./styles.css" type="text/css" />
+    <title>To Do List</title>
+  </head>
+  <body>
+    <div id="myDIV" class="container">
+      <div class="header">
+        <input type="text" id="myInput" placeholder="Title..." />
+        <span onclick="newElement()" class="addBtn">Add</span>
+        <h1>My To Do List</h1>
+      </div>
+
+      <ul id="myUL">
+        <li>Hit the gym</li>
+        <li class="checked">Pay bills</li>
+        <li>Meet George</li>
+        <li>Buy eggs</li>
+        <li>Read a book</li>
+        <li>Organize office</li>
+      </ul>
+    </div>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/TDL-main/styles.css b/TDL-main/styles.css
@@ -0,0 +1,138 @@
+/* General body and background styling */
+body {
+  font-family: 'Orbitron', sans-serif;
+  background: radial-gradient(circle, #090a2a, #030519);
+  color: white;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  overflow: hidden;
+  animation: starfield 50s infinite linear;
+}
+
+/* Starfield animation for space background */
+@keyframes starfield {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+
+/* Container for the to-do list */
+.container {
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 15px;
+  padding: 20px;
+  width: 320px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
+  text-align: center;
+  border: 2px solid #00ffcc;
+  backdrop-filter: blur(20px);
+  transform: perspective(1000px) rotateX(10deg);
+  transition: transform 0.3s ease;
+}
+
+.container:hover {
+  transform: perspective(1000px) rotateX(0deg);
+}
+
+/* Header section */
+.header h1 {
+  font-size: 28px;
+  margin: 10px 0;
+  color: #00ffcc;
+  text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc, 0 0 30px #00bcd4;
+  font-weight: 600;
+}
+
+.header input {
+  width: 80%;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #00bcd4;
+  border-radius: 5px;
+  font-size: 16px;
+  outline: none;
+  background-color: #222;
+  color: white;
+  box-shadow: 0 0 10px rgba(0, 255, 204, 0.7);
+  transform: translateZ(0);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.header input:focus {
+  box-shadow: 0 0 20px rgba(0, 255, 204, 0.8);
+  transform: scale(1.05);
+}
+
+.addBtn {
+  padding: 10px 15px;
+  background: linear-gradient(45deg, #ff0099, #00bcd4);
+  border: none;
+  border-radius: 5px;
+  font-size: 18px;
+  cursor: pointer;
+  color: white;
+  box-shadow: 0 0 15px rgba(255, 0, 153, 0.8), 0 0 25px rgba(0, 188, 212, 0.8);
+  transition: all 0.3s ease;
+  text-transform: uppercase;
+  transform: translateZ(0);
+}
+
+.addBtn:hover {
+  background: linear-gradient(45deg, #ff0099, #00bcd4);
+  box-shadow: 0 0 25px rgba(255, 0, 153, 0.9), 0 0 35px rgba(0, 188, 212, 0.9);
+  transform: scale(1.05);
+}
+
+/* To-Do list styling */
+#myUL {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  margin-top: 20px;
+}
+
+#myUL li {
+  padding: 15px;
+  text-align: left;
+  font-size: 18px;
+  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 8px;
+}
+
+#myUL li:before {
+  content: "◉";
+  position: absolute;
+  left: -25px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #00ffcc;
+  font-size: 24px;
+  opacity: 0.7;
+}
+
+#myUL li:hover {
+  background-color: rgba(0, 255, 204, 0.3);
+  box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
+  transform: translateY(-5px);
+}
+
+.checked {
+  text-decoration: line-through;
+  color: #888;
+}
+
+#myUL li:not(.checked):hover {
+  color: #00ffcc;
+  text-shadow: 0 0 15px #00ffcc;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# TDL
		This is a simple todo list using html and css. Please help me to make it functional and beautiful