00:00:00,222 --> 00:00:02,680 BRIAN YU: Finally, the last thing you'll do in this problem is write matrix.html, which will be a way to visualize that 2D list that you created in your edit distance algorithm. Here's what you'll have to do. You'll first, inside of matrix.html, want to create an HTML table which is going to represent in rows and columns the optimal way of getting from the first i characters of the first string to the first j characters of the second string. In particular, because you can use Jinja, you'll have access in matrix.html to string one and string two, as well as matrix, which will be that 2D matrix that you created in your distances function. You'll want one row in your table for each of the characters in string one, including zero, and you also want one column for each character in string two, including zero. Then inside of that two by two grid, you'll want to fill in the cells with the edit distance, just a number for how many steps it would take in order to convert from one to the other. And in particular, make sure to fill in that cell with only the number, not the action that you would need to take in order to get there. You can take a look at Jinja2 loops, which may prove useful to you as you think about how to go about producing a table like this. So what do HTML tables actually look like? Well, tables are generally wrapped in table HTML tags and angled brackets. And inside of a table might be thead for the header of the table, just the labels on top of each column. And then tbody for the actual contents of the table. Inside of tbody or thead, you might have some number of tr's which stand for table rows, that represent a row of your table. And inside of that, you might have a td for table data, or a cell inside of that table that's going to represent a particular column that maps to a particular row. Td is generally used in order to create a cell in a table. If that cell is a header cell, generally we'll use th as a tag for creating a table header. Ultimately you want to nest these within each other with td's inside of tr's inside of tbody inside of table, in order to generate a table that will display all of the edit distance information that was originally encoded in your two by two matrix, so that you can visualize it when you see it on the web.