Learning to Code: Reflections

Saturday, March 5, 2016

Day 199: FCC, Completed the "Twitch.tv API" Project!

Okay, I've been putting in a lot of work today on the Twitch API project for FCC. I used one of the CSS techniques I practiced on recently on this project. So, I set the containing element to:

position: relative;

And then, I set the child element, a span, to:

.details {
color: grey;
position: absolute;
top: 50px;
left: 75px;
font-size: 12px;

}

It looks like this, and it's the grey text:

That came in really handy, I'm glad I got to practice with that technique. I also coded a JSON request within a JSON request today, and that was a big breakthrough for this project for me.

I completed the project! Check it out:

That means I only have two projects left to get my front end certification! Yes! Woohoo! Man, I've learned so much! Not only about coding, but about being disciplined and about learning itself. :)

Check out my JavaScript, just so you can see what this project involved, I hand coded all of this, no copied code at all, 100% original:

$(document).ready(function() {

for(var i = 0; i < streamersArray.length; i++) {
$.getJSON('https://api.twitch.tv/kraken/streams/' + streamersArray[i] + '?callback=?', function(data) {
console.log(streamersArray[i]);
if (data.stream !== null && data.error !== "Unprocessable Entity") {
var currentUrl = 'http://www.twitch.tv/' + getUserName(data._links.self);
currentSrc = data.stream.channel.logo;
//data.stream.channel.logo retrieves the src for the img

$("#online").append("<li class='on'>" + "<img class='myImages' src=" + currentSrc + ">" + "<a href=" + currentUrl + " >" + getUserName(data._links.self) + "</a>" + "" + data.stream.channel.status + "" + "" + "Online" + "" + "</li>");
}
if (data.stream === null && data.error !== "Unprocessable Entity") {
// The code in the line below is a new JSON call within the initial JSON call that makes a call on a url that's a value of a property in the data returned from the original JSON call. This url contains the img I need to use for the src attribute, and nesting it like this allows me to place the image next to the correct item.
$.getJSON(data._links.channel + '?callback=?', function(data1) {

imgArrayOff.push(data1.logo);

var currentUrl = 'http://www.twitch.tv/' + getUserName(data._links.self);
if(imgArrayOff[counter] !== null) {
currentSrc = imgArrayOff[counter];

}
if(imgArrayOff[counter] === null) {
currentSrc = 'http://i64.tinypic.com/71ljdg.png';
}
$('#offline').append("<li class='off'>" + "<img class='myImages' src=" + currentSrc + ">" +"<a href=" + currentUrl + " >" + getUserName(data._links.self) + "</a>" + ""+ "Offline" + "" + "</li>");
counter = counter + 1;


}); // Closes inner JSON


} // Closes this if statement: if (data.stream === null && data.error !== "Unprocessable Entity")

if (data.error === "Unprocessable Entity") {
console.log(1);
currentSrc = 'http://i64.tinypic.com/71ljdg.png';
$('#noAccount').append("<li>" + "<img class='myImages' src=" + currentSrc + ">" + data.message + "</a>" + ""+ "No Account" + "" + "</li>");
} // Closes last if statement

}); // Closes first JSON

} // Closes for loop

$("#all").click(function() {
$("#online").show();
$('#offline').show();
$('#noAccount').show();
});

$("#onlineStreams").click(function() {
$('#offline').hide();
$("#online").show();
$('#noAccount').hide();
});

$("#offlineStreams").click(function() {
$("#online").hide();
$('#offline').show();
$('#noAccount').hide();
});

}); // closes jQuery

var streamersArray = ["voyboy", "freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff", "c9rush", "brunofin", "comster404"];
var counter = -1;

// This function gives me the username for streamers that are not online
function getUserName(url) {
var lastSlash = url.lastIndexOf("/");
var username = url.substring(lastSlash + 1);
return username;
}

var imgArrayOff = [];
var counter = 0;

var currentSrc;

That's a lot of code, well, that's what I thought as I created it all this evening, anyhow, but I know how it goes, once we complete a task, every time after that what seemed a challenge becomes trivial. That's just the nature of coding, and that's all right, there's always more challenges over the next hill. :)

There is one small pending thing, on one of the projects, the Wikipedia Viewer project, I'm done with the functionality of it, but it could use some CSS, so I've got to spend a little time on it tomorrow to make it look nice. Once that's finished, I'll move on to the next project and the CS50 class. I want to earn the front end certificate from FCC and complete the CS50 class, both before class starts on April 19th.

All right, time for bed.

SUMMARY OF CODING SKILLS 

Books:                                                                                               Status

"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 DevTrack 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

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

12. Intermediate Algorithm Scripting Complete

13. Advanced Front End Development Projects On 5 of 6

14. Claim Your Front End Development Certificate

15. Automated Testing and Debugging
16. Node.js and Express.js
17. Git
18. MongoDB
19. API Projects

20. Dynamic Web Application Projects

21. Claim Your Back End Development Certificate

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: http://codepen.io/Adancode/

GitHub: https://github.com/Adancode

LinkedIn: https://www.linkedin.com/in/adamcamacho1
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode

Hours Spent Coding Today: 7

Total Hours Coding: 1,034.5

Friday, March 4, 2016

Day 198: UT Bootcamp, Harvard Comp Sci, Binary Game

It's been three days since I last wrote on my blog, I took two days off, and then on the third, I read two books about productivity, and they were fantastic, by an author name Cal Newton. I recommend you check out that author, he's excellent.

So, back to coding, the UT Bootcamp assigned us a Harvard Computer Science class, CS50, to do before school starts. I started on it today, and I'm going to have to divide my day into sections in order to move forward on both this and on the FCC curriculum. Today, I started the day by watching the first lecture for the Harvard class, and I was inspired to create this:

