Skip to content

Commit

Permalink
Make controls work
Browse files Browse the repository at this point in the history
JoeWells96 committed Feb 23, 2024
1 parent bd0de3e commit 5d88f94
Showing 4 changed files with 29 additions and 9 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@
<div class="top-bar">
<div class="controls">
<span class="time-control" id="minus">-</span>
<input id="time" type="time" value="01:20"/>
<input id="time" type="time" value="03:00"/>
<span class="time-control" id="plus">+</span>
</div>
</div>
22 changes: 17 additions & 5 deletions script/index.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,23 @@
window.addEventListener("DOMContentLoaded", () => {
const time: HTMLInputElement = <HTMLInputElement>document.getElementById('time')
const pan: HTMLElement = document.getElementById('pan')
const plus: HTMLElement = document.getElementById("plus")
const minus: HTMLElement = document.getElementById("minus")
pan.addEventListener('click', addEgg)
plus.addEventListener('click', _ => updateTime(15))
minus.addEventListener('click', _ => updateTime(-15))

function addEgg(event): void {
const timeString: string = (<HTMLInputElement>document.getElementById('time')).value
const egg: Egg = new Egg(timeString, `egg${eggs.length}`)
function updateTime(diff: number): void {
const newTime: number = formatTextToSeconds(time.value) + diff
if (newTime >= 0) {
time.value = formatSecondsToText(newTime, true)
} else {
time.value = "00:00"
}
}

function addEgg(event: MouseEvent): void {
const egg: Egg = new Egg(time.value, `egg-${eggs.length}`)
eggs.push(egg)
pan.appendChild(egg.toHtml(event.clientX, event.clientY))
const intervalId: number = setInterval(() => updateEgg(egg, intervalId), 1000)
@@ -27,8 +40,7 @@ class Egg {
private height: number = 190;

constructor(timeText: string, id: string) {
const time: string[] = timeText.split(':')
this.secondsRemaining = (Number(time[0]) * 60) + Number(time[1])
this.secondsRemaining = formatTextToSeconds(timeText)
this.id = id
}

10 changes: 8 additions & 2 deletions script/utils.ts
Original file line number Diff line number Diff line change
@@ -2,9 +2,15 @@ function toPx(pixels: number): string {
return `${pixels}px`
}

function formatSecondsToText(totalSeconds: number): string {
function formatSecondsToText(totalSeconds: number, withLeadingZeroMinute: boolean = false): string {
const minutes: number = Math.floor(totalSeconds / 60)
const minutesString: String = minutes < 10 && withLeadingZeroMinute ? `0${minutes}` : `${minutes}`
const seconds: number = totalSeconds % 60
const secondsString: string = seconds < 10 ? `0${seconds}` : `${seconds}`
return `${minutes}:${secondsString}`
return `${minutesString}:${secondsString}`
}

function formatTextToSeconds(timeText: string): number {
const time: string[] = timeText.split(':')
return (Number(time[0]) * 60) + Number(time[1])
}
4 changes: 3 additions & 1 deletion style.css
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ body {
}

.egg {
font-size: 36px;
font-size: 48px;
font-weight: bold;
text-align: center;
display: grid;
@@ -31,6 +31,8 @@ body {
}

.time-control {
cursor: pointer;
user-select: none;
padding: 10px;
font-size: 64px;
font-weight: bold;

0 comments on commit 5d88f94

Please sign in to comment.