Labs - remove inline style commands

Use a new displayNone class instead of embedding styles.

Signed-off-by: David A. Wheeler <[email protected]>

Author: david-a-wheeler

docs/labs/checker.css

@@ -12,3 +12,7 @@ pre input, pre textarea {
 .markdown-body pre textarea, pre textarea {
     resize: both;
 }
+
+.displayNone {
+    display: none;
+}

docs/labs/checker.js

@@ -94,6 +94,8 @@ function showDebugOutput(debugOutput, alwaysAlert = true) {
         // Use textContent to see the raw unfiltered results
         debugDataRegion.textContent = (
             String(debugDataRegion.textContent) + debugOutputString + "\n\n");
+        debugDataRegion.classList.remove('displayNone');
+        // Force display, just in case:
         debugDataRegion.style.display = 'block';
         if (alwaysAlert) alert(debugOutputString);
     } else {

docs/labs/csp1.html

@@ -410,7 +410,7 @@ <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <button type="button" id="giveUpButton">Give up</button>
 <br><br>
 <pre id="correctStamp"></pre>
-<textarea id="debugData" rows="20" cols="70" readonly style="display: none;">
+<textarea id="debugData" class="displayNone" rows="20" cols="70" readonly>
 </textarea>
 </form>
 </div><!-- End GitHub pages formatting -->

docs/labs/hello.html

@@ -171,7 +171,7 @@ <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <button type="button" id="giveUpButton">Give up</button>
 <br><br>
 <pre id="correctStamp"></pre>
-<textarea id="debugData" rows="20" cols="70" readonly style="display: none;">
+<textarea id="debugData" class="displayNone" rows="20" cols="70" readonly>
 </textarea>
 </form>
 

docs/labs/input1.html

@@ -227,7 +227,7 @@ <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <button type="button" id="giveUpButton">Give up</button>
 <br><br>
 <pre id="correctStamp"></pre>
-<textarea id="debugData" rows="20" cols="70" readonly style="display: none;">
+<textarea id="debugData" class="displayNone" rows="20" cols="70" readonly>
 </textarea>
 </form>
 

docs/labs/input2.html

@@ -218,7 +218,7 @@ <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <button type="button" id="giveUpButton">Give up</button>
 <br><br>
 <pre id="correctStamp"></pre>
-<textarea id="debugData" rows="20" cols="70" readonly style="display: none;">
+<textarea id="debugData" class="displayNone" rows="20" cols="70" readonly>
 </textarea>
 </form>