Initial commit

2024-10-01 18:08:46 +02:00 · 2024-10-01 18:08:46 +02:00 · 036e036ab4
commit 036e036ab4
4 changed files with 99 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,8 @@
+# currentQuestion
+Liest die Frage die aktuell beantwortet wird aus `d120.de/fragen` aus.  
+Nützlich für Stream Overlay.
+
+## Benutzung
+Als Browser Quelle im Streaming Programm der Wahl einbinden und Größe
+einstellen.
+
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,25 @@
+body {
+  max-height: 90%;
+  overflow: clip;
+}
+#questionBox {
+  position: absolute;
+  min-height: 30pt;
+  left: 2.3%;
+  bottom: 5px;
+  width: 95%;
+  border-style: solid;
+  border-width: 2pt;
+  border-color: transparent;
+  border-radius: 25px;
+  max-height: 98%;
+  overflow: hidden;
+}
+#questionParagraph {
+  margin: 0;
+  padding: 10px;
+  font-family: sans;
+  color: white;
+  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+}
+
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Current Question</title>
+    <link href="css/style.css" rel="stylesheet">
+  </head>
+  <body>
+    <div id="questionBox">
+      <p id="questionParagraph">
+      </p>
+    </div>
+  <script src="js/script.js"></script>
+  </body>
+</html>
--- a/js/script.js
+++ b/js/script.js
@ -0,0 +1,50 @@
+function filterQuestionsState(data, stateVal) {
+  filteredQuestion = data.find(item => item.state === stateVal);
+  return filteredQuestion;
+}
+
+function displayQuestion(question) {
+  const questionBox = document.getElementById("questionBox");
+  const questionParagraph = document.getElementById("questionParagraph");
+
+  if (question != undefined) {
+    if (questionBoxHidden = true) {
+      questionBox.style.backgroundColor = 'rgba(13, 110, 253, 0.8)';
+      questionBox.style.borderColor = 'rgba(13, 110, 253, 0.9)';
+      questionBoxHidden = false;
+    }
+    questionParagraph.textContent = question.text;
+  }
+  else {
+    questionBox.style.backgroundColor = 'rgba(13, 110, 253, 0)';
+    questionBox.style.borderColor = 'rgba(13, 110, 253, 0)';
+    questionParagraph.textContent = '';
+    var questionBoxHidden = true;
+  }
+}
+
+function getQuestion() {
+  fetch('https://www.d120.de/fragen/api/questions', {
+    mode: 'cors',
+    method: 'GET',
+  })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      return response.json();
+    })
+    .then(data => {
+      console.log('response:', data);
+      filteredQuestion = filterQuestionsState(data, 2);
+      displayQuestion(filteredQuestion);
+    })
+    .catch(error => {
+      console.error('error:', error);
+    });
+}
+
+document.getElementById("questionBox").style.transition = "all 0.3s"
+const updateEvery = 3000;
+setInterval(getQuestion, updateEvery);
+