Skip to content

London | 26-ITP-Jan | Karla Grajales | Sprint 3 | Alarm Clock App #1183

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

Open
Grajales-K wants to merge 19 commits into
base: main
Choose a base branch
from
Open

London | 26-ITP-Jan | Karla Grajales | Sprint 3 | Alarm Clock App #1183

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
d3adbf9
add music effects
Grajales-K Apr 1, 2026
a067260
feat: add meta description and favicon to alarm clock page
Grajales-K Apr 6, 2026
97a40d0
feat: implement alarm countdown display in setAlarm function
Grajales-K Apr 6, 2026
14a0278
feat: add countdown functionality to alarm clock display
Grajales-K Apr 6, 2026
3b04b19
feat: refactor setAlarm function and add display update logic
Grajales-K Apr 6, 2026
13ef67d
feat: add placeholder text for alarm time input field
Grajales-K Apr 6, 2026
e89fc7d
feat: update alarm sound and add stop audio functionality
Grajales-K Apr 6, 2026
088efa0
feat: add step attribute to alarm time input for precise time setting
Grajales-K Apr 6, 2026
2e8d9f5
feat: enhance alarm functionality with input validation and random ba…
Grajales-K Apr 6, 2026
b0b40a3
feat: update placeholder text for alarm time input field
Grajales-K Apr 6, 2026
b33fd6a
feat: add styling for alarm clock interface with new layout and butto…
Grajales-K Apr 6, 2026
063968e
feat: reset audio playback position when pausing alarm
Grajales-K Apr 6, 2026
3a3a9d0
feat: refactor countdown variable to countdownInterval for clarity
Grajales-K Apr 14, 2026
3537c04
feat: add resetApp function to restore initial app state
Grajales-K Apr 14, 2026
011f069
feat: improve input validation and enhance countdown logic in setAlar…
Grajales-K Apr 14, 2026
928b976
feat: refactor setAlarm function for improved readability and maintai…
Grajales-K Apr 14, 2026
582e497
feat: add background color animation on alarm trigger for enhanced us…
Grajales-K Apr 14, 2026
325c4b4
feat: improve input validation in setAlarm function by removing empty…
Grajales-K Apr 14, 2026
88b277b
feat: initialize audio elements for alarm and stop sounds
Grajales-K Apr 14, 2026
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
58 changes: 56 additions & 2 deletions Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,59 @@
function setAlarm() {}
let countdown;
Comment thread
Grajales-K marked this conversation as resolved.
Outdated

function setAlarm() {
clearInterval(countdown);
document.body.style.backgroundColor = "white";
Comment thread
Grajales-K marked this conversation as resolved.
Outdated

let inputTime = Number(document.getElementById("alarmSet").value);

if (isNaN(inputTime) || inputTime <= 0) {
alert("Please type or select your time 👇⏰");
return;
}
Comment thread
Grajales-K marked this conversation as resolved.
Outdated

updateDisplay(inputTime);

countdown = setInterval(() => {
inputTime--;

if (inputTime <= 0) {
clearInterval(countdown);
updateDisplay(0);
playAlarm();

let repetitions = 0;
countdown = setInterval(() => {
document.body.style.backgroundColor = `rgb(
${Math.floor(Math.random() * 256)},
${Math.floor(Math.random() * 256)},
${Math.floor(Math.random() * 256)})`;
repetitions++;

if (repetitions > 100) {
clearInterval(countdown);
}
Comment thread
Grajales-K marked this conversation as resolved.
Outdated
}, 200);
} else {
updateDisplay(inputTime);
}
}, 1000);
}

function updateDisplay(seconds) {
let minutes = Math.floor(seconds / 60);
let remainingSeconds = seconds % 60;

let display = `Time Remaining: ${minutes
.toString()
.padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
Comment thread
Grajales-K marked this conversation as resolved.
Outdated

document.getElementById("timeRemaining").innerText = display;
}

// DO NOT EDIT BELOW HERE

var audio = new Audio("alarmsound.mp3");
let audio = new Audio("assets/trebolClan.mp3");
let stopAudio = new Audio("assets/stopAlarm.mp3");

function setup() {
document.getElementById("set").addEventListener("click", () => {
Expand All @@ -20,6 +71,9 @@ function playAlarm() {

function pauseAlarm() {
audio.pause();
stopAudio.play();
audio.currentTime = 0;
clearInterval(countdown);
}

window.onload = setup;
Binary file added Sprint-3/alarmclock/assets/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Sprint-3/alarmclock/assets/stopAlarm.mp3
View file
Open in desktop
Binary file not shown.
Binary file added Sprint-3/alarmclock/assets/trebolClan.mp3
View file
Open in desktop
Binary file not shown.
10 changes: 8 additions & 2 deletions Sprint-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,19 @@
<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>
<meta
name="description"
content="This page is an alarm clock with an alert to aware the user type or
select the time. This include two sound effects"
/>
<link rel="icon" type="image/png" href="assets/favicon.png" />
<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" placeholder="Type or select the time -->" min="0" step="1"/>

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
Expand Down
62 changes: 56 additions & 6 deletions Sprint-3/alarmclock/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,65 @@


body{
background-color: #f7f3f2;
color: #333;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.centre {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 2rem 2rem;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
text-align: center;
}

/* Input Field */
#alarmSet {
margin: 20px;
margin: 1rem ;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
max-width: 300px;
box-sizing: border-box;
}

#alarmSet::placeholder {
color: #888;
font-style: italic;
font-family: 'Arial', sans-serif;
font-size: 0.8rem;
}

h1 {
text-align: center;
}

/* Button */
button {
background-color: #6c63ff;
color: white;
border: none;
border-radius: 6px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
background-color: #dedee8;
color: #6c63ff;
transform: translateY(-2px);
}

button:active {
background-color: #4b47b0;
transform: translateY(0);
}
Loading