Repository: Github

*It was a cold winters day and the stove was emitting the most glorious heat from the combustion of burly chunks of wood...*

**My thoughts...**

The challenge is marked as "Easy" and to be accomplished within a 45 minute window. Could this be done? I believe so. At least the code, but the styling would be left to be desired.

I decided to do both the code and make it look at least a little presentable.

This challenge is amazing and gives you a lot of information in order to accept and conquer the requirements.

- I read through the requirements listed until the brain kicked into gear and put the puzzle pieces together. Starting was the overall plan. "Create a calculator that accepts three inputs and calculates your monthly mortgage payment" Okay, so far understandable... A math equation is given to help solve the calculator, which is "P(r(1+r)^n/((1+r)^n)-1))". "P is the principal loan amount", "r is the monthly interest rate", and "n is the total number of payments on your mortgage". And users will make 12 payments per year and the monthly interest rate is the annual interest rate divided by 12. This was starting to get a little more complicated, but there was a link provided to the standard math equation, which became very helpful to solve the challenge. Also given, was a beautiful image of what the finished product should somewhat resemble, so I could start building out the HTML framework.

These diagrams are very helpful as one can visualize how somethings is meant to work, without needing to ask any further questions.

- I have a basic understanding of what is required, so I start with the HTML framework and build on the basics based on the diagram or image presented, link to the CSS and JavaScript file. Added labels and inputs of type, number, and added min="0", so that no negative numbers could be used. Then added a input of type submit, so that the number inputs could be calculated when the submit is clicked.

```
<div class="container">
<label for="principal">Principal loan amount</label>
<input id="principal" type="number" name="principal" min="0" />
</div>
```

- After getting the framework in place, I worked on a little bit of styling. I know that if this was timed, I would have jumped into figuring out the JavaScript next to get the actual functionality working, but I wanted to first make it a little prettier, since I was doing this for fun.

I changed the font-family to cursive, because that's fun, added a little background color, a little font color. I added the colors as variables in CSS, so that I could easily change them in the future for the whole project if needed. Now that the calculator is worth looking at, I proceed to the JavaScript file to get the functionality working.

- Jumping into JavaScript I pondered what needed to be done. Okay, what happens? Someone inputs the principle loan amount, inputs an interest rate, inputs the length of loan, clicks on the Calculate submit button and the program presents them with the monthly mortgage payment amount.

Okay, so when the submit button is clicked, I need to connect to the DOM and capture the values of these three inputs, calculate the math equation from these inputs, and then present this information as a single number back to the page.

First started out by creating the connections to the DOM for the individual inputs and the placeholder when the final output will be displayed.

Example:

```
const principal = document.getElementById("principal");
```

Now, I know that I need to add an event listener to the submit input, so that when it's clicked, it will do something.

```
submit.addEventListener("click", calculate);
```

I first used the function within the event listener (function(){}), but changed it to call the "calculate" function in case I needed to call the function later on for any reason yet to be known. I'm always thinking about how to make the code more reusable.

I created the calculate() function and think about what needs to be done. From the equation given earlier, I create variables to capture the parts needed for the equation. I name them the same as in the equation to make it simpler on the brain. These can always be refactored to make more sense in the future. The main point is to get it working and then make it better. I always use "const" variables first unless the variable needs to be assigned later one and then I will change the variable to "let".

```
const p = principal.value;
const r = interest.value / 100 / 12;
const n = length.value * 12;
```

From the variables above, I know that the principle value (p) will only be the value entered. The interest rate (r) however, is entered in as a percentage, but needs to be represented as a decimal to be calculated, so we divide that value by 100. We then need it to represent the interest per month, so that value is then divided by 12, meaning the 12 months in the year, to give the interest per month. The length of loan (n) is entered in as years and there are 12 equal payments in a year or 1 payment per month, so we times that value by 12 to get the total amount of payments.

We now can use these variables in the equation to calculate the monthly mortgage amount, which I assigned to the variable "let tot", so we can print that variable out. Looking at the given equation of "P(r(1+r)^n/((1+r)^n)-1))", I was a little lost. I plugged in the variables and couldn't get it to work. I was thinking, why am I squaring and then squaring, and is there an extra parenthesis?

