add placeholder for scale length of last string

AndreasHuber · Jun 9, 2024 · a3596d3 · a3596d3
1 parent c3bfc79
commit a3596d3
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
 <body>
     <div class="container">
         <h1>🎸 Guitar String Gauge Calculator</h1>
-        <p>Do you want to use an unconventional tuning, extended range or baritone guitar and are not sure what string gauges to choose for it? Then...</p>
+        <p>Do you want to use an unconventional tuning, extended range or baritone guitar and are not sure what string gauges to choose for it? <br> Then follow these steps to get a rough idea what strings you need:</p>
         <div class="steps-container">
             <div class="step">
                 <h2>1. Enter for a string that you like the feel of...</h2>
@@ -79,7 +79,7 @@ <h2>2. Enter the details for your desired tuning:</h2>
                             <tr class="string">
                                 <td><button class="remove-string"><span class="icon-cross">✖️</span></button></td>
                                 <td><input type="text" value="F1"></td>
-                                <td><input type="number" id="scale-length-last-string" step="0.1"></td>
+                                <td><input type="number" id="scale-length-last-string" step="0.1" placeholder="27.0"></td>
                                 <td></td>
                                 <td></td>
                             </tr>

diff --git a/script.js b/script.js
@@ -54,7 +54,8 @@ function addString(position) {
     stringsContainer.insertBefore(newStringRow, position === 'start' ? stringsContainer.firstChild.nextSibling : stringsContainer.lastChild);
 
     addRemoveButtonListener(newStringRow.querySelector('.remove-string'));
-    setupInputListeners(); // Set up listeners for the new inputs
+    setupInputListeners();
+    calculate();
 }
 
 function calculate() {
@@ -66,6 +67,9 @@ function calculate() {
     const firstScaleLength = parseFloat(document.getElementById('scale-length-first-string').value);
     const lastScaleLength = parseFloat(document.getElementById('scale-length-last-string').value);
     const multiscale = !isNaN(lastScaleLength);
+    if (!multiscale) {
+        document.getElementById('scale-length-last-string').placeholder = firstScaleLength.toFixed(1);
+    }
     const stringElements = document.querySelectorAll('.string');
 
     const interpolatedScaleLengths = Array.from(stringElements, (_, i) =>

diff --git a/styles.css b/styles.css
@@ -70,7 +70,7 @@ table {
     width: 100%;
     max-width: 1024px;
     border-collapse: collapse;
-    margin-bottom: 0px;
+    margin-top: 8px;
     table-layout: fixed;
 }