Waarschijnlijk laatste push ongeveer

cgi-bin/scraper.py

@@ -11,6 +11,9 @@ import requests
 
 def converteer(tekst, gebruiker=True):
     """
+    Ik blijf bewust case sensitive werken omdat dit héél soms wel nog belangrijk is om een verschl
+    te maken tussen twee linkjes.
+
     >>> converteer('Northwestern Europe')
     'Northwestern Europe'
     >>> converteer('Northwestern_Europe', False)

index.html

@@ -10,19 +10,24 @@
 <div class="header">
   <img src="images/wikipedia_edit.png" alt="The Wikipedia Logo but rotated" id="logo">
   <h1>Phikipathia</h1>
-  <p>From Philosophy Wikipedia Path visualiser</p>
+  <p><b>Phi</b>losophy Wi<b>ki</b>pedia <b>Path</b> <i>(ia)</i> visualisatie</p>
 </div>
-<div id="bar">
-  <label for="taal">Taal: </label><input type="text" id="taal" placeholder="en"/>
+<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"/>
-  <button type="button" id="toevoegKnop">voeg toe</button>
+  <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.
   </label>
 </div>
 <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>
+</footer>
+
 <script src="index.js"></script>
 </body>
 </html>

index.js

@@ -16,9 +16,6 @@ let huidigeTaal;
 let huidigeDoel;
 
 refreshTree();
-toevoegKnop.addEventListener('click', () => zoek());
-taal.addEventListener('input', () => inputWaarschuwing())
-einde.addEventListener('input', () => inputWaarschuwing());
 
 /**
  * Zoek een pad met python backend en voeg deze toe in de lijst.

style.css

@@ -19,8 +19,8 @@ li ul {
 }
 
 ul {
-    /* alternatieven "↪" */
-    list-style-type: symbols("⬉");
+    /* alternatieven "↪" "⬉" */
+    list-style-type: symbols("⬑");
 }
 
 ul#wortel {
@@ -41,7 +41,7 @@ ul#wortel {
     font-family: sans-serif;
 }
 
-#bar {
+.box {
     font-family: sans-serif;
     font-size: 95%;
 
@@ -54,6 +54,15 @@ ul#wortel {
     top: 7px;
 }
 
+.box p {
+    padding: 0;
+    margin: 0;
+}
+
+#waarschuwing b {
+    color: #ba0000;
+}
+
 #visualisatie {
     margin: 0.5em 0;
     font-size: calc(1em * 0.875);
@@ -85,3 +94,7 @@ button:after {
     margin-left: 0.25em;
     content: "]";
 }
+
+footer {
+    text-align: center;
+}