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.

The form contains three input tags (which will be text boxes), and three label tags for each of the inputs. Each of the inputs has a placeholder attribute. This placeholder will appear until the user begins typing into the text box. The final item of the form is the button that the user will use to submit the form. We set the button onclick attribute to a function call. Right now it won’t do anything, but this is how we will later tie the button to our JavaScript. Underneath the closing form tag is an empty table tag with the id of output. We create the table tag here so that we can dynamically add rows and columns to the table with the JavaScript that we will write next week.

So, now you have a feel for writing an HTML document in VS Code. I encourage you to mess around in the editor to get a feel for how it works. There are also some good videos and tutorials online for beginning work in VS Code. Next week, we will start writing all the JavaScript code that will execute upon our button being clicked. Please comment below with any questions, and remember to share this post on your favorite social media platform by clicking the buttons below. Stay tuned for more great tutorials here on Programming from Zero.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s