From 70c2a4644a7fe6da1abc399489898ceffe1bd299 Mon Sep 17 00:00:00 2001 From: Theodoros Moschoglou <146652642+Wake-cloud@users.noreply.github.com> Date: Sun, 24 Nov 2024 06:40:12 +0200 Subject: [PATCH] Updated the style Hope you like it! --- TDL-main/CONTRIBUTING.md | 5 ++ TDL-main/LICENSE | 21 ++++++ TDL-main/README.md | 2 + TDL-main/app.js | 55 ++++++++++++++++ TDL-main/index.html | 31 +++++++++ TDL-main/styles.css | 138 +++++++++++++++++++++++++++++++++++++++ 6 files changed, 252 insertions(+) create mode 100644 TDL-main/CONTRIBUTING.md create mode 100644 TDL-main/LICENSE create mode 100644 TDL-main/README.md create mode 100644 TDL-main/app.js create mode 100644 TDL-main/index.html create mode 100644 TDL-main/styles.css diff --git a/TDL-main/CONTRIBUTING.md b/TDL-main/CONTRIBUTING.md new file mode 100644 index 0000000..01044b5 --- /dev/null +++ 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 new file mode 100644 index 0000000..f30fd58 --- /dev/null +++ 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 new file mode 100644 index 0000000..5f84fef --- /dev/null +++ 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 new file mode 100644 index 0000000..52ac219 --- /dev/null +++ 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 new file mode 100644 index 0000000..9de788f --- /dev/null +++ b/TDL-main/index.html @@ -0,0 +1,31 @@ + + + + + + + + + To Do List + + +
+
+ + Add +

My To Do List

+
+ + +
+ + + + diff --git a/TDL-main/styles.css b/TDL-main/styles.css new file mode 100644 index 0000000..c8388dc --- /dev/null +++ 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; +}