pomodoro: for whom the clock beeps

Guess what. I don’t care if my clock has a few millisecond drift. Not enough anyway—the scale is minutes, not tenths-of-a-second, the precision isn’t that important. The default time is twenty-five minutes, which is 1.5 million seconds. There’s a lot of room for slop in there. Why this is important is because I decided I wasn’t going to implement a drift-checking timer, as per the link I posted last week.

I said I was going to talk about flexbox on Thursday and then spent it talking about git and GitHub.  So, a little about flexbox.

This is one of the ways to be responsive.  The CSS involves letting the parent element know that it has to display flex and anything about the overall flex display that it needs. Here’s a snippet from the CSS file for the wiki-viewer. In order to allow a grid display, I have to use flexbox. I wanted 3 per row and I have ten items, so I needed to wrap them.

1
2
3
4
5
6
7
8
.gridBox {
display: flex;
flex-wrap: wrap;
position: relative;
top: 55px;
margin-bottom: 20px;
font-size: 18px;
}

Here, the children need to know that they they only get 30% of the available horizontal space and that they can’t grow but hey can shrink. The flex works a lot like the border property in that you can either specify parts of it or shortcut it into one attribute. Here I shortcut it. The three values are flex-grow, flex-shrink, and flex-basis.

1
2
3
4
5
6
7
8
9
10
.gridDisp {
flex: 0 1 30%;
height: 350px;
margin: 5px;
padding: 5px;
cursor: pointer;
overflow-y: auto;
border: solid 1px #008800;
border-radius: 0px;
}

For the clock (which is what we’re supposed to be chatting about) the important issue was I wanted responsiveness while keeping my stuff aligned in columns and rows. It’s a little more involved so I’ll skip the code examples, but feel free to hit up the style.css on the repo and look around.

Back to the basic clock. I thought it was done when it counted down, but I hadn’t thought that someone might press [Start] twice. So I fixed it to where a second press of [Start] does nothing. Next, someone explained that what they expected, was, if you tried to increment or decrement the active counter, it would stop the countdown. Good call. I implemented that.

The beep. I have a file in .MP3 format that is five beeps. You only hear one because I only play the first second of it. It was taken from freesound.org

I also futzed around with the look of it. I decided having a button that changed from [Start] to [Stop] looked cool but might be confusing to the person using it (besides, the other two items have two buttons).

Here is the new look of the Pomodoro Clock.

Leave a Reply

Your email address will not be published. Required fields are marked *