Curate, Don't Only Consume
Tags: beginners, javascript
Published: 2019-09-17 17:56:26

## A Penny A Day For 30 Days, Doubled Every Day

Everyone has heard the little math equation about a penny a day, doubling it every day for thirty days, and coming up with an astronomical total. Unfortunately, there are quite a number of varying totals to this equation, depending on who's methods you use to arrive at the answer. Have no fear! In this article, I am going to teach you how to write a simple computer program that will do the math for you, so that you can be on your way to vast riches using only a whole lot of pennies!

## Required Tools:
- Internet access
- A computer / tablet / phone / laptop, etc
- Virtual pennies (because we don't have enough real ones!)

Ready to get virtual-rich? Great, let's go!

## Step One: PlayCode's Website
A computer program is a set of instructions that a machine can follow to solve a problem. The problem we want solved is to know how much money we would end up with at the end of 30 days, if we were paid a penny per day, but it doubled every day. We could do this with a pencil and paper, or a calculator. That'd take way too long, so let's just have a computer to do it for us.

Head over to [PlayCode](https://playcode.io), and start a new project. We're going to use JavaScript as our programming language, so anyone with Internet access can view our program's results. PlayCode is a website that allows anyone to write different types of computer programs and test them immediately. We're going to use the PlayCode default language, which is JavaScript.

## Step Two: Start Fresh
When you get to PlayCode's website, highlight and delete the pre-generated code. (The code is on the numbered lines, starting with 1, and counting.) Now that we have a blank code screen, we are ready to type the JavaScript commands to tally our 30 day salary. Don't worry: writing code is not nearly as complicated as most people think.

## Step Three: Purpose Of The Code
When writing code, it's very important that you leave comments throughout. The comments will explain your code's purpose and help other people to understand what your code is doing. At the top of the code screen, let's start by typing two forward slashes, like this:  //

The two forward slashes tell the computer to ignore everything else on that line. This is where we put a comment that explains the purpose of the code below. So, let's write a comment! On line one, enter your comment just after the two slashes. Your line should look something like this:

// Calculate the total of a penny a day, doubled every day, for 30 days

Great start! Now that we know what we want our program to do, let's write the actual code that will do it.

## Step Four: Defining Variables
In pretty much every programming language, you'll run across variables. As a matter of fact, if you've done any type of algebra, you're already familiar with them. A variable is simply a place-holder (think of it as a nickname) for a piece of data. For our project, we're going to need three variables: a number (pay amount), a string (the text to display on the screen), and a counter (used to loop through all thirty days).

Let's start by telling JavaScript that we want a variable to hold our pay amount. We'll call this variable "amount" to make it easy to remember. So, on a blank line in your code editor, type this:

~~~
var amount = .01;  // pay amount
~~~

You've now written your first line of computer code! Congratulations, developer! Let's break this line down and see what we've accomplished.

First, I told the computer that I wanted to create a variable (var) named amount, and set the default value (using the equals sign) to .01

After that, I ended my code statement with a semicolon. A lot of computer programs use semicolons to inform the computer that you're finished with that code block, and JavaScript is one of them. We are done with that line, so we put the semicolon at the end. Next, I added an inline comment (// pay amount) to help me remember what data the variable is holding. Easy!

Next, we need to define our second variable that will hold text data. Let's keep it simple and name this variable txt. Type the following line on the next blank line in the code editor:

~~~
var txt = ""; // holds text to print to the screen
~~~

Same as before, we define a variable, assign it a value (in this case, it's called an __empty string__ because there's nothing inside the quotes). We will assign the value to this variable later. As you'll see, variables are incredibly useful when writing computer code.

## Step Five: Write To The Screen
As we said above, a computer program should solve a problem using simple steps to achieve the result. So far, we have declared two variables: amount, and txt. Let's type the next two lines into the code editor, then go over them:

~~~
txt = "Day 1: $" + amount;
console.log(txt);  // print our day one salary
~~~

The first line assigns a value to our empty string variable, txt. This line looks a bit confusing, so let's go over it. First, our variable name is txt, and it's currently empty, so we're going to put some data in it. Start by entering the variable name (txt) and an equals sign, followed by the data you want stored in the txt variable. We have assigned txt to have this data:

Day 1: $.01

If you look at the code, that is clearly not what we typed. What we have done here is called concatenation. That's a complicated word that means "put these things together." Here's what we have done:  txt = "Day 1" then we added a plus sign (+) to join the next part of our data to the first part. We have another plus sign, then the variable that holds the current amount of our salary, which we defined above as .01

So, our txt variable now contains some text and the data stored in our first variable! How cool is that?

The next line tells the computer that you want to write the data contained in "txt" variable to the screen:

~~~
console.log(txt);
~~~

We're finally seeing something actually happen! Our screen should now display "Day 1: $01" on it, without the quotes. This is exciting, so let's move on and automate this process for the remaining days.

## Step Six: Loop Through The 30 Days
Here's where things get really fun! Let's tell the computer to count up to 30, and each time it counts, to double the "amount" variable, then print it to the screen. Sound complicated? It isn't. Here's how:

~~~
for (i = 2; i < 31; i++)
{
    amount = (2 * amount);  // take our previous amount and double it
    txt = "Day " + i + ": $" + Number(amount).toLocaleString();  // print and format the current day and amount
    console.log(txt);  // write the current day and amount to the screen
}
~~~

Wow, that does look complicated! Let's go through this and see what's happening.

First, we tell the computer that we want it to count from 2 to 30. We do this by using a For-Loop. A for-loop is a fast and easy way to tell the computer to do something x amount of times. The first line of code in this code-block is:

~~~
for (i = 2; i < 31; i++)
~~~

There's kind of a lot going on here, so let's check it out, going from left to right.

First, we tell the computer that we want to use a For-Loop. We start by typing "for" on a blank code line, then a set of parenthesis. Inside the parenthesis, we are going to teach the computer how to count. The first part inside the parenthesis is a variable called i, with a default starting value of 2. This is very similar to our "amount" variable above. We made a variable (i) and assigned it a value of 2, then we put the semicolon because we're one with that piece of code.

Next, we tell the computer to look at the value of i, and make sure it's less than 31. We do this because we want the computer to count up to 30. We want the number 30 to be included, so we are telling the computer this:  "i = 2; if i is less than 31, add 1 to it."  We add one to it using the third part of the statement:  i++. This satement takes the current value of i, and adds 1, thus making the value of i increase by 1. An easier way to understand is this:  i++ is the same as i = i + 1. It's just a faster way to write the code.

So why did we say if i is less than 31, when we want to count only to 30? Great question! The answer is simple: in our code, we are saying: "Hey computer, if i is less than 31, add 1 to the total, but if i is not less than 31, don't add anything else." So, if i = 30 or less, the code below that line executes; otherwise, it will not execute. If it's LESS THAN 31, execute the next code block; if it's 31 OR MORE, don't execute the next code block.

Great! So what's the next code block?

## Step Seven: Print The Current Day and Amount
When using a For-Loop, if the evaluation is true (for isntance, if i is less than 31), the code block directly beneath the for-loop will execute. This code block is wrapped in brackets. This tells the computer that all of this code should be executed or evaluated together. Each time the variable i is increased, the code block below the for-loop is executed.

So, go to the line just below the for-loop, and type this code block:
~~~
{
    amount = (2 * amount);
    txt = "Day " + i + ": $" + Number(amount).toLocaleString();
    console.log(txt);
}
~~~

Wow, that's the biggest code block we've typed yet. Let's go over it and see what's happening. Don't worry, this is all of the code we need to solve our math problem.

Inside the brackets, we have our variable (amount). We tell the computer to take the value of amount and make it equal to two times it's current value. Simple! 

~~~
amount = (2 * amount);
~~~ 

To keep the code easy to read and understand, I have enclosed the math in parenthesis. The more you get into programming, you'll soon realize how very useful parenthesis can be when dealing with math equations.

So now, the value of amount is two times what it was before. It was originally set to .01, but we've multiplied it by 2, which gives us a new value for the amount variable. That value is now .02

Now what happens? The next line is executed:
~~~
txt = "Day " + i + ": $" + amount;
~~~

What's this line doing? We are using all three of our variables here to show us the current day of work, and the amount of our pay for that day. Let's break this down further.

We are assigning a new value to the variable txt. First, whatever we want to be printed to the screen exactly as we type it in is put in quotes. So, we have txt = "Day " (notice the space before the closing quotes). Then, we have a plus sign, followed by our "counting to 30 variable", which is the letter i (which we assigned in the for-loop, above). Next, we have another plus sign, then quotes and a colon, followed by a $ sign, and we close the quotes. After the ending quotes, we call the variable that contains the pay rate for that day (which we got from the line above it, being multiplied by two).

The next line simply tells the computer to print the txt variable to the screen, which it does:  Day 2: $.02

The computer will do this until the for-loop variable, i, is no longer less than 31. This will, therefore, give us a list of days and amounts, with the day advancing by 1 (i++), and the amount being doubled every day.

Here is our completed code:

~~~
var amount = .01;
var txt = ""; 

txt = "Day 1" + ": $" + amount;
console.log(txt);

for (i = 2; i < 31; i++)
{
    amount = (2 * amount);
    txt = "Day " + i + ": $" + amount;
    console.log(txt);
}
~~~

And here are the results, which will be printed on the screen when our code runs:

~~~
'Day 1: $0.01'
'Day 2: $0.02'
'Day 3: $0.04'
...
'Day 29: $2684354.56'
'Day 30: $5368709.12'
~~~

Each day's total will be printed. However, that's a little hard to read, so let's add a JavaScript formatting option to our amount. We only need to change one line of code in order for our program to format the amount of eacy day's salary into a more easily readable format.

Change this line:

~~~
txt = "Day " + i + ": $" + amount;
~~~

to this:

~~~
txt = "Day " + i + ": $" + Number(amount).toLocaleString();
~~~

And now, the results are the same, except the amounts are formatted properly to make it easier to read:

~~~
'Day 1: $0.01'
'Day 2: $0.02'
'Day 3: $0.04'
'Day 4: $0.08'
...
'Day 27: $671,088.64'
'Day 28: $1,342,177.28'
'Day 29: $2,684,354.56'
'Day 30: $5,368,709.12'
~~~

How cool is that?

## Wrap-Up

Congratulations, programmer! You've now written a computer program that very quickly solves a math equation that you've probably heard about all your life, but maybe didn't know how to figure without doing a whole lot of math.

Here is my code for this entire project, including comments:

~~~
// Calculate the total per day of earning a penny a day, but
// doubling it every day, for 30 days

// set our variables
var amount = .01;  // starting pay for day 1
var txt = "";  // empty string variable

txt = "Day 1" + ": $" + amount;
console.log(txt);  // print our day one salary

// this for-loop will cycle through all 30 days,
// doubling our amount every day.
for (i = 2; i < 31; i++)
{
    amount = (2 * amount);  // take our previous amount and double it
    txt = "Day " + i + ": $" + Number(amount).toLocaleString();  // print and format the current day and amount
    console.log(txt);  // write the current day and amount to the screen
}
~~~

With this small tutorial, you are now a web curator, and not just a consumer! Why not continue your journey in creating with code by using the free online courses at [Free Code Camp](https://freecodecamp.org)?