Show component encoding/decoding only if it's different

Author: rosvik

index.html

@@ -69,15 +69,15 @@
         <td>URI Encoding</td>
         <td id="uri_encoded_out"></td>
       </tr>
-      <tr>
+      <tr id="uri_component_encoding_row">
         <td>Component Encoding</td>
         <td id="uri_component_encoded_out"></td>
       </tr>
       <tr>
         <td>URI Decoding</td>
         <td id="uri_decoded_out"></td>
       </tr>
-      <tr>
+      <tr id="uri_component_decoding_row">
         <td>Component Decoding</td>
         <td id="uri_component_decoded_out"></td>
       </tr>

js/script.js

@@ -57,14 +57,26 @@ function calculateAndPopulate(input) {
   const uri_encoding = uriEncode(input);
   setElementContentById("uri_encoded_out", uri_encoding);
 
+  // Only show component encoding if it's different from regular encoding
   const uri_component_encoding = uriEncodeComponent(input);
-  setElementContentById("uri_component_encoded_out", uri_component_encoding);
+  if (uri_component_encoding !== uri_encoding) {
+    showElement("uri_component_encoding_row");
+    setElementContentById("uri_component_encoded_out", uri_component_encoding);
+  } else {
+    hideElement("uri_component_encoding_row");
+  }
 
   const uri_decoding = uriDecode(input);
   setElementContentById("uri_decoded_out", uri_decoding);
 
+  // Only show component decoding if it's different from regular decoding
   const uri_component_decoding = uriDecodeComponent(input);
-  setElementContentById("uri_component_decoded_out", uri_component_decoding);
+  if (uri_component_decoding !== uri_decoding) {
+    showElement("uri_component_decoding_row");
+    setElementContentById("uri_component_decoded_out", uri_component_decoding);
+  } else {
+    hideElement("uri_component_decoding_row");
+  }
 
   // Add character table to DOM
   character_table.innerHTML = characterTable(input);
@@ -79,6 +91,16 @@ async function setElementContentByIdAsync(id, promise) {
   setElementContentById(id, result || "");
 }
 
+// Show/hide elements
+function showElement(id) {
+  const element = document.getElementById(id);
+  if (element) element.style.display = "";
+}
+function hideElement(id) {
+  const element = document.getElementById(id);
+  if (element) element.style.display = "none";
+}
+
 // Hashing
 async function hashMessage(message, algorithm) {
   if (algorithm === "MD5") {