From 036e036ab4a999e4e3a3e2f749a678e279240429 Mon Sep 17 00:00:00 2001 From: Felix Keller Date: Tue, 1 Oct 2024 18:08:46 +0200 Subject: [PATCH] Initial commit --- README.md | 8 ++++++++ css/style.css | 25 +++++++++++++++++++++++++ index.html | 16 ++++++++++++++++ js/script.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 99 insertions(+) create mode 100644 README.md create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/script.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..9f467be --- /dev/null +++ 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. + diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..4ec9154 --- /dev/null +++ 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; +} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..192c314 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + Current Question + + + +
+

+

+
+ + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..bb12381 --- /dev/null +++ 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); +