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.

calculator: the chain gang

Let me be blunt.  The calculator is not a difficult project once you’re aware of the eval() function that takes a string and treats it as an arithmetic expression and evaluates it. If I knew the name of the person who mentioned it, I’d share.  The trouble is, it was a toss-off comment in a reply to someone else and I happened to be paying attention.  For the record, attention is good.

I hang out in the gitter FreeCodeCamp room quite often and this sort of thing is there, going on all the time.  Someone posts a problem, whether it’s with a challenge (“how do I nest my image element in an anchor tag?”), an algorithm (“can someone check my Roman number code?”) or a project (“my Twitch viewer shows the same channel eight times instead of showing the eight channels from my array”) and others offer help. Usually, the problem is spotted and resolved (often the person posting sees the issue as soon as they shared it). Someone else’s calculator issue was solved by eval() and I was watching.  This was back when I was doing random quotes or something.

The difficult part of the calculator for me was how do I make something that looks like a calculator in HTML and CSS. The answer is by looking at someone else’s calculator.  Google Images to the rescue.  I found the OSX calculator icon. It has buttons on it for Clear and ± and memory management stuff in the top row that I don’t need. So if I delete the top row, I have a basic idea of what a calculator should have. If you look at it side-by-side with my calculator, you can see how it was inspired by this one. My phone calculator looks like someone was too lazy to bother making it look like it wasn’t an app on a phone. So using that as a guide would have given me something really ugly and not like the project was looking for.
OSX calculator icon phone calcmy calc

The colors for my calculator are courtesy of Computer Hopes HTML Color Codes & Names page.  I found the red for that button as a trinary color for the blue of the other buttons. You can find trinary colors by typing or pasting the hex code for a color in the box at the top. I got the display box color by sampling the color from the OSX calculator and averaging it. It took a bit of trial-and-error to get good button colors with my faceplate color.

But that’s only part of it, there are also fonts. For the display, I wanted a font with something in the zero.  A slash or dot or something. But not for the buttons. Zero on a button should look empty and the C should look reasonable.  So I hit up Google Fonts.  I specifically typed in the digits and the key signs (so I could see what the keys would look like) and told it to make that be the sample for all of the fonts.  Then I said I only wanted monospace fonts. And alphabetical because I was looking for specific things, not popularity. The fonts I chose were Abel for the the keys and Allerta for the display. I liked the look of the C in Abel and the fact the 4 was closed.

So, on to making it function.  I’m sure there’s a better way—there always is—but what I did was made a click event for each button and then handled it. For the digits, it was easy—check if the the entry was zero—if it was, replace it with the number, otherwise, add the digit to the string for the current number.  Decimal point was tough—you can only have one per number.  And signs meant I had to peel off the current number and make a new one.  And then the equals meant, run eval().  Okay, that all worked so I took it to gitter.

And someone said it didn’t “chain”.  Now, I could type 2+5*4  and press the equal sign and get 22 so I knew it worked.  But that wasn’t what they meant.  They meant, if I pressed equals again, it should repeat the last operation so I should get 88 (22 * 4) the next time, and so on.  While I was fixing it, we got into a side conversation about how I don’t generally use a calculator so I was unaware of that expected behavior.  Then, right when I had typed “try it now” they typed, “don’t worry about it, mine doesn’t do that, either,” and I had to laugh because, well, mine does it.

Here’s how.  I’m already keeping the current number separate from the rest of the current expression.  I have to so I can use the ± on it.  So what I need to do is grab the last operator from the string (it will be the last character) and combine them and put that in the chain:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#eqButton").on("click", function(){
if(curNum != ""){
// if the expression isn't empty, evaluate it
curResult = eval(curExp + curNum);
if(curResult === 3/0){
curResult = "0 Divide Error";
}
chain = curExp.substr(curExp.length-1) + curNum;
curExp += curNum;
oldExp = curExp;
}
else{
// they pressed = again
curResult = eval(oldExp += chain);
}
curNum = "";
dispResult();
curExp = "";
dispCurExp();
});

It’s still on CodePen but will be moved to GitHub before I turn it in.  The links on the right will always be current.

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.