From 4e1cb5be39978375b55ce32d54fc3ddeb5c47f41 Mon Sep 17 00:00:00 2001 From: Nilesh Mishra <55555595+nilesh9836@users.noreply.github.com> Date: Sun, 2 Oct 2022 12:14:16 +0530 Subject: [PATCH 1/2] Update main.js --- main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 6edbb22..175f8b9 100644 --- a/main.js +++ b/main.js @@ -50,7 +50,7 @@ document.addEventListener("DOMContentLoaded", function(){ }).showToast(); } - else if(fileName == ' '){ + else if(fileName?.trim() == ' '){ Toastify({ @@ -267,4 +267,4 @@ document.addEventListener("DOMContentLoaded", function(){ }) -}) \ No newline at end of file +}) From d99327bd7011a2bd0d7ba265c48361ddb332f40a Mon Sep 17 00:00:00 2001 From: Nilesh Mishra <55555595+nilesh9836@users.noreply.github.com> Date: Thu, 6 Oct 2022 00:49:09 +0530 Subject: [PATCH 2/2] Add delete button on list item --- Style/style.css | 60 ++++++++++++++------------ main.js | 110 +++++++++++++++++++++++++++--------------------- 2 files changed, 95 insertions(+), 75 deletions(-) diff --git a/Style/style.css b/Style/style.css index ccde6c2..b50b89a 100644 --- a/Style/style.css +++ b/Style/style.css @@ -27,7 +27,7 @@ body{ header{ background-color: hsl(197, 71%, 80%); box-sizing: border-box; - + text-align: center; width: 100%; height: auto; @@ -38,9 +38,9 @@ header{ text-transform: uppercase; color:black; text-decoration: none; - + -webkit-text-stroke: 0.015em rgba(255,255,255,0.5); - + } @@ -50,24 +50,24 @@ header{ width: 100%; height: 90vh; - + } .fileList{ width: 15%; height: 100%; - + } .textContent{ width: 85%; height: 100%; /* padding-left: 0px; padding-right: 0px; */ - + } .a{ - + background-color: gainsboro; border-radius: 4px; height: 85%; @@ -81,11 +81,11 @@ header{ /* margin: 0px 1em; */ /* margin-right: 1em; */ width: 100%; - height: 100%; + height: 100%; position:relative; resize: none; - display: inline-block; - + display: inline-block; + } .toolStyle{ padding-left: 2vw; @@ -95,7 +95,7 @@ header{ display: flex; background-color: rgb(195, 208, 222); border-radius: 4px; - + } .tool>h5{ margin: auto; @@ -105,13 +105,13 @@ header{ width: 70%; margin-bottom: em; display: flex; - + /* overflow: scroll; */ } #save{ - + cursor: pointer; outline: 0; color: #fff; @@ -126,23 +126,23 @@ header{ font-size: 16px; border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; - - + + } #save:hover{ - - + + color: #fff; background-color: #2be33b; border-color: #6bd846; - + } #deleteAll{ margin: auto 16px; - + cursor: pointer; outline: 0; color: #fff; @@ -157,7 +157,7 @@ header{ font-size: 16px; border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; - + } #heading @@ -201,7 +201,7 @@ header{ } #emp-nonemp{ margin: auto 16px; - + cursor: pointer; outline: 0; display: inline-block; @@ -215,21 +215,21 @@ header{ border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; color: #0d6efd; - - + + } #emp-nonemp :hover { color: #000000; background-color: #0d6efd; - + } #underline-normal{ margin: auto 16px; } #bold-plain{ margin: auto 16px; - + } #bold-plain>button:hover{ background-color:#fae588; @@ -266,5 +266,13 @@ background-color: #f1f1f1; ul>li:hover{ color: bisque; - + } + +.del { + font-size: 18px; + padding: 4px; + background: azure; + border-radius: 50%; + margin: 11px; +} \ No newline at end of file diff --git a/main.js b/main.js index 175f8b9..2c19358 100644 --- a/main.js +++ b/main.js @@ -15,8 +15,8 @@ document.addEventListener("DOMContentLoaded", function(){ fileArray = JSON.parse(localStorage.getItem("fileArray")) displayFile(fileArray) } - - + + function saveFile(fileName){ if (localStorage.getItem(fileName)){ Toastify({ @@ -27,14 +27,14 @@ document.addEventListener("DOMContentLoaded", function(){ duration: 3000, style: { - background:"linear-gradient(to right, #00b09b, #96c93d)" + background:"linear-gradient(to right, #00b09b, #96c93d)" } - + }).showToast(); return 0 } else if(fileName === null){ - + Toastify({ text: "Operation Terminated...", @@ -42,16 +42,16 @@ document.addEventListener("DOMContentLoaded", function(){ position:"center", duration: 2000, style: - { - background:"linear-gradient(to right, #FF0000, #FF8C00)" - + { + background:"linear-gradient(to right, #FF0000, #FF8C00)" + } - + }).showToast(); - + } else if(fileName?.trim() == ' '){ - + Toastify({ text: "Enter valid name", @@ -60,10 +60,10 @@ document.addEventListener("DOMContentLoaded", function(){ duration: 2000, style: { - //background:"linear-gradient(to right, #00b09b, #96c93d)" + //background:"linear-gradient(to right, #00b09b, #96c93d)" background: "-webkit-linear-gradient(315deg, #73a5ff, #5477f5)" } - + }).showToast(); } else{ @@ -76,12 +76,12 @@ document.addEventListener("DOMContentLoaded", function(){ duration: 2000, style: { - + background: "-webkit-linear-gradient(315deg, #41cb1b, #9ACD32)" } - - }).showToast(); - + + }).showToast(); + removeListItem(fileArray); return 1 } @@ -134,6 +134,15 @@ document.addEventListener("DOMContentLoaded", function(){ // removeStyle(); }) + $(".del").on("click", function (e) { + e.preventDefault(); + $(this).parent().remove(); + localStorage.removeItem(fileArray[parseInt(e.currentTarget.id)]); + fileArray=fileArray.filter((ele, i) => i!==parseInt(e.currentTarget.id)); + jsonFileArray=JSON.stringify(fileArray); + localStorage.setItem("fileArray", jsonFileArray); + location.reload(); + }); // $("#files li p span").on('click', function(e){ // let idx = Number($(this).attr('id')) - 1; // let arr = localStorage.getItem("fileArray"); @@ -157,9 +166,9 @@ document.addEventListener("DOMContentLoaded", function(){ // }) - + function displayFile(fileArray){ - + idx = 0 for(let ele of fileArray) { ol = document.getElementById("files"); @@ -168,21 +177,24 @@ document.addEventListener("DOMContentLoaded", function(){ li.setAttribute("id", `${ele}`); li.setAttribute("class", "list"); - // span = document.createElement("span") - // span.setAttribute("id", `${idx}`); - // span.appendChild(document.createTextNode("❌")) + span=document.createElement("span") + span.setAttribute("id", `${idx}`); + span.setAttribute("class", "del"); + span.appendChild(document.createTextNode("❌")) + + p=document.createElement("p"); + p.setAttribute("id", `${ele}`); + p.appendChild(document.createTextNode(ele)); + p.appendChild(span); + + - p = document.createElement("p"); - // p.setAttribute("id", `${ele}`); - p.appendChild(document.createTextNode(ele)); - // p.appendChild(span); + li.appendChild(p); + ol.appendChild(li); - li.appendChild(p); - ol.appendChild(li); - - idx += 1 - + idx+=1 + } } @@ -194,28 +206,28 @@ document.addEventListener("DOMContentLoaded", function(){ } } - + save.addEventListener("click", function(){ let fileName = prompt("Enter File name to be saved") - - + + if (saveFile(fileName)){ // console.log(fileArray); - - + + fileArray.push(fileName) jsonFileArray = JSON.stringify(fileArray); localStorage.setItem("fileArray", jsonFileArray) let textContent = document.querySelector("#text").value; let jsonTextContent = JSON.stringify(textContent); - + localStorage.setItem(fileName, jsonTextContent); displayFile(fileArray) // console.log(fileArray); - - } - - + + } + + }) @@ -229,10 +241,10 @@ document.addEventListener("DOMContentLoaded", function(){ duration: 2000, style: { - + background: "-webkit-linear-gradient(315deg, #f90c0c, #FFAE42)" } - + }).showToast(); console.log("deleteall"); textArea.value = '' @@ -241,7 +253,7 @@ document.addEventListener("DOMContentLoaded", function(){ // localStorage.removeItem("fileArray") fileArray = [] // console.log(fileArray); - + } }) @@ -249,7 +261,7 @@ document.addEventListener("DOMContentLoaded", function(){ copyAll.addEventListener("click", function(){ let textContent = document.querySelector("#text").value; navigator.clipboard.writeText(textContent).then(function(){ - + Toastify({ text: "Text copied to clipboard.", @@ -258,13 +270,13 @@ document.addEventListener("DOMContentLoaded", function(){ duration: 2000, style: { - + background: "-webkit-linear-gradient(315deg, #73a6ff, #5377f5)" } - + }).showToast(); }); }) - - + + })