Learning something new is always a challenge. When learning Javascript and jQuery I attempted to debug some broken code in order to develop my skills and better my knowledge for future use.

In the first challenge, we had to link jQuery to the html document. I used my knowledge of linking to stylesheets (css) to guess how it would be linked within the code and used Google to search for ‘jQuery’ and went to their website. I decided to use the CDN option. This was hosted externally and I was simply connecting to their server through the code and linking it within my code.

Inserted into bottom of body of index.html:

<script src=”//code.jquery.com/jquery-1.11.3.min.js”></script>)

For the second challenge, I needed to display the target amount for the fundraising page. A varient had already been created (targetAmount), so we used that to target the amount and insert it into the html to display on the page.

An obstacle found was to actually know what order the information needed to be written to work and debug the code. This took a lot of trial and error with swapping parts about to find the correct way. From this challenge I learnt the layout of linking to html and also how to create variants.

I used the following code into the index.js document:

var targetAmount = 200;
jQuery(“b#target”).html(targetAmount);

In order to donate, a user needed to click the submit button for the amount donated to be added to the total. I learnt from this that the ‘$’ sign, It will teach the browser to remember the function.

The problem with the previous line of code (‘$(“button”).on(“click”, donate);’) is that the ‘donate’ did not exist. This needed to be replaced with ‘makeDonation’.

A problem faced in particular with this challenge is that I was unsure of what it would be. One way I debugged sucessfully was to use the console inspect on the browser. This feature allows a user to inspect elements on the page such as the code, sources and run a console. This pointed out errors in the code and gave me an indication as to where the problem was in order to debug.

I used the following code into the index.js document:

$(“button”).on(“click”, makeDonation);

I was also faced with the challenge of fixing some broken code. Using the console technique I learnt previously, the challenge was overcome much easier. The issue was that the ‘getUserAmount’ did not use ‘CamelCaps’ which is a convention within coding/programming. This easy problem affected the outcome drastically and demonstrates the accuracy even with letter casing.

The next challenge was to display the new raised amount on the page. This needed to allow for when a user pressed donate, it added to the existing amount. A problem I found was that the numbers did not add up but moved together. For example if there was already £10 and a user donated £2, it would show up as £102 and not £12.

I assumed that this was a common problem that people faced. I used Google to search for the answer by searching “jQuery adding two values”. The top two links were to a website called Stack Overflow. This is a forum where developers help each other with issues they may have.

The second link had code which i could implement into my document to treat the numbers as values rather than characters and therefore would add together correctly.

When a user made a donation I wanted it to tell the user thank you for donating. To do this I inserted the text into the html document (index.html) and hid the paragraph using css (style.css).

In html I inserted the message “Thank you for your donation” with a class of “user-message” and id of “thank-you”. I then hid it in CSS by targeting the class and displaying it as none.

I targeted the “thank-you” id of the paragraph within the html document. This displayed when the user donated.

Tom.