diff --git a/TaskManager/ahsan-abc/index.css b/TaskManager/ahsan-abc/index.css index 55d0a78f5..004531341 100644 --- a/TaskManager/ahsan-abc/index.css +++ b/TaskManager/ahsan-abc/index.css @@ -1,429 +1,566 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); + *{ - padding:0; margin:0; - font-family: 'Roboto'; + padding:0; + box-sizing:border-box; + font-family:'Poppins',sans-serif; } -body +body { - background-color: turquoise; + background: linear-gradient(135deg,#43cea2,#185a9d); + min-height:100vh; + color:white; + overflow-x:hidden; } +/* scrollbar */ +::-webkit-scrollbar +{ + width:8px; +} +::-webkit-scrollbar-thumb +{ + background:white; + border-radius:10px; +} +/* DATE + TIME */ - -/* to-do__________________________________________ */ -/* to-do__________________________________________ */ - -#note +#boss { - text-align: center; - background-color:turquoise; + width:fit-content; + margin:40px auto 20px auto; + text-align:center; } +#time +{ + font-size:4rem; + font-weight:600; + padding:15px 25px; -.note + background: rgba(255,255,255,0.15); + + backdrop-filter: blur(10px); + + border-radius:20px; + + box-shadow:0 8px 25px rgba(0,0,0,0.2); +} + +#date { - display:inline-flex; - flex-direction: column; - box-shadow: 1px 1px 1px rgb(44, 44, 44); + margin-top:10px; + background: rgba(255,255,255,0.2); - height:500px; - width:40vw; - background-color: rgba(255, 255, 255, 0.806); - color: rgb(0, 0, 0); - - border-radius:5% ; - margin:20px; - + padding:8px 15px; + border-radius:12px; + font-size:1rem; } -ul{ - color: white; - font-size: 1.2rem; - list-style: none; - margin : 0 12px; - text-align: left; - - +/* SEARCH */ + +#search +{ + display:flex; + justify-content:center; + margin:25px 0; } -.note >h2 + +#google { - margin-top: 5px; - color: rgb(85, 85, 85); + width:55vw; + max-width:700px; + + padding:15px 20px; + + border:none; + outline:none; + + border-radius:15px; + + background:white; + + font-size:1rem; + + box-shadow:0 5px 15px rgba(0,0,0,0.15); } -.note > input +/* SITE SHORTCUTS */ +#sites { - padding: 0 2%; - width: 91%; - height: 25px; + width:85%; + margin:auto; + + display:flex; + justify-content:center; + align-items:center; + + flex-wrap:wrap; - /* margin: 0 12px; */ - margin:auto; - margin-top: 10px; + gap:20px; + padding:20px; } -#in > li +.site_iteam { - margin : 15px 0 ; - padding: 2px 2px ; - background-color:deepskyblue; - white-space: 3; - + width:90px; + height:110px; + + border-radius:20px; + + display:flex; + flex-direction:column; + + justify-content:center; + align-items:center; + + transition:0.3s; + + position:relative; } -.but +.site_iteam:hover { - background-color: aquamarine; - visibility:hidden; + background:rgba(255,255,255,0.15); + + backdrop-filter:blur(10px); + + transform:translateY(-5px); } -@media only screen and (max-width :800px) +.site_iteam a { - .note -{ - - display:inline-block; - width:90vw; - - + width:65px; + height:65px; -} + border-radius:50%; -} + background:white; + display:flex; + justify-content:center; + align-items:center; -/* search_____________________________________________________________ */ -/* search_____________________________________________________________ */ + overflow:hidden; +} -#search +.site_iteam img { - height: 50px; - background-color: turquoise; - text-align: center; + width:70%; + height:70%; } - -#google +.site_iteam i { - padding: 10px; + margin-top:8px; + + color:white; + + font-size:0.9rem; - border: 0; - margin : 10px 0 ; - outline: 0; - height: 1rem; - width:45vw; - box-shadow: 1px 1px rgb(55, 55, 55); - border-radius: 10px; - font-size: medium; + text-align:center; } -@media screen and (max-width:800px) -{ -#google +.site_iteam button { + margin-top:5px; + border:none; - width:80vw; + background:#ff4d4d; + + color:white; + + padding:4px 8px; + + border-radius:8px; + + cursor:pointer; + + display:none; } + +.site_iteam:hover button +{ + display:block; } +/* MAIN NOTE SECTION */ + +#note +{ + width:90%; + margin:30px auto; + + display:flex; + + justify-content:center; + + align-items:flex-start; -/* note________________________________ */ -/* note________________________________ */ + gap:30px; -#note2{ - position: relative; - height: 500px; + flex-wrap:wrap; } +/* CARDS */ +.note +{ + width:700px; + min-height:550px; -#area + background:rgba(255,255,255,0.15); + + backdrop-filter:blur(15px); + + border-radius:25px; + + padding:25px; + + box-shadow:0 10px 30px rgba(0,0,0,0.2); + + display:flex; + flex-direction:column; +} + +/* HEADINGS */ + +.note h2 { - height: 85%; - width: 97%; - border: 0; - outline: 0; + display:flex; - + justify-content:space-between; + align-items:center; - font-size: 1.3rem; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - margin: 3px; + margin-bottom:20px; - background-color: unset; - color: rgba(45, 108, 255, 0.995); - resize: none; - position: relative; - - + font-size:1.5rem; + + color:rgb(16, 15, 15); } +/* BUTTONS */ -#show_count +button { - position:relative; - z-index: 2; - top: 3px; - left: 2px; - background-color: unset; - display: inline; - margin-bottom: 5px; - text-align: center; - justify-content: space-around; + border:none; + + background:#5b7fff; + color:white; + + padding:8px 14px; + + border-radius:10px; + + cursor:pointer; + + transition:0.3s; } -#next_note +button:hover { - display: inline; - - - + transform:scale(1.05); + + opacity:0.9; } -/* date ________________________________ */ -/* date ________________________________ */ +/* TASK INPUT */ -#boss +.task_controls { - align-items: center; - justify-self: center; - text-align: center; - - height:160px; + display:flex; - width:15rem; - margin: auto; - margin: 6vh auto; + gap:10px; + margin-bottom:20px; } - -#date +#input { + flex:1; + + padding:12px; + + border:none; + + border-radius:12px; - - background-color: bisque; - padding: 5px; - font-size: 1.2rem; - box-shadow: 1px 1px rgb(55, 55, 55); - border-radius: 10px; + outline:none; + + font-size:1rem; } -#time +#priority { - height: 60%; - color: white; + width:120px; + + border:none; + + border-radius:12px; + padding:10px; - padding-bottom: 0; - font-size: 3.5rem; - background-color: rgb(176, 11, 253); - - box-shadow: 1px 1px rgb(55, 55, 55); - border-radius: 10px; - text-align: center; + + outline:none; } -/* sites_________________________________________________________________ */ -/* sites_________________________________________________________________ */ -#sites +/* TASK LIST */ + +ul { - /* background-color: blue; */ - display: flex; - - width:70%; /* 90% - mobile*/ - margin:auto; - padding: 2%; - align-items: center; - justify-content: center; - flex-wrap: wrap; - height: max-content; - flex-direction: row-reverse; + list-style:none; + + margin-top:10px; + overflow-y:auto; } -.site_iteam + +#in li { - /* background-color: black; */ - margin: 0 10px; - width:6rem; - height:8rem; - border-radius: 5px; - display: flex; - align-content: center; - justify-content: center; - text-align: center; - flex-wrap: wrap; - overflow: hidden; - - + background:rgba(255,255,255,0.18); + + margin-bottom:12px; + + padding:14px; + + border-radius:14px; + + display:flex; + justify-content:space-between; + + align-items:center; + + gap:10px; + + color:white; + + transition:0.3s; } - .site_iteam > a +#in li:hover { - display: flex; - margin:4px; - width:4rem; - height:4rem; - background-color: white; - flex-wrap: wrap; - - text-align: center; - border-radius: 51%; - justify-content: center; - align-items: center; + background:rgba(255,255,255,0.3); +} + +.but +{ + background:#ff4d4d; + + width:25px; + height:25px; + + border-radius:50%; + + padding:0; - + visibility:hidden; } -.site_iteam > a > img +#in li:hover .but { - width:60%; - height:60%; - margin: auto; - + visibility:visible; } -.site_iteam > i +#in { - font-style:normal; - color: white; - width:100%; - font-size: 1.2rem; - display: block; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + flex:1; + overflow-y:auto; + padding-right:5px; } -.site_iteam > button +/* TEXTAREA */ + +#area { - opacity: 50%; -margin-top: 2px; -display: none; + flex:1; + + width:100%; + + resize:none; + + border:none; + + outline:none; + + border-radius:15px; + + padding:15px; + + font-size:1rem; + + margin-top:10px; + + background:rgba(255,255,255,0.2); + + color:white; } +/* NOTE NAVIGATION */ -.site_iteam:hover +#show { - background-color: rgba(186, 185, 185, 0.548); - + display:flex; + + justify-content:center; + + align-items:center; + + gap:10px; + + margin-top:15px; } +/* SITE POPUP */ + #site_add { - width:100vw; - height:100vh; - position:sticky; - background-color: rgba(187, 187, 187, 0.703); - z-index:2; - top: 0; - left: 0; - display: none; - justify-content: center; - align-items: center; + position:fixed; + + top:0; + left:0; - + width:100%; + height:100%; + + background:rgba(0,0,0,0.4); + + display:none; + + justify-content:center; + align-items:center; + + z-index:100; } #site_add > div { + width:350px; - width:30%; - height:30%; - background-color: rgb(255, 255, 255); - border-radius: 5px; - padding: 3%; - + background:white; -} + border-radius:20px; -#site_add > div > input -{ - display: block; - margin:10%; - width:80%; - height: 30px; - padding: 4px; - font-size: 1rem; - -} + padding:25px; + display:flex; -@media screen and ( max-width:800px) { - #sites -{ + flex-direction:column; - - - width:90%; /* 90% - mobile*/ - margin:auto; - padding: 2%; - align-items: center; - justify-content: center; - flex-wrap: wrap; - height: max-content; + gap:15px; } -.site_iteam +#site_add input { - margin:0; - height: max-content; - padding-bottom: 5px; - width: 5rem; - height:7rem; -} + padding:12px; + border-radius:10px; + border:1px solid #ccc; -.site_iteam > a > img -{ - width:80%; - height:80%; - margin: auto; - border-radius: 51%; - - + outline:none; } -#site_add > div +/* MOBILE */ + +@media screen and (max-width:900px) { + #google + { + width:85vw; + } - width:90%; - height:43%; - - + .note + { + width:95%; + } -} + #time + { + font-size:2.8rem; + } + + .task_controls + { + flex-direction:column; + } + #priority + { + width:100%; + } +} +.task_content +{ + display:flex; + align-items:center; + gap:12px; + flex:1; } +.task_text +{ + word-break:break-word; +} -.site_iteam > i +.priority_badge { - font-size: 0.8rem; + padding:5px 10px; + border-radius:20px; + font-size:0.75rem; + font-weight:600; + min-width:70px; + text-align:center; } - +/* COLORS */ +.low +{ + background:#22c55e; +} -.push +.medium { - display: block; + background:#f59e0b; } -.pull +.high { - display: none; + background:#ef4444; } +.add_icon +{ + width:65px; + height:65px; + + border-radius:50%; + + background:white; + + display:flex; + justify-content:center; + align-items:center; + + font-size:2.5rem; + + font-weight:600; + + color:#185a9d; + + text-decoration:none; + cursor:pointer; +} \ No newline at end of file diff --git a/TaskManager/ahsan-abc/index.html b/TaskManager/ahsan-abc/index.html index adb4fbfa8..5c69df726 100644 --- a/TaskManager/ahsan-abc/index.html +++ b/TaskManager/ahsan-abc/index.html @@ -17,6 +17,7 @@ id="site_name" placeholder="enter name (atlest 4 charecter)" />. + @@ -40,26 +41,39 @@
-
-
+
- add iteam -
+ +
+ + + Add Item
+
+
-

TO_DO List

- +

+ TO_DO List + +

+
-
    + + + +
    + +
    diff --git a/TaskManager/ahsan-abc/index.js b/TaskManager/ahsan-abc/index.js index e1b9d39a2..2368e716e 100644 --- a/TaskManager/ahsan-abc/index.js +++ b/TaskManager/ahsan-abc/index.js @@ -1,5 +1,6 @@ const list = document.querySelector("#input") +const priority = document.querySelector("#priority") const uo = document.querySelector("#in") const date_ = document.querySelector("#date") const time = document.querySelector("#time") @@ -15,6 +16,10 @@ function update() var s = now.getSeconds() if (h > 12) h = h - 12 + h = String(h).padStart(2, "0"); + m = String(m).padStart(2, "0"); + s = String(s).padStart(2, "0"); + time.innerHTML = `${h}:${m}:${s}` @@ -78,7 +83,19 @@ document.querySelector("#google").addEventListener("keypress", }) +document.querySelector("#add_task").addEventListener("click", function () +{ + if(list.value.trim() !== "") + { + add( + list.value, + priority.value, + true + ); + list.value = ""; + } +}); @@ -109,104 +126,149 @@ list.addEventListener("keyup", function (event) { if (event.key == "Enter" && this.value!= "") { - add(this.value,true) + add(this.value, priority.value, true) this.value = "" } } ) +const add = (iteam, priorityValue, waha) => { -const add = (iteam ,waha) => { - var i = document.createElement("li"); + const i = document.createElement("li"); + let priorityClass = priorityValue.toLowerCase(); + + i.innerHTML = ` + +
    + + + ${priorityValue} + + + + ${iteam} + + +
    + + + `; + + var b = true; - - - i.innerHTML = ` ${iteam} ` - ; - console.log(iteam); - - var b = true i.addEventListener("click", - function (event) { - if (b == true) { - this.firstChild.style.visibility = "visible" - this.style.backgroundColor = "blue"; - this.style.textDecoration = "line-through" - b = false + function (event) + { + if(event.target.classList.contains("but")) + return; + + if (b) + { + this.style.opacity = "0.6"; + this.style.textDecoration = "line-through"; + b = false; } - else { - this.firstChild.style.visibility = "hidden" - this.style.backgroundColor = "deepskyblue"; - this.style.textDecoration = "none" - b = true + else + { + this.style.opacity = "1"; + this.style.textDecoration = "none"; + b = true; } - } + ); - - - ) - - - uo.appendChild(i); + if (waha == true) { - var count = localStorage.getItem("num") - count = parseInt(count); - count = count + 1 - localStorage.setItem("num", count) - localStorage.setItem(count.toString(), iteam) - } + let count = parseInt(localStorage.getItem("num")); - i.querySelector("button").addEventListener("click", - function (event) { - var chil = 0 - for (j = 0; j < 100;j++) - { - if (uo.childNodes[j] == i) { - chil = j + 1; - break; - } - } - + count++; - i.remove(); + localStorage.setItem("num", count); - del(chil) + const task = { + text: iteam, + priority: priorityValue + }; - } - ) + localStorage.setItem( + count.toString(), + JSON.stringify(task) + ); + } - - - + i.querySelector(".but").addEventListener("click", + function () + { + i.remove(); + } + ); } - function del(num) { for (i = num; i < parseInt(localStorage.getItem("num")); i++) { - localStorage.setItem(num.toString(),localStorage.getItem((num+1).toString())) - - + localStorage.setItem( + i.toString(), + localStorage.getItem((i + 1).toString()) + ); } - localStorage.removeItem(localStorage.getItem("num")) - localStorage.setItem("num",parseInt(localStorage.getItem("num"))-1) - + + localStorage.removeItem(localStorage.getItem("num")); + + localStorage.setItem( + "num", + parseInt(localStorage.getItem("num")) - 1 + ); } - +function exportCSV() +{ + let csv = "Task,Priority\n"; + + for ( + let i = 1; + i <= parseInt(localStorage.getItem("num")); + i++ + ) + { + const task = JSON.parse( + localStorage.getItem(i.toString()) + ); + + if (task) + { + csv += `${task.text},${task.priority}\n`; + } + } + + const blob = new Blob([csv], { + type: "text/csv" + }); + + const link = document.createElement("a"); + + link.href = URL.createObjectURL(blob); + + link.download = "tasks.csv"; + + link.click(); +} for (i = 1; i <= parseInt(localStorage.getItem("num")); i++) { - if (localStorage.getItem(i.toString())) - add(localStorage.getItem(i.toString()), false) - + if (localStorage.getItem(i.toString())) + { + const task = JSON.parse( + localStorage.getItem(i.toString()) + ); + add(task.text, task.priority, false); + } } // note-2__________________________________________________________________________________________ @@ -216,9 +278,11 @@ for (i = 1; i <= parseInt(localStorage.getItem("num")); i++) if ( !localStorage.getItem("note_counter")) localStorage.setItem("note_counter", 1) - if (!localStorage.getItem("current_note")) -{localStorage.setItem("current_note", 1) -localStorage.setItem("note1", "_null")} +if (!localStorage.getItem("current_note")) +{ + localStorage.setItem("current_note", 1); + localStorage.setItem("note1", ""); +} @@ -231,28 +295,38 @@ const save = document.querySelector("#save") function add_note() { + let count = parseInt(localStorage.getItem("note_counter")); - localStorage.setItem("note_counter", (parseInt(localStorage.getItem("note_counter")) + 1)) - localStorage.setItem("note" + localStorage.getItem("note_counter"), " ") - localStorage.setItem("current_note",localStorage.getItem("note_counter")) - display(parseInt(localStorage.getItem("note_counter"))) - + count++; + + localStorage.setItem("note_counter", count); + + localStorage.setItem("note" + count, ""); + + localStorage.setItem("current_note", count); + + display(count); } function display(no) { - console.log("display") - co.innerHTML = "jobie" - if (no > 0 && no <= parseInt(localStorage.getItem("note_counter"))) + if ( + no > 0 && + no <= parseInt(localStorage.getItem("note_counter")) + ) { - co.value = " " + const savedNote = + localStorage.getItem("note" + no); - co.value = localStorage.getItem("note" + no.toString()) - var total = localStorage.getItem("note_counter") - document.querySelector("#show_count").innerHTML = `${no}/${total}` - } -} + co.value = savedNote || ""; + + let total = + localStorage.getItem("note_counter"); + document.querySelector("#show_count") + .innerHTML = `${no}/${total}`; + } +} function pre_note() { @@ -364,11 +438,15 @@ function add_site(path, nam ) iteam.className = "site_iteam" - iteam.innerHTML = `${nam} - - ${nam} - ` + iteam.innerHTML = ` + + ${nam} + + + ${nam} + + + `; @@ -405,12 +483,14 @@ function add_site(path, nam ) var del; - for (i = 1; i <= parseInt(localStorage.getItem("site_counter")); i++) { - if (iteam == sites.children[i]) { - del = i; - break; + for (let i = 0; i < sites.children.length; i++) + { + if (iteam == sites.children[i]) + { + del = i; + break; + } } - } iteam.remove()