Tuesday, 27 October 2015

Week 13: Final touches

Dynamic h1 tags

I checked that each page had a unique h1 tag and <title> tage for accessibility and SEO.  I then wrote a piece of javascript to dynamically add the Website name and Module to the Working panel H1 tag based on php variables.  I used the same method of converting PHP variables to Javascript as I did for the My restorations page.  See below.




Once this code was successful, I then helped modify it with Rena to amke dynamic 'History' buttons on the page that linked back to the original webpages.  

Minor fixes

  • aligned font awesome icons on login page (user feedback)
  • spell check content

Congratulations

I created a Congratulation modal (initially with a button input) to display a pop-up for when users have validated their errors to 0. I then had to write a bit of javascript to trigger the modal when this happened.  In the cricket.js file, Lyndon had already had a variable 'errornumber' when he wrote the HTML validator API call.  I appended this code to use this variable and add an action that displayed the number of errors and activated the congratulations modal when errors reached 0.  Both of which were tied into validation so were run every time the 'validate' button was clicked.

While adding the error number to the Errors panel, I also added some space to the errors and numbered them.  As the errors were text inside a <textarea> tag, I had to add a hard break in rather than use padding to add space.  Numbering the errors was just a matter of editing Lyndons code to include the index number from the error Array to the text using the 'i' variable:

for (i = 1; i < errorList.length; i++) {
$(errorListContainer).append(i + ". " + errorList[i][0] + " From line " +errorList[i][1] + " Column " +errorList[i][2] + "\n" + "\n");

}

PHP

I also added the PHP variables containing the user details to the Profile page so it now dispalys real data.

<p id="uName">Username: <?php echo $SessionUsername; ?></p>
<p id="uEmail">Email: <?php echo $SessionEmail; ?> </p>


Lots of work this week but almost there.

No comments:

Post a Comment