In the HTML file, add a cell to the end of each row except the header row. In that cell, add a button element with a class done. The text of the button should be Done.

20%

2. In the JavaScript file, modify the event handler for the click event of the Add Appointment button so it adds new appointments that have the same format as the existing appointments you just modified.

30%

3. Add an event handler for the click event of the Done buttons. Be sure to code this event handler so it works for new appointments as well as existing tasks. Clicking Done button should remove the row where this button sits.

50%

You can watch how your solved assignment will look like here:

https://www.useloom.com/share/0e44db5ff1b242938acc7006168f6f14

Add an appointment

Name:

Time:

Place:

Appointment list

NAME	TIME	PLACE
John McLeod	Tue, 22 May, 11:20am	111 Owen Street
Anne Simpson	Wed, 23 May, 4:00pm	21 Hardwood Av

***********************************

$(document).ready(function() {

$("#add").click(function() {

var html = "";

html += "" + $("#name").val() + "" + $("#time").val() + "" + $("#place").val() + "";

$("table").append(html);

$(":text").val("");

}); // end click

}); // end ready

****************************************

CSS CODE

* {

margin: 0;

padding: 0;

}

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 87.5%;

width: 1000px;

margin: 0 auto;

padding: 20px;

border: 3px solid blue;

}

table caption {

font-size: 170%;

margin-bottom: .4em;

}

h2 {

font-size: 140%;

padding: .25em 0 .25em 0;

margin-bottom: .5em;

margin-left: 2em;

}

p {

padding-bottom: .25em;

padding-left: 25px;

}

aside {

float: left;

width: 375px;

}

aside label {

float: left;

width: 4em;

text-align: right;

}

aside input {

margin-left: 1em;

margin-bottom: .5em;

}

#name, #time, #place {

width: 200px;

}

main {

float: left;

width: 370px;

padding-left: 25px;

}

main input {

margin-bottom: .5em;

}

main p {

float: right;

width: 250px;

padding-top: .2em;

padding-left: 1em;

}

aside #add, main input {

padding: .2em;

}

footer {

clear: both;

}

table {

width: 600px;

border: 1px solid #ddd;

}