Okay, this is actually a summary entry for three days of coding, it's just that the last two days before today were not very eventful. I spent a LOT of time going nowhere on the Pomodoro Project, well, I was working on it, but it all came to dead ends. I would progress in one aspect of the project, then get stuck and need to start over again. Then I would start over again, progress on another aspect of the project, then get stuck and unable to find a way out.
So yesterday, my friend Mike called me out of the blue and asked if I wanted to do a pair programming session. I said, yes, definitely, of course. Mike's a good guy, and we had done one pair programming session a while back in which we solved a Euler Problem.
So there we were, we started at 4 p.m., and coded up until 7 p.m. We created a basic HTML structure for the project, as well as an ideological structure, as in, what variables we would need, and this was the more important part, but we were unable to use JQuery to manipulate the HTML elements. We decided to call the session after those 3 hours, having only written a few lines of functioning HTML code.
But see, here's what came next. Since we had laid out the ideological structure for the project, I kept working on it until I figured out how to manipulate the HTML with JQuery. I had done this before, but this time, it looks like we had neglected to wrap all our JQuery in the JQuery wrapper. From there, I just kept going, and I got quite a bit done! Here's the wrapper:
$(document).ready(function() {
});
And here's the code that went inside at the end of the day:
$('#restNum').html(rest + secAdd);
$('#sessionNum').html(session + secAdd);
$('#minusRest').click(function() {
minusBr(rest + secAdd);
$('#restNum').html(rest + secAdd);
});
$('#plusRest').click(function() {
plusBr();
$('#restNum').html(rest + secAdd);
});
$('#plusSession').click(function() {
plusSess();
$('#sessionNum').html(session + secAdd);
$('#pomodoro').html(session);
});
$('#minusSession').click(function() {
minusSess();
$('#sessionNum').html(session + secAdd);
$('#pomodoro').html(session);
});
And here's the wrapper with the code inside, plus some extra JavaScript code that goes outside the wrapper:
$(document).ready(function() {
$('#restNum').html(rest + secAdd);
$('#sessionNum').html(session + secAdd);
$('#minusRest').click(function() {
minusBr(rest + secAdd);
$('#restNum').html(rest + secAdd);
});
$('#plusRest').click(function() {
plusBr();
$('#restNum').html(rest + secAdd);
});
$('#plusSession').click(function() {
plusSess();
$('#sessionNum').html(session + secAdd);
$('#pomodoro').html(session);
});
$('#minusSession').click(function() {
minusSess();
$('#sessionNum').html(session + secAdd);
$('#pomodoro').html(session);
});
});
// Variables
var rest = 5;
var session = 25;
var secAdd = ":00";
//var activeSession = $(session).val()
/*functions*/
function minusBr() {
if (rest > 0) {
rest--;
}
}
function plusBr() {
rest++;
}
function plusSess() {
session++;
}
function minusSess() {
if (session > 0) {
session--;
}
}
And here's the HTML:
<h1 class='text-primary'>Pair Programming JQuery Wrapper + Buttons Functioning + ":00" + Spans Cannot Go Negative!</h1>
<div class="text-center">
<div id="restDiv">
<button id="minusRest">- Break</button>
<span id="restNum"></span>
<button id="plusRest">+ Break</button>
</div>
<div id="sessionDiv">
<button id="minusSession">- Session</button>
<span id="sessionNum"></span>
<button id="plusSession">+ Session</button>
</div>
<button value="Start Pomodoro">Start Pomodoro</button>
<div><span id="pomodoro">25:00<span></div>
</div>
And here's a screenshot:
Today was great! Yesterday and the day before I spent quite a bit of time on this project, but I didn't really make any concrete progress, and the key is that I hadn't laid down a PLAN for the assignment, I had just started coding. This meant that I would keep ending up with code I couldn't modify in order complete the next steps in the project.
I'm really glad that today's great planning phase happened, because, although there's still a lot more to be done to complete the project, this is a lesson I'll never forget.
I HAVE to plan the project out BEFORE I start coding, with emphasis on the variables that will be involved, and how they will be manipulated by which elements, because this will make all the difference in whether my JavaScript code will be able to be manipulated, or whether I'll have to start from scratch, and ultimately, whether I'll be able to complete the project in a reasonable time frame, or at all.
Tomorrow's a new start, i'm going to focus on the timer section of the project, I want to know JavaScript's setInterval and related functions like the back of my hand, I've got to master JavaScript!
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 5 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 Since the Last Entry (the Calculator Entry): 21
Total Hours Coding: 822
No comments:
Post a Comment