├── README.md ├── assets ├── icons8-survey.gif └── Untitled design.jpg ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # ToDo-List -------------------------------------------------------------------------------- /assets/icons8-survey.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softenrj/ToDo-List/HEAD/assets/icons8-survey.gif -------------------------------------------------------------------------------- /assets/Untitled design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softenrj/ToDo-List/HEAD/assets/Untitled design.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TODO's List 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Today main focus😎

18 |

19 |
20 | 21 |
22 | 23 |
24 | 🔴🟢🟠 25 | 26 | 27 | 😚 28 | 29 |
30 |
31 | 32 |
33 | 34 |
35 |
36 | 37 |
38 | 39 |
40 | LinkedIn 41 | Instagram 42 | Thread 43 |

© Raj Sharma.

44 |
45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var time=document.querySelector(".main-heading h2"); 2 | 3 | function Time() { 4 | var dateString = new Date(); 5 | time.innerHTML=dateString.getDate()+"/"+dateString.getMonth()+"/"+dateString.getFullYear(); 6 | } 7 | Time(); 8 | 9 | var inputField = document.querySelector(".add-list input"); 10 | var inputVal = inputField.value; 11 | 12 | document.querySelector(".add-list input").addEventListener("click",function len(){ 13 | var l=document.querySelector(".add-list .length").innerHTML=inputVal.length; 14 | inputVal=document.querySelector(".add-list input").value; 15 | if(l>=10){ 16 | document.querySelector(".add-list .emoji1").innerHTML="😅"; 17 | 18 | if(l>=16){ 19 | document.querySelector(".add-list .emoji1").innerHTML="🥵"; 20 | 21 | }if(l>=20){ 22 | document.querySelector(".add-list .emoji1").innerHTML="🤯"; 23 | } 24 | 25 | } 26 | else{ 27 | document.querySelector(".add-list .emoji1").innerHTML="😚"; 28 | } 29 | setTimeout(len,100); 30 | }) 31 | var ran=Math.floor(Math.random()*3)+1; 32 | 33 | document.querySelector(".add-list i").addEventListener("click",addFun); 34 | function addFun(){ 35 | if(inputVal.trim()==="") return; 36 | 37 | var listContainer=document.querySelector(".lists"); 38 | var newitem=document.createElement("div"); 39 | newitem.className=`list-item list`; 40 | if(ran===1){ 41 | newitem.innerHTML=` 42 | 🔴 43 |

${inputVal}

44 | 45 | `; 46 | ran=Math.floor(Math.random()*3)+1; 47 | } 48 | else if(ran===2){ 49 | newitem.innerHTML=` 50 | 🟢 51 |

${inputVal}

52 | 53 | `; 54 | ran=Math.floor(Math.random()*3)+1; 55 | } 56 | else{ 57 | newitem.innerHTML=` 58 | 🟠 59 |

${inputVal}

60 | 61 | `; 62 | ran=Math.floor(Math.random()*3)+1; 63 | } 64 | listContainer.appendChild(newitem); 65 | newitem.querySelector(".fa-trash").addEventListener("click", function() { 66 | newitem.remove(); 67 | }); 68 | newitem.querySelector("span").addEventListener("click", function () { 69 | var p = newitem.querySelector("p"); 70 | if (p.style.textDecoration === "line-through") { 71 | p.style.textDecoration = "none"; 72 | p.style.color = "initial"; // Reset to default text color 73 | } else { 74 | p.style.textDecoration = "line-through"; 75 | p.style.color = "rgb(106, 104, 104)"; 76 | } 77 | }); 78 | inputField.value=""; 79 | 80 | } 81 | 82 | function edit(item, inputVal) { 83 | var newInputVal = prompt("Edit your task:", inputVal); 84 | if (newInputVal !== null && newInputVal.trim() !== "") { 85 | item.querySelector("p").innerHTML = newInputVal; 86 | } 87 | } 88 | 89 | document.querySelector(".add-list input").addEventListener("keydown", function(event) { 90 | if (event.key === "Enter") { 91 | addFun(); 92 | } 93 | }); 94 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-image: url(./assets/Untitled\ design.jpg); 3 | background-size: cover; 4 | font-family: "Inter", sans-serif; 5 | font-optical-sizing: auto; 6 | font-weight: bolder; 7 | font-style: normal; 8 | font-variation-settings:"slnt" 0; 9 | } 10 | 11 | *{ 12 | padding: 0%; 13 | margin: 0%; 14 | } 15 | .border{ 16 | 17 | border: 0.2em solid white; 18 | margin: 10px auto 10px auto; 19 | display: block; 20 | min-height: 90vh; 21 | border-radius: 6px; 22 | max-width: 400px; 23 | backdrop-filter:blur(5px); 24 | } 25 | 26 | .main-heading{ 27 | color: rgb(255, 255, 255); 28 | margin: 0.2rem; 29 | text-align: center; 30 | margin-top: 20px; 31 | } 32 | .list{ 33 | margin-top: 40px; 34 | background-color: white; 35 | min-height: 2.5rem; 36 | border-radius: 4px; 37 | width: 80%; 38 | margin-left: 8%; 39 | display: flex; 40 | justify-content: space-between; 41 | align-items: center; 42 | padding: 0.5rem; 43 | 44 | } 45 | .add-list input{ 46 | border: none; 47 | border-radius: 4px; 48 | text-align: center; 49 | height: 25px; 50 | } 51 | .add-list input:focus{ 52 | border: none; 53 | outline: none; 54 | } 55 | .add-list .circle{ 56 | font-size: x-small; 57 | margin: 5px; 58 | } 59 | .circle{ 60 | font-size: x-small; 61 | margin: 5px; 62 | margin-right: 10px; 63 | padding-left:2px; 64 | } 65 | .circle:hover{ 66 | cursor: pointer; 67 | } 68 | .add-list span{ 69 | padding-left: 6px; 70 | padding-right: 6px; 71 | 72 | } 73 | 74 | hr{ 75 | border: solid #eaf6f6 2px; 76 | border-bottom: none; 77 | width: 150px; 78 | margin: 30px auto; 79 | } 80 | .length{ 81 | margin-left: 12px; 82 | font-size:xx-small; 83 | width: 10px; 84 | height: 10px; 85 | color: rgb(196, 192, 192); 86 | } 87 | .list-item { 88 | display: flex; 89 | justify-content: space-between; 90 | align-items: center; 91 | padding: 0.5rem; 92 | } 93 | 94 | .list-item i { 95 | margin-left: 15px; 96 | align-self: center; 97 | } 98 | 99 | 100 | .list-item p { 101 | flex: 1; 102 | margin: 0; 103 | overflow: hidden; 104 | text-overflow: ellipsis; 105 | white-space: normal; 106 | word-wrap: break-word; 107 | } 108 | .bottom-container { 109 | background-color: rgba(255, 255, 255, 0.514); 110 | backdrop-filter: blur(20px); 111 | padding: 10px 0 20px; 112 | display: flex; 113 | justify-content: center; 114 | flex-wrap: wrap; 115 | align-content: end; 116 | flex-shrink: 0; 117 | } 118 | a { 119 | color: #ffffff; 120 | font-family: "Montserrat", sans-serif; 121 | margin: 10px 20px; 122 | text-decoration: none; 123 | } 124 | .copyright { 125 | color: #eaf6f6; 126 | font-size: 0.75rem; 127 | padding: 10px 0; 128 | } 129 | @media only screen and (max-width: 600px){ 130 | .border{ 131 | 132 | border: 0.2em solid white; 133 | margin: 10px auto 10px auto; 134 | display: block; 135 | min-height: 80vh; 136 | border-radius: 6px; 137 | max-width: 350px; 138 | backdrop-filter:blur(5px); 139 | } 140 | 141 | .add-list .circle{ 142 | font-size: 6px; 143 | 144 | margin: 5px; 145 | } 146 | 147 | .add-list input{ 148 | border: none; 149 | border-radius: 4px; 150 | text-align: center; 151 | height: 25px; 152 | width: 150px; 153 | } 154 | } 155 | --------------------------------------------------------------------------------