Dieses Projekt besteht aus zwei separaten Teilen: einem Arduino-basierten Pomodoro-Timersystem und einer webbasierten Version desselben Konzepts.
Das Ziel dieses Projekts ist es, die Pomodoro-Technik sowohl in einer physischen Form mit Arduino als auch als webbasierte Version zu visualisieren. Während das Arduino-System ein fokussiertes, ablenkungsfreies Zeitmanagement ermöglicht, bietet die Webversion eine flexible und interaktive Alternative. So entstehen zwei sich ergänzende Ansätze, die konzentriertes und effizientes Arbeiten fördern.
Ursprünglich plante ich, beide Systeme zu kombinieren und möglicherweise eine App zur Steuerung des Arduino-Systems zu entwickeln. Allerdings stellte ich fest, dass dies nicht zwingend erforderlich war. Stattdessen entschied ich mich, das Pomodoro-System zusätzlich als HTML-Webseite umzusetzen.
Beide Varianten basieren auf der gleichen Idee, unterscheiden sich jedoch in ihrer Funktionsweise und Umsetzung: Das Arduino-System bietet eine hardwarebasierte, minimalistische Lösung, während die Webversion eine digitale, visuell ansprechende Alternative darstellt.
Dieses Teil des Projekt ist ein Arduino-basiertes Pomodoro-Timersystem, das die Produktivität durch die bewährte Pomodoro-Technik steigert. Als jemand, der diese Technik in seinem täglichen Leben benutzt, wollte ich dies sowohl in Code als auch in Hardware mit Arduino umsetzen.
⏲ Die Pomodoro-Technik basiert auf 25-minütigen Arbeitsphasen (Pomodoros), gefolgt von einer 5-minütigen kurzen Pause. Nach vier Pomodoros wird eine längere Pause von 15 bis 30 Minuten eingelegt. Ich habe sie hier auf 15 Minuten eingestellt.
🍅Fun-Fact: Die Pomodoro-Technik wurde erstmals von dem Italiener Francesco Cirillo eingeführt. Pomodoro bedeutet auf Italienisch Tomate. Als Cirillo diese Technik erfand, inspirierte er sich an dem Zeitformat, das er beim Tomatenanbau verwendete, und bezeichnete jedes Arbeitsintervall als „Pomodoro“.
Dieser Teil funktioniert wie folgt:
- Zuerst laden wir den Code, den wir mit Arduino IDE geschrieben haben, auf unseren Arduino. Dann erhalten wir ein Signal, dass der Code, den wir geladen haben, auf unserem Mikrocontroller gespeichert ist.
- Dann zeigen wir den Text „Hello World!“ auf der kleinen LED-Matrix auf dem Arduino R4 an. Dieser Text scrollt von links nach rechts in normaler Geschwindigkeit und so, dass man den Text lesen kann.
- Wenn wir den Text „Zum Starten, Knopf drücken“ auf unserem LCD-Display sehen, sind wir bereit zu starten.
- Wenn wir den kleinen Knopf auf der Brotplatte drücken, werden wir mit der Startmelodie begrüßt, und nachdem die Melodie zu Ende ist, beginnt unsere 25-minütige Fokuszeit.
- Zu diesem Zeitpunkt beginnt das rote Licht zu leuchten.
- Nach dem Ende der Fokuszeit werden wir mit einem kleinen Signal benachrichtigt und das rote Licht wechselt zu grünem Licht und wir gehen in den Pausenmodus.
- Nach 3 Fokuszeiten und kurzen Pausen dazwischen, beginnt unsere lange Pause von 15 Minuten.
- Nach der langen Pause beginnt unsere letzte Fokuszeit und am Ende hält das System an und der Endsatz wird auf der LED-Matrix des Arduino angezeigt.
- 25 Minuten Arbeitszeit, gefolgt von einer 5-minütigen Pause
- Nach vier Arbeitszyklen (jede sind 25 Minuten) eine längere Pause von 15 Minuten
- Visuelle Signale mit roten und grünen LEDs
- Akustische Signale mit einem Piezo-Buzzer
- Anzeige der verbleibenden Zeit auf einem LCD-Display
- Arduino Uno R4 mit integriertem Matrix-LED-Display
- 16x2 LCD-Display
- 2 x 110 Ohm Widerstände , 1x 10k Ohm Widerstand
- 1 Passiv-Piezo-Buzzer
- 1 Breadboard
- Jumperwires
- 1 rote LED, 1 grüne LED
- Potentiometer
- USB-Kabel zur Verbindung mit dem Computer
- Der Timer startet nach Knopfdruck.
- Während der Arbeitszeit leuchtet die rote LED, und das LCD-Display zeigt die verbleibende Zeit.
- Nach 25 Minuten signalisiert ein Piezo-Ton das Ende der Arbeitsphase.
- Die Pause beginnt, die grüne LED leuchtet, und die verbleibende Pausenzeit wird angezeigt.
- Nach vier Arbeitszyklen gibt es eine längere Pause von 15 Minuten.
- Der Ablauf wiederholt sich, bis der Nutzer den Timer stoppt.
- Die einfache Bedienung ohne Ablenkung durch Smartphones oder Computer.
- Nutzung eines Piezo-Buzzers zur akustischen Signalisierung. Ein passiver Piezo-Buzzer wurde gewählt, da er verschiedene Frequenzen und Töne erzeugen kann. Ein aktiver Buzzer bietet diese Möglichkeit nicht und gibt nur einen einzigen festen Ton aus.
- LED-Anzeige zur schnellen visuellen Orientierung.
- Hier wird die rote LED ausgewählt, um die Fokuszeit, d.h. beschäftigt, und die grüne LED, um die Pausenzeit anzuzeigen.
- Für einen unterhaltsamen Einstieg spielt das Arduino-System beim Start die ikonische "Darth Vader"-Melodie, bevor der Timer beginnt.
- Zudem wurde das gesamte System transportfreundlich gestaltet: Die Komponenten, insbesondere das LCD-Display, wurden mit Plastikseilen in einer kleinen Box befestigt, um das Projekt leicht mitnehmen und präsentieren zu können.
- Die Programmierung des Matrix-Displays des Arduino R4 so, dass es beim Start des Timers nach der Melodie "Hello World! <3" und nach Abschluss aller Pomodoros "Dies war Inf-Einf-B :)" anzeigt. Diese Entscheidung wurde speziell für den Präsentationsbereich des Projekts getroffen.
✔ Der Arduino, den ich hatte, war das Modell „UNO R4 WiFi“. Die Spezifikationen können hier eingesehen werden: https://docs.arduino.cc/hardware/uno-r4-wifi/
✔ Ich habe die ursprüngliche Open-Source-IDE von Arduino verwendet, um diesen Arduino zu programmieren, siehe hier: https://www.arduino.cc/en/software (Arduino IDE 2.3.4)
✔
➡ Zu Beginn wählte ich mein Arduino-Modell aus der Arduino-IDE aus und fügte dann die Bibliotheken hinzu, die ich verwenden werde.
#include <LiquidCrystal.h> // LCD-Bibliothek für das Display
#include "ArduinoGraphics.h" // Grafikbibliothek für LED-Matrix (eigentlich habe ich sie nicht benutz)
#include "Arduino_LED_Matrix.h" // LED-Matrix-Bibliothek
-
Dann beginnt der Code wie folgt:
ArduinoLEDMatrix matrix; // Initialisiert die LED-Matrix // Definieren die Zeitvariablen int seconds = 0; int minutes = 0; int count = 0; // Zeitvorgaben für die Pomodoro Technik const int study_minutes = 25; //Fokuszeit const int short_break_minutes = 5; //Kurze Pause const int long_break_minutes = 15; //Lange Pause const int repeats = 3; int break_duration; // Variable zur Speicherung der aktuellen Pausenzeit -
Hier kann man sehen, an welche Pins des Arduino das LCD-Display mit den Kabeln angeschlossen wurde. Die Zahlen entsprechen den jeweiligen Pin-Nummern auf dem Arduino.
LiquidCrystal lcd(12, 11, 5, 4, 3, 2); const int led1 = 6; // Rote LED für Fokuszeit const int led2 = 7; // Grüne LED für Pausenzeit const int button = 8; // Startknopf const int buzzer = 13; // Piezo-Buzzer für Signaltöne -
Hier wird die Funktion für den Buzzer definiert. Die Funktion void beep bestimmt die Frequenz und Dauer der Melodie, die wir dem Buzzer geben.
void beep(int frequency, int duration) { // Funktion für akustische Signale tone(buzzer, frequency, duration); delay(duration + 50); } -
Darth Vader-Melodie zur Begrüßung:
void playMelody() { int melody[] = {440, 440, 440, 349, 523, 440, 349, 523, 440}; //Die Zahlen in diesem Feld geben die Frequenz der Beeps an. // Ich habe sie mit Hilfe des KI erstellt. int noteDurations[] = {500, 500, 500, 350, 150, 500, 350, 150, 650}; for (int i = 0; i < 9; i++) { beep(melody[i], noteDurations[i]); delay(50); } } void setup() { lcd.begin(16, 2); pinMode(led1, OUTPUT); pinMode(led2, OUTPUT); pinMode(button, INPUT); pinMode(buzzer, OUTPUT); -
LED-Matrix initialisieren und Begrüßungstext anzeigen.
matrix.begin(); // Initialisiere das Matrix-Display matrix.beginDraw(); // Beginne mit dem Zeichnen auf der Matrix matrix.stroke(0xFFFFFFFF); // Zeichenfarbe auf Weiß matrix.textScrollSpeed(100); // Setze die Scroll-Geschwindigkeit des Textes auf 100 const char text[] = " Hello World! <3 "; matrix.textFont(Font_4x6); matrix.beginText(0, 1, 0xFFFFFF); matrix.println(text); matrix.endText(SCROLL_LEFT); matrix.endDraw(); //Bei diesem Teil habe ich KI benutzt, um die Funktionen zu verstehen, und mir ähnliche youtube-Projekte angesehen. -
LCD-Anzeige vor dem Start
lcd.print("Zum Starten"); lcd.setCursor(0,1); lcd.print("Knopf druecken"); -
Warten auf Knopfdruck zum Start
while(digitalRead(button) == LOW) {} playMelody(); // Startmelodie abspielen } void loop() { count = 0; while (count < repeats) { lcd.clear(); lcd.print("Huhuu Fokuszeit!"); // Fokusphase beginnt digitalWrite(led1, HIGH); digitalWrite(led2, LOW); lcd.setCursor(0, 1); seconds = 0; minutes = 0; while (minutes < study_minutes) { seconds = 0; while (seconds < 60) { lcd.setCursor(0, 1); if (minutes < 10) lcd.print("0"); lcd.print(minutes); lcd.print(":"); if (seconds < 10) lcd.print("0"); lcd.print(seconds); delay(1000); seconds++; } minutes++; } beep(1000, 200); // Signalton für Arbeitsende lcd.clear(); lcd.setCursor(0, 0); digitalWrite(led1, LOW); digitalWrite(led2, HIGH); -
Pause bestimmen
if (count == (repeats - 1)) { break_duration = long_break_minutes; lcd.print("Lange Pause! 15m"); } else { break_duration = short_break_minutes; lcd.print("Kurze Pause! 5m"); } beep(1500, 200); // Signalton für Pausenbeginn lcd.setCursor(0, 1); seconds = 0; minutes = 0; while (minutes < break_duration) { seconds = 0; while (seconds < 60) { lcd.setCursor(0, 1); if (minutes < 10) lcd.print("0"); lcd.print(minutes); lcd.print(":"); if (seconds < 10) lcd.print("0"); lcd.print(seconds); delay(1000); seconds++; } minutes++; } beep(2000, 200); // Signalton für Pausenende count++; } beep(1000, 1000); // Langer Signalton bei Abschluss aller Pomodoros -
Abschlussanzeige auf LED-Matrix
matrix.beginDraw(); matrix.stroke(0xFFFFFFFF); matrix.textScrollSpeed(100); const char text[] = "Das war Inf-Einf-B! :)"; matrix.textFont(Font_4x6); matrix.beginText(0, 1, 0xFFFFFF); matrix.println(text); matrix.endText(SCROLL_LEFT); matrix.endDraw();
- Beim Arbeiten an diesem Teil habe ich mir vor allem allgemeine Arduino-Videos auf YouTube angeschaut und versucht, zu verstehen, wie ich die Materialien verwenden kann.
- Ich habe viel Mühe darauf verwendet, Widerstände und Kabel korrekt zu verbinden.
- Außerdem habe ich ein ähnliches Projekt als Referenz genutzt und Änderungen vorgenommen.
- Ab und zu habe ich versucht, mit Hilfe von KI(ChatGPT) die Funktionen im Arduino IDE zu verstehen.
- Ich habe auch Hilfe von KI bekommen, um Debugging zu machen.
Dieser Teil des Projekts ist eine Webseite, die ich mit HTML, CSS und JavaScript in VS Code erstellt habe.
- Wir öffnen die Seite Index.html, die ich mit „Open with live server“ in VS-Studio geschrieben habe.
- -Zunächst wird eine HTML-Seite angezeigt. Es gibt eine Taste zur Weiterleitung und eine Musikbox, die automatisch abgespielt wird, wenn die Seite geöffnet wird.
- Diese Musikbox kann stummgeschaltet oder ganz abgeschaltet werden.
- Durch Drücken der Button „Ich bin bereit, let´s fokus!“ werden wir zur nächsten HTML-Seite weitergeleitet.
- Auf der anderen HTML-Seite, die sich öffnet, gibt es ein Feld mit 3 verschiedenen Button Optionen: Fokus, lange Pause und kurze Pause.
- Nach dem Drücken der Button „Fokus“ und der „Start“ beginnt die Zeit von 25:00 Minuten herunterzuzählen.
- Mit der Button „Zurücksetzen“ können wir die Zeit wieder auf 25:00 Minuten zurücksetzen.
- Auf die gleiche Weise können wir eine Pause machen, indem wir die Pause-Button drücken.
- Diese Seite verwendet 30 Minuten No-Copyright Musik. Anders als auf der ersten Seite startet diese Musik nicht automatisch, sondern man kann sie starten und stoppen.
- Schließlich gibt es unten links eine Button „zurück“, um zur ersten Seite zurückzukehren.
- Drei verschiedene Modi: Fokuszeit (25 Minuten), kurze Pause (5 Minuten) und lange Pause (15 Minuten).
- Start/Reset Button: Der Timer kann gestartet und zurückgesetzt werden.
- Musikunterstützung: Möglichkeit, Lofi-Musik während der Fokussitzung zu hören.🎵
- Ein Zurück-Button erlaubt eine einfache Rückkehr zur vorherigen Seite.
- Musik kann durch Klicken auf das Play-Icon gestartet oder pausiert werden.
- Beim Klicken auf eine der Phasen (Fokuszeit, kurze oder lange Pause) wird die entsprechende Zeit eingestellt.
- Die Zeit läuft herunter, sobald der Start-Button gedrückt wird.
- Hintergrundbild: Motivierende visuelle Gestaltung mit Hintergrundbildern und einem animierten GIF.
- Benutzerfreundliche Buttons und Farbe.
- Die Webseite passt sich an verschiedene Bildschirmgrößen an.
- Die Farbpalette mit lila und rosa Tönen sorgt für eine angenehme visuelle Erfahrung.
- Ich habe keine „Stopp/Pause“-Taste vorgesehen, da die Fokussierungszeit bereits bei 25 Minuten liegt. Stattdessen wurde eine Reset-Taste verwendet. Hätte man den auch verwenden können? Ja, das wäre möglich gewesen.
- Die Hintergrundbilder und die Musik, die ich verwende, sind nicht kopiergeschützte Materialien, die ich im Internet gefunden habe. Entnommen von Freepik, Giphy und Pixabay: Quellen: https://pixabay.com/music/search/lofi/ ,https://www.freepik.com/search?format=search&last_filter=query&last_value=lofi&query=lofi,https://giphy.com/search/lofi , https://giphy.com/search/lofi
✔ Hier habe ich zunächst eine Willkommens-HTML-Seite erstellt, die den Benutzer anschließend zur Pomodoro-Seite weiterleitet. Dafür habe ich zuerst die Datei "index.html" angelegt und ein CSS-Stylesheet "pomodoro.css" erstellt, um Designelemente umzusetzen, die mit reinem HTML nicht möglich waren. Danach habe ich die eigentliche Timer-Funktionalität in einer JavaScript-Datei "pomodoro.js" programmiert und alle Dateien miteinander verknüpft.
✔ Für das Design der HTML-Seiten habe ich eine einzige CSS-Datei verwendet. Während der Umsetzung habe ich verschiedene Tutorials angesehen und bereits bestehende Projekte als Referenz genutzt. In einigen Fällen habe ich zudem KI zur Optimierung meines Codes eingesetzt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Pomodoro Lern-Timer </title>
</head>
<body <style background="wp2.jpg";
background-image: fixed;
background-size: cover; > </style>
<h1 style="color:rgb(253, 203, 203);
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); "
>
<center>Hi! :) </center>
</h1>
<div class="gif-container">
<img src="wp lofi.gif" ;
alt="Lofi Girl Study">
</div>
<title>GIF-Tanzen</title>
<style>
.gif-container {
text-align: center;
}
.gif-container img {
width: 400px;
height: auto;
}
</style>
<p style="color: rgb(253, 203, 203);
font-family:Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);"
>
Du hast Projekte, Prüfungen oder neue Gewohnheiten? Dann bist du hier richtig! <br> Arbeite mit 25-Minuten-Sessions effektiv – leg los!
</p>
<div style="display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;">
<button style="
background-color: rgba(248, 175, 255, 0.795);
color: rgb(0, 0, 0);
font-size: 30px;
border: none;
border-radius: 20px;
padding: 20px 40px;
cursor: pointer;" onclick="goToPomodoro()">
Yes! Ich bin bereit, let´s fokus!
</button>
<audio src="lofi2.mp3" controls autoplay></audio>
</div>
<script>
function goToPomodoro() {
window.location.href = "pomodoro.html";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pomodoro-Timer</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link rel="stylesheet" href="pomodoro.css" />
<style>
body, button, span {
font-family: "Poppins", "sans-serif";
}
</style>
</head>
<body>
<div class="container">
<div class="section-container">
<button id="focus" class="btn btn-timer btn-fokus">Fokuszeit</button>
<button id="shortbreak" class="btn btn-shortbreak">Kurze Pause</button>
<button id="longbreak" class="btn btn-longbreak">Lange Pause</button>
</div>
<div class="time-btn-container">
<span id="time"></span>
<div class="btn-container">
<button id="btn-start" class="show">Start</button>
<button id="btn-pause" class="hide">Pause</button>
<button id="btn-reset" class="hide">
<i class="fa-solid fa-rotate-right"></i>
</button>
<div class="right-col" >
<p>Lofi-Musik anhören</p>
<img src="play.png" id="icon">
</div>
</div>
<audio id="LongLofi"> <source src="long lofi.mp3" type="audio/mp3"> </audio>
<script>
var LongLofi = document.getElementById("LongLofi");
var icon = document.getElementById("icon");
icon.onclick = function() {
if(LongLofi.paused){
LongLofi.play();
icon.src = "pause.png";
} else {
LongLofi.pause();
icon.src = "play.png";
}
}
</script>
</div>
</div>
<script src="pomodoro.js"></script>
<button id="backButton" onclick="window.history.back()">Zurück</button>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Arial", sans-serif;
}
body {
background-image: url('wp2.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.container {
background-color: #682c745e;
width: min(95%, 700px);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 5em 3em;
border-radius: 0.5em;
}
button {
border: none;
outline: none;
cursor: pointer;
font-size: 20px;
transition: all 0.3s ease-in-out;
}
.section-container {
display: flex;
gap: 1em;
justify-content: center;
}
.btn {
padding: 1em 2em;
border-radius: 0.5em;
background-color: #c44bb0c0;
color: #fffafa;
font-size: 15px;
}
.btn-focus {
background-color: #ffb5f3;
color: #ffffff;
font-size: 15px;
}
.time-btn-container {
display: flex;
flex-direction: column;
margin-top: 2em;
font-size: 15px;
}
#backButton {
position: fixed;
bottom: 20px;
left: 20px;
padding: 15px 30px;
font-size: 18px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s ease-in-out;
}
#backButton:hover {
background-color: #0056b3;
}
#time {
text-align: center;
color: #ffffff;
font-size: 5em;
font-weight: 600;
}
.btn-container {
display: flex;
justify-content: center;
gap: 2em;
}
#btn-start {
padding: 15px 30px;
border-radius: 0.5em;
cursor: pointer;
bottom: 20px;
height:fit-content;
align-items: center;
background-color: #ffffff;
font-size: 2em;
}
#btn-pause {
padding: 1em 2em;
border-radius: 0.5em;
cursor: pointer;
background-color: #ffffff;
font-size: 1.5em;
}
#btn-reset {
background-color: transparent;
border: none;
outline: none;
color: #ffffff;
font-size: 1.5em;
}
.hide {
display: none;
}
.show {
display: block;
}
audio {
width: 400px;
height: 100px;
align-items: center;
}
.right-col {
float:right;
margin-right:6%;
margin-top: 120px;
display:flex;
align-items:center;
}
.right-col p{
font-size: 18px;
color: #ffffff;
font-weight: 400;
margin-right: 15px;
}
#icon{
width: 120px;
height:fit-content;
cursor:pointer;
}
let focusBtn = document.getElementById("focus");
let shortBreakBtn = document.getElementById("shortbreak");
let longBreakBtn = document.getElementById("longbreak");
let startButton = document.getElementById("btn-start");
let resetButton = document.getElementById("btn-reset");
let pauseButton = document.getElementById("btn-pause");
let timeDisplay = document.getElementById("time");
let allButtons = document.querySelectorAll(".btn");
// Standardwerte für den Timer setzen
let activeMode = "focus"; // Standardmodus: Fokus
let seconds = 59;
let minutes = 24;
let timerRunning = false;
let timer;
// Anfangsanzeige des Timers
timeDisplay.textContent = (minutes + 1) + ":00";
function addZero(num) {
return num < 10 ? "0" + num : num;
}
function clearButtonStyles() {
allButtons.forEach((btn) => btn.classList.remove("btn-focus"));
}
// Timer zurücksetzen
function resetTimer() {
stopTimer();
resetButton.classList.remove("show");
if (activeMode === "long") {
minutes = 14; // Lange Pause: 15 Minuten
} else if (activeMode === "short") {
minutes = 4; // Kurze Pause: 5 Minuten
} else {
minutes = 24; // Fokus-Modus: 25 Minuten
}
seconds = 59;
timeDisplay.textContent = addZero(minutes + 1) + ":00";
}
// Reset-Button Ereignislistener
resetButton.addEventListener("click", resetTimer);
// Fokusmodus aktivieren
focusBtn.addEventListener("click", function () {
activeMode = "focus";
clearButtonStyles();
focusBtn.classList.add("btn-focus");
resetTimer();
});
// Kurze Pause aktivieren
shortBreakBtn.addEventListener("click", function () {
activeMode = "short";
clearButtonStyles();
shortBreakBtn.classList.add("btn-focus");
resetTimer();
});
// Lange Pause aktivieren
longBreakBtn.addEventListener("click", function () {
activeMode = "long";
clearButtonStyles();
longBreakBtn.classList.add("btn-focus");
resetTimer();
});
// Timer stoppen
function stopTimer() {
clearInterval(timer);
timerRunning = false;
startButton.classList.remove("hide");
}
pauseButton.addEventListener("click", stopTimer);
startButton.addEventListener("click", function () {
if (!timerRunning) {
timerRunning = true;
startButton.classList.add("hide");
resetButton.classList.add("show");
// Countdown-Funktion
timer = setInterval(function () {
timeDisplay.textContent = addZero(minutes) + ":" + addZero(seconds);
if (seconds === 0) {
if (minutes !== 0) {
minutes--;
seconds = 59;
} else {
clearInterval(timer);
timerRunning = false;
}
} else {
seconds--;
}
}, 1000);
}
});
- Diesen Teil der HTML- und CSS-Seiten habe ich größtenteils selbst erstellt.
- Im JavaScript-Teil habe ich die Zeitfunktionen und die Button-Steuerung basierend auf ähnlichen Projekten überarbeitet. Dabei habe ich künstliche Intelligenz genutzt.
- Ein weiterer Grund, warum ich zusätzlich zur Arduino-Anwendung eine HTML-Seite erstellt habe, war, dass ich es einfach ausprobieren wollte.
- Zum Abschluss kann ich sagen, dass ich viel Spaß beim Erstellen dieses Projekts hatte und dabei einiges gelernt habe.🙂