From 0344087136d68b5f776d6b523c52ebcec953d3ed Mon Sep 17 00:00:00 2001
From: Mike Rockwell <mike@rockwell.mx>
Date: Sat, 26 Jul 2025 16:34:56 -0400
Subject: [PATCH] Add display of QR codes when link is clicked

---
 app.js     | 30 +++++++++++++++++++++---------
 index.html |  6 +++---
 style.css  |  8 ++++++++
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/app.js b/app.js
index 35c7dfb..5fca775 100644
--- a/app.js
+++ b/app.js
@@ -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>");
 });
diff --git a/index.html b/index.html
index a869b56..4354d26 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/style.css b/style.css
index 5dd1d93..f5d1070 100644
--- a/style.css
+++ b/style.css
@@ -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;
+}