Landing : Athabascau University

Unit 5: Writing Javascript

Now that I’m adding further code, I’m finding my initial work messy. I finally decided to move script shared between pages to an external file (shared.js) in the folder scripts. I also cleaned up function variables a little since variables declared in a function are local. For example, the variable i” can be reused over and over without interfering with other functions. I also looked for repetitive code and implemented a common function or iteration that can be used by multiple functions.  

 

I had to do tons of trial and error, but I did not let that get to me. Eventually, I found a solution to each problem.  

 

I started with the dropdown menu and the collapsible sections of the page. This functionality is mostly for those using mobile devices in my plan: Jessica, Jimmy, and Robert. It mostly went according to my plan and design. I had a hard time find a reliable way to measure the width of the buttons and their container. I learnt the hard way that scrollWidth only works in the Chrome browser with CSS Display as Block or Inline-Block. It was hard to find why it worked in one browser but not another. I also realize that a made everything as an iteration instead of a recursion. Next time, I will think twice about this and choose which method fits best each scenario. 

 

I then tried work on form validation for feedback which is a requirement in my plan. I came across many issues and limitations trying to do this with only JavaScript. Using JavaScript for form validation worked very well. However, submitting an email using browser side JavaScript proved to be difficult. I then tried to submit using JavaScript and php  sendmail, but this did not appear to work on the AthabascaU student server. I thought that completing a form and submitting using mailto which pops up a local email client would be inefficient and annoying for a user who could have simply completed an email themselves in their preferred client from the start. Therefore, I opted to create a JavaScript button which obfuscates my email address. Hopefully, it will work well enough to evade most basic web crawlers. 

 

Finally, I created an app to find snowboards within a list based on user selected criteria. The app was created for Ester and Jimmy who are looking to buy gear. This task also proved a little harder than I expected using only JavaScript. Ideally, I think I would use a JavaScript library or framework with a server-side SQL database. I did depart from my plan as I learned how to accomplish what I wanted to do. I decided to use JSON instead of XML. JSON seemed simpler for me and easier to read. It was also easy to create a JSON file from an Excel sheet using the following tool: http://beautifytools.com/excel-to-json-converter.php. I would love to receive feedback. Any kind of simplification for efficiency would be appreciated.  

 

I put a few if statements at the beginning of the finder.js code to escape the function if certain conditions were met (reset button or an error). I tried my best to cleanly write if statements with multiple conditions as a block (with descriptive comments) where possible instead of having multiple nested if statements which are hard to read.  

 

I would really appreciate receiving feedback on this assignment. 

 

You can view my Unit 5 Assignment here: http://student.athabascau.ca/~michelde10/unit5/ 

 

Unit 5 File Submission