I went to the link of the standard math equation provided and found the answer I was looking for. A simpler equation that my brain could understand. The equation was "((6.5 / 100 / 12) * 200000) / (1 - ((1 + (6.5 / 100 / 12)) ^ (-30 * 12)))". Now we're cooking. I already calculated the variables needed, so I plugged those in and came up with the following:

```
let tot = (r * p) / (1 - (1 + r) ** -n);
tot = Math.floor(tot);
```

I also used the Math.floor() to get the result in a readable fashion to be presented.

Now we are getting what we want, so we can now present that out. I chose to use to .textContent connected to the DOM connecter created earlier and came up with this:

```
const total = document.getElementById("total");
total.textContent = `$${tot}`
```

I LOVE template strings! So awesome!

- Okay, now that we have a number presented out, we are basically done with the basic functionality. I start looking at what else can be done to improve the functionality, input validation, negative numbers, etc. The next piece I added was to only allow the calculation to go though if there were actual values in the input fields. I added:

```
if (principal.value > 0 && interest.value >= 0 && length.value > 0) {}
```

This seemed to do the trick with not presenting the user the "NaN" or "undefined" errors. There was an additional challenge and that was to "Format the monthly payment amount nicely, as pictured" Meaning to add a dollar sign and comma where one is needed. I've already added the dollar sign in the template string, so I'll work on adding a comma.

Knowing that a comma is used when digits are greater than three and every three after that, but how was I going to do that? How, how, how... I didn't know how to loop through the calculated number and add a comma in the third position, so I went the long route. Basically the route that made sense in my mind. Here is the code:

```
const string = tot.toString();
const amountLength = string.length;
if (amountLength < 4) {
total.textContent = `$${string}`;
} else if (amountLength === 4) {
total.textContent = `$${string[0]},${string.slice(-3)}`;
} else if (amountLength === 5) {
total.textContent = `$${string[0]}${string[1]},${string.slice(-3)}`;
} else {
total.textContent = ` Not worth it!`;
}
```

Basically, I need to know how long the calculated monthly payment is and then from there I can break it a part and add a comma where needed. I need to turn the number into a string in order to separate or pull out each digit. I use the toString() method to do this and save it to the const variable of "string". I also create another variable to keep track of the length of the calculated monthly payment. I save that to the const "amountLength" variable. So the first time that a comma is needed is if the calculated monthly payment or amountLength is equal to at least 4. So anything under 4 digits get printed as is to the total.texContent(). Next, if the length of the amountLength of the calculated monthly payment is 4 digits, we print out the first digit. Since it's a string, we can access the digits like an array. We then print a comma, and then slice the last 3 and print out those digits. An example of this output is, "2,108". The next is what to do if the amountLength is 5? We do the same as 4 with printing the first digit, then we print the second digit, print out the comma, and then slice and print out the last 3 digits. For anything greater than 5, I thought I would have a little fun and just print out, "Not worth it!" It's totally worth continuing the calculations, but NOT at all worth having a mortgage payment of above $100,000 a month.

I know there is a lot of refactoring needed, but with my limited knowledge at the moment, I did the best I could. As time goes on, I will continue learning, my skills will improve, and my knowledge will grow.

Thanks for taking the time to read this and happy coding!

]]>```
Subnet Masks: 128 192 224 240 248 252 254 255
Base 2 Math (also block size): 128 64 32 16 8 4 2 1
```

```
Class A (1 126) 255.0.0.0 8 bits for network, 24 bits for host
Class B (128 191) 255.255.0.0 16 bits for network, 16 bits for host
Class C (192 223) 255.255.255.0 24 bits for network, 8 bits for host
Class D (224 239) multicast
Class E (240 255) reserved future, experimental
127.0.0.0 /8 is reserved for loopback addresses
```

-- Non-routable on the internet, need network address translation (NAT) to get to the internet

```
Class A 10.0.0.0 10.255.255.255 /8
Class B 172.16.0.0 172.31.255.255 /12
Class C 192.168.0.0 192.168.255.255 /16
```