It works great already, it took me about 3 hours to make, from start to finish! In the lecture, the instructor uses software just like this to demonstrate binary to the students. Check out the JavaScript:

$(document).ready(function() {

var randomNumber = 1;

$('#goalNumber').html(generateNumber());

function generateNumber() {
var randomNumber = Math.floor(Math.random() * 255) + 1;
return randomNumber;
}

$("#one").click(function() {
toggleLights1();
})
$("#two").click(function() {
toggleLights2();
})
$("#four").click(function() {
toggleLights4();
})
$("#eight").click(function() {
toggleLights8();
})
$("#sixteen").click(function() {
toggleLights16();
})
$("#thirtyTwo").click(function() {
toggleLights32();
})
$("#sixtyFour").click(function() {
toggleLights64();
})
$("#oneTwentyEight").click(function() {
toggleLights128();
})

$("#answerField").html(answerField)

//This toggles a lit and unlit light bulb image on and off.
function toggleLights1() {
if (counter1 === 0) {
$("#one").attr("src", "http://i67.tinypic.com/epobyr.png");
counter1 = counter1 + 1;
answerField = answerField + 1;
$("#answerField").html(answerField);
testTotal();
}
else {
$("#one").attr("src", "http://i67.tinypic.com/5efxio.png");
counter1 = counter1 - 1;
answerField = answerField - 1;
$("#answerField").html(answerField);
testTotal();
}
}

function toggleLights2() {
if (counter2 === 0) {
$("#two").attr("src", "http://i67.tinypic.com/epobyr.png");
counter2 = counter2 + 1;
answerField = answerField + 2;
$("#answerField").html(answerField);
testTotal();
}
else {
$("#two").attr("src", "http://i67.tinypic.com/5efxio.png");
counter2 = counter2 - 1;
answerField = answerField - 2;
$("#answerField").html(answerField);
testTotal();
}
}

function toggleLights4() {
if (counter4 === 0) {
$("#four").attr("src", "http://i67.tinypic.com/epobyr.png");
counter4 = counter4 + 1;
answerField = answerField + 4;
$("#answerField").html(answerField);
testTotal();
}
else {
$("#four").attr("src", "http://i67.tinypic.com/5efxio.png");
counter4 = counter4 - 1;
answerField = answerField - 4;
$("#answerField").html(answerField);
testTotal();
}
}

function toggleLights8() {
if (counter8 === 0) {
$("#eight").attr("src", "http://i67.tinypic.com/epobyr.png");
counter8 = counter8 + 1;
answerField = answerField + 8;
$("#answerField").html(answerField);
testTotal();
}
else {
$("#eight").attr("src", "http://i67.tinypic.com/5efxio.png");
counter8 = counter8 - 1;
answerField = answerField - 8;
$("#answerField").html(answerField);
testTotal();
}
}

function toggleLights16() {
if (counter16 === 0) {
$("#sixteen").attr("src", "http://i67.tinypic.com/epobyr.png");
counter16 = counter16 + 1;
answerField = answerField + 16;
$("#answerField").html(answerField);
testTotal();
}
else {
$("#sixteen").attr("src", "http://i67.tinypic.com/5efxio.png");
counter16 = counter16 - 1;
answerField = answerField - 16;
$("#answerField").html(answerField);
testTotal();
}
}

function toggleLights32() {
if (counter32 === 0) {
$("#thirtyTwo").attr("src", "http://i67.tinypic.com/epobyr.png");
counter32 = counter32 + 1;
answerField = answerField + 32;
$("#answerField").html(answerField);
testTotal();
}
else {
$("#thirtyTwo").attr("src", "http://i67.tinypic.com/5efxio.png");
counter32 = counter32 - 1;
answerField = answerField - 32;
testTotal();
}
}

function toggleLights64() {
if (counter64 === 0) {
$("#sixtyFour").attr("src", "http://i67.tinypic.com/epobyr.png");
counter64 = counter64 + 1;
answerField = answerField + 64;
$("#answerField").html(answerField);
testTotal();
}
else {
$("#sixtyFour").attr("src", "http://i67.tinypic.com/5efxio.png");
counter64 = counter64 - 1;
answerField = answerField - 64;
$("#answerField").html(answerField);
testTotal();
}
}

function toggleLights128() {
if (counter128 === 0) {
$("#oneTwentyEight").attr("src", "http://i67.tinypic.com/epobyr.png");
counter128 = counter128 + 1;
answerField = answerField + 128;
$("#answerField").html(answerField);
testTotal();
}
else {
$("#oneTwentyEight").attr("src", "http://i67.tinypic.com/5efxio.png");
counter128 = counter128 - 1;
answerField = answerField - 128;
$("#answerField").html(answerField);
testTotal();
}
}

// This sets the "You Win" text to be hidden until the player matches the total with the target number.
$("#youWin").hide();

function testTotal() {
if ($("#goalNumber").html() === answerField.toString() ) {
$("#youWin").show();
}
}

}); //closing jQuery

var counter1 = 0;
var counter2 = 0;
var counter4 = 0;
var counter8 = 0;
var counter16 = 0;
var counter32 = 0;
var counter64 = 0;
var counter128 = 0;

var answerField = 0;

Here's what happens when you win:

Okay, that was fun, now I'll continue with the lecture!

All right, I finished the first lecture, going through the second lecture now.

All right, I'm done with both lectures.

They were amazing. Moving on to the walkthroughs (a series of short videos), then the shorts (a series of videos a little bit longer), and then the first problem set, problem set 0.

SUMMARY OF CODING SKILLS 

Books:                                                                                               Status

"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