Add test

2020-04-03 13:22:16 +02:00
parent 42c35ca941
commit 4676d8249a
34 changed files with 482 additions and 56 deletions
--- a/html/test_02.04.20/oppgaver/.keep
+++ b/html/test_02.04.20/oppgaver/.keep
--- a/html/test_02.04.20/oppgaver/oppgave1/oppgave.html
+++ b/html/test_02.04.20/oppgaver/oppgave1/oppgave.html
@@ -1,18 +0,0 @@
-<!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>Oppgave 1</title>
-    <link rel="stylesheet" href="../../resources/css/main.css" />
-    <script async src="./script.js"></script>
-  </head>
-  <body>
-    <h1>Oppgave 1</h1>
-
-    <div class="center">
-
-    </div>
-  </body>
-</html>
--- a/html/test_02.04.20/oppgaver/oppgave1/oppgave.js
+++ b/html/test_02.04.20/oppgaver/oppgave1/oppgave.js
--- a/html/test_02.04.20/oppgaver/oppgave2/oppgave.html
+++ b/html/test_02.04.20/oppgaver/oppgave2/oppgave.html
@@ -1,18 +0,0 @@
-<!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>Oppgave 2</title>
-    <link rel="stylesheet" href="../../resources/css/main.css" />
-    <script async src="./script.js"></script>
-  </head>
-  <body>
-    <h1>Oppgave 2</h1>
-
-    <div class="center">
-
-    </div>
-  </body>
-</html>
--- a/html/test_02.04.20/oppgaver/oppgave2/oppgave.js
+++ b/html/test_02.04.20/oppgaver/oppgave2/oppgave.js
--- a/html/test_02.04.20/oppgaver/oppgave3/oppgave.html
+++ b/html/test_02.04.20/oppgaver/oppgave3/oppgave.html
@@ -1,18 +0,0 @@
-<!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>Oppgave 3</title>
-    <link rel="stylesheet" href="../../resources/css/main.css" />
-    <script async src="./script.js"></script>
-  </head>
-  <body>
-    <h1>Oppgave 3</h1>
-
-    <div class="center">
-
-    </div>
-  </body>
-</html>
--- a/html/test_02.04.20/oppgaver/oppgave3/oppgave.js
+++ b/html/test_02.04.20/oppgaver/oppgave3/oppgave.js
--- a/html/test_02.04.20/resources/css/.keep
+++ b/html/test_02.04.20/resources/css/.keep
--- a/html/test_03.04.20/index.html
+++ b/html/test_03.04.20/index.html
@@ -10,7 +10,7 @@
    <script async src="./resources/js/linkConnector.js"></script>
  </head>
  <body>
-    <h1>Test</h1>
+    <h1>Prøve 03. April 2020</h1>

    <div class="center">
      <div class="textboxGrid"></div>
