Formatting the Running Log - Exercise

Contact Us or call 1-877-932-8228
Formatting the Running Log - Exercise

Formatting the Running Log

Duration: 15 to 25 minutes.

In this exercise, you will change the running log so that it displays the entries in an HTML table.

  1. Open ListsAndArrays/Exercises/RunningLog.cfm in your editor.
  2. Before the loop that is used to display the entries, begin an HTML table and add a header row that contains the following table headers: Date, Distance, Time, and Comments.
  3. Write code that will create a table row. Use <cfloop> to output the table data cells.
  4. Close the HTML table.

Write code so that the resulting table's table rows have alternate colors as in the following diagram.

Note that, if you use hexadecimal color values, you may need to escape the pound sign in locations in which ColdFusion will interpret it as the beginning of an expression to be evaluated. The escape character is another pound sign. For example, the following code properly sets a variable called bgcolor.

<cfset bgcolor="##ff0000">

Solution:

ListsAndArrays/Solutions/RunningLog.cfm
<html>
<head>
  <title>Running Log</title>
</head>
<body>
<h1>Running Log</h1>
<a href="AddEntry.cfm">Add Entry</a><hr/>
<cfset RunningLogPath = ExpandPath("Logs/RunningLog.txt")>
<cfset CrLf = chr(10) & chr(13)>
<cfif FileExists(RunningLogPath)>
	<cffile action="read" file="#RunningLogPath#" variable="myfile">
	<table border="1">
	<tr>
		<th>Date</th>
		<th>Distance</th>
		<th>Time</th>
		<th>Comments</th>
	</tr>
	<cfloop list="#myfile#" index="run" delimiters="#CrLf#">
		<cfoutput>
			<tr>
			<cfloop list="#run#" index="col" delimiters="#chr(9)#">
				<td>#col#</td>
			</cfloop>
			</tr>
		</cfoutput>
	</cfloop>
	</table>
<cfelse>
	You have apparently never been running.
</cfif>

</body>
</html>

Challenge Solution:

ListsAndArrays/Solutions/RunningLog-challenge.cfm
<html>
<head>
  <title>Running Log</title>
  <style type="text/css">
  	.grayBg {background-color:#cccccc; font-style:italic;}
	.whiteBg {background-color:#ffffff; font-weight:bold}
  </style>
</head>
<body>
<h1>Running Log</h1>
<a href="AddEntry.cfm">Add Entry</a><hr/>
<cfset RunningLogPath = ExpandPath("Logs/RunningLog.txt")>
<cfset CrLf = chr(10) & chr(13)>
<cfif FileExists(RunningLogPath)>
	<cffile action="read" file="#RunningLogPath#" variable="myfile">
	<table border="1" bgcolor="#ccccff">
	<tr>
		<th>Date</th>
		<th>Distance</th>
		<th>Time</th>
		<th>Comments</th>
	</tr>
	<cfloop list="#myfile#" index="run" delimiters="#CrLf#">
		<cfif NOT isDefined("bg") OR bg EQ "grayBg">
			<cfset bg="whiteBg">
		<cfelse>
			<cfset bg="grayBg">
		</cfif>
	
		<cfoutput>
			<tr class="#bg#">
			<cfloop list="#run#" index="col" delimiters="#chr(9)#">
				<td>#col#</td>
			</cfloop>
			</tr>
		</cfoutput>
	</cfloop>
	</table>
<cfelse>
	You have apparently never been running.
</cfif>

</body>
</html>
Next