This is actually a lot of fun, I'm finally getting to do all the things I wanted to do earlier, I'm really comfortable now with the various technologies I have at my disposal, HTML, CSS, Bootstrap, JavaScript, jQuery, Balsamiq, etc.
I'm eating healthy every day, using my time efficiently, spending quality time with my family, it's really great.
All right, let's get to it!
Okay, we've got an issue, my first portfolio project, the Simon Game, isn't working anymore. I haven't changed anything on it, and it says the last time it was saved was one month ago. Further, I have two copies saved, a private version and a public version, and BOTH are malfunctioning. That doesn't make any sense, if I had broken one, say while helping a newbie with a problem, I wouldn't have had a chance to break the other, the private version, so Codepen must have made some kind of change...let me take a look at the code!
Well, I fixed it, this:
arrayPlayer.push("#" + this.attributes[1].value);
Needed to be changed to this:
arrayPlayer.push("#" + this.attributes[0].value);
To reach the second item in these divs:
<div class="boxes" id="boxGreen"></div>
<div class="boxes" id="boxRed"></div>
<div class="boxes" id="boxYellow"></div>
<div class="boxes" id="boxBlue"></div>
I'm not sure why, though, I thought attributes[i].value worked like an array, and it did for the last month anyhow...now it wants a 0 to get the second item, the id. I'm not sure why, but that fixed it.
I'm glad I'm going through every one of my portfolio pieces! If I hadn't done that, this error caused by something outside of my control, by Codepen or some change in javaScript, would have made me look bad if anyone clicked on my project.
On the plus side, that's great that I got some debugging practice, that's exactly what I wanted! And it helped me a lot that I had left the "console.logs" in my code, it allowed me to find the issue very quickly!
Oh no!
It's a Chrome/Firefox problem! Firefox requires:
arrayPlayer.push("#" + this.attributes[0].value);
To function, while Chrome requires:
arrayPlayer.push("#" + this.attributes[0].value); arrayPlayer.push("#" + this.attributes[1].value);
That's no good! All right, well, I'll have to find a workaround that works on both browsers then! This is great!
Okay, I found a solution that works on both Firefox and Chrome:
arrayPlayer.push("#" + this.id);
Woohoo! I went ahead and made that modification in one other place in the code, even though, strangely, that part of the code seemed to be working.
Okay, now I'm working on the Tic Tac Toe game, checking it for any bugs, and it has a bug on Firefox, as a result of the same thing, the .attributes[i] code, in this case, I have this.attributes[2].value, and that does not work in Firefox. Firefox does not play nice withthat code, so I have to change the code around to make it work, as I want it to work on Firefox and Chrome, at minimum.
Working on that right now. Okay, I solved that issue, posted the image for that project on to the portfolio site, and linked the image back to codepen.
Here's a screenshot:
Next project to add to the portfolio site is the Flickr API. Now, the first time I made this project, I wasn't too familiar with Bootstrap, but now I am, so let me rework that project to make it fully responsive...working on that right now.
All right, the Flickr project is now fully responsive (I even tested it on my phone), and a screenshot is posted on my portfolio, linking to the project. Here's another screenshot of that project:
Next is the Wikipedia API Project, let me get to it!
Ok, I spent some time solving a bug with the Wikipedia API project not submitting the search when the user hit enter (it worked with clicking on the search button).
Then, I spent some time fixing a bug caused by an image I inserted into the site being just a few pixels off (I must have made a mistake when I resized it in Photoshop somehow), which caused the alignment to be completely off on Firefox and Internet Explorer (but interestingly, it was fine on Chrome and Safari on the Mac and on Opera and Chrome on the PC).
So I solved both of those and they are both now up on the site and linked to. The next project to work on and link to is the Binary Game project.
This is what I have so far:
I've put in eight hours today, same as yesterday, it's been a solid day! I actually don't want to sleep yet, but it's 1:30 a.m. so I really should.
It's interesting that every one of my projects so far had bugs that I fixed. I actually knew of one of them, and I had made the choice to leave it as is at the time since the project did function on Chrome (it was a Firefox bug, well, it depends on how you look at it, the .attributes issue) and I wanted to move on with my studies, having met the requirements of the project. I'm ok with that, sometimes we have to be satisfied with a viable project and move on, to keep learning, it's just a matter of allocating time where I can get the highest return on my investment.
I found another bug...again, the evt saved the day:
$("#random").click(function(evt) {
evt.preventDefault(); /* This code and the evt above prevent the page from reloading and wiping out the result of the click on the random article button. Without it, the RAndom Article button does not work properly. */
$("#wikiResults").html("<div class='resultsStyle'>" + "<p>" + "<a href=http://en.wikipedia.org/wiki/Special:Random>" + "Click to go to Random Article!" + "</a>" + "</p>" + "</div>");
});
Neat.
SUMMARY OF CODING SKILLS
Books: Status
"Head First HTML and CSS," by E. Robson & E. Freeman Complete
"Head First HTML and CSS," by E. Robson & E. Freeman Complete
"A Smarter Way to Learn JavaScript," by Mark Myers Complete
"HTML and CSS," by Jon Duckett Complete
"JavaScript and JQuery," by Jon Duckett Complete
Team Treehouse (Front End Web Dev Track Complete): Status
How to Make a Website Complete
HTML Complete
HTML Forms Complete
HTML Tables Complete
HTML Video and Audio Complete
CSS Foundations Complete
CSS Basics Complete
CSS Layout Techniques Complete
CSS Layout Basics Complete
CSS Selectors Complete
Responsive Layouts Complete
CSS Flexbox Layout Complete
Framework Basics (Bootstrap and Foundation) Complete
Framework Basics (Bootstrap and Foundation) Complete
Git Basics Complete
Console Foundations Complete
Introduction to Programming Complete
JavaScript Basics Complete
JavaScript Loops, Arrays, & Objects Complete
AJAX Basics Complete
JQuery Basics Complete
Interactive Web pages with JavaScript Complete
Object-Oriented JavaScript Complete
Accessibility Complete
Website Optimization Complete
Front End Performance Optimization Complete
Aesthetic Foundations Complete
Design Foundations Complete
Adobe Photoshop Foundations Complete
Adobe Illustrator Foundations 66% Complete
Other Courses: Status
HTML and CSS (Codecademy) Complete
Introduction to Web Dev (The Odin Project) Complete
Web Dev 101 (The Odin Project) 33% Complete
Free Code Camp (FCC) Status
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 Front End Development Projects Complete
7. Basic JavaScript Complete
8. Object Oriented and Functional Programming Complete
9. Basic Algorithm Scripting Complete
10. JSON API's and Ajax Complete
11. Intermediate Front End Development Projects Complete
5. jQuery Complete
6. Basic Front End Development Projects Complete
7. Basic JavaScript Complete
8. Object Oriented and Functional Programming Complete
9. Basic Algorithm Scripting Complete
10. JSON API's and Ajax Complete
11. Intermediate Front End Development Projects Complete
12. Intermediate Algorithm Scripting Complete
13. Advanced Front End Development Projects Complete
14. Claim Your Front End Development Certificate Complete
The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery)
Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)
Week 11-14: Server Side (Node.js, MySQL, MongoDB)
Week 15-18: PHP (WordPress, CodeIgniter, Laravel)
Week 18-21: Full Stack Coding
Week 22-24: Final Project
CodePen Projects: http://codepen.io/Adancode/
Week 22-24: Final Project
CodePen Projects: http://codepen.io/Adancode/
GitHub Projects: https://github.com/Adancode
LinkedIn Profile: https://www.linkedin.com/in/adamcamacho1
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode
Hours Spent Coding Today: 8
Total Hours Coding: 1,135
No comments:
Post a Comment