Links not found.
'; 120 | } 121 | } else { 122 | data.map(d => temp += createListItem(d)); 123 | } 124 | // Message not found 125 | if (!data || data.length <= 0) { 126 | return listGroup.innerHTML = 'Links not added yet.
'; 127 | } 128 | listGroup.innerHTML = temp; 129 | } 130 | 131 | // close alert 132 | linkAlert.lastElementChild.addEventListener('click', function () { 133 | linkAlert.style.display = 'none'; 134 | }); 135 | 136 | window.addEventListener('scroll', () => { 137 | if (window.scrollY != 0) { 138 | btnBackToTop.classList.add('show'); 139 | } else { 140 | btnBackToTop.classList.remove('show'); 141 | } 142 | }); 143 | btnExport.addEventListener('click', handleExportLinks); 144 | formAddLink.addEventListener('submit', handleAddEvent); 145 | formImportLinks.addEventListener('submit', handleImportLinks); 146 | btnBackToTop.addEventListener('click', () => { 147 | scrollTo({ 148 | behavior: 'smooth', 149 | top: 0 150 | }); 151 | }); 152 | sortLinks.addEventListener('change', (e) => { 153 | showList(inputSearch.value, e.target.value); 154 | }); 155 | inputSearch.addEventListener('keyup', (e) => { 156 | showList(e.target.value); 157 | }); 158 | document.addEventListener('click', (e) => { 159 | if (e.target.classList.contains('btn-delete')) { 160 | if (confirm("Are you sure to remove this link?")) { 161 | const id = e.target.dataset.id; 162 | deleteData(id); 163 | showList(inputSearch.value, sortLinks.value); 164 | showAlert('Link has been deleted.'); 165 | } 166 | } 167 | if (e.target.classList.contains('btn-detail')) { 168 | // rotate icon / image 169 | e.target.classList.toggle('active'); 170 | // get element list-detail 171 | const elementDetail = e.target.parentElement.parentElement.nextElementSibling; 172 | // show element 173 | elementDetail.classList.toggle('flex'); 174 | } 175 | if (e.target.classList.contains('btn-show-modal-edit')) { 176 | loadDataLinkEdit(e.target.dataset.id); 177 | const elementModal = document.getElementById(e.target.dataset.target); 178 | elementModal.classList.toggle('show'); 179 | } 180 | }); 181 | // handle collapse form 182 | btnCollapse.addEventListener('click', function () { 183 | const targetElementCollapse = document.getElementById(this.dataset.target); 184 | if (targetElementCollapse.classList.contains('d-none')) { 185 | this.textContent = "Hide Form"; 186 | } else { 187 | this.textContent = "Show Form"; 188 | } 189 | targetElementCollapse.classList.toggle('d-none'); 190 | }); 191 | // hide/close modal 192 | btnCloseModal.addEventListener('click', function () { 193 | const elementModal = document.getElementById(this.dataset.target); 194 | clearDataLinkEdit(); 195 | elementModal.classList.remove('show'); 196 | }); 197 | // handle edit 198 | formEditLink.addEventListener('submit', handleEditEvent); 199 | btnDeleteAll.addEventListener('click', () => { 200 | if (confirm('Are you sure to delete all links?')) { 201 | deleteAll(); 202 | showList(); 203 | showAlert('All Links have been deleted.'); 204 | } 205 | }); 206 | 207 | showList(); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 | 23 | 24 |