Added starting point for JavaScript in HTML

9e5ca338 · Øivind Kolloen · 52ab9a09 · 9e5ca338 · 9e5ca338
Commit 9e5ca338 authored Feb 6, 2020 by Øivind Kolloen
--- a/lecture/JavaScript i HTML/side2.html
+++ b/lecture/JavaScript i HTML/side2.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Mitt flotte dokument</title>
+  <style>
+    textarea {
+      height: 7em;
+      width: 15em;
+    }
+  </style>
+</head>
+<body>
+  <h1>Overskrift i dokumentet</h1>
+  <p>Lorum ipsum</p>
+  <ul>
+    <li><a href="index.html">Forside</a></li>
+    <li><a href="">Side 2</a></li>
+    <li><a href="">Side 3</a></li>
+    <li><a href="">Side 4</a></li>
+    <li><a href="">Side 5</a></li>
+  </ul>
+</body>
+</html>
--- a/lecture/JavaScript i HTML/tvguide.html
+++ b/lecture/JavaScript i HTML/tvguide.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <style>
+    .schedule {
+      display: flex;
+      flex-wrap: wrap;
+      min-width: 500px;
+      max-width: 1060px;
+      margin: 0 auto;
+    }
+
+    .schedule>div {
+      height: 20em;
+      width: 15em;
+      overflow-y: auto;
+      padding-left: 1em;
+      box-shadow: 3px 3px 14px -4px rgba(0,0,0,0.75);
+      margin: 4px;
+    }
+
+    .schedule details {
+      display: inline-block;
+      vertical-align: text-top;
+    }
+
+    .schedule summary {
+      display: inline-block;
+      width: 10em;
+      margin-left: -1em;
+      width: 11em;
+    }
+
+    .schedule summary:hover {
+      font-weight: bold;
+    }
+
+    .schedule summary:focus {
+      outline: none;
+    }
+
+    .schedule summary::-webkit-details-marker {
+      background: none;
+      color: transparent;
+    }
+
+    .schedule details div {
+      display: inline-block;
+      width: 10.5em;
+    }
+
+    /* scrollbar */
+    .schedule ::-webkit-scrollbar {
+      width: 2px;
+    }
+
+    /* Track */
+    .schedule ::-webkit-scrollbar-track {
+      background: #f1f1f1;
+    }
+
+    /* Handle */
+    .schedule ::-webkit-scrollbar-thumb {
+      background: #888;
+    }
+
+    /* Handle on hover */
+    .schedule ::-webkit-scrollbar-thumb:hover {
+      background: #555;
+    }
+  </style>
+</head>
+<body>
+  <div class="schedule">
+    <script>
+      fetch("http://folk.ntnu.no/oeivindk/tvguide.php?date=20190118")  // NB, oppdater dato til dagens dato
+      .then(data=>data.json())
+      .then(json=>{
+        console.log(json);
+        let schedule = document.querySelector('.schedule');
+        json.channels.forEach(channel=>{
+          let div = document.createElement('DIV');  // Hver kanal listes i en div
+          div.innerHTML = `<h2>${channel.title}</h2>`;
+          channel.schedule.forEach(program=>{
+            let now = new Date();
+            let end = new Date(program.end);
+            if (end>now) {  // List kun programmer som enda ikke er ferdige
+              let programInfo = document.createElement('DIV');  // Hvert program legges inn i en div
+              let startTime = new Date(program.start);
+              // Timer og minutter har kun et siffer dersom de er <10, legg til 0 først for bedre formatering.
+              let hours = (startTime.getHours()+"").padStart(2, "0");
+              let minutes = (startTime.getMinutes()+"").padStart(2, "0");
+              programInfo.innerHTML =
+`<span>${hours}:${minutes}</span>&nbsp;<details><summary>${program.title}</summary><div>${program.desc}</div></details>`;
+              div.appendChild(programInfo);
+            }
+          });  // forEach schedule
+          schedule.appendChild(div);
+        }); // forEach channels
+      });  // fetch
+    </script>
+  </div>
+</body>
+</html>