Gater9999

Untitled

Jan 22nd, 2023
980
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //  If localStorage.getItem("missionList") returns null, then an empty array is assigned to missionList
  2. var missionList = JSON.parse(localStorage.getItem("missionList")) || [];
  3.  
  4. const addNewMission = () => {
  5.     const newMission = new Object();
  6.     // data
  7.     missionData = document.getElementById("missionData").value;
  8.     newMission.missionData = missionData;
  9.     // date
  10.     var missionDate = new Date(document.getElementById("missionDate").value);
  11.     newMission.missionDate = missionDate;
  12.     // time
  13.     missionTime = document.getElementById("missionTime").value;
  14.     newMission.missionTime = missionTime;
  15.     missionList.push(newMission);
  16.  
  17.     // Save the mission data to LocalStorage
  18.     localStorage.setItem("missionList", JSON.stringify(missionList));
  19.  
  20.     // Create an image element with the user's text
  21.     // Create a container div element
  22.     var container = document.createElement("div");
  23.     container.style.cssText = "position:relative; width:200px; height:200px; opacity:0; animation: fadein 0.5s; animation-fill-mode: forwards;";
  24.  
  25.     var deleteBtn = document.createElement("button");
  26.     deleteBtn.innerHTML = "<span class='glyphicon glyphicon-remove'></span>";
  27.     deleteBtn.classList.add("delete-btn");
  28.  
  29.  
  30.     // Create an image element
  31.     var newImg = document.createElement("img");
  32.     newImg.src = "img/notebg.png";
  33.     newImg.style.cssText = "width:100%; height:100%;";
  34.  
  35.     // Create a textarea element
  36.     var text = document.createElement("textarea");
  37.     text.value = missionData;
  38.     text.style.cssText = "position:absolute; left:14px; top:28px; width:73%; height:61%; color:black;overflow-x:scroll;overflow-y:scroll;resize:none;";
  39.  
  40.     // Create a date element
  41. var date = document.createElement("div");
  42. var day = newMission.missionDate.getDate();
  43. var month = (newMission.missionDate.getMonth()+1);
  44.     if (day < 10) {
  45.         day = "0" + day;
  46.     }
  47.     if (month < 10) {
  48.         month = "0" + month;
  49.     }
  50. date.innerText = day + '/' + month + '/' + newMission.missionDate.getFullYear();
  51. date.style.cssText = "position:absolute; left:14px; top:77%; width:82%; height:5%; color:black;"
  52.  
  53.  
  54.     // Create a time element
  55.     var time = document.createElement("div");
  56.     time.innerText = missionTime;
  57.     time.style.cssText = "position:absolute; left:14px; top:85%; width:82%; height:5%; color:black;";
  58.     // Append the elements to the container
  59.     container.appendChild(newImg);
  60.     container.appendChild(text);
  61.     container.appendChild(date);
  62.     container.appendChild(time);
  63.     container.appendChild(deleteBtn);
  64.  
  65.     deleteBtn.addEventListener("click", function() {
  66.         var noteText = this.parentNode.querySelector('textarea#missionData').value;
  67.         var index = missionList.findIndex(x => x.missionData === noteText);
  68.    
  69.         // Remove the note from the missionList array
  70.         missionList.splice(index, 1);
  71.         // Update the LocalStorage with the new missionList array
  72.         localStorage.setItem("missionList", JSON.stringify(missionList));
  73.    
  74.         // Remove the container div element from the HTML document
  75.         this.parentNode.remove();
  76.     });
  77.    
  78.  
  79.     // Append the container to the HTML document
  80.     var footer = document.getElementById("footer");
  81.     footer.appendChild(container);
  82.  
  83.     // reset the form
  84.     document.getElementById("myForm").reset();
  85. };
  86.  
  87. // ... rest of the code
  88.  
  89. window.onload = function() {
  90.     // Check if there's any data saved in LocalStorage
  91.     if (localStorage.getItem("missionList")) {
  92.         missionList = JSON.parse(localStorage.getItem("missionList"));
  93.     }
  94.     missionList.forEach(function(mission) {
  95.         // Create an image element with the user's text
  96.         // Create a container div element
  97.         var container = document.createElement("div");
  98.         container.style.cssText = "position:relative; width:200px; height:200px; opacity:0; animation: fadein 0.5s; animation-fill-mode: forwards;";
  99.  
  100.         // Create an image element
  101.         var newImg = document.createElement("img");
  102.         newImg.src = "img/notebg.png";
  103.         newImg.style.cssText = "width:100%; height:100%;";
  104.  
  105.         // Create a textarea element
  106.         var text = document.createElement("textarea");
  107.         text.value = mission.missionData;
  108.         text.style.cssText = "position:absolute; left:14px; top:28px; width:73%; height:61%; color:black;overflow-x:scroll;overflow-y:scroll;resize:none;";
  109.  
  110.         // Create a date element
  111.         var date = new Date(mission.missionDate);
  112.         var day = date.getDate();
  113.         var month = (date.getMonth()+1);
  114.         if (day < 10) {
  115.             day = "0" + day;
  116.         }
  117.         if (month < 10) {
  118.             month = "0" + month;
  119.         }
  120.         var dateDiv = document.createElement("div");
  121.         dateDiv.innerText = day + '/' + month + '/' + date.getFullYear();
  122.         dateDiv.style.cssText = "position:absolute; left:14px; top:77%; width:82%; height:5%; color:black;";
  123.  
  124.         // Create a time element
  125.         var time = document.createElement("div");
  126.         time.innerText = mission.missionTime;
  127.         time.style.cssText = "position:absolute; left:14px; top:85%; width:82%; height:5%; color:black;";
  128.  
  129.         // Append the elements to the container
  130.         container.appendChild(newImg);
  131.         container.appendChild(text);
  132.         container.appendChild(dateDiv);
  133.         container.appendChild(time);
  134.  
  135.         // Append the container to the HTML document
  136.         var footer = document.getElementById("footer");
  137.         footer.appendChild(container);
  138.     });
  139. };
  140.  
  141.  
Tags: js
Advertisement
Add Comment
Please, Sign In to add comment