--- a/html/test_03.04.20/oppgaver/oppgave1/center.css
+++ b/html/test_03.04.20/oppgaver/oppgave1/center.css
@@ -0,0 +1,5 @@
+.centerBlock {
+  display: block;
+  margin: 20px auto;
+  text-align: center;
+}
--- a/html/test_03.04.20/oppgaver/oppgave1/images/cow.jpg
+++ b/html/test_03.04.20/oppgaver/oppgave1/images/cow.jpg
--- a/html/test_03.04.20/oppgaver/oppgave1/images/dog.jpg
+++ b/html/test_03.04.20/oppgaver/oppgave1/images/dog.jpg
--- a/html/test_03.04.20/oppgaver/oppgave1/images/giraffe.jpg
+++ b/html/test_03.04.20/oppgaver/oppgave1/images/giraffe.jpg
--- a/html/test_03.04.20/oppgaver/oppgave1/images/lion.jpg
+++ b/html/test_03.04.20/oppgaver/oppgave1/images/lion.jpg
--- a/html/test_03.04.20/oppgaver/oppgave1/oppgave.html
+++ b/html/test_03.04.20/oppgaver/oppgave1/oppgave.html
@@ -0,0 +1,33 @@
+<!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>Oppgave 1</title>
+    <link rel="stylesheet" href="../../resources/css/main.css" />
+    <link rel="stylesheet" href="./center.css">
+    <script src="../../resources/js/error.js"></script>
+    <script async src="./oppgave.js"></script>
+  </head>
+  <body>
+    <h1>Oppgave 1</h1>
+
+    <div class="center">
+      <audio id="animalAudio"></audio>
+      <h2 id="animalName"></h2>
+      <div id="animalInfo"></div>
+    </div>
+
+    <img id="animalImage" class="centerBlock" style="width: 1280px; height: 720px;"></img>
+    <p id="imageSource" class="centerBlock"></p>
+
+    <div class="center">
+      <div class="inline">
+        <button id="changeAnimal">New animal</button>
+        <button id="soundButton">🔊</button>
+      </div>
+      <div id="error1"></div>
+    </div>
+  </body>
+</html>
--- a/html/test_03.04.20/oppgaver/oppgave1/oppgave.js
+++ b/html/test_03.04.20/oppgaver/oppgave1/oppgave.js
@@ -0,0 +1,86 @@
+// @ts-check
+
+/* Initialize variables */
+
+const animals = [
+  {
+    sound: './sound/silence.mp3',
+    image: {
+      link: './images/giraffe.jpg',
+      src: 'https://pixabay.com/photos/giraffe-portrait-safari-4312090/',
+    },
+    name: 'Giraffe',
+    info: 'This is a giraffe. It has a long neck',
+  },
+  {
+    sound: './sound/lion.mp3',
+    image: {
+      link: './images/lion.jpg',
+      src:
+        'https://pixabay.com/photos/african-lion-lion-male-mane-lazy-951778/',
+    },
+    name: 'Lion',
+    info: 'This is a lion. It can bite you',
+  },
+  {
+    sound: './sound/dog.mp3',
+    image: {
+      link: './images/dog.jpg',
+      src: 'https://pixabay.com/photos/dog-labrador-light-brown-pet-1210559/',
+    },
+    name: 'Dog',
+    info: "This is a dog. It's so cute",
+  },
+  {
+    sound: './sound/cow.mp3',
+    image: {
+      link: './images/cow.jpg',
+      src:
+        'https://pixabay.com/photos/cow-head-cow-head-animal-livestock-1715829/',
+    },
+    name: 'Cow',
+    info: 'This is a cow. It goes moooooooo',
+  },
+];
+
+let animal;
+
+/* Register HTML DOM elements by variables */
+
+const animalName = document.getElementById('animalName');
+const image = document.getElementById('animalImage');
+const imageSource = document.getElementById('imageSource');
+const info = document.getElementById('animalInfo');
+const sound = document.getElementById('animalAudio');
+const soundButton = document.getElementById('soundButton');
+const newAnimalButton = document.getElementById('changeAnimal');
+const audioError = document.getElementById('error1');
+
+/* Add event listeners */
+
+soundButton.addEventListener('click', () => sound.play());
+newAnimalButton.addEventListener('click', setAnimal);
+
+/* Initialize HTML with functions */
+
+image.style.width = '1280px';
+image.style.height = '720px';
+
+setAnimal();
+
+/* Functions */
+
+function setAnimal() {
+  audioError.innerHTML = ''; // clear error message
+
+  animal = animals[Math.floor(Math.random() * 4)];
+  image.setAttribute('src', animal.image.link);
+  imageSource.innerHTML = `Image source: ${animal.image.src}`;
+  sound.setAttribute('src', animal.sound);
+  if (animal.sound === './sound/silence.mp3') {
+    const error = createError('This animal has no sound that a human can hear'); //Global function. Can be found at resources/js/error.js
+    audioError.appendChild(error);
+  }
+  animalName.innerHTML = animal.name;
+  info.innerHTML = animal.info;
+}
--- a/html/test_03.04.20/oppgaver/oppgave1/sound/cow.mp3
+++ b/html/test_03.04.20/oppgaver/oppgave1/sound/cow.mp3
--- a/html/test_03.04.20/oppgaver/oppgave1/sound/dog.mp3
+++ b/html/test_03.04.20/oppgaver/oppgave1/sound/dog.mp3
--- a/html/test_03.04.20/oppgaver/oppgave1/sound/lion.mp3
+++ b/html/test_03.04.20/oppgaver/oppgave1/sound/lion.mp3
--- a/html/test_03.04.20/oppgaver/oppgave1/sound/silence.mp3
+++ b/html/test_03.04.20/oppgaver/oppgave1/sound/silence.mp3
--- a/html/test_03.04.20/oppgaver/oppgave2/oppgave.html
+++ b/html/test_03.04.20/oppgaver/oppgave2/oppgave.html
@@ -0,0 +1,43 @@
+<!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>Oppgave 2</title>
+    <link rel="stylesheet" href="../../resources/css/main.css" />
+
+    <!-- Script from global lib -->
+    <script src="../../resources/js/error.js"></script>
+    
+    <script async src="./oppgave.js"></script>
+  </head>
+  <body>
+    <h1>Oppgave 2</h1>
+    <div class="center">
+      <h2>Rentekalkulator</h2>
+      <div class="inline">
+        <form id="input">
+          <label for="houseValue">Boligverdi: </label>
+          <input type="number" id="houseValue">kr
+          <label for="rentingSum">Lånesum: </label>
+          <input type="number" id="rentingSum">kr
+          <input type="submit" id="submit" >
+        </form>
+      </div>
+      <div id="error1"></div>
+      <p id='result'></p>
+
+      <!-- Taken from YouTubes Share Embed function -->
+      <iframe
+        width="560"
+        height="315"
+        src="https://www.youtube.com/embed/ydpiXW8_ZiY"
+        frameborder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+        style="margin-top: 8em;">
+      </iframe>
+    </div>
+  </body>
+</html>
--- a/html/test_03.04.20/oppgaver/oppgave2/oppgave.js
+++ b/html/test_03.04.20/oppgaver/oppgave2/oppgave.js
@@ -0,0 +1,59 @@
+// @ts-check
+
+/* Initialize variables */
+
+const houseValueMax = 10000000;
+
+/* Register HTML DOM elements by variables */
+
+const form = document.getElementById('input');
+const houseValue = document.getElementById('houseValue');
+const rentSum = document.getElementById('rentingSum');
+const submitButton = document.getElementById('submit');
+const formError = document.getElementById('error1');
+const result = document.getElementById('result');
+
+/* Add event listeners */
+
+form.addEventListener('submit', evt => {
+  evt.preventDefault();
+  formError.innerHTML = '';
+
+  const house = parseInt(houseValue.value);
+  const rent = parseInt(rentSum.value);
+
+  /* Error checking
+   *  I'm aware that I could've just used max and min for checking some of the errors
+   *  but I wanted the error format to be consistent.
+   */
+  try {
+    if (house > houseValueMax) throw `Boligverdien kan ikke være større enn ${houseValueMax}kr`;
+    if (rent > house) throw 'Lånesummen kan ikke være større enn boligverdien';
+    if (house <= 0) throw 'Boligverdi må være større enn 0';
+    if (rent <= 0) throw 'Lånesum må være større enn 0';
+    if (isNaN(house)) throw 'Fyll ut Boligverdi';
+    if (isNaN(rent)) throw 'Fyll ut lånesum';
+  } catch (error) {
+    result.innerHTML = '';
+    const errorMessage = createError(error);
+    formError.appendChild(errorMessage);
+    return;
+  }
+
+  /* Result based on input */
+
+  if (rent < 0.75 * house) {
+    result.innerHTML = 'Renten er satt til 2,29%';
+    return;
+  }
+
+  if (rent >= 0.75 * house && rent < 0.9 * house) {
+    result.innerHTML = 'Renten er satt til 2,49%';
+    return;
+  }
+
+  if (rent >= 0.9 * house) {
+    result.innerHTML = 'Renten er satt til 2,69% og du må ha en kausjonist';
+    return;
+  }
+});
--- a/html/test_03.04.20/oppgaver/oppgave3/chartOptions.js
+++ b/html/test_03.04.20/oppgaver/oppgave3/chartOptions.js
@@ -0,0 +1,24 @@
+const histogramConfig = {
+  chart: {
+    type: 'column',
+  },
+
+  xAxis: {
+    title: {text: 'Test'},
+    categories: chartData.names,
+  },
+
+  plotOptions: {
+    column: {
+      groupPadding: 0,
+      pointPadding: 0,
+      borderWidth: 0,
+    },
+  },
+
+  series: [
+    {
+      data: chartData.casesPerPop,
+    },
+  ],
+};
--- a/html/test_03.04.20/oppgaver/oppgave3/data.js
+++ b/html/test_03.04.20/oppgaver/oppgave3/data.js
@@ -0,0 +1,25 @@
+const data = [
+  {
+    name: "USA",
+    cases: 176518,
+    deaths: 3431,
+    recovered: 6241,
+    population: 324459000
+  },
+  {
+    name: "UK",
+    cases: 25150,
+    deaths: 1789,
+    recovered: 135,
+    population: 66182000
+  },
+  {
+    name: "Norway",
+    cases: 4605,
+    deaths: 39,
+    recovered: 13,
+    population: 5305000
+  }
+];
+
+const dataDate = '31st March 2020';
--- a/html/test_03.04.20/oppgaver/oppgave3/oppgave.html
+++ b/html/test_03.04.20/oppgaver/oppgave3/oppgave.html
@@ -0,0 +1,49 @@
+<!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>Oppgave 3</title>
+    <link rel="stylesheet" href="../../resources/css/main.css" />
+
+    <!-- Data stored locally as json -->
+    <script src="./data.js"></script>
+
+    <!-- External libs for charts and chart themes -->
+    <script src="../../resources/external-lib/highcharts.js"></script>
+    <script src="../../resources/external-lib/highchartsTheme.js"></script>
+    
+    <script async src="./oppgave.js"></script>
+  </head>
+  <body>
+    <h1>Oppgave 3</h1>
+    <div class="center">
+      <h2>Corona outbreak statistics</h2>
+      <table id='statisticsTable' class="inlineTable">
+        <tr>
+          <th>Country</th>
+          <th>Total Cases</th>
+          <th>Total Deaths</th>
+          <th>Total Recovered</th>
+          <th>Total Cases/1M pop</th>
+          <th>Total Cases/1M pop</th>
+        </tr>
+      </table>
+      <p>Data taken from: 
+        <a href="https://no.wikipedia.org/wiki/Liste_over_land_etter_innbyggertall)">Wikipedia</a>
+        <a href="https://www.worldometers.info/coronavirus/">Worldometers</a>
+        <div class="inline">Downloaded: <span id="date"></span></div>
+      </p>
+    </div>
+    <div class="center">
+      <p>Type the first letter of the country you're looking for after clicking on the selector in order to search</p>
+      <div class="inline">
+          <label for="countrySelector">Land: </label>
+          <select id="countrySelector"></select>
+      </div>
+      <table id="selectTable" class="inlineTable"></table>
+    </div>
+    <div id="chart" class="chart"></div>
+  </body>
+</html>
--- a/html/test_03.04.20/oppgaver/oppgave3/oppgave.js
+++ b/html/test_03.04.20/oppgaver/oppgave3/oppgave.js
@@ -0,0 +1,156 @@
+// @ts-check
+
+/* Initialize variables */
+
+class Country {}
+
+const countries = [];
+
+/* Map data from json file */
+for (let index = 0; index < data.length; index++) {
+  countries[index] = {
+    name: data[index].name,
+    cases: data[index].cases,
+    deaths: data[index].deaths,
+    recovered: data[index].recovered,
+    casesPerPop: Math.round((data[index].cases * 1000000) / data[index].population),
+    deathsPerPop: Math.round((data[index].cases * 1000000) / data[index].population),
+  };
+}
+
+/* Prepare data in arrays */
+const chartData = {
+  names: countries.map(country => country.name),
+  casesPerPop: countries.map(country => country.casesPerPop),
+};
+
+/* Configuration for the chart */
+const histogramConfig = {
+  chart: {
+    type: 'column', //Bruker kolonnekart uten padding og border for å lage et histogram
+  },
+
+  title: {text: 'Overview of cases per 1M people'},
+
+  xAxis: {
+    title: {text: 'Countries'},
+    categories: chartData.names,
+  },
+
+  yAxis: {
+    title: {text: 'Cases per 1M people'},
+  },
+
+  plotOptions: {
+    column: {
+      groupPadding: 0,
+      pointPadding: 0,
+      borderWidth: 0,
+    },
+  },
+
+  series: [
+    {
+      name: 'Cases per 1M people',
+      data: chartData.casesPerPop,
+    },
+  ],
+};
+
+/* Register HTML DOM elements by variables */
+
+const table = document.getElementById('statisticsTable');
+const selector = document.getElementById('countrySelector');
+const selectTable = document.getElementById('selectTable');
+const date = document.getElementById("date");
+
+/* Add event listeners */
+
+selector.addEventListener('change', evt => {
+  selectTable.innerHTML = '';
+
+  selectTable.innerHTML = table.querySelectorAll('tr')[0].innerHTML;
+  selectTable.appendChild(countryRow(countries[selector.value]));
+});
+
+/* Initialize HTML with functions */
+
+for (let index = 0; index < countries.length; index++) {
+  /* Select options */
+  const option = document.createElement('option');
+  option.value = String(index);
+  option.innerHTML = countries[index].name;
+  selector.appendChild(option);
+
+  /* Add row to statisticsTable */
+  table.appendChild(countryRow(countries[index]));
+}
+
+table.appendChild(totalRow());
+
+date.innerHTML = dataDate;
+
+document.getElementById('chart').style.height = '500px';
+Highcharts.setOptions(Highcharts.theme);
+Highcharts.chart('chart', histogramConfig);
+
+/* Functions */
+
+/**
+ * Makes a row
+ * @param {Object} country
+ */
+function countryRow(country) {
+  const row = document.createElement('tr');
+
+  const countryBox = document.createElement('td');
+  countryBox.innerHTML = country.name;
+
+  const casesBox = document.createElement('td');
+  casesBox.innerHTML = country.cases;
+
+  const deathBox = document.createElement('td');
+  deathBox.innerHTML = country.deaths;
+
+  const recoveredBox = document.createElement('td');
+  recoveredBox.innerHTML = country.recovered;
+
+  const casesPerPopBox = document.createElement('td');
+  casesPerPopBox.innerHTML = country.casesPerPop;
+
+  const deathPerPopBox = document.createElement('td');
+  deathPerPopBox.innerHTML = country.deathsPerPop;
+
+  row.appendChild(countryBox);
+  row.appendChild(casesBox);
+  row.appendChild(deathBox);
+  row.appendChild(recoveredBox);
+  row.appendChild(casesPerPopBox);
+  row.appendChild(deathPerPopBox);
+
+  return row;
+}
+
+/**
+ * Produces a row containing the totals of countries
+ */
+function totalRow() {
+  const country = {
+    name: 'Total',
+    cases: sumAll('cases'),
+    deaths: sumAll('deaths'),
+    recovered: sumAll('recovered'),
+    casesPerPop: null,
+    deathsPerPop: null,
+  };
+
+  function sumAll(type) {
+    let result = 0;
+    for (let index = 0; index < countries.length; index++) {
+      result += countries[index][type];
+    }
+    return result;
+  }
+
+  return countryRow(country);
+}
--- a/html/test_03.04.20/resources/css/main.css
+++ b/html/test_03.04.20/resources/css/main.css
--- a/html/test_03.04.20/resources/external-lib/highcharts.js
+++ b/html/test_03.04.20/resources/external-lib/highcharts.js
--- a/html/test_03.04.20/resources/external-lib/highchartsTheme.js
+++ b/html/test_03.04.20/resources/external-lib/highchartsTheme.js
--- a/html/test_03.04.20/resources/external-lib/jquery.js
+++ b/html/test_03.04.20/resources/external-lib/jquery.js
--- a/html/test_03.04.20/resources/js/error.js
+++ b/html/test_03.04.20/resources/js/error.js
--- a/html/test_03.04.20/resources/js/linkConnector.js
+++ b/html/test_03.04.20/resources/js/linkConnector.js
--- a/html/test_03.04.20/resources/js/tasksJSON.js
+++ b/html/test_03.04.20/resources/js/tasksJSON.js
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@
      <p><a href="./html/test_15.11.19/index.html">Heldagsprøve 15. November 2019</a></p>
      <p><a href="./html/test_13.02.20/index.html">Totimers Prøve 13. Februar 2020</a></p>
      <p><a href="./html/test_13.02.20/test_13.02.20_V2/index.html">Totimers Prøve 13. Februar 2020 V2</a></p>
-      <p><a href="./html/test_02.04.20/index.html">Heldagsprøve 02. April 2020</a></p>
+      <p><a href="./html/test_03.04.20/index.html">Heldagsprøve 02. April 2020</a></p>

      <br><br>