Welcome, welcome! So, hopefully by now you have all completed the CS50 coursework and yearning for some more coding challenges. This tutorial series is designed to pick up where CS50 left off. We will begin by building some applications that people could actually use. Furthermore, we will be building everything from scratch. There is no distribution code for these exercises. Throughout these exercises, I will also challenge you to figure stuff out on your own. After all, as developers we should all be problem solvers. The finished product for these tutorials will be accessible via my GitHub. However, I implore you to figure it out on your own first before looking at my code. This will give you a better understanding of the different approaches people can take when solving a coding problem (instead of just copying and pasting someone else’s work). So, let’s get started.
Today we are going to start building a site that someone could use to generate an amortization table for a loan. The user will be able to enter the loan amount, interest rate, and duration which will allow our code to show them a complete breakdown of all payments for the loan. Before we begin, we must first get everyone on the same text editor. If you are coming from CS50, you may have gotten familiar with using their IDE. Well, in the real world nobody would use that for production. So, in the interest of being “real” we will be using VS Code. VS Code is a free code editor designed by Microsoft with some very powerful and useful features. Before we begin, go ahead and download VS Code to your local machine.
Now, when you have VS Code up and running, we are going to start by writing some simple HTML that we will need for our site. To begin, click File–>Add Folder to Workspace. Choose the location that you wish to save the folder, and name the folder Amortization and click Add. Now, in your VS Code window, you should see Amortization listed under the Workspace pane on the left-hand side. Right Click on Amortization and select New File. Name the new file Amortization.html. VS Code has some built in extensions that allows for intllisense to work correctly. In other words, VS Code now knows that the file is an html document, and will provide some code suggestions as you are typing to make things easier. Notice that your Amortization.html document is empty. Now, you can have VS Code give you a template to start with, but we are going to code the HTML by hand. We are doing this, so that you understand the format of the document.
Below is the HTML that we are going to write into the Amortization.html file. Notice, that the file starts with a tag declaring the document type. This tells the browser that it is going to render and HTML5 document. The next head tag is where we put the title of our page, which shows up on the browser’s tab, and the character set for encoding the HTML. Now, we can start looking at the body of our document. The HTML inside the body tag is what the browser will render to the user. We start by wrapping everything in a div, or division, tag. This tag is not necessarily needed right now, but we will use it to do some styling later on this course. Inside our div tag, is a form tag. This form is how the user is going to submit their loan information. Notice, that the from has an id of loanData. Other tags throughout the document have id’s as well. We will use these id’s later to distinguish tags from one another when styling.