diff --git a/js/index.js b/js/index.js index 207c8b8..6dbbb41 100644 --- a/js/index.js +++ b/js/index.js @@ -34,8 +34,6 @@ validateName = (target) => { if (document.querySelector("#name p")) { document.querySelector("#name p").remove(); } - - regenerate(); } else { target.classList.add("is-danger") document.querySelector("#name div span").innerHTML = "❌"; @@ -58,8 +56,6 @@ validateBic = (target) => { if (document.querySelector("#bic p")) { document.querySelector("#bic p").remove(); } - - regenerate(); } else { target.classList.add("is-danger") document.querySelector("#bic div span").innerHTML = "❌"; @@ -83,8 +79,6 @@ validateIban = (target) => { if (document.querySelector("#iban p")) { document.querySelector("#iban p").remove(); } - - regenerate(); } else { target.classList.add("is-danger") document.querySelector("#iban div span").innerHTML = "❌"; @@ -102,8 +96,6 @@ validateAmount = (target) => { if (parseFloat(target.value) > 0) { target.classList.remove("is-danger") document.querySelector("#amount div span.is-right").innerHTML = "✅"; - - regenerate(); } else { target.classList.add("is-danger") document.querySelector("#amount div span.is-right").innerHTML = "❌"; @@ -119,8 +111,6 @@ validatePurpose = (target) => { if (document.querySelector("#purpose p")) { document.querySelector("#purpose p").remove(); } - - regenerate(); } else { target.classList.add("is-danger") document.querySelector("#purpose div span").innerHTML = "❌"; @@ -136,22 +126,27 @@ validatePurpose = (target) => { document.querySelector("#name input").addEventListener("input", (event) => { validateName(event.target); + regenerate(); }); document.querySelector("#iban input").addEventListener("input", (event) => { validateIban(event.target); + regenerate(); }); document.querySelector("#bic input").addEventListener("input", (event) => { validateBic(event.target); + regenerate(); }); document.querySelector("#amount input").addEventListener("input", (event) => { validateAmount(event.target); + regenerate(); }); document.querySelector("#purpose input").addEventListener("input", (event) => { validatePurpose(event.target); + regenerate(); }); // Remember inputs @@ -164,16 +159,20 @@ document.querySelector("#rememberme").addEventListener("change", (event) => { } }) +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { + regenerate() +}); + // qr code generator regenerate = () => { + document.querySelector('#qr-code').innerHTML = ""; if (document.querySelector("#name input").classList.contains("is-danger") || document.querySelector("#iban input").classList.contains("is-danger") || document.querySelector("#bic input").classList.contains("is-danger")) { - console.log("Error in inputs") + console.log("Error in inputs"); } else { - document.querySelector('#qr-code').innerHTML = ""; - QrCreator.render({ - text: `BCD + console.log("Generating new QR code..."); + const data = `BCD 002 1 SCT @@ -184,13 +183,29 @@ EUR${document.querySelector("#amount input").value} ${document.querySelector("#purpose input").value} -`, - radius: 0.25, - ecLevel: "H", - fill: "#000", - background: "#fff", - size: 512 - }, document.querySelector('#qr-code')); +`; + + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + // dark mode + QrCreator.render({ + text: data, + radius: 0.25, + ecLevel: "H", + fill: "#fff", + background: "#000", + size: 512 + }, document.querySelector('#qr-code')); + } else { + // light mode + QrCreator.render({ + text: data, + radius: 0.25, + ecLevel: "H", + fill: "#000", + background: "#fff", + size: 512 + }, document.querySelector('#qr-code')); + } if (document.querySelector("#rememberme").checked) { setCookie()