From d72c1ea77ed6f94ef6a7509b10c03e799d72d74f Mon Sep 17 00:00:00 2001 From: wahyu-kurniawan Date: Fri, 17 Mar 2023 08:39:04 +0700 Subject: [PATCH] frontend qrgenerator --- image/magelang.svg | 9 +++++ index.html | 64 ++++++++++++++++++++++++++++++++++++ script.js | 82 ++++++++++++++++++++++++++++++++++++++++++++++ style.css | 54 ++++++++++++++++++++++++++++++ 4 files changed, 209 insertions(+) create mode 100644 image/magelang.svg create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/image/magelang.svg b/image/magelang.svg new file mode 100644 index 0000000..6375d94 --- /dev/null +++ b/image/magelang.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..a7f1048 --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ + + + + + QRCode Generator Asset Diskominsta + + + + + + + + + + + + +
+
+
+
+ +
+
+ + QRCode Generator Asset + + + Dinas Komunikasi Informatika dan Statistik + + + Kota Magelang + +
+ +
+ +
+ + +
+
+ +
+ +
+ +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..3f9ab6e --- /dev/null +++ b/script.js @@ -0,0 +1,82 @@ +let uploadButton = document.getElementById("upload-button"); +let chosenfile = document.getElementById("chosen-file"); +let fileName = document.getElementById("file-name"); +let container = document.querySelector(".container"); +let error = document.getElementById("error"); +let fileDisplay = document.getElementById("file-display"); + +const fileHandler = (file, name, type) => { + console.log(type) + if (type.split("/")[0] !== "application" && type.split("/")[1] !== "vnd.openxmlformats-officedocument.spreadsheetml.sheet") { + //File Type Error + error.innerText = "Mohon unggah file excel ber ekstensi .xlsx"; + return false; + } + error.innerText = ""; + let reader = new FileReader(); + reader.readAsDataURL(file); + reader.onloadend = () => { + //file and file name + let fileContainer = document.createElement("figure"); + fileContainer.innerHTML += `
${name}
`; + fileDisplay.appendChild(fileContainer); + }; +}; + +//Upload Button +uploadButton.addEventListener("change", () => { + fileDisplay.innerHTML = ""; + Array.from(uploadButton.files).forEach((file) => { + fileHandler(file, file.name, file.type); + }); +}); + +container.addEventListener( + "dragenter", + (e) => { + e.preventDefault(); + e.stopPropagation(); + container.classList.add("active"); + }, + false +); + +container.addEventListener( + "dragleave", + (e) => { + e.preventDefault(); + e.stopPropagation(); + container.classList.remove("active"); + }, + false +); + +container.addEventListener( + "dragover", + (e) => { + e.preventDefault(); + e.stopPropagation(); + container.classList.add("active"); + }, + false +); + +container.addEventListener( + "drop", + (e) => { + e.preventDefault(); + e.stopPropagation(); + container.classList.remove("active"); + let draggedData = e.dataTransfer; + let files = draggedData.files; + fileDisplay.innerHTML = ""; + Array.from(files).forEach((file) => { + fileHandler(file, file.name, file.type); + }); + }, + false +); + +window.onload = () => { + error.innerText = ""; +}; diff --git a/style.css b/style.css new file mode 100644 index 0000000..565d27d --- /dev/null +++ b/style.css @@ -0,0 +1,54 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} +body { + background-color: #f5f8ff; +} + +input[type="file"] { + display: none; +} +label { + display: block; + position: relative; + background-color: #050E49; + color: #ffffff; + font-size: 1.1em; + text-align: center; + width: 16em; + padding: 1em 0; + border-radius: 0.3em; + margin: 0 auto 1em auto; + cursor: pointer; +} +#file-display { + position: relative; + width: 90%; + margin: 0 auto; + display: flex; + justify-content: space-evenly; + gap: 1.25em; + flex-wrap: wrap; +} +#file-display figure { + width: 45%; +} +#file-display img { + width: 100%; +} +#file-display figcaption { + font-size: 1em; + font-weight: 600; + text-align: center; + color: #5a5861; +} +.active { + border: 0.2em dashed #025bee; +} +#error { + text-align: center; + color: #ff3030; +}