add warning box to tune lower if string is too thin and might break

AndreasHuber · Jun 12, 2024 · a8a9815 · a8a9815
1 parent aea834d
commit a8a9815
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git a/script.js b/script.js
@@ -118,6 +118,31 @@ function calculate() {
 
             typeCell.textContent = type;
             resultCell.textContent = recommendedGauge.toFixed(3);
+
+            const existingInfoBox = stringElement.querySelector('.info-box');
+            if (existingInfoBox) {
+                existingInfoBox.remove();
+            }
+
+            if (recommendedGauge < 0.007) {
+                const infoBox = document.createElement('div');
+                infoBox.className = 'info-box';
+                infoBox.textContent = 'ℹ️ Tune lower?';
+
+                const closeButton = document.createElement('button');
+                closeButton.textContent = '✖️';
+                closeButton.onclick = function() {
+                    infoBox.remove();
+                };
+
+                infoBox.appendChild(closeButton);
+
+                infoBox.style.top = (resultCell.offsetTop + resultCell.offsetParent.offsetTop) + 'px';
+                infoBox.style.left = (resultCell.offsetLeft + resultCell.offsetParent.offsetLeft) + 'px';
+                infoBox.style.width = (resultCell.offsetWidth + typeCell.offsetWidth - 16) + 'px';
+
+                stringElement.appendChild(infoBox);
+            }
         }
     });
 };

diff --git a/styles.css b/styles.css
@@ -66,7 +66,8 @@ button:hover {
     background: #a7a7a7;
 }
 
-table {
+table, table th, table td {
+    border: 1px solid #ddd;
     width: 100%;
     max-width: 1024px;
     border-collapse: collapse;
@@ -75,7 +76,6 @@ table {
 }
 
 table th, table td {
-    border: 1px solid #ddd;
     padding: 5px;
     text-align: center;
     box-sizing: border-box;
@@ -101,6 +101,29 @@ table input {
     text-align: center;
 }
 
+.info-box {
+    position: absolute;
+    background-color: #FFF484;
+    border: 2px solid #DCC600;
+    padding: 6px;
+    z-index: 1000; /* Ensure it appears above other elements */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.info-box button {
+    text-align: right;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #333;
+    font-size: 16px;
+    padding: 0 6px;
+    margin-left: 6px;
+}
+
 @media (min-width: 768px) {
     .steps-container {
         flex-direction: row;
@@ -112,4 +135,4 @@ table input {
     .step:last-child {
         flex: 2;
     }
-}
+}