Add notes

js/train-detail.js

@@ -34,6 +34,11 @@ async function parse(data) {
 }
 
 async function displayOptions(data) {
+  // for (service of data) {
+  //   create a button showing first departure time
+  //   alongside the TOC, the origin and destination.
+  //   maybe implement an accordion?
+  // }
   return data
 }
 
@@ -63,10 +68,9 @@ async function displayOne(object) {
     stopRows += await createPublicStopTableRow(stop)
   }
   const displayBox = document.getElementById('train_data')
-  const titleImg = document.getElementById('titleimg')
+  displayBox.innerHTML = ''
   displayBox.insertAdjacentHTML('beforeend', dataTableHead + stopRows + dataTableClose)
   displayBox.style = 'display:block;'
-  titleImg.style = 'width:150px;height:98px;padding-bottom:0;'
 }
 
 async function createPublicStopTableRow(stop) {
@@ -89,10 +93,3 @@ async function createPublicStopTableRow(stop) {
       </tr>
     `
 }
-
-async function reset() {
-  const titleImg = document.getElementById('titleimg')
-  const displayBox = document.getElementById('train_data')
-  titleImg.style = ''
-  displayBox.innerHTML = ''
-}

styles/train-detail.css

@@ -1,16 +1,23 @@
+.titleimg {
+    width: 150px;
+    height: 98px;
+    padding-bottom: 0;
+}
+
 #data_headcode {
     color: var(--second-text-color);
     font-size: 25px;
-  font-weight:bolder;
+    font-weight: bolder;
+    margin-bottom: 5px
 }
 
 #data_piscode {
-  color: var(--second-text-color);
+    margin: 5px;
+    color: var(--second-text-color)
 }
 
 #data_table {
     color: var(--second-text-color);
     width: 200px;
-  margin: auto;
+    margin: auto
 }  
-  

train-detail.html

@@ -38,7 +38,6 @@
       <source srcset="./images/logo/logo-full-250.png" type="image/png">
       <img class="titleimg" id="titleimg" src="./images/logo/logo-full-250.png" alt="OwlBoard Logo">
     </picture>
-    <h2>Train Details</h2>
       <div id="train_options">
 
       </div>