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.

.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.

.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.

git Your Project on GitHub (calculator)

If it’s not one thing, it’s another.  This is life; this is coding.

So, my calculator didn’t trim rightmost zeros.  It does now.

It wasn’t accepting a decimal point on zero.  It does now.

It also was allowing miscreants to press the ± button on operators and causing all manner of havoc.  You can still break it by doing things that aren’t natural, but most natural things are covered.

And the repeated application of = still works.  I’m about ready to turn it in. So, that meant converting it to 3 files and putting it on my local drive and then gitifying it. This was an interesting process. I found out that my buttons were too big (fixed) and too close together (fixed) and a few other nitpicky stuff.

Here are the steps to gitifying  a project from the command line (I iterate, I am totally lost with GUIs):

  1. Do the project. This should be a no-brainer, but you look rather silly with empty stuff on the repo.
  2. Make sure you have a git. Installing a git is beyond the scope of this document.  FreeCodeCamp uses GitHub. This is for Win/Mac users.  I have a dual boot capacity so I run the GitHub software on my Win partitions.  I won’t tell you what options to use because I operate command-line style.  I reiterate, I am totally lost with GUIs.
  3. Put your project in your special place. My special place has a long name and a short name.  The short name is a symbolic link (I run Linux and a symbolic link is a fancy name for a shortcut) of gitstuff in my home directory.  I make a directory for the new project in gitstuff and I can always find it. So, in this case, it’s ~/gitstuff/calculator/ I have three files there at this point
    • index.html
    • style.css
    • script.js
  4. Make a README.md file.  Directions on markdown can be found on the Markdown Cheatsheet.  I shouldn’t need to tell you how to do this (after all, you made those other three files).
  5. Make a LICENSE.md file.  This is trickier. You can get one from choosealicense.com.  Mark it down.  Make it your own.  You will now have five files in your directory.
  6. Initialize your git. Type git init at the command prompt in your project directory.
  7. Go to GitHub and start your project. If you’re not logged in, log in and click the [Start a project] button.  Fill out the fields. When you are finished, click the green [Create Repository] button. The page asks for the following:
    • Repository Name: this should be short.  Mine is calculator
    • Description: this should be a little longer but not much, explaining what it is
    • Public/Private: unless you pay, it’s public.
    • Initialize with a README: do NOT check this, as you made your own in step 4.
  8. Go back to your project folder and do a remote add.  You need the URL from GitHub.  It’s in the box at the top of the screen.  Type the command git remote add origin followed by that URL from the box.
  9. Add your project files to your local git. Type git add . at the command prompt in your project directory.  Don’t omit that period.
  10. Commit your work.  Type the command git commit -m “initial commit” at the command prompt. The stuff in quotes is your commit message.  Since this is the first one, that’s what you say.
  11. Push it to GitHub.  The command for this is git push -u origin master and it will ask for your account name and then your password. The account name will display, the password will not.

After all that, your project is now on GitHub.  If your project is a Website type thing (like the calculator) people won’t be able to view it as a page unless you do another step.  Go to the Settings tab and scroll down to GitHub Pages. Under Source choose Master Branch and click Save.  

This sounds like work, but it is worth it.

weather: wrap-up

If you look at your calendar, you’ll notice I’m writing this on not-a-Monday and not-a-Thursday. This is a bonus blog, made possible by my finishing my calculator which is the first advanced JavaScript project. Because I finished it so quickly, you won’t get to read much about it.

Weather.  I slept and woke up and it still worked.  I did some tweakage, found a Google font I liked (Cabin) and rewrote the “created by” part to clearly identify my weather app as a FreeCodeCamp project. Then, I had to put it back on GitHub.  When I typed git init it said it was re-initializing. Since I din’t know if I wanted that, I did an rm -r .git and then tried again. As far as GitHub was concerned, it was a new repository so I had to do the new repo things, but as far as my end was concerned, I had a README.md and a LICENSE.md and everything so I was ready to add, commit and push.  So I did all of that.  and it’s all there, now.  Except I forgot to edit the README.md so it referred to things that were untrue, like DarkSky. When I looked at the repo, I immediately saw the problem. And fixed it, followed by an add, commit, and push.

You can look on the side and see my weather app in the links.  Or you can go here. To see the repo, go here instead.  And  notice the calculator.  It’s a CodePen but that will change before I turn it in.  Probably I’ll write about it Monday.