Lab 4, jQuery and page interaction

In this lab we will work on interacting with a webpage. We will continue using eslint, but will not write automated test for this one. You will instead test things by interacting with the webpage, combined with adding console logs at appropriate places in the code.

At a later lab we will discuss creating automated tests that run on the browser.

Overview

In this lab we build a simple "controller" to manage a task list. We will discuss more about what controllers are at a later time, for now suffices to know that it is the piece of glue that connects your UI to the application logic. What happens when a button is clicked, what happens when a task is double-clicked etc.

Here is a list of the files you will want to look at:

controller.js

This is the main file containing all your code. For most of the lab you will edit this file.

You will need to do a linting of it first, but we will get to those steps in a minute.

tests.html

This is the page you will need to open when you want to test if your code is working. Do NOT edit this file.

ourModifications.css

A part of the lab will ask you to edit this file to add CSS specifications for the look of our task list.

sample.html

This file contains a brief task list. Use it to:

1. find out what kind of code your controller will need to be inserting into the "ul" element that is meant to contain the task list.
2. see the effects of your CSS modifications. Typically you would edit the CSS file, save it, then reload this sample.html file on the browser.

This assignment has two parts:

1. Working on the Javascript code in controller.js along with tests.html.
2. Working on the CSS to make the page look nicer, in ourModifications.css together with sample.html.

You can do these steps in either order.

Details on Javascript code

We will now go into some more detail regarding the contents of controller.js.

The main function in the file is makeController. It takes as arguments a "ul" element. It is in charge of managing the contents of the "ul" element and maintaining there a list of "list elements", one for each string in an array tasks that it maintains at the same time.

The function makeController extends to almost the end of the file. After it, we use jQuery's $(f) form to have a function execute when the document page is ready. In it we use makeController to bind a controller to the "ul" element in the web page. You do not need to do anything with this function.

We will now look at the innards of makeController.

• Sets "el" to a jQuery wrapper of the element
• Initializes a variable tasks to an empty array, to hold the task strings
• Runs the function addAddButton that is meant to add an "add new task" button to the UI. You will need to write this function in a moment.
• Runs the bindEvents function that binds specific functions to handle UI events. This function is provided for you, do not change it.
• After that there is a series of functions you will need to implement, and we will discuss them a bit more in a minute.
• Near the end of the file you will find the bindEvents function as well as the return value of makeController, which isn't really used anywhere at the moment. You should look at the bindEvents function and make sure you understand what is bound to what.

Now we will discuss the functions you will need to implement, and in the order that you would probably want to implement them. Each of the functions has a lengthy comment description right above it, telling you what needs to happen in the function. The following descriptions are just brief explanations.

• addAddButton: This function creates a new button, places it after "el" element, and binds it to call the addNewTask function when clicked.

• newTaskHTML: This inner function takes a string that is meant to be the new task, and then wraps it in a span inside an li, and with a remove button next, as shown in sample.html. It simply returns the string of the HTML, it does not try to add it to the page. Works in conjuction with the next function. In order to test this method, console.log a call of it from within addNewTask.

• addNewTask: This function triggers when the Add button is pressed. Start by putting a console.log in it and what it trigger when you press the Add button on the web page. It creates a new default string, pushes it into the tasks array, then creates and adds the appropriate HTML to the page.

• getLi: A helper function. Given an event, it finds the "li" item that contains the target of that event. So if someone clicks on the "remove" button, this function will return to us the list item containing that button. In order to test this method, console.log a call of it from within removeElement.

• getIndex: A helper function. Given a "li" element, it finds what its index is among its siblings (in order to know what element in the tasks array it corresponds to). In order to test this method, console.log a call of it from within removeElement.

• removeElement: Triggers in reaction to clicking one of the "remove" buttons. Uses the two previous methods to find which "li" it corresponds to and what the index of that li is, then removes both the li and the corresponding string from the tasks array.

• editElement: Triggers in response to a double-click on a list item. It needs to get hold of the list item, then call enableEditMode. Test it together with enableEditMode.

• enableEditMode: It turns the current list item into "edit mode". In edit mode an "input" text element is inserted, while the other contents of "li" receive a class of "hidden", which together with our CSS specifications makes them invisible.

• checkForCancel: Monitors keydown events in the text input, and if it registers an "Escape" it disables edit mode without changing the item. Test it together with disableEditMode.

• disableEditMode: Returns the current list item to its normal state. That means removing the added input text element, and removing the class of "hidden" from the remaining children of the list element.

• commitEditing: Triggers in response to exiting the edit element. This is meant to read the value from the input text field, use it to update the appropriate content of the tasks array as well as the span element, then disable edit mode.

  One complication however arises from the fact that this function will be called even in the case of an "Escape" being pressed. In that case, checkForCancel has already ran and the input text element has already been removed from the list item, and in any case you are not meant to use the values of it to change anything. So in this method you will need to do nothing in the event that the target element is no longer there, or no longer inside an appropriate li.

Details on the CSS tasks

For this part of the lab, you should have sample.html open in the browser, and you should be editing ourModifications.css. We have provided all the "selectors" you will need, you will just need to fill in the rules as per the instructions. You will need to consult the CSS reference along the way.

A lot of these ask you to set colors. You can use any number of color pickers that are available online.

1. There is a rule that catches the element with id of main. In that rule you will need to:
   • set the margins to be 20% on left/right and 10% on top/bottom.
   • set a border of 1px thickness, solid, and with a color in the gray area, perhaps "#DDD" (look in the syntax area on this link for different color specification formats).
   • add a padding of 2 ems on all sides.
2. There is a level 3 heading rule. In it you will need to:
   • set it to align the text to "center".
   • set its font size to 200%.
   • put a border at its bottom, dotted, 2px, and of some gray-ish color.
3. There is a rule for list items that are inside of the element with id main. In that rule:
   • set the font size to 115%.
   • add padding of 0.2em all around.
   • instruct it to not use the bullet on the left (list-style-type is the relevant argument).
   • Set its width to 100%.
   • Add a 3px margin at top and bottom, and 0 left-right
   • Add a 2px solid black border.
   • Add a 10px border radius. You should get a nice rounded corners effect.
4. There is a rule that catches the items with a class of "remove" that are within a list item. In that rule:
   • set the element to float to the right.
   • set its line height property to 0.9 ems. This should make it a bit more centered vertically.
5. There is a rule that matches the list items when one hovers over them with the mouse. In that rule:
   • set the background color to be a light ciel, maybe something like "#AEE".
6. There is a rule targeting the "ul" element that is the list. In that rule:
   • set the padding equal to 0 to reset one of the browser defaults.
7. There is a rule targeting an element with class "edit". In that rule:
   • set the width of the element to 100%.
8. There are two rules targetting buttons, one targetting them when you hover.
   • In the rule that holds always, set a 2px solid black border, and a background color of your choosing. Also give them a 10px border radius.
   • In the rule that holds on hover, choose a different background color, and also change the color of the border.