CSCI E-3 Unit #1 Project

What you're learning:

This project is designed to help you get your development environment for HTML/CSS/Javascript set up, and to demonstrate that you've got the basic set up for modifying and writing code, debugging, and submitting your assignments. By the end of this project, you'll have installed some tools, debugged and fixed some code, and packaged it for handing in. Note: The tasks 1–5 below are completed in the PartA folder; task 6 is completed in the PartB folder.

What you need to do:

1. Examine this package
2. Get a code editor
3. Get Firefox & Firebug
4. Find and fix the bugs
5. Prepare your homework package to submit
6. Convert a JSFiddle example into local code

1. Examine this package

Unzip this package into a folder. Look at its structure—all of the homework projects will be distributed in this way, and it's typical of how the various resources used by a web page are organized.  You'll submit your assignments in a zip file with this exact file/folder structure.

2. Get a code editor

Download a code editor of your choice. Notepad and TextEdit aren't code editors. See the Week 1, Lesson 2 in Canvas and Chapter 3 of the textbook for advice. I'm partial to TextWrangler/BBEdit on the Mac, or Komodo Edit on Mac or Windows, but there are many and it's largely a personal preference.  An IDE is not necessary, and will just complicate things at this point.

3. Make sure you have Firefox & Firebug and can find and open the Chrome Developer Tools

The recommended browser/debug environment for this course is Firefox with the Firebug extension, along with Google Chrome and its built-in tools.   Other browsers have debug tools, too, but there's nothing quite like Firebug.  Download the latest Firefox for your computer and install the Firebug extension (select Add-Ons in Firefox and then search for Firebug). Instructions for this can be found in Week 2 of the course.

Once you have your debugging tools and an editor, you're ready for the next step.

4. Find and fix a bug

If you're not already viewing this file in Firefox, open it in Firefox and open Firebug. Also, open this folder in your Finder or Windows Explorer, and open the PartA/js/project1.js file in your code editor.

In Firebug, look at the different tabs and page elements. You can see everything here: HTML, Javascript, and CSS code. Open the SCRIPT tab and find the javascript file associated with this page. Look at the Network tab and see how every element of this page is listed.

Bug #1 (50 pts)

Click the Click me #1 button on this page. There should have been three alert boxes, one after another, but there's only one! I must have introduced a bug in my code. You're going to fix it.
 


Use FireBug's console to see if there's an error message.  That should help narrow down the problem to the particular section or line of the code.

Look at the code and see if anything looks obviously wrong—misspellings of reserved words or function names, malformed code. You shouldn't need any special knowledge of Javascript to find this one—it should be fairly clear. 

Look at the project1.js in your code editor. Don't worry about the rest of the code—you're not supposed to understand all that just yet (though you will in a few weeks!) Just look for an obvious error near the line that's failing.

Fix it, save it, and reload this page to try again.
You might have to Shift-Reload to be sure the JS file refreshes.

If it's working, you will see three consecutive alert messages in your browser. If you want to run it again, reload the page.

Bug #2 (50pts)

Now let's try another. Let's add three numbers.
Fill in a non-zero integer into each of the three boxes and click the Click Me #2 button.



Does the total look right?  (Hint: it does not!)  Look in the console for an error and you'll notice that nothing is there. This is because the code is typed just fine. There are no errors in the code itself that prevent the browser from executing it. But there's an error in logic—the code I wrote doesn't do what I wanted it to do (which is to add three integers).  Find the problem, fix it, save it, and reload the page to test it.  You might have to Shift-Reload to be sure the JS file refreshes.

5. Prepare PartA of your project by adding your name

Make one more HTML change on this part of your project. This will help us to be sure you're comfortable with HTML, as well as identify your work when we're reviewing and grading this assignment.  Open PartA/project1.html in your editor and add a DIV section near the top (look for the instructions in the comments) with the id attribute equal to "studentname" (not your name, the actual string "studentname"), the class attribute equal to "namedata" (again, not your name, but the literal text "namedata"), and with your name as the contents (yes, here you put your actual name).  Save the file. If you've got it right, the top of your page should have something that looks like this. The styling is being applied by our CSS—if you've got the DIV tag, ID and CLASS assigned correctly, it will have this color, size and background.

6. Convert a JSFiddle example into local code and submit project

In this last problem, you get to show that you understand the way the files in a web application are arranged. In the previous example, you had to unzip a set of HTML, JS and CSS files. That directory structure is how the problem sets in this course will be arranged.

Your assignment is to convert an example on JSFiddle into one that runs locally on your computer, according to the directory structure example we've given you. This is something you'll have to do from time to time. Debugging code inside of JSFiddle can be very difficult, and often you have to copy it down to run locally in order to fix it. Your steps may look something like this:

1. Start with this JSFiddle, which includes HTML, CSS and Javascript.
2. Open the PartB folder from the project folder you unzipped. Inside this folder, create folders called js and css.
3. At the root of this folder, make a file called index.html which contains the HTML from the JSFiddle example.
4. Inside the js folder, make a js file that contains the Javascript from the JSFiddle; and inside the css folder make a css file that contains the CSS from the JSFiddle. You may call these files whatever you want, but be sure they end with the .js and .css extensions.
5. Now you'll need to edit your HTML file. Add the SCRIPT tag that loads your .js file, and add the LINK tag that loads your .css file.
6. Test your html file in the browser and make sure it works and looks the same as the output section of the JSFiddle example.
7. Zip up the whole project folder into a new zip file named "lastname_firstname.projectUnit1a.zip" (you should substitute your own first and last names here!) and submit that as the Unit 1 Project on the class site in Canvas.