I used the sources option on the Chrome dev tools to look at the value of a variable by highlighting it, selecting breakpoints. We can write in the word debugger at various points, which will set a breakpoint if the developer tools are open.
We must remove all debugger code before a page goes live. We can insert debugger code into conditional statements, so the debugger only stops at that section if the condition is met.
Now I'm on page 490, learning about content panels.
Page 494 shows how to make an accordion panel. This will help me with the Pomodoro Clock, as far as giving an id to the button I will use to being the timer, and using:
.on('click', function() {
the timer function;
}
);
Something like that, to start the timer, and then something similar to stop it, or a method within the same function that stops and the timer when the user clicks on the button again.
There's a JavaScript function called clearTimeout() which takes one parameter, the variable used to identify the timer. I'm thinking I can use this to reset the timer for the Pomodoro Clock, assuming the timer that this function is tied to can be shown on the page. Hey, I've got a lead to follow up on tomorrow, so that's great!
There's another JavaScript function, called setTimeout() which executes a function after a number of milliseconds. If I can set the timeout to 25 minutes, and then another to 5 minutes, then have these countdowns shown on the page, I can then use clearTimeout(), linked to a button, to reset the time to zero, and if I click on the button again, to start the countdown again. Something along those lines may work.
I'm on page 544, learning about filtering, searching, and sorting. This chapter is a bit more complicated. I'm going to enjoy coming back to this book in the coming days, weeks, months, and years, and reading the parts I didn't understand 100% until one day I do understand them 100%.
O.k., I finished the Filtering, Searching & Sorting chapter, and like the AJAX and JSON chapter, I'll have to go over that one again when I need to apply the information within for an actual project, FCC or otherwise.
Now I'm on Form Enhancement & Validation, which is chapter 13, the final chapter. It's a long chapter, it starts on page 567 and ends on page 622.
I made a timer appear on the page for the first time right now...it uses code I found online:
// HTML START
<div id="countdown"> </div>
<div id="download">Break Time!</div>
// HTML END
// TIMER START
window.onload = function() {
var countdownElement = document.getElementById('countdown'),
downloadButton = document.getElementById('download'),
seconds = 1500,
second = 0,
interval;
downloadButton.style.display = 'none';
interval = setInterval(function() {
countdownElement.firstChild.data = 'You can start your break in ' + (seconds - second) + ' seconds';
if (second >= seconds) {
downloadButton.style.display = 'block';
clearInterval(interval);
}
second++;
}, 1000);
}
// TIMER END
That's really cool. I want to start on the Pomodoro Clock project already, but I have to finish the book!
Okay, I finished the book. That last chapter was confusing to me, again, because I haven't used any of the material before in any projects. Nonetheless, I went through it, and my FCC projects that are coming up will give me a lot of practice.
I'm really looking forward to tomorrow. Pomodoro Clock, here I come!
SUMMARY OF CODING SKILLS
Total Treehouse Points: 5,503
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
JavaScript: 1,239
Treehouse Ranking (%): "You have more total points than 93% of all students."
Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers
Completed: "HTML and CSS," by Jon DuckettCompleted: "JavaScript and JQuery," by Jon Duckett
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 33% Complete
Note: I switched to FCC for the great online community and better updates/support.
Note: I switched to FCC for the great online community and better updates/support.
My Progress on Free Code Camp (FCC):
1. Get Started with Free Code Camp Complete
2. HTML5 and CSS Complete
3. Responsive Design with Bootstrap Complete
4. Gear up for Success Complete
5. jQuery Complete
6. Basic JavaScript Complete
7. Object Oriented and Functional Programming Complete
8. Basic Algorithm Scripting Complete
9. Basic Front End Development Projects On 4 of 5
10. Intermediate Algorithm Scripting On 4 of 21 (#13 and #14 also done)
11. JSON API's and Ajax
12. Intermediate Front End Development Projects
13. Claim Your Front End Development Certificate
14. Upper Intermediate Algorithm Scripting
15. Automated Testing and Debugging
16. Advanced Algorithm Scripting
17. AngularJS
18. Git
19. Node.js and Express.js
20. MongoDB
21. Full Stack JavaScript Projects
22. Claim Your Full Stack Development Certificate
After the 800 hours of FCC work above, there are 800 more hours of non-profit coding projects.
Hours Spent Coding Today: 9
Total Hours Coding: 784
No comments:
Post a Comment