JavaScript
Front End Web Development (58 hours)
Full Stack JavaScript (33 hours)
PHP and WordPress
PHP Development (31 hours)
WordPress Development (21 hours)
Learn WordPress (4 hours)
If we total the above courses, we come out to 147 hours. Let's focus on JavaScript for now. If we total only the JavaScript hours (Including HTML and CSS in those two), we come up with 91 hours of study.
Since the goal is simply to be as prepared for the UT Boot Camp as possible, it's okay for me to take a break from FCC and go back to Treehouse. I could keep going with FCC, but I've been treading water for about two weeks now, and that's unacceptable, so I'm going to take a break, go into Treehouse mode, and knock out as much as possible. This will also give me a stronger foundation, and when I come back to tackle FCC again, especially the last four projects in the front end section, perhaps I'll be able to knock them out even faster.
I like that, the main thing is to just keep learning, and I can say that the past two weeks I haven't learned much, I've learned a bit, but mostly I've just been stuck, I just don't know enough about AJAX/JSON/API's as I'd like, so I'm going to use Treehouse to level up that area, as well as other areas, and then come back to the FCC projects. My study topics are pretty flexible, as long as I'm always studying material that will be covered in the Boot Camp, then I'm moving forward.
I've also got to keep an eye out for anything that could be a good portfolio project, and also, for anything that I could use on my portfolio site itself! Feeling great, this re-focus will do me good!
Perhaps I'll give the FCC "Wikipedia Viewer" project another attempt right after finishing the AJAX course I'm going through right now.
I worked with the $.ajax() JQuery method and with chaining the .fail(function(){}) method, which doesn't work with $.load or with jsonp. In those cases, we need to check the response in the normal success callback to see what happened.
We did a $.getJSON version of the last project:
$(document).ready(function () {
$.getJSON('../data/employees.json', function (data) {
var statusHTML = '<ul class="bulleted">';
$.each(data,function (index, employee) {
if (employee.inoffice === true) {
statusHTML +='<li class="in">';
} else {
statusHTML +='<li class="out">';
}
statusHTML += employee.name + '</li>';
});
statusHTML += '</ul>';
$('#employeeList').html(statusHTML)
}); // end getJSON
$.getJSON('../data/rooms.json', function (data) {
var statusHTML = '<ul class="bulleted">';
$.each(data,function (index, rooms) {
if (rooms.available === true) {
statusHTML +='<li class="in">';
} else {
statusHTML +='<li class="out">';
}
statusHTML += rooms.room + '</li>';
});
statusHTML += '</ul>';
$('#roomList').html(statusHTML)
}); // end getJSON
}); // end ready
Here's a pic:
That was a really quick project, but it was good to do. Here's the JSON object:
And we also changed the classes in and out to full and empty. I'm on the fourth (last) section of the AJAX course on Treehouse. Check out this code:
$(document).ready(function () {
$('button').click(function() {
$('button').removeClass("selected");
$(this).addClass("selected");
});
}); // end document
It adds a class to a specific button (the clicked button), that's the add class code, but then the issue is that the class remains added, even after you click on other buttons, so the removeclass line is added that removes the class to all the buttons whenever any button is clicked, BEFORE the class is then added to the specific, clicked button. That's cool.
Now we're working on some code that accesses the Flickr API.
So, I bought some time management software called RescueTime, and I'm going to try it out, my friend Brian recommended it. I made an agreement with him that we would do 12 hours of coding a day for the next 7 days, so I'm stoked to do it. If we both complete this personal challenge, we'll both be putting in 84 hours of coding in the coming week.
I learned that if you add jsoncallback=? to the end of an API/url request, this tells the API that you are asking for a jsonp file, and this gets around some issues caused by limitations in AJAX. These limitations have been causing me issues with completing the FCC Wikipedia Viewer project, so it's great to see a ways to get around them.
I'm exploring more uses for "this." Also, I wrote up some AJAX code! Here it is:
$(document).ready(function() {
var weatherAPI = 'http://api.openweathermap.org/data/2.5/weather';
var data = {
q : "Portland,OR",
units : "metric"
};
function showWeather(weatherReport) {
$('#temperature').text(weatherReport.main.temp);
}
$.getJSON(weatherAPI, data, showWeather);
});
That was cool, good practice! This code retrieves the value of the text inside the element with the ID of "button"
That's good to save. Here's the code that searches through flickr using the text in the buttons:
$(document).ready(function() {
$('button').click(function () {
// highlight the button
// not AJAX, just cool looking
$("button").removeClass("selected");
$(this).addClass("selected");
// the AJAX part
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var animal = $(this).text();
var flickrOptions = {
tags: animal,
format: "json"
};
function displayPhotos(data) {
var photoHTML = '<ul>';
$.each(data.items,function(i,photo) {
photoHTML += '<li class="grid-25 tablet-grid-50">';
photoHTML += '<a href="' + photo.link + '" class="image">';
photoHTML += '<img src="' + photo.media.m + '"></a></li>';
}); // end each
photoHTML += '</ul>';
$('#photos').html(photoHTML);
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);
}); // end click
}); // end ready
Now I've got to make an AJAX request via a form submission. Check out this code:
$('form').submit( function (evt) {
evt.preventDefault();
var searchTerm = $('#search').val();
});
That code is very important (second line), it prevents the page from reloading when a form is submitted, which normally happens when we submit a form, but we don't want to happen when we are working with AJAX. The third line stores the value in the search element (the text the user has input into it right before submitting) in a variable, which we can then use to input into the AJAX request. You could do the same thing with a button click event, like so, but remember that forms have a submit event and buttons have a click event.
$('button').click(function(evt) {
And so on. Here's form, I can use it in the future:
<h1>Flickr Photo Search</h1>
<form>
<label for="search">Type a search term</label>
<input type="search" name="search" id="search">
<input type="submit" value="Search" id="submit">
</form>
I got it! Here's my code (but Treehouse pre-populated a large part of it for the project):
$(document).ready(function() {
$('form').submit(function (evt) {
evt.preventDefault();
var searchTerm = $('#search').val();
// the AJAX part
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var flickrOptions = {
tags: searchTerm,
format: "json"
};
function displayPhotos(data) {
var photoHTML = '<ul>';
$.each(data.items,function(i,photo) {
photoHTML += '<li class="grid-25 tablet-grid-50">';
photoHTML += '<a href="' + photo.link + '" class="image">';
photoHTML += '<img src="' + photo.media.m + '"></a></li>';
}); // end each
photoHTML += '</ul>';
$('#photos').html(photoHTML);
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);
}); // end click
}); // end ready
I completely understand this code, so I'm going to make this one of my portfolio projects, but first I'll make my own CSS and customize it. This is cool! What a great project! Also, we can add this code to the code above to let the user know their search is underway:
var submitButton = $('#submit');
searchTerm.prop("disabled", true);
submitButton.attr("disabled", true).val("searching....");
Oh! Here's an improved version! Check it out, I put notes showing what's going on:
$(document).ready(function() {
$('form').submit(function (evt) {
evt.preventDefault();
var searchTerm = $('#search');
var submitButton = $('#submit');
// The code below sets the search button value to "searching" while a search is being performed and is also disables the search field so that the user cannot type in it while a search is being performed.
searchTerm.prop("disabled", true);
submitButton.attr("disabled", true).val("searching....");
// the AJAX part
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var searchTermValue = searchTerm.val();
var flickrOptions = {
tags: searchTermValue,
format: "json"
};
function displayPhotos(data) {
var photoHTML = '<ul>';
$.each(data.items,function(i,photo) {
photoHTML += '<li class="grid-25 tablet-grid-50">';
photoHTML += '<a href="' + photo.link + '" class="image">';
photoHTML += '<img src="' + photo.media.m + '"></a></li>';
}); // end each
photoHTML += '</ul>';
$('#photos').html(photoHTML);
// The code below resets the button value to search once the search is complete.
searchTerm.prop("disabled", false);
submitButton.attr("disabled", false).val("search");
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);
}); // end click
}); // end ready
A cool thing to do would be to add a clear button...
Oh, and I finished the AJAX Basics course! Woohoo!!! I'm at 6,012 Treehouse points now!
Okay, I added the ability to clear the results with a click of a clear button:
$(document).ready(function() {
$('form').submit(function (evt) {
evt.preventDefault();
var searchTerm = $('#search');
var submitButton = $('#submit');
// The code below sets the search button value to "searching" while a search is being performed and is also disables the search field so that the user cannot type in it while a search is being performed.
searchTerm.prop("disabled", true);
submitButton.attr("disabled", true).val("Searching Flickr...");
// the AJAX part
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var searchTermValue = searchTerm.val();
var flickrOptions = {
tags: searchTermValue,
format: "json"
};
function displayPhotos(data) {
var photoHTML = '<ul>';
$.each(data.items,function(i,photo) {
photoHTML += '<li class="grid-25 tablet-grid-50">';
photoHTML += '<a href="' + photo.link + '" class="image">';
photoHTML += '<img src="' + photo.media.m + '"></a></li>';
}); // end each
photoHTML += '</ul>';
$('#photos').html(photoHTML);
// The code below resets the button value to search once the search is complete.
searchTerm.prop("disabled", false);
submitButton.attr("disabled", false).val("Search Flickr");
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);
}); // end click
$('#clear').click(function() {
$('#photos').empty();
});
}); // ends the document.ready function
Now I'm going to work on the CSS, I want to make it look nice. I'm also going to explore the CSS used in the Treehouse version, it's beautifully done, but it's a HUGE amount of CSS. I'm going to write my own after I study the Treehouse CSS, and perhaps I'll use Bootstrap, perhaps not.
I'm looking over the RescueTime data for today, and it's pretty great, I like the tool, I think the cost was worth it. Also, I'd like to work remote once my skills are at a high enough level, and I think software like RescueTime will be a key part in holding myself accountable when engaged in remote work. It's great.
Today's learning activities were fantastic. I probably learned more today than in the last week or two, which vindicates my decision to avoid getting stuck on projects (Wikipedia Viewer) and focus my energies on learning as much as possible before class starts.
Lots of good stuff today!
SUMMARY OF CODING SKILLS
Total Treehouse Points: 6,012 (miscellaneous not included)
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
JavaScript: 1,747
Treehouse (and other) Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% done, switched focus from design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
AJAX Basics
HTML and CSS (Codecademy)
Introduction to Web Dev (The Odin Project)
Web Dev 101 (The Odin Project, 33% done, switched to FCC for larger community)
Books Read or in Progress: 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
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 JavaScript Complete
7. Object Oriented and Functional Programming Complete
8. Basic Algorithm Scripting Complete
9. Basic Front End Development Projects 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 Complete
10. JSON API's and Ajax Complete
11. Intermediate Algorithm Scripting Complete
11. Intermediate Algorithm Scripting Complete
12. Intermediate Front End Development Projects On 3 of 6
13. Claim Your Front End Development Certificate
14. Advanced Algorithm Scripting
15. Automated Testing and Debugging
16. Git
17. Node.js and Express.js
18. MongoDB
19. API Projects
15. Automated Testing and Debugging
16. Git
17. Node.js and Express.js
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)
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/
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
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode
Hours Spent Coding Today: 4
Total Hours Coding: 940
No comments:
Post a Comment