- What is the CIDR notation or prefix length, subnet mask, and wildcard mask?
- How many subnets or networks? (Remember classes default subnet mask)
- What is the block size or what is the number that the subnet or network increment by?
- How many usable hosts per subnet or network?
- What subnet or network does this host belong to?
- What is the next network address?
- What is the first usable IP? (valid address range)
- What is the broadcast address?
- What is the last usable IP? (valid address range)

For the

**CIDR notation or prefix length**, convert the subnet mask to binary and count up the number of bits used for the network (1s) and put a slash in front of it. So, the subnet mask of 255.255.240.0 converted to binary is 11111111.11111111.11110000.00000000 and the amount of ones is /20.The

**wildcard mask**is found by flipping the bits (turn 1s into 0s and 0s into 1s). The easy way, is to minus 1 from the block-size (block-size is 16, so 16 -1 = 15 and put that in the third octet). So, a subnet mask of 255.255.240.0 would equal a wildcard mask of 0.0.15.255. The binary way is to take the subnet mask and convert it to binary. So, 255.255.240.0 = 11111111.11111111.11110000.00000000. You would flip the bits and you get 00000000.00000000.00001111.11111111. Convert that back into decimal using the magic numbers and the wildcard mask equals 0.0.15.255To find

**how many subnets or networks**, one would start with the default subnet mask for the number in the first octet. 1 is a Class A address, so its default subnet mask is 255.0.0.0. We then compare 255.0.0.0 with that of the 255.255.240.0 given. 255.0.0.0 = 11111111.00000000.00000000.00000000 255.255.240.0= 11111111.11111111.11110000.00000000 We count up the 1s and there are 12 more 1s than the default subnet mask. We then use the Magic numbers and count over 12 times starting from right to left at the binary number 2 or second digit from the right. 4096 2048 1024 512 256 128 64 32 16 8 4 2. = 4,096 total networks or subnets.**NOTE**If given a 1.1.0.0 network with a /20 or 255.255.240.0. You know that you can only manipulate the third octet. The first and second are already allocated. You put that third octet number into binary and get 11110000, count up the 1s and from right to left using the magic numbers above starting at 2, counting over 4 times and you get 16 (which is also the block size). There are only 16 usable networks with this subnet mask given the network.We look at the subnet mask given for the first number that does not equal 255. So, with 255.255.240.0, we can see that the first octet that is different is the third, which is 240. We look at the magic numbers above and see that under the number 240 is 16. So, the block-size or number that the networks increment in the third octet is 16.

Look at the subnet mask given and count up what bits that are left for hosts. So, 255.255.240.0 = 11111111.11111111.11110000.00000000. There are 12 zeros. The zeros represent hosts. We then use the Magic numbers and count over 12 times starting at 2 from right to left. Remember to minus 2 from the number, because one IP is reserved for the network and one IP is reserved for the broadcast address 4096 2048 1024 512 256 128 64 32 16 8 4 2 1. = 4,096-2 = 4094 total usable hosts per network.

We look at the subnet mask of 255.255.240.0 and find the first octet number that is not 255 and put that into binary. We then find the number in the IP address of 1.1.1.1 that falls into that same octet, which is the third octet and the number is 1. We change that into binary and place it under the 240 and times them together. We then compare the 1s. Since the 1 under the 240 does not fall into direct line with the 1s above it, the network is 0. Place the zero back into the IP address in the third octet and change the octet to the right as a 0, since the network will only increment in the third octet. The network with the given IP address lives on = 1.1.0.0 240 = 11110000 1= 00000001

Knowing that the networks increment by 16, thanks to the steps in #3, we add 16 to the number in the third octet from the answer in #5. Our next network = 1.1.16.0

If our networks increment in the third octet, then we increment the hosts in the fourth octet. So, our first usable host = 1.1.0.1

Knowing the next network in #6, we minus 1 from the next networks third octet and minus 1 from the fourth octet (octets range from 0 to 256). So, 256 -1 equals 255. You can also think of it as a loop or circle. Goes from 0 to 255, then starts over at 0, So 0-1 equals 255 in that loop. This gives us 1.1.15.255 as the broadcast address.

Knowing the broadcast address in #8, the last usable IP is 1 minus the broadcast address. So, we minus 1 from the fourth octet. This gives us 1.1.15.254 as the last usable IP address.

Hopefully this helps You can use these same principles for any IP address and subnet mask given.

]]>