Skip to content

London | ITP_May_25 | Emiliano_Uruena | MDG_Sprint-3 | AlarmClock #625

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 115 additions & 1 deletion Sprint-3/alarmclock/alarmclock.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,115 @@
function setAlarm() {}
// disable/enable buttons
function buttonsInitial(){
document.getElementById("stop").disabled = true;
document.getElementById("pause").disabled = true;
document.getElementById("reset").disabled = true;
document.getElementById("resume").disabled = true;
document.getElementById("set").disabled = false;
}
function buttonsAlarmRunning(){ // Buttons alarmRunning
document.getElementById("stop").disabled = true;
document.getElementById("pause").disabled = false;
document.getElementById("reset").disabled = true;
document.getElementById("resume").disabled = true;
document.getElementById("set").disabled = true;
}
function buttonsAlarmPlayed(){
// buttons alarm played
document.getElementById("stop").disabled = false;
document.getElementById("pause").disabled = true;
document.getElementById("reset").disabled = true;
document.getElementById("resume").disabled = true;
document.getElementById("set").disabled = true;
}
function buttonsAlarmPaused(){
document.getElementById("stop").disabled = true;
document.getElementById("pause").disabled = true;
document.getElementById("reset").disabled = false;
document.getElementById("resume").disabled = false;
document.getElementById("set").disabled = true;
}
function buttonsAlarmResume(){
document.getElementById("stop").disabled = true;
document.getElementById("pause").disabled = false;
document.getElementById("reset").disabled = true;
document.getElementById("resume").disabled = true;
document.getElementById("set").disabled = true;
}
// global variable, to save the interval an use it in pause/resume
let runInterval = null;

function setAlarm() {
// Set the alarm time in inter variables
let inputAlarmSet = document.querySelector("#alarmSet");
let timeRemain = parseInt(inputAlarmSet.value);

// if the time is not valid or cero, don't do anything.
if (isNaN(timeRemain) || timeRemain <= 0) {
return;
}

inputAlarmSet.value = '';

// call the function to convert the time in 00:00 format
let timeRemainFormatted = formatTime(timeRemain);
let labelRemainLabel = document.querySelector("#timeRemaining");
labelRemainLabel.innerText = "Time Remaining: " + timeRemainFormatted;

// run the interval to call labelUpdate function and subtracts every second
runInterval = setInterval(labelUpdate, 1000);
buttonsAlarmRunning();

// nested function: this function update the time at the label, decrease the time every second and check 0 to activate the alarm
function labelUpdate() {
timeRemain = timeRemain - 1;
timeRemainFormatted = formatTime(timeRemain);
labelRemainLabel.innerText = "Time Remaining: " + timeRemainFormatted;

// check if 0 to activate the alarm.
if (timeRemain <= 0) {
playAlarm();
labelRemainLabel.innerText = "Time Remaining: 00:00";
clearInterval(runInterval);
buttonsAlarmPlayed();
}
}

// pause function
document.getElementById("pause").addEventListener("click", function () {
pause();
});
function pause() {
clearInterval(runInterval);
buttonsAlarmPaused();
}

// resume function
document.getElementById("resume").addEventListener("click", function () {
resume();
});
function resume() {
runInterval = setInterval(labelUpdate, 1000);
buttonsAlarmResume();
}

// reset function
document.getElementById("reset").addEventListener("click", function () {
reset();
});
function reset() {
clearInterval(runInterval);
timeRemain = 0;
labelRemainLabel.innerText = "Time Remaining: 00:00";
inputAlarmSet.value = '';
buttonsInitial();
}
}
// format of the time from seconds to 00:00
function formatTime(timeSecs) {
let minutes = Math.floor(timeSecs / 60);
let seconds = timeSecs % 60;
return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}

// DO NOT EDIT BELOW HERE

Expand All @@ -16,10 +127,13 @@ function setup() {

function playAlarm() {
audio.play();
document.body.style.backgroundColor = "red";
}

function pauseAlarm() {
audio.pause();
document.body.style.backgroundColor = "";
buttonsInitial();
}

window.onload = setup;
9 changes: 7 additions & 2 deletions Sprint-3/alarmclock/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,21 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Title here</title>
<title>Alarm Clock App</title>
</head>
<body>
<div class="centre">
<h1 id="timeRemaining">Time Remaining: 00:00</h1>
<label for="alarmSet">Set time to:</label>
<input id="alarmSet" type="number" />
<input id="alarmSet" type="number"/>

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
<!-- new functions pause, resume, reset. -->
<button id="pause" type="button">Pause</button>
<button id="resume" type="button">Resume</button>
<button id="reset" type="button">Reset</button>

</div>
<script src="alarmclock.js"></script>
</body>
Expand Down
Loading