Opkuisen

index.html

@@ -13,9 +13,12 @@
   <p><b>Phi</b>losophy Wi<b>ki</b>pedia <b>Path</b> <i>(ia)</i> visualisatie</p>
 </div>
 <div class="box">
-  <label for="taal">Taal: </label><input type="text" id="taal" placeholder="en" oninput="inputWaarschuwing()"/>
-  <label for="start">Startpagina: </label><input type="text" id="start" placeholder="Special:Random"/>
-  <label for="einde">Eindpunt: </label><input type="text" id="einde" placeholder="Philosophy" oninput="inputWaarschuwing()"/>
+  <label for="taal">Taal: </label>
+  <input type="text" id="taal" placeholder="en" oninput="inputWaarschuwing()"/>
+  <label for="start">Startpagina: </label>
+  <input type="text" id="start" placeholder="Special:Random"/>
+  <label for="einde">Eindpunt: </label>
+  <input type="text" id="einde" placeholder="Philosophy" oninput="inputWaarschuwing()"/>
   <button type="button" id="toevoegKnop" onclick="zoek()">voeg toe</button>
   <label id="waarschuwing" hidden="hidden">
     <b>Waarschuwing:</b> De huidige boom zal overschreven worden bij een nieuwe toevoeging.
@@ -24,8 +27,12 @@
 <div id="visualisatie">
 </div>
 <footer class="box">
-  <p>Deze pagina visualiseert een fenomeen waarbij je door steeds op de eerste link van een Wikipedia-pagina te klikken, bij <a href="https://en.wikipedia.org/wiki/Philosophy">filosofie</a> uitkomt. Lees er <a href="https://en.wikipedia.org/wiki/Wikipedia:Getting_to_Philosophy">hier</a> meer over.</p>
-  <p>© 2022 Tibo De Peuter</p>
+  <p>
+    Deze pagina visualiseert een fenomeen waarbij je door steeds op de eerste link van een Wikipedia-pagina te klikken,
+    bij <a href="https://en.wikipedia.org/wiki/Philosophy">filosofie</a> uitkomt. Lees er
+    <a href="https://en.wikipedia.org/wiki/Wikipedia:Getting_to_Philosophy">hier</a> meer over.
+  </p>
+  <small>© 2022 Tibo De Peuter</small>
 </footer>
 
 <script src="index.js"></script>

index.js

@@ -1,5 +1,5 @@
 
-// TODO De huidige lijst meegeven en controleren tijdens het opstellen zodat er gestopt wordt vanaf er een titel gevonden is
+// TODO Optimalisatie: De huidige lijst meegeven en controleren tijdens het opstellen zodat er gestopt wordt vanaf er een titel gevonden is
 
 // Initialiseer de webpagina
 const taal = document.getElementById('taal');
@@ -7,14 +7,15 @@ const start = document.getElementById('start');
 const einde = document.getElementById('einde');
 const toevoegKnop = document.getElementById('toevoegKnop');
 const visualisatie = document.getElementById('visualisatie');
-
-let timer;
-let rotatie;
 const logo = document.getElementById('logo');
+const waarschuwing = document.getElementById('waarschuwing');
 
 let huidigeTaal;
 let huidigeDoel;
 
+let timer;
+let rotatie;
+
 refreshTree();
 
 /**
@@ -108,13 +109,17 @@ function refreshTree() {
  * bij een nieuwe toevoeging.
  */
 function inputWaarschuwing() {
-    document.getElementById('waarschuwing').hidden = huidigeTaal === getOrDefault(taal) && huidigeDoel === getOrDefault(einde);
+    waarschuwing.hidden = (huidigeTaal === getOrDefault(taal) && huidigeDoel === getOrDefault(einde));
 }
 
 function getOrDefault(element) {
     return element.value === '' ? element.getAttribute('placeholder') : element.value;
 }
 
+/**
+ * Toggle tussen de zoek-status en de wacht-op-input-status. Dit heeft invloed op zowel de indienkop als op het
+ * roterende logo. Standaardaanroep zal alles stoppen, om überveel animaties te vermijden bij fout gebruik.
+ */
 function toggleZoeken(stop = true) {
     toevoegKnop.disabled = !stop;
 

style.css

@@ -1,3 +1,10 @@
+/*
+Waarschijnlijk eerder de enigste file die niet deftig gedocumenteerd is.
+Ach, de kans dat jullie dit bekijken is hoe dan ook klein.
+ */
+
+/* Algemeen */
+
 body {
     font-family: 'Linux Libertine','Georgia','Times',serif;
     padding: 0 1.5em 1.5em 1.5em;
@@ -14,19 +21,11 @@ h1 {
 }
 
 li ul {
-    margin: 0.2vh 1ch;
+    margin: 0.2vh 1ch 0 1ch;
     padding: 0.2vh 1vw;
 }
 
-ul {
-    /* alternatieven "↪" "⬉" */
-    list-style-type: symbols("⬑");
-}
-
-ul#wortel {
-    padding: 0;
-    list-style-type: none;
-}
+/* Header */
 
 .header img {
     height: 1.8em;
@@ -41,6 +40,8 @@ ul#wortel {
     font-family: sans-serif;
 }
 
+/* Box */
+
 .box {
     font-family: sans-serif;
     font-size: 95%;
@@ -63,11 +64,31 @@ ul#wortel {
     color: #ba0000;
 }
 
+/* Visualisatie */
+
 #visualisatie {
     margin: 0.5em 0;
-    font-size: calc(1em * 0.875);
+    font-size: 1em;
 }
 
+#visualisatie ul {
+    list-style-type: symbols("⬑"); /* alternatieven "↪" "⬉" */
+}
+
+
+ul#wortel {
+    padding: 0;
+    list-style-type: none;
+}
+
+/* Footer */
+
+footer {
+    text-align: center;
+}
+
+/* Wikipedia-achtige knop */
+
 button {
     cursor: pointer;
     border: none;
@@ -94,7 +115,3 @@ button:after {
     margin-left: 0.25em;
     content: "]";
 }
-
-footer {
-    text-align: center;
-}