Let’s use what we learned in class and the article JavaScript and jQuery by making some minor modifications in a simple web page.

Objectives

1. Create a simple, interactive web site using event listeners and DOM manipulation
2. Use a JavaScript loop
3. Use attribute selectors in jQuery calls
4. Review basic git and github use
5. Publish the site using github pages

Things to do

Part 0 - set up the assignment

Steps

1. Make a repository and establish a remote on github.com. This should be review
2. Create a gh-pages branch both locally and on github.com to set up web hosting
3. Work on the master branch unless you are deploying via the gh-pages branch
4. Copy the contents of this gist to a file named index.html in your repo
5. Add, commit, and push your file to github.com

This template contains lots of comments, some pre-existing code, and places for you to answer questions and create new code.

Part 1 - take the quiz

Steps

1. Read all the code and the comments. Take your time.
2. Answer the quiz questions by updating the file.
3. Test, add, commit, and push your code on master
4. Merge your code to gh-pages and push to deploy your site.

Part 2 - update event listener

Make the last few changes to create the “Run Script” event listener

Steps

1. Replace the alert() function with the given loop_and_display() function in the “Run Script” button event listener
2. Test, add, commit, and push your code on master
3. Merge your code to gh-pages and push to deploy your site.

Part 3 - create event listener

Create a new event listener for the “Clear” button,

Steps

1. Use an attribute selector like the first event listener, but select the “Clear” button
2. Remove the “selected” class when the click event happens
3. Replace the html in the #output_area div with a paragraph containing the text, “Click the Run Script button.”
4. Test, add, commit, and push your code on master
5. Merge your code to gh-pages and push to deploy your site.

Here’s some code for an event listener that does something similar. You’ll have to adapt it by replacing stuff. You can’t use it the way it is.

$('input[type="button" ]').click( function(){
  console.log('Caught a button click event.');
  $("#some_div").removeClass( 'some_class' );
  $("#some_div").html( "<p>Some text.</p>");
});

Part 4 - convert while loop to for loop

This part is “extra credit”. Only do this if you have time.

The while loop is a good place to start learning loops because it’s easy to see what’s happening.

var count = 0;
while (count<10) {
  // do something;
  count++;
}

These kind of counting loops are so common, there’s a more compact way to do them. It’s called the “for loop.”

Steps

1. Research the for loop at w3schools and MDN
2. Convert the while() loop to a for() loop in the loop_and_display() function.
3. Test, add, commit, and push your code on master
4. Merge your code to gh-pages and push to deploy your site.