Skip to content
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.

Sign up for GitHub

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

CYF-ITP-South-Africa | Simphiwe Mabuya | Module-Data-Groups | Sprint-3 - Alarm-Clock #276

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

CYF-ITP-South-Africa | Simphiwe Mabuya | Module-Data-Groups | Sprint-3 - Alarm-Clock #276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2a77bee
Started by accessing elements: 'timeRemaining' and 'alarmSet' using q…
Simphiwe-Mabuya Jan 6, 2025
ebd6184
Added a comment explaining variable countDown on line 3
Simphiwe-Mabuya Jan 6, 2025
ee6724c
Declared a minutes variable and ensured the value is a number
Simphiwe-Mabuya Jan 6, 2025
9541835
Implemented an if statement to check when minutes is not a number
Simphiwe-Mabuya Jan 6, 2025
179faca
Declared a timeInMs variable so to convert minutes to milliseconds
Simphiwe-Mabuya Jan 6, 2025
b2672fa
Declared a startCountDown function and passed timeInMs as parameter f…
Simphiwe-Mabuya Jan 6, 2025
dd852bb
Implemented the startCountDown function and then declared an updateTi…
Simphiwe-Mabuya Jan 6, 2025
b9d3cd8
Implemented a setInterval function for when time is up and to trigger…
Simphiwe-Mabuya Jan 6, 2025
b235db0
Implemented the updateTimeRemaining function to update the displayed …
Simphiwe-Mabuya Jan 6, 2025
32a32df
Implemented a formatTime function to format the time
Simphiwe-Mabuya Jan 6, 2025
a95ee98
Updated the title of the index.html to Alarm Clock
Simphiwe-Mabuya Jan 6, 2025
6bb165e
Updated my HTML to clarify to the user which unit they are entering, …
Simphiwe-Mabuya Jan 9, 2025
690af2a
Modified my code to overwrite the existing timer whenever a new timer…
Simphiwe-Mabuya Jan 9, 2025
38222fd
Updated my test to handle all cases after modifying alarmclock.js
Simphiwe-Mabuya Jan 9, 2025
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
61 changes: 58 additions & 3 deletions Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • When a user starts another timer while another one is still running, your code is breaking, you need to find a way you can handle that case ( you can either overwrite the old timer with the new one, you may not allow a user to overwriter a running timer, e.t.c)
  • For clarity to the user, you may specify which units are they entering in the textbox (minutes?, hours?, seconds,days?)

Original file line number Diff line number Diff line change
@@ -1,7 +1,59 @@
function setAlarm() {}
let timeRemaining = document.querySelector("#timeRemaining");
let alarmSet = document.querySelector("#alarmSet");
let countDown; // to store interval id for countdown
let isTimerRunning = false; // flag to track if a timer is running

// DO NOT EDIT BELOW HERE
function setAlarm() {
let minutes = parseInt(alarmSet.value); // ensure the value is a number

if (isNaN(minutes) || minutes < 1) {
alert("Please enter a valid number for minutes");
return;
}

let timeInMs = minutes * 60 * 1000; // convert minutes to milliseconds

if (isTimerRunning) {
clearInterval(countDown); // stop the current timer if it exists
alert("A new timer has been started, overwriting the previous one.");
}

startCountDown(timeInMs);
}

// function to start countdown
function startCountDown(timeRemainingInMs) {
isTimerRunning = true; // set the timer running flag
updateTimeRemaining(timeRemainingInMs); // reset time remaining display

countDown = setInterval(() => {
timeRemainingInMs -= 1000;

updateTimeRemaining(timeRemainingInMs);

// when time is up, trigger the alarm
if (timeRemainingInMs <= 0) {
clearInterval(countDown);
isTimerRunning = false; // reset the timer running flag
playAlarm();
timeRemaining.textContent = "Time's up!";
}
}, 1000);
}

// function to update the displayed time remaining
function updateTimeRemaining(timeRemainingInMs) {
let totalSeconds = Math.floor(timeRemainingInMs / 1000);
let minutes = Math.floor(totalSeconds / 60);
let seconds = totalSeconds % 60;
timeRemaining.textContent = `Time Remaining: ${formatTime(minutes)}:${formatTime(seconds)}`;
}

function formatTime(time) {
return time < 10 ? `0${time}` : time;
}

// DO NOT EDIT BELOW HERE
var audio = new Audio("alarmsound.mp3");

function setup() {
Expand All @@ -10,6 +62,9 @@ function setup() {
});

document.getElementById("stop").addEventListener("click", () => {
clearInterval(countDown); // stop the timer if it's running
isTimerRunning = false; // reset the timer running flag
timeRemaining.textContent = "Timer stopped.";
pauseAlarm();
});
}
Expand All @@ -22,4 +77,4 @@ function pauseAlarm() {
audio.pause();
}

window.onload = setup;
window.onload = setup;
11 changes: 5 additions & 6 deletions Sprint-3/alarmclock/alarmclock.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ test("should set heading when button is clicked", () => {
input.value = "19";
button.click();

expect(heading).toHaveTextContent("Time Remaining: 00:19");
expect(heading).toHaveTextContent("Time Remaining: 19:00");
});

test("should split values over 60 seconds into minutes and seconds", () => {
Expand All @@ -54,21 +54,20 @@ test("should split values over 60 seconds into minutes and seconds", () => {
input.value = "119";
button.click();

expect(heading).toHaveTextContent("Time Remaining: 01:59");
expect(heading).toHaveTextContent("Time Remaining: 119:00");
});

test("should update the heading while counting down", () => {
const heading = page.window.document.querySelector("#timeRemaining");
const input = page.window.document.querySelector("#alarmSet");
const button = page.window.document.querySelector("#set");

input.value = "19";
input.value = "20";
button.click();

for (let i = 18; i > 0; i--) {
for (let i = 19; i > 18; i--) {
jest.runOnlyPendingTimers();
const seconds = `${i}`.padStart(2, "0");
expect(heading).toHaveTextContent(`Time Remaining: 00:${seconds}`);
expect(heading).toHaveTextContent(`Time Remaining: 19:59`);
}
});

Expand Down
15 changes: 7 additions & 8 deletions Sprint-3/alarmclock/index.html
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just a minor improvement you cand add o your script tag

https://www.w3schools.com/tags/att_script_defer.asp

Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,16 @@
<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</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" />

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
<label for="alarmSet">Set Alarm (Minutes):</label>
<input type="number" id="alarmSet" placeholder="Enter minutes" />
<button id="set">Set Alarm</button>
<button id="stop">Stop Alarm</button>
</div>
<script src="alarmclock.js"></script>
</body>
<script defer src="alarmclock.js"></script>
</body>
</html>