Update

uebung10/notes.js

@@ -1,142 +0,0 @@
-
-//button
-//<input type="number" id="n" min="1" max="20">
-//<button id="get-questions" onclick="listener()"></button>
-
-
-//CSS screens per default nicht anzeigen
-//<style>
-//  #screen1, #screen2, #screen3 {
-//      display: none;
-//      }
-//
-//
-//</style>
-
-
-
-//HTML
-//<div id="screen1">
-//  Anzahl fragen:
-//<input type="number" id="n" min="1" max="20">
-//<button id="get-questions" onclick="listener()"></button>
-//
-//<div id="screen2">
-//
-//<div id="question">Frage</div>
-//<button id="answer0">Antwort0</button>
-//<button id="answer0">Antwort0</button>
-//<button id="answer0">Antwort0</button>
-//</div>
-//
-//<div id="screen3">
-//
-//  Du hast 2 von 3 Fragen richtig
-//  <button>Neues Spiel starten</button>
-
-
-<script>
-        var questions = [];
-        var currentQuestions = 0;
-        var rightAnswers = 0
-        
-        //Screens durchschalten
-        var screen1 = document.getElementById('screen1');
-        var screen2 = document.getElementById('screen2');
-        var screen3 = document.getElementById('screen3');
-        screen1.style.display = "block";
-
-        var questionDiv = document.getElementById("question");
-        var answer0 = document.getElementById("answer0");
-        var answer1 = document.getElementById("answer1");
-        var answer2 = document.getElementById("answer2");
-
-
-//Start game
-function listener() {
-        var n = document.getElementById('n').value();
-        getQuestions(n);
-        currentQuestion = 0;
-        rightAnswers = 0;
-
-        //Screen1 verstecken, Screen2 anzeigen
-        screen1.style.display = "none";
-        screen2.style.display = "block";
-
-        var right = document.getElementById(span...);
-
-}
-
-
-function showQuestion() {
-        var question = questions[currenQuestion];
-
-        questionDiv.innerHTML = question.question;
-        answer0.innerHTML = question.answer[0];
-        answer1.innerHTML = question.answer[1];
-        answer2.innerHTML = question.answer[2];
-
-        answer0.style.backgroundColor = "gray";
-        answer1.style.backgroundColor = "gray";
-        answer2.style.backgroundColor = "gray";
-}
-
-function answerQuestion(event) {
-        var target = event.target;
-        var question = questions[currentQuestion];
-
-        console.log(target.nodeName);
-
-        if (target.id.substr(-1) == question.solution) { console.log("richtig"); target.style.backgroundColor = "green";
-                rightAnswers++;
-        } else {
-                target.style.backgroundColor = "red";
-                document.getElementById("answer" + question.solution).style.backgroundColor == "green";
-        }
-        setTimeout(function () {
-                currentQuestion++;
-                if (currentQuestion < questions.length) {
-                        showQuestion();
-                } else {
-                        showResult();
-                }
-        }, 2000);
-}
-
-
-function showResult() {
-
-        screen2.style.display = "none";
-        screen3.style.display = "block";
-
-        right.innerHTML = rightAnswers;
-        total.innerHTML = questions.length;
-} 
-
-//buttons zuweisen
-answer0.addEventListener('click', answerQuestion);
-answer1.addEventListener('click', answerQuestion);
-answer2.addEventListener('click', answerQuestion);
-
-function getQuestions() {
-        var request = new XMLHttpRequest();
-
-        request.onreadystatechange = function () {
-                if (this.readyState === 4 && this.status === 200) {
-                        console.log(JSON.parse(this.respnseText));
-
-                        questions = JSON.parse(this.responseText));
-                        
-                        //Wenn Inhalt geladen wurde
-                        showQuestion();
-                }
-        };
-
-        request.open("GET", "url");
-        request.send();
-
-}
-
-
-
-        </script>

uebung10/uebung10-examples/api.php

@@ -1,60 +0,0 @@
-<?php
-
-/**
- * Erstellt ein assoziatives Array mit zufälligen Wetterdaten
- *
- * @return array
- */
-function createRandomWeather()
-{
-
-    $possibleWeatherConditions = ["cloudy", "rainy", "snowy", "sunny", "stormy", "windy"];
-
-
-    $randomWeatherCondition = $possibleWeatherConditions[array_rand($possibleWeatherConditions)];
-
-    if ($randomWeatherCondition === "snowy") {
-        $randomTemperature = rand(-30, 3);
-    } else {
-        $randomTemperature = rand(0, 45);
-    }
-
-    $certainty = rand(0, 49);
-
-
-    return [
-        "weather" => $randomWeatherCondition,
-        "temperature" => $randomTemperature,
-        "img" => $randomWeatherCondition . ".png",
-        "certainty" => $certainty
-    ];
-
-}
-
-/**
- * Liefert ein Array mit assoziativen Arrays, die das Wetter zufällig "voraussagen"
- *
- * @param $n int Anzahl Tage, für die das Wetter vorausgesagt werden soll
- * @return array
- */
-function createRandomWeatherForNDays($n)
-{
-    $weatherForNDays = [];
-
-
-    for ($i = 0; $i < $n; $i++) {
-        $date = $tomorrow = date("d.m.Y", strtotime("+$i day"));
-        $weather = createRandomWeather();
-        $weather['date'] = $date;
-
-        $weatherForNDays[] = $weather;
-    }
-
-    return $weatherForNDays;
-}
-
-// Das Script liefert eine JSON-Ausgabe, setze daher den Content-Type auf application/json
-header('Content-Type: application/json');
-
-// Codiere das Array mit der Wettervorhersage in JSON und gib es aus
-echo json_encode(createRandomWeatherForNDays(5));

