mdrockwell/littlelink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add display of QR codes when link is clicked

Browse Source
This commit is contained in:
Mike Rockwell
2025-07-26 16:34:56 -04:00
parent 3f942ebf87
commit 0344087136
3 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app.js
View File

@@ -64,27 +64,39 @@ document.querySelector("#doge-qr-link a").addEventListener("click", function(eve
// Watch for click on BTC QR code link
document.querySelector("#btc-qr-link a").addEventListener("click", function(){
console.log('BTC QR Clicked');
// Hide all other QR codes
if (document.contains(document.querySelector("#eth-js-qr"))) {
document.querySelector("#eth-js-qr").remove();
}
if (document.contains(document.querySelector("#doge-js-qr"))) {
document.querySelector("#doge-js-qr").remove();
}
// Display BTC QR code
document.querySelector("#btcwall").insertAdjacentHTML("afterend", "<span class=\"crypto-js-qr\" id=\"btc-js-qr\"><img src=\"images/crypto/btc-qr.png\"></span>");
});
// Watch for click on ETH QR code link
document.querySelector("#eth-qr-link a").addEventListener("click", function(){
console.log('ETH QR Clicked');
// Hide all other QR codes
if (document.contains(document.querySelector("#btc-js-qr"))) {
document.querySelector("#btc-js-qr").remove();
}
if (document.contains(document.querySelector("#doge-js-qr"))) {
document.querySelector("#doge-js-qr").remove();
}
// Display ETH QR code
document.querySelector("#ethwall").insertAdjacentHTML("afterend", "<span class=\"crypto-js-qr\" id=\"eth-js-qr\"><img src=\"images/crypto/eth-qr.png\"></span>");
});
// Watch for click on DOGE QR code link
document.querySelector("#doge-qr-link a").addEventListener("click", function(){
console.log('DOGE QR Clicked');
// Hide all other QR codes
if (document.contains(document.querySelector("#btc-js-qr"))) {
document.querySelector("#btc-js-qr").remove();
}
if (document.contains(document.querySelector("#eth-js-qr"))) {
document.querySelector("#eth-js-qr").remove();
}
// Display DOGE QR code
document.querySelector("#dogewall").insertAdjacentHTML("afterend", "<span class=\"crypto-js-qr\" id=\"doge-js-qr\"><img src=\"images/crypto/doge-qr.png\"></span>");
});

6
index.html
View File

@@ -74,9 +74,9 @@
<a class="button button-paypal" href="https://www.paypal.com/donate/?business=LXMQTRPCCLAEG&no_recurring=0&item_name=Support+Initial+Charge%2C+%23OpenWeb%2C+and+my+other+projects+with+value+for+value.&currency_code=USD" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a>
<ul>
<li id="btc-qr-link"><strong>Bitcoin</strong> &#8226; <a href="images/crypto/btc-qr.png" class="qr-code-link">QR Code</a><br><code id="btcwall">bc1qxj26ssa24a7x8mp0rykn80d6v088p996mt0kcc</code><br>&nbsp;</li>
<li id="eth-qr-link"><strong>Ethereum</strong> &#8226; <a href="images/crypto/eth-qr.png" class="qr-code-link">QR Code</a><br><code id="ethwall">0x41C1689FF03a11205aB22dd0d97889065E971D7f</code><br>&nbsp;</li>
<li id="doge-qr-link"><strong>Dogecoin</strong> &#8226; <a href="images/crypto/doge-qr.png" class="qr-code-link">QR Code</a><br><code id="dogewall">DC27kzyjxVgSjuPj6NJkadKibbf4S9UgGd</code></li>
<li id="btc-qr-link"><strong>Bitcoin</strong> &#8226; <a href="images/crypto/btc-qr.png">QR Code</a><br><code id="btcwall">bc1qxj26ssa24a7x8mp0rykn80d6v088p996mt0kcc</code></li>
<li id="eth-qr-link"><strong>Ethereum</strong> &#8226; <a href="images/crypto/eth-qr.png">QR Code</a><br><code id="ethwall">0x41C1689FF03a11205aB22dd0d97889065E971D7f</code></li>
<li id="doge-qr-link"><strong>Dogecoin</strong> &#8226; <a href="images/crypto/doge-qr.png">QR Code</a><br><code id="dogewall">DC27kzyjxVgSjuPj6NJkadKibbf4S9UgGd</code></li>
</ul>
</details>
</div>

8
style.css
View File

@@ -613,3 +613,11 @@ details:not([open]) {
p.value-explainer {
margin-top: 16px;
}
details.value-block ul li {
margin-bottom:32px
}
details.value-block ul li img {
margin-left:auto;
margin-right:auto;
}