diff --git a/Style/style.css b/Style/style.css index d0a8efd..f6bb99c 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,7 +215,6 @@ 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; - /* uncomment these to get distant buttons */ display: flex; align-items: center; @@ -226,7 +225,7 @@ header{ #emp-nonemp :hover { color: #000000; background-color: #0d6efd; - + } #underline-normal{ margin: auto 16px; @@ -238,7 +237,6 @@ header{ } #bold-plain{ margin: auto 16px; - cursor: pointer; outline: 0; display: inline-block; @@ -306,5 +304,12 @@ 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 6ff78dd..2c19358 100644 --- a/main.js +++ b/main.js @@ -1,311 +1,282 @@ -document.addEventListener("DOMContentLoaded", function () { - let save = document.getElementById("save"); - let deleteAll = document.getElementById("deleteAll"); - let copyAll = document.getElementById("copyAll"); - let textArea = document.getElementById("text"); - let content = document.querySelector("#content"); - let textContent = document.querySelector(".textContent"); - let toolStyle = document.querySelector(".toolStyle"); - let fileList = document.querySelector(".fileList"); - let bold = document.getElementById("bold") - let plain = document.getElementById("plain") - let emphasized = document.getElementById("emphasized") - let unemphasized = document.getElementById("unemphasized") - let underline = document.getElementById("underline") - let normal = document.getElementById("normal") - let dark_mode = document.getElementById("dark_Mode") - let light_mode = document.getElementById("light_Mode") - fileArray = []; - if (localStorage.getItem("fileArray")) { - fileArray = JSON.parse(localStorage.getItem("fileArray")) - displayFile(fileArray) - } - - - function saveFile(fileName) { - if (localStorage.getItem(fileName)) { - Toastify({ - - text: "File already exists. Please change the file name.", - gravity: "top", - position: "center", - duration: 3000, - style: - { - background: "linear-gradient(to right, #00b09b, #96c93d)" - } - - }).showToast(); - return 0 - } - else if (fileName === null) { - - Toastify({ - - text: "Operation Terminated...", - gravity: "top", - position: "center", - duration: 2000, - style: - { - background: "linear-gradient(to right, #FF0000, #FF8C00)" - - } - - }).showToast(); - - } - else if (fileName == '') { - - Toastify({ - - text: "Enter valid name", - gravity: "top", - position: "center", - duration: 2000, - style: - { - //background:"linear-gradient(to right, #00b09b, #96c93d)" +document.addEventListener("DOMContentLoaded", function(){ + let save = document.getElementById("save"); + let deleteAll = document.getElementById("deleteAll"); + let copyAll = document.getElementById("copyAll"); + let textArea = document.getElementById("text"); + let bold = document.getElementById("bold") + let plain = document.getElementById("plain") + let emphasized = document.getElementById("emphasized") + let unemphasized = document.getElementById("unemphasized") + let underline = document.getElementById("underline") + let normal = document.getElementById("normal") + fileArray = []; + if (localStorage.getItem("fileArray")){ + fileArray = JSON.parse(localStorage.getItem("fileArray")) + displayFile(fileArray) + } + + + function saveFile(fileName){ + if (localStorage.getItem(fileName)){ + Toastify({ + + text: "File already exists. Please change the file name.", + gravity:"top", + position:"center", + duration: 3000, + style: + { + background:"linear-gradient(to right, #00b09b, #96c93d)" + } + + }).showToast(); + return 0 + } + else if(fileName === null){ + + Toastify({ + + text: "Operation Terminated...", + gravity:"top", + position:"center", + duration: 2000, + style: + { + background:"linear-gradient(to right, #FF0000, #FF8C00)" + + } + + }).showToast(); + + } + else if(fileName?.trim() == ' '){ + + Toastify({ + + text: "Enter valid name", + gravity:"top", + position:"center", + duration: 2000, + style: + { + //background:"linear-gradient(to right, #00b09b, #96c93d)" background: "-webkit-linear-gradient(315deg, #73a5ff, #5477f5)" - } + } - }).showToast(); - } - else { - console.log(fileArray); - Toastify({ + }).showToast(); + } + else{ + console.log(fileArray); + Toastify({ - text: "File saved Successfully.", - gravity: "top", - position: "center", - duration: 2000, - style: - { + text: "File saved Successfully.", + gravity:"top", + position:"center", + duration: 2000, + style: + { background: "-webkit-linear-gradient(315deg, #41cb1b, #9ACD32)" - } - - }).showToast(); - - removeListItem(fileArray); - return 1 - } - } - - - function removeStyle() { - textArea.style.fontWeight = 'none'; - textArea.style.textDecoration = 'none'; - textArea.style.fontStyle = 'none'; - } - - // function getSelectedText() { - // let text = ''; - // if (window.getSelection) { - // text += window.getSelection().toString(); - // } - // else{ - // alert("Error in Selecting Text") - // } - // return text; - // } - - bold.addEventListener("click", function () { - textArea.style.fontWeight = 'bold'; - }); - underline.addEventListener("click", function () { - textArea.style.textDecoration = 'underline'; - }); - emphasized.addEventListener("click", function () { - textArea.style.fontStyle = 'italic'; - }); - plain.addEventListener("click", function () { - textArea.style.fontWeight = ''; - }); - normal.addEventListener("click", function () { - textArea.style.textDecoration = ''; - }); - unemphasized.addEventListener("click", function () { - textArea.style.fontStyle = ''; - }); - dark_mode.addEventListener("click", function () { - // lower left div - textArea.style.background = '#3b3b3b'; - textArea.style.color = 'white'; - - // left hand div - fileList.style.background = '#1f2324'; - fileList.style.color = 'white'; - - content.style.background = '#373c3f'; - content.style.color = 'white'; - - textContent.style.background = '#1f2324'; - textContent.style.color = 'white'; - - // upper right div - toolStyle.style.background = '#313538'; - - dark_mode.style.background = '#fae588' - light_mode.style.background = 'white' - }) - light_mode.addEventListener("click", function () { - textArea.style.background = 'white'; - textArea.style.color = 'black'; - fileList.style.background = 'white'; - fileList.style.color = 'black'; - content.style.background = 'radial-gradient(white, rgb(153, 149, 140))'; - content.style.color = 'black'; - textContent.style.background = 'white'; - textContent.style.color = 'black'; - toolStyle.style.background = '#c3d0de'; - fileList.style.border = '1px solid black' - dark_mode.style.background = 'white' - light_mode.style.background = '#fae588' - }) - - $(document).on('click', '#files li', function (e) { - // console.log("file clicked"); - key = $(this).attr('id') - keyFile = localStorage.getItem(key) - console.log(key); - jsonKeyFile = JSON.parse(keyFile) - $("#text").val(jsonKeyFile); - // removeStyle(); - }) - - // $("#files li p span").on('click', function(e){ - // let idx = Number($(this).attr('id')) - 1; - // let arr = localStorage.getItem("fileArray"); - // parsedArr = JSON.parse(arr); - - // if(parsedArr.len > 0){ - // let idxVal = parsedArr[idx]; - // localStorage.removeItem(idxVal) - // removeListItem(parsedArr) - // parsedArr.splice(idx, 1) - // // displayFile(parsedArr) - // arr = JSON.stringify(parsedArr); - // localStorage.setItem("fileArray", arr); - - // } - // else{ - // localStorage.clear() - // } - - - - - // }) - - function displayFile(fileArray) { - - idx = 0 - for (let ele of fileArray) { - ol = document.getElementById("files"); - - li = document.createElement("li"); - li.setAttribute("id", `${ele}`); - li.setAttribute("class", "list"); - - // span = document.createElement("span") - // span.setAttribute("id", `${idx}`); - // span.appendChild(document.createTextNode("❌")) - - p = document.createElement("p"); - // p.setAttribute("id", `${ele}`); - p.appendChild(document.createTextNode(ele)); - // p.appendChild(span); - - - li.appendChild(p); - ol.appendChild(li); + } + + }).showToast(); + + removeListItem(fileArray); + return 1 + } + } + + + function removeStyle() { + textArea.style.fontWeight = 'none'; + textArea.style.textDecoration = 'none'; + textArea.style.fontStyle = 'none'; + } + + // function getSelectedText() { + // let text = ''; + // if (window.getSelection) { + // text += window.getSelection().toString(); + // } + // else{ + // alert("Error in Selecting Text") + // } + // return text; + // } + + bold.addEventListener("click", function(){ + textArea.style.fontWeight = 'bold'; + }); + underline.addEventListener("click", function(){ + textArea.style.textDecoration = 'underline'; + }); + emphasized.addEventListener("click", function(){ + textArea.style.fontStyle = 'italic'; + }); + plain.addEventListener("click", function(){ + textArea.style.fontWeight = ''; + }); + normal.addEventListener("click", function(){ + textArea.style.textDecoration = ''; + }); + unemphasized.addEventListener("click", function(){ + textArea.style.fontStyle = ''; + }); + + $(document).on('click', '#files li', function(e){ + // console.log("file clicked"); + key = $(this).attr('id') + keyFile = localStorage.getItem(key) + console.log(key); + jsonKeyFile = JSON.parse(keyFile) + $("#text").val(jsonKeyFile); + // 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"); + // parsedArr = JSON.parse(arr); + + // if(parsedArr.len > 0){ + // let idxVal = parsedArr[idx]; + // localStorage.removeItem(idxVal) + // removeListItem(parsedArr) + // parsedArr.splice(idx, 1) + // // displayFile(parsedArr) + // arr = JSON.stringify(parsedArr); + // localStorage.setItem("fileArray", arr); + + // } + // else{ + // localStorage.clear() + // } + + + + + // }) + + function displayFile(fileArray){ + + idx = 0 + for(let ele of fileArray) { + ol = document.getElementById("files"); + + li = document.createElement("li"); + li.setAttribute("id", `${ele}`); + li.setAttribute("class", "list"); + + 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); + + + + li.appendChild(p); + ol.appendChild(li); + + + idx+=1 + + } + } + + function removeListItem(fileArray){ + for (let ele of fileArray){ + list = document.getElementById(ele); + // console.log(list); + list.remove() + } + } - idx += 1 - } - } + save.addEventListener("click", function(){ + let fileName = prompt("Enter File name to be saved") - function removeListItem(fileArray) { - for (let ele of fileArray) { - list = document.getElementById(ele); - // console.log(list); - list.remove() - } - } + if (saveFile(fileName)){ + // console.log(fileArray); - save.addEventListener("click", function () { - let fileName = prompt("Enter File name to be saved") + fileArray.push(fileName) + jsonFileArray = JSON.stringify(fileArray); + localStorage.setItem("fileArray", jsonFileArray) + let textContent = document.querySelector("#text").value; + let jsonTextContent = JSON.stringify(textContent); - if (saveFile(fileName)) { - // console.log(fileArray); + localStorage.setItem(fileName, jsonTextContent); + displayFile(fileArray) + // 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); - } + }) + deleteAll.addEventListener("click", function(){ + { + Toastify({ - - }) - - deleteAll.addEventListener("click", function () { - { - Toastify({ - - text: "All files deleted Successfully.", - gravity: "top", - position: "center", - duration: 2000, - style: - { + text: "All files deleted Successfully.", + gravity:"top", + position:"center", + duration: 2000, + style: + { background: "-webkit-linear-gradient(315deg, #f90c0c, #FFAE42)" - } + } - }).showToast(); - console.log("deleteall"); - textArea.value = '' - removeListItem(fileArray) - localStorage.clear(); - // localStorage.removeItem("fileArray") - fileArray = [] - // console.log(fileArray); + }).showToast(); + console.log("deleteall"); + textArea.value = '' + removeListItem(fileArray) + localStorage.clear(); + // localStorage.removeItem("fileArray") + fileArray = [] + // console.log(fileArray); - } - }) + } + }) - copyAll.addEventListener("click", function () { - let textContent = document.querySelector("#text").value; - navigator.clipboard.writeText(textContent).then(function () { + copyAll.addEventListener("click", function(){ + let textContent = document.querySelector("#text").value; + navigator.clipboard.writeText(textContent).then(function(){ - Toastify({ + Toastify({ - text: "Text copied to clipboard.", - gravity: "top", - position: "center", - duration: 2000, - style: - { + text: "Text copied to clipboard.", + gravity:"top", + position:"center", + duration: 2000, + style: + { background: "-webkit-linear-gradient(315deg, #73a6ff, #5377f5)" - } + } - }).showToast(); - }); - }) + }).showToast(); + }); + }) -}) \ No newline at end of file +})