Skip to content

Commit

Permalink
Merge pull request #4 from valentineu0/main
Browse files Browse the repository at this point in the history 
Code Improvements and Notification
  • Loading branch information
@Palm1ye
Palm1ye authored May 15, 2024
2 parents b33a2f9 + 9ee23cf commit dab465a
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 31 deletions.
16 changes: 8 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,20 @@
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
A simple timer. <a href="https://github.com/palm1ye/timer" target="_blank" rel="noopener" class="font-semibold text-indigo-600"><span class="absolute inset-0" aria-hidden="true"></span>GitHub Repository<span aria-hidden="true">&rarr;</span></a>
A simple timer by <a href="https://palmiye.dev/" target="_blank" rel="noopener" class="font-semibold text-indigo-600">palm1ye<span aria-hidden="true"></span></a> & <a href="https://valentineu.xyz" target="_blank" rel="noopener" class="font-semibold text-indigo-600">valentineu0<span aria-hidden="true"></span></a>. <a href="https://github.com/palm1ye/timer" target="_blank" rel="noopener" class="font-semibold text-indigo-600">GitHub Repository<span aria-hidden="true">&rarr;</span></a>
</div>
</div>
<div class="text-center">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Zamanlayıcı</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">Geri sayımı başlatmak için dakika girin ve Başlat butonunu kullanın 🎉</p>
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Timer</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">Enter minutes and use the Start button to start the timer 🎉</p>
<div id="timer">00:00</div>
<br />
<input type="number" id="minutes" placeholder="Dakika Girin" class="text-center rounded-full">
<input type="number" id="minutes" class="text-center rounded-full">
<div class="mt-10 flex items-center justify-center gap-x-6">
<button id="start" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Başlat</button>
<button id="resume" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Devam Ettir</button>
<button id="pause" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Duraklat</button>
<button id="reset" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sıfırla</button>
<button id="start" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start</button>
<button id="resume" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Resume</button>
<button id="pause" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Pause</button>
<button id="reset" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Reset</button>
</div>
</div>
</div>
Expand Down
121 changes: 98 additions & 23 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,80 @@ let resumeButton = document.getElementById('resume');
let resetButton = document.getElementById('reset');
let timerDisplay = document.getElementById('timer');

timerDisplay.style.display = "none";
resetButton.style.display = "none";
pauseButton.style.display = "none";
resumeButton.style.display = "none";
Notification.requestPermission();

function sendNotification(v1, v2) {
var title = v1;
var body = v2;
new Notification(title, { body });
}

function timer(status) {
if(status == true)
timerDisplay.style.display = "block";
else if(status == false) {
timerDisplay.style.display = "none";
} else {
console.log("timer function called with unexpected parameter!");
}
}

function start(status) {
if(status == true)
startButton.style.display = "inline";
else if(status == false) {
startButton.style.display = "none";
} else {
console.log("start function called with unexpected parameter!");
}
}

function pause(status) {
if(status == true)
pauseButton.style.display = "inline";
else if(status == false) {
pauseButton.style.display = "none";
} else {
console.log("pause function called with unexpected parameter!");
}
}

function resume(status) {
if(status == true)
resumeButton.style.display = "inline";
else if(status == false) {
resumeButton.style.display = "none";
} else {
console.log("resume function called with unexpected parameter!");
}
}

function reset(status) {
if(status == true)
resetButton.style.display = "inline";
else if(status == false) {
resetButton.style.display = "none";
} else {
console.log("reset function called with unexpected parameter!");
}
}

function minput(status) {
if(status == true)
minutesInput.style.display = "inline";
else if(status == false) {
minutesInput.style.display = "none";
} else {
console.log("minput function called with unexpected parameter!");
}
}

timer(false);
start(true);
pause(false);
resume(false);
reset(false);
minput(true);

function startTimer(duration) {
let timer = duration * 60 + remainingTime;
Expand All @@ -28,15 +98,20 @@ function startTimer(duration) {

if (--timer < 0) {
clearInterval(timerInterval);
timerDisplay.textContent = 'Süre Doldu!';
timerDisplay.textContent = "Time is up!";
sendNotification("Time is up!", "The timer you set has expired!");
start(false);
pause(false);
resume(false);
reset(true);
}
}, 1000);
}

function handleEnterKeyPress(event) {
if (event.key === 'Enter') {
event.preventDefault(); // ignore submit thing
startButton.click(); // simulate click
event.preventDefault();
startButton.click();
}
}

Expand All @@ -46,12 +121,12 @@ startButton.addEventListener('click', function () {
let minutes = parseInt(minutesInput.value);
if(Number.isInteger(minutes) == true && minutes > 0) {
startTimer(minutes);
timerDisplay.style.display = "block";
startButton.style.display = "none";
minutesInput.style.display = "none";
pauseButton.style.display = "inline";
resumeButton.style.display = "none";
resetButton.style.display = "inline";
timer(true);
pause(true);
reset(true);
start(false);
pause(true);
minput(false);
minutesInput.value = '';
} else {
resetButton.click();
Expand All @@ -61,25 +136,25 @@ startButton.addEventListener('click', function () {
pauseButton.addEventListener('click', function () {
clearInterval(timerInterval);
remainingTime = parseInt(timerDisplay.textContent.split(':')[0]) * 60 + parseInt(timerDisplay.textContent.split(':')[1]);
resumeButton.style.display = "inline";
pauseButton.style.display = "none";
resume(true);
pause(false);
});

resumeButton.addEventListener('click', function () {
startTimer(0);
resumeButton.style.display = "none";
pauseButton.style.display = "inline";
resume(false);
pause(true);
});

resetButton.addEventListener('click', function() {
clearInterval(timerInterval);
timerDisplay.textContent = '00:00';
minutesInput.value = '';
remainingTime = 0;
timerDisplay.style.display = "none";
minutesInput.style.display = "inline";
startButton.style.display = "inline"
resumeButton.style.display = "none";
pauseButton.style.display = "none";
resetButton.style.display = "none";
timer(false);
start(true);
pause(false);
resume(false);
reset(false);
minput(true);
});

0 comments on commit dab465a

Please sign in to comment.