uebung10/uebung10-examples/weather.html

@@ -1,177 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-
-    <style>
-
-        body {
-            font-family: sans-serif;
-            text-align: center;
-        }
-
-        #weather {
-            margin: 1em auto;
-            width: 75%;
-            display: flex;
-            flex-direction: row;
-        }
-
-        .card {
-            flex-grow: 1;
-            flex-basis: 18%;
-            background-color: #eeeeee;
-            margin: 1%;
-            padding: 1%;
-            border-radius: 1em;
-            text-align: center;
-
-        }
-
-        .card img {
-
-            width: 75%;
-        }
-
-        #progress {
-            background-color: #DC143C;
-            height: 20px;
-        }
-
-    </style>
-
-</head>
-<body>
-
-
-<h1>Das Wetter für Nirgendwo auf der Welt</h1>
-
-<div id="weather">Bitte warten</div>
-
-<p>
-    Das Wetter aktualisiert sich alle 15 Sekunden. Bereits <span id="counter">0</span> mal aktualisiert!
-</p>
-
-<div id="progress"></div>
-
-<p>
-    <small>&copy; InTech-Wetter 2019, der zufälligste Wetterdienst der Welt</small>
-
-</p>
-
-<div style="font-size: x-small">Icons made by <a
-        href="https://www.freepik.com/?__hstc=57440181.cd3916a59a95c176a348a17ddf11c54b.1561971633852.1561971633852.1561985979427.2&__hssc=57440181.4.1561985979427&__hsfp=1586605741"
-        title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is
-    licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC
-        3.0 BY</a></div>
-
-
-<script>
-
-    // Zählt wie oft das Wetter bereits aktualisiert wurde
-    var updateCount = 0;
-
-
-    /**
-     * Erstellt den HTML-Code für ein DIV-Element mit der Wettervorhersage
-     * (Wir verwenden hier JavaScript Template-Strings)
-     * */
-    function createWeatherCard(weatherData) {
-
-        return `<div class="card">
-<h2>${weatherData["date"]}</h2>
-<img src="img/${weatherData['img']}">
-<p>${weatherData["temperature"]}°C</p>
-<p>${weatherData["certainty"]}% Sicherheit</p>
-</div>
-        `;
-    }
-
-
-    /**
-     * Aktualisiert die Wettervorhersage auf der Seite
-     *
-     * @var weather Array mit Wettervorhersagen
-     * */
-    function updateWeather(weather) {
-        var container = document.getElementById("weather");
-
-        container.innerHTML = "";
-
-        weather.forEach(function (data) {
-
-            container.innerHTML += createWeatherCard(data);
-
-        });
-    }
-
-
-    /**
-     * Ruft die aktuelle "Wettervorhersage" per XMLHttpRequest von der API ab
-     */
-    function fetchWeather() {
-
-        // Erzeuge ein neues XMLHttpRequest-Objekt
-        var xmlhttp = new XMLHttpRequest();
-
-        // Lege fest, was passieren soll, wenn sich der readystate des XMLHttpRequest-Objekts ändert
-        xmlhttp.onreadystatechange = function () {
-
-            // Wenn der Request beendet ist (readyState = 4) und alles OK war (status 200)
-            if (this.readyState === 4 && this.status === 200) {
-                // Wandle das Ergebnis des Requests von JSON in ein JavaScript-Objekt um
-                var weather = JSON.parse(this.responseText);
-                updateWeather(weather);
-
-            }
-            // Andernfalls: Wenn der Request beendet ist und nicht alles OK war
-            else if (this.readyState === 4 && this.status !== 200) {
-                // geben wir eine Fehlermeldung als alert aus
-                alert("Wetter konnten nicht abgerufen werden. Statuscode" + this.status);
-            }
-        };
-
-
-        xmlhttp.open("GET", "api.php", true);
-        xmlhttp.send();
-    }
-
-
-    // Ruft initial einmal das Wetter ab
-    fetchWeather();
-
-    // Ruft alle 15 Sekunden das Wetter ab
-    setInterval(function () {
-
-        // Fortschrittsbalken auf 0 setzen
-        progress = 0;
-        drawProgress();
-
-        // Update-Counter und Anzeige aktualisieren
-        updateCount++;
-        document.getElementById('counter').innerText = updateCount;
-
-        // Neues Wetter abrufen
-        fetchWeather();
-    }, 15000);
-
-    // Status der Fortschrittbalkens
-    var progress = 0;
-
-    // "Zeichnet" den Fortschrittsbalken
-    function drawProgress() {
-        document.getElementById("progress").style.width = progress * 100 / (50 * 15) + "%";
-    }
-
-    // Fortschrittsbalken alle 20 Millisekunden aktualisieren
-    setInterval(function () {
-        progress = (progress + 1) % (50 * 15);
-
-        drawProgress();
-
-    }, 20)
-</script>
-
-</body>
-</html>