Homework Two

Primary Objectives:

  1. Learn Javascript
  2. Learn jQuery
  3. Understand the DOM and how to select and modify it
  4. Learn how to create HTML forms
  5. Learn how to respond to events
  6. Demonstrate using feature branches in Git: branch, checkout, merge

Overall Requirements Summary:

  • HTML, CSS (with Bootstrap), Javascript and jQuery only -- no backend
  • Includes multiple form elements of different types
  • In response to user input and action (clicking on a button, selecting a radio button, ...):
    • Use jQuery to modify one or more elements on a page
    • Use jQuery to add new elements to the page, one of which must be a list or table with multiple child elements
  • Do something useful or interesting
  • Use one Git feature branch for all work, merging it back into master when all finished. Be able to see your branch in the commit history of your repo.

"As a software engineering student I want a dynamic webpage that does something useful so I can show off my Javascript and jQuery skills. Specifically, I want a nice looking webpage that uses text inputs, radio buttons, drop-downs, or whatever to take information from the user, do some calculations with Javascript and return the answer to the user by modifying and adding to what's on the page."

Questions/Tasks:

  1. [Setup] Create a new folder in your Git repository, preferably named HW2. Create a new feature branch for your work on this homework, check it out and proceed. Create an index.html and stylesheet (e.g. styles.css) directly in that folder. Write your CSS in this stylesheet file. You can write the Javascript directly in the html file if you want.

  2. [Planning & Design] Think for a bit about what you'd like to do. You need to take input from the user, do some calculation and then provide the output/answer back to the user by modifying elements on the page and adding new elements.

    Here's an example that is too easy: a page that lets the user convert a temperature in Celsius to Fahrenheit. In this example you'd need a text input for the Celsius temperature, a "Convert" button and a location for the output like a paragraph element with "Answer: " text. When the button is pressed, your Javascript callback function is executed which uses jQuery to retrieve the temperature, plain Javascript to calculate the correct temperature in Fahrenheit and then jQuery to change the text in that paragraph element.

    This example, however, isn't good enough because it only uses two form elements and doesn't create a list or table element. (There's another example linked from the main class page that is a little closer. It generates a table but only uses one input element, doesn't use Bootstrap and can be broken -- try a date that is clearly out of range.)

    Do something fun, not too complicated, and interesting.

  3. [Planning & Design] Create a wireframe or sketch of your page to help you with the design. A good idea is to overlay it with the rows and columns of your selected Bootstrap grid, and plan for how it will look when the page is resized. Label it with with the container, row, and column classed elements to visualize your layout. (Remember that you can open a Bootstrap page, like this one, in a browser and visualize the HTML elements and styling with the inspector from the developer's tools, as shown in class.)
  4. [Content/Coding] Create your working page, remembering to style it nicely and to use Bootstrap for your layout. As with HW 1, you'll need a minimum of 2 files: index.html and styles.css plus a *.js file if you feel like putting your javascript in a separate file also.

  5. [Test] Commit and push your work frequently on your feature branch but don't merge until you are happy with it and have tested it thoroughly. For example, it should not fail if you're expecting a number and the user types in an arbitrary string. A feature branch should continue until the feature is finished and tested before merging into any main release branch.

    To make sure your feature branch shows up in the commit history, at some point make sure to put at least one commit on master before merging. The actual work in the commit doesn't matter; you could just edit the README. This will advance that branch past the branching point and will leave it nicely visible.

  6. [Turn It In] Finally, merge your feature branch back into master and push to your remote repository.
  7. [Portfolio Content] Everything goes into your Portfolio: writeup of important HTML + CSS + Javascript (especially the JS since that's what this is about), css, nicely commented of course, a screenshot of the rendered webpage, your wireframe, link to the working page and any notes you've generated. (You are keeping notes of what you're learning, right?)

Important

Now is the time to learn the correct workflow using Git. Don't execute Git commands without thinking about them. When you're just starting out it is very easy to get things into an unpleasant state. As long as you correctly added and committed your work in the past it is always possible to fix it. I'm just suggesting to go slow and double check your commands before hitting enter.

We're requiring you to use Git from the command line for a reason. By typing in the raw commands yourself you're learning exactly what you're asking Git to do. If you use Git from a GUI then you're just clicking buttons and don't really know what's going on.