Example: Provide a visual indication that a hex has been loaded.

Author: microbit-carlos

docs/examples/webtool.html

@@ -65,7 +65,7 @@
         outline-offset: -10px;
         background-color: rgba(255, 255, 255, 0.2);
       }
-      #icon {
+      #icon-v1, #icon-v2 {
         width: 100%;
         fill: #ffffff;
         margin-top: 26px;
@@ -111,7 +111,7 @@
     <h1>Universal Hex Creator</h1>
     <div id="drop-v1" class="drop">
       <h2>V1 Intel Hex</h2>
-      <svg id="icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43">
+      <svg id="icon-v1" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43">
         <path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z" />
       </svg>
 
@@ -124,7 +124,7 @@ <h2>V1 Intel Hex</h2>
 
     <div id="drop-v2" class="drop">
       <h2>V2 Intel Hex</h2>
-      <svg id="icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43">
+      <svg id="icon-v2" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43">
         <path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z" />
       </svg>
 
@@ -158,6 +158,7 @@ <h2>V2 Intel Hex</h2>
           console.log(v1HexStr);
           document.getElementById('label-v1').textContent =
             'File "' + file.name + '" loaded';
+          document.getElementById('icon-v1').style.display = 'none';
         };
         reader.readAsText(file);
       };
@@ -169,6 +170,7 @@ <h2>V2 Intel Hex</h2>
           console.log(v2HexStr);
           document.getElementById('label-v2').textContent =
             'File "' + file.name + '" loaded';
+            document.getElementById('icon-v2').style.display = 'none';
         };
         reader.readAsText(file);
       };