├── 1-0 ├── index.html └── script.js ├── 1-1 ├── index.html └── script.js ├── 2-0 ├── index.html └── script.js ├── 2-1 ├── index.html └── script.js ├── 3-0 ├── index.html └── script.js ├── 3-1 ├── index.html └── script.js └── README.md /1-0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |

Javascript Debugging Exercise 1-0

12 |

Find and fix the syntax error.

13 |

When complete, you should get an alert when the page loads.

14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /1-0/script.js: -------------------------------------------------------------------------------- 1 | $(documnt).ready(function { 2 | alert("congratulations, you fixed it!'); 3 | }); -------------------------------------------------------------------------------- /1-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |

Javascript Debugging Exercise 1-1

11 |

Find and fix the include errors.

12 |

When complete, you should get an alert when the page loads and the button below should look like a Boostrap button.

13 | I should look like a Bootstrap Button 14 |
15 |
16 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |

Javascript Debugging Exercise 2-0

12 |

Find and fix the logic errors.

13 |

When complete, you should see a list of news items, with each bringing you to a new page when you click on it.

14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /2-0/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | var data = [ 3 | { 4 | text: 'Overshadowing #UNGA is the big question: Will Obama and Rouhani meet?', 5 | href: 'https://twitter.com/cnnbrk/status/382528782738800641' 6 | }, 7 | { 8 | text: "Marine's family hopes visiting Iranian president will help free their son", 9 | href: 'https://twitter.com/cnnbrk/status/382519683053649920' 10 | }, 11 | { 12 | text: 'Obama addresses United Nations.', 13 | href: 'https://twitter.com/cnnbrk/status/382507500903202817' 14 | }, 15 | { 16 | text: '', 17 | href: 'https://twitter.com/CNNMoney/status/382497891723804672' 18 | }, 19 | { 20 | text: "If you're seeing this as a button, congratulations!", 21 | href: 'http://twitter.com' 22 | } 23 | ]; 24 | for (var i = 0; i

"); 27 | } 28 | } 29 | $("button").click(function() { 30 | if (!this.attr('data-href')) { 31 | document.location = this.attr('data-href'); 32 | } 33 | }); 34 | }); -------------------------------------------------------------------------------- /2-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |

Javascript Debugging Exercise 2-1

12 |

Find and fix the scope errors.

13 |

When complete, you should see a list of words.

14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /2-1/script.js: -------------------------------------------------------------------------------- 1 | $._get = function(url, callback) { 2 | if (!url) return; 3 | callback({ 4 | results: ['Awesomeness', 'Amazing', 'Astounding', 'Congrats, you got it.'] 5 | }) 6 | } 7 | 8 | $(document).ready(function() { 9 | var masterLocation; 10 | var search_term = 'devmountain'; 11 | function setupApi() { 12 | var masterLocation = 'http://devmounta.in?q='+search_term; 13 | $(document).ajaxError(function(e, xhr, settings, thrown) { 14 | console.log("Ajax ERROR", xhr, settings, thrown); 15 | }) 16 | } 17 | setupApi(); 18 | $._get(masterLocation, function(data) { 19 | $.each(data.results, function(index, tweet) { 20 | $('#results').append('

'+this.tweet+'

'); 21 | }); 22 | }); 23 | }); -------------------------------------------------------------------------------- /3-0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |

Javascript Debugging Exercise 3-0

12 |

Find and fix the jQuery errors.

13 |

When complete, you should be able to click each list item and have its number to the right decrease until 0, at which point it disappears.

14 |
15 |
16 |

Click the list items until they reach 0 in number

17 |
    18 |
  • 19 | 4 20 | Cras justo odio 21 |
    • 22 |
  • 23 | 2 24 | Lorem ipsum 25 |
    • 26 |
  • 27 | 6 28 | Live long and prosper 29 |
    • 30 |
31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /3-0/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $('.list-group-items').click(function() { 3 | $(this).find('span', function(span) { 4 | var num = Number($(this).html()); 5 | num--; 6 | if (num <= 0) { 7 | num = ''; 8 | } 9 | $(this).html = num; 10 | }) 11 | }); 12 | }); -------------------------------------------------------------------------------- /3-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |

Javascript Debugging Exercise 3-1

12 |

Find and fix the jQuery errors.

13 |

When complete, you should see the progress bar grow to the end of the width, and then get an alert.

14 |
15 |
16 |
17 |
18 | 40% Complete (success) 19 |
20 |
21 | 24 |
25 |
26 | 27 | -------------------------------------------------------------------------------- /3-1/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | var checkInt = setInterval(function() { 3 | var perc = Number($('#progress-bar').attr('aria-valuenow')); 4 | perc += (100-perc)/2; 5 | if (perc > 99.99) { 6 | clearInterval(checkInt); 7 | $('a.alert').show(); 8 | return; 9 | } 10 | $('.progress-bar').css('width', perc+'%'); 11 | }, 750); 12 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | debugging-exercises 2 | =================== 3 | 4 | Some exercises to practice debugging Javascript using tools such as the Developer Tools Console and breakpoints 5 | 6 | # 1-* 7 | Simple syntax errors, include errors, common mistakes. 8 | # 2-* 9 | Basic logic errors, scope errors. 10 | # 3-* 11 | jQuery focused errors. 12 | 13 | ## Copyright 14 | 15 | © DevMountain LLC, 2016. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content. 16 | --------------------------------------------------------------------------------