add delete history function 🚀

manifest.json

@@ -2,7 +2,7 @@
   "name": "Export to Markdown",
   "short_name": "ExportToMarkdown",
   "description": "This is utilized to export the story in Medium to a markdown format file.",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "icons": {
     "16": "icons/medium-16.png",
     "48": "icons/medium-48.png",

popup.html

@@ -46,7 +46,14 @@
       filter: alpha(opacity=20);
     }
 
-    img {
+    ul img {
+      width: 1.5rem;
+      height: 1.5rem;
+      position: relative;
+      top: .4rem;
+    }
+
+    .load {
       width: 50px;
       height: 50px;
       position: fixed;
@@ -111,7 +118,6 @@
     <span><img src="load.svg" class="load"></span>
     <div class="left-area">
       <textarea id="source"></textarea>
-      <ul class="history-list"></ul>
     </div>
     <div class="right-area"></div>
   </div>

scripts/widget.js

@@ -3,9 +3,10 @@ const loadIcon = document.querySelector('.load')
 const exportBtn = document.querySelector('.export')
 const sourceDiv = document.querySelector('#source')
 const rightAreaDiv = document.querySelector('.right-area')
+const historyDiv = document.querySelector('.history-list')
 const MEDIUM_IMG_CDN = 'https://cdn-images-1.medium.com/max/'
 
-document.querySelector('.export').addEventListener('click', function () {
+exportBtn.addEventListener('click', function () {
   if (sourceDiv.style.display === 'none') {
     sourceDiv.style.display = null
   }
@@ -21,6 +22,12 @@ document.querySelector('.copy').addEventListener('click', function () {
 
 document.querySelector('.history').addEventListener('click', function() {
   displayHistory()
+  document.querySelector('.history-list').addEventListener('click', function (event) {
+    const parentLi = event.target.parentElement
+    const deletedKey = parentLi.firstElementChild.innerText
+    parentLi.remove()
+    localStorage.removeItem(deletedKey)
+  })
 })
 
 function createLoadForm() {
@@ -72,7 +79,7 @@ function displayHistory() {
   for (const ele in localStorage) {
     const title = ele
     const url = localStorage.getItem(title)
-    const str = '* [' + title + '](' + url + ')\n'
+    const str = '* [' + title + '](' + url + ') ![trash](icons/trash-can.png)\n'
     list = list + str
   }
   rightAreaDiv.innerHTML = snarkdown(list)