Day 193: Treehouse, Reviewing the Basics of JavaScript, HTML, CSS, & JQuery!

Today I'm continuing with the course I left off yesterday, "JavaScript Loops, Arrays, and Objects."  I actually almost completed this class a while back, but I needed the very last project.  I'm going to complete it today.

Remember to use brackets instead of dot notation when using a for in loop, like so:

var person = {
  name : 'Sarah',
  country : 'US',
  age : 35,
  treehouseStudent : true,
  skills : ['JavaScript', 'HTML', 'CSS']
};

for (var prop in person) {
  console.log(prop, ': ', person[prop])

}

That code logs the property and value pairs to the console.  I've been studying a lot this week, here's the ranking by points:

And here's the ranking by badges:

I wish I had started my 12 hour days one day earlier!  Now I want to move up in the rankings!  The top guy is Ahmed...

I'm coming your way, Ahmed!  Hahaha!  Good stuff!

I worked with attribute selectors today, they work like this:

[class] {
  background-color: red;
}

So every element with a class will be targeted.  You could also do:

[class="form-contact"] {
  background-color: red;
}

This also works:

form[class="form-contact"] {
  background-color: red;
}

That would target a form element with the class of form-contact, it's more specific.  We could do:

div[id="container"] {
  max-width: 500px;
  margin: auto;
}

Why would you do this instead of the usual?  You almost never would, and these are a bit slower for the browser to process, but these exist nonetheless.  These do come in useful when wanting to target forms, such as an input element with the value of text:

input[type="text"] {
  background: red;
  cursor: pointer;
}

That's cool.  The >, +, and ~ sign allow us to do interesting things to parent and child elements with CSS.

The :only-child selector selects elements that are only children.  If the element has siblings, it will not be targeted.  

span:only-child {
  color: #52bab3;
  font-size: 1.5em;
} 

The code above targets elements that are only children of a span element.  We can use the :empty pseudoclass to color empty elements in the page, alerting us to them if necessary.  

Now I'm working on substring matching attribute selectors.  The begins with attribute selector:

a[href^="http://"] {
  color: red;
}

This will set anchors that have an href that start with http:// to red.  The ends with attribute selector is the opposite:

a[href$=".pdf"] {
  color: red;

}

Neat.  The $ tells the browser to match the substring.  This is really cool, using substring and the DRY concept to write less code to attach images to different link types:

Very, very cool.  Now we're working with the contains attribute selector:

a[href*="downloads"] {

}

It matches with any anchor element with an href attribute that contains downloads anywhere within.  

li:nth-child(an+b) {
  background: #52bab;
  color: white;
}

So, a and b are always represented by numbers.  The b says what's the first item selected in the list.  The a value tells the browser the cycle of elements to select after the a item is selected, so (2n+3) would select the 3rd item, and then every 2nd list item after that.  Then (n+4) would target the 4th element and every element after.  Then, (3n) is the same as (3n+0).  Then (-n+3) will target the 3rd item, and then every element before it.

div:nth-of-type(even) {
  background: #52bab;
  color: white;

That will target the even child elements, but ONLY if they are divs (so an h2 element will not be targeted, for example).

div:last-of-type(1) {
  background: #52bab;
  color: white;

}

That last piece selects the last div.  Then, :root targets the html element, and it has more specificity than the html selector.  Then :target says that when an element is the target of a link, we will match it.  So, if an id matches a link's href (for example when we match an id to an element to bounce around the page or target it).  Here's an example:

<div id="container">
<nav>
<a href="#col-a">Column A</a>
<a href="#col-b">Column B</a>
<a href="#col-c">Column C</a>
</nav>
<div class="row group">
<div id="col-a" class="col">
<h2>Column A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum arcu nisl, at vestibulum purus cursus ultrices. Sed consectetur faucibus velit, quis ultrices nisi.</p>
<p>Donec rutrum magna mi, vitae congue elit egestas quis. Praesent ultrices rhoncus venenatis. </p>

</div>

The href and the id match.  You could be more specific and do col-c:target.  You could do div:not([type="submit"]) { } to target input elements that do not have a type of submit.  That's pretty specific.  When we don't want to give a left margin to a first column in a series of columns, we can do:

.col:not(:first-child) {
  margin-left: 15px;
}

That leaves the first column aligned with the left margin of the page.  That's really handy!  You could do this for the nav anchor elements:

nav a:not(:first-child) {
  margin-left: 15px;
}

I'm going over pseudo-elements now.  There are four types of pseudo elements in CSS.  The first ones we went over are the ::first-line and ::first-letter pseudo elements.  Using one : or two :: is fine.  Pseudo-classes use one colon, while pseudo elements use two, but browsers will still interpret them anyways.  

Now we're working with ::before and :: after.  Here's how they work:

.theElementClass::before {
  content: "JPG - ";
  font-size: .75em;
}

And that inserts the value for the content property before the targeted element.  If we have content be a url, like url(http://www...), don't put it in quotes as an actual string will be displayed.  this adds a dot before the element:

h1::before,
{
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: coral;
  margin: 0 10;
}

And then this below will add a dot after:

h1::before,
h1::after
{
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: coral;
  margin: 0 10;

}

That's cool.  This makes a big, fat first letter:

.intro::first-letter {
  float: left;
  font-size: 80px;
  color: white;
  padding: 5px 10px;
  background: #384047;
  margin: 10px 10px 0 0;
  border-radius: 5px;
  line-height: 1;

}

It's like in a magazine.  This does something different...

.theClass a::after {
  content: attr(title);
  display: inline-block;
  color: initial;
  font-size: .65em;
  margin-left: 5px;
}

This takes the value of the attribute we specify, in this case the title (we could do href also, for example), and it places it where we want.  This inserted content is inserted as a child element, so it's inserted WITHIN the target element's box, not before or after it.  

All right, I finished that class.  Now I'm reviewing JQuery Basics!

All of these things are things I already know, but I think it's great to refresh your knowledge.

This makes something leave the screen slowly:

$(".warning").hide("slow");

This makes something appear on the screen slowly:

$(".warning").show("slow");


We could chain the two, like so:

$(".warning").hide("slow").show("slow");  The jQuery should be included at the bottom of a page, like so:

Here's the CDN hosted link: <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

Moving on.  Here's the 4 P's of problem solving:

1.  Preparation
2.  Plan
3.  Perform
4.  Perfect

You can target a span inside an element with a class of spoiler like so:

$(".spoiler span")

That's cool.

As a side note, command option j is the shortcut that opens the chrome dev tools.  We used the event.preventDefault() method again.  It looks like it prevents a lot of issues.

I finished a light modal project, it's in my codepen now, but just a rough draft of it (I'll make my own CSS for it and put my own images in it when I want to convert it into a portfolio piece).  Here's the JavaScript for the modal I made today with Team Treehouse:

$(document).ready(function() { 

  //Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");
// An image to overlay

$overlay.append($image);

 // A caption
$overlay.append($caption);

  // Add overlay
  $("body").append($overlay);
  
//1. Capture the click event on a link to an image
$("#imageGallery a").click(function(event) {
  event.preventDefault();
  var imageLocation = $(this).attr("href");

  //1.2 Update overlay with the image linked in the link
  $image.attr("src", imageLocation);
  
  //1.1 Show the overlay.
  
   $overlay.show();
  
  //1.3 Get child's alt attribute and set caption
  
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);
});
  
//3. When overlay is clicked
$overlay.click(function(){
   //3.1 Hide the overlay
   $(this).hide();
  

});


});

Also, I hit my 12 hour goal for the third day straight!  Also, I'm catching up to Ahmed, hahaha:

This 12 hour a day for 7 days challenge has been fantastic for my productivity.  To wind down the last hour of today, I took a SUPER basic internet and HTML/CSS course on Treehouse today, and even that course taught me something, such as how to reset the Treehouse workspace (by copying and pasting the original code from the teacher's notes), which I didn't know how to do, and this had caused me issues earlier this week.  So that's great that even a super basic course that I used to wind down the day helped quite a bit, haha!

The other courses were great the refresher on pseudo elements, the JQuery basics, which i'm still going through, the use of the keyword this in many ways, they're all things that are going to come up in day to day work as a developer, and also, in my boot camp studies, so it's great to really nail them down.

Today was a great day, and I'm kind of really wanting to take that # 1 spot now on the Treehouse Badge rankings...the thing is, I wasn't trying to do that, so I spent a large part of yesterday, and a large part of today, working on my portfolio pieces (the Flickr Photo Search API Project and the Responsive Design with Floats project).  AND on Monday I didn't really put in that much work, just a few hours.  So, lots of missed badge-earning opportunities, and only 3 days left in the week to make up the difference between Ahmed and I (actually, Ahmed is #2 now, but still, I give him the honorary #1 spot)...we'll see, I don't want to detract from my studies to go badge-hunting, I have to do what I have to do, but at the same time, it would be so cool!

Tomorrow's another day.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 8,317 (miscellaneous not included) 
HTML:                                968 
CSS:                                3,073 
Design:                            1,193 
Development Tools:            747
JavaScript:                      2,021

Treehouse (and other) Courses Completed:
How to Make a Website
HTML
HTML Forms
CSS Foundations
CSS Basics
CSS Layout Techniques
CSS Layout Basics
Responsive Layouts
CSS Flexbox Layout
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

10. JSON API's and Ajax                                                                          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

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: 12

Total Hours Coding: 977