There's the row system I'm working with on one of the Bootstrap problems today. I'm practicing the grid system and getting the hang of it, Bootstrap is really great. I started working on JQuery, here's some code:
<script>$(document).ready(function() {
});</script>
That goes at the top of the page, in our exercise, anyhow. Any code we put inside the document ready function above will run as soon as the page loads. All JQuery functions start with a dollar sign operator, sometimes referred to as bling. We used this code:
$(document).ready(function() {
$("button").addClass("animated bounce")
});
To make our buttons bounce. That's really neat, it adds a class to all the button elements, "animated bounce" which is already in the JQuery and animated.CSS library (they were both already included in the code editor in this case), and makes the buttons bounce when the page loads. By the way, I finished the Bootstrap section of FCC, which was the second section. I'm on the third section now, the JQuery section. Here's a screenshot:
There's 17 sections to FCC, and they take 800 hours to complete. I have a bit of a head start, because I've already put in over 600 hours of coding through Team Treehouse and The Odin Project. Many of those 600 hours of knowledge are directly transferable to the FCC coursework, but many are not, specifically, any design work, such as the adobe illustrator and photoshop work I did. That's o.k., though, because those tools have come in pretty handy in and of themselves already in other endeavors, and if I ever need to delve into them again, I've got the basics down and can already do some neat stuff.
So, I don't know how many hours it will take me to finish the 17 sections, but I'm going to keep plugging away until I finish. I've been dropping in on the chat, and it's such a difference from The Odin Project, in that it's so active. One of my fellow FCC students posted a Pomodoro Clock/Timer he made today. He has it over on codepen, and it's really cool. I'm so excited by the success stories I keep reading about, both from my Odin Project classmates (I'm still a member of The Odin Project study group, that's actually where I was introduced to TOP), and from some of the FCC articles I've taken a look at.
At this point, it's been made quite clear to me by seeing the commonalities in the success stories that the key is to keep plugging away at this, day to day, and to not let too many days pass without any work. We have to keep the concepts fresh in our minds in order to have the knowledge required to complete our projects in a timely manner. Also, we have to have a solid portfolio of work in order to vet ourselves to prospective employers. So far I have my Google Homepage project, several Euler Problems, and a couple of other projects on my GitHub account, so I've started that process, but I'm looking forward to expanding my portfolio significantly both is size and scope in the coming weeks.
Today I started with Bootstrap, reviewing the couple of Bootstrap waypoints (that's what chapters are called in FCC) I had already done, completed the entire Bootstrap section, and now I'm working on the JQuery section. My goal today is to complete the JQuery section, so that I'll have completed two entire sections today. That would be ideal, so tomorrow I can start on the JavaScript section and get to the more difficult sections as soon as possible.
We learned three ways of targeting elements, by type:
$("button")
By class:
$(".theclassname")
And by id:
$("#theidname")
So far so good. This can change the color of an element via the use of JQuery:
<script>$(document).ready(function() {
$("#target1").css("color","blue");
});</script>
The 1st and 3rd line of the code above contain the script tags and the document ready function. Neat. We worked on this code as well:
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
});
</script>
The .css changes the target element's color, the .prop changes the target element to disabled (it grayed out a button), and the .remove removes the target element completely. Check this code out:
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
});
</script>
We're now copying and moving html elements around the page. Here's some more code we worked on, for targeting parent and child elements:
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
});
</script>
Bootstrap is easy to understand. And here's the end of it:
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "green");
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
$(".target:even").addClass("animated shake");
$("body").addClass("animated fadeout");
});
</script>
If we replace fadeout with hinge, it makes the body fall off, it's really neat. With the HTML, in case I want to play around with it later:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>
Woohoo! I finished the 3rd section of FCC, the Bootstrap section! Now I'm starting on the 4th section of FCC, which is the JavaScript section! This is fantastic, because I just finished Mark Myers' JavaScript book, so that will help me a lot with this 4th section! Here's where I'm at, by screenshot:
All right, starting on section 4, there's 17 total sections, they take 800 hours to complete, and then there's 800 hours of volunteer work to be done after that. Working on getting through this at a faster rate than a total newbie would by using everything I've learned so far, and so far so good, from my progress so far, I can see that I've retained the knowledge I've picked up in the last year. :)
So, in computer science, data structures are things that hold data. JavaScript has 7 of them, for example numbers and booleans are data structures. The boolean data structure holds two values, true or false, while the numbers data structure holds many more values. A string is a data structure. When we save data from a data structure, we do so in something called a variable. So, for example, here's a variable being declared:
var myAge = 27;
This is all basic stuff, but it's building up to awesome stuff. :) This is how to find the last item in a data structure, for example:
var currentCity = "Austin";
var lastLetterInCurrentCity = currentCity[currentCity.length-1]
The length of currentCity is 6, as there's 6 letters in Austin, but the index of the last letter is 5, because the characters in Austin are indexed starting with a 0, so A is 0, u is 1, etc. This means that if we want to grab the last item, we use the .length property on the variable, subtract one from it, pop it into brackets, and attach the bracket to the variable. This comes in handy when solving Euler Problems, as sometimes you need to get the last element in an array, and the size of the array may keep changing, so you want an index that keeps changing as the array size changes.
This is how you get the second to last letter:
var lastName = "Lovelace";
var secondToLastLetterOfLastName = lastName[lastName.length-2];
That can come in handy also. This code will change the value of the 0 index in the array (the number 1) to the number 3:
var myArray = [1,2,3];
// Only change code below this line.
myArray[0] = 3;
That's cool, I don't think I had done that before. I learned about JavaScript objects today. Objects are like arrays, except instead of using indexes to access the data inside the object, like you do for arrays, we use properties to access the data. Here's an object I made, Winston the dog:
var myDog = {
"name": "Winston",
"legs": 4,
"tails": 1,
"friends": ["myself", "the white boxer"]
};
Here's how we add a property, "bark" to the object above:
myDog.bark = "loud";
Here' how we delete a property (tails, in this case) from the object above:
delete myDog.tails;
Here's how to make a quick array with 0, 1, 2, 3, and 4 as the contents:
var myArray = [];
for (i = 0; i < 5; i++) {
myArray.push(i);
}
Here's a quick while loop:
var myArray = [];
var i = 0;
while(i < 5) {
myArray.push(i);
i++;
}
It creates an array with 0, 1, 2, 3, and 4 in it.
The Math.random() function returns a random decimal number (a fraction). Here's a function that uses it (don't forget to capitalize the M):
function myFunction() {
return Math.random();
}
O.k., I'm on number 30 of the 4th section of FCC (the JavaScript section), and I'm going to take a break to go grab a bite to eat. I'll be right back, but I will definitely finish this 4th section today. I'm looking forward to the 6th section, "Basic Algorithm Scripting." That section has what look like Euler Problems to solve (FCC calls each chapter in section 6 a Bonfire).
This code:
Math.floor(Math.random()*10);
Will give us a number between 0 and 9. It gets the decimal number produced by Math.random(), multiplies it by 10, then rounds the number down.
This code:
Math.floor(Math.random() * (max-min + 1)) + min
Will output a random number in a given range. That's really useful, you can make a 6 sided die, or any sided die, with that formula. For example, this will return a random whole number between 0 and 9:
var min = 0;
var max = 9;
function myFunction() {
return Math.floor(Math.random() * (max-min + 1)) + min;
}
I learned about regular expressions today. Regular expressions are used to find certain words or patterns within strings. I haven't used these before. Here's an example:
/sampletext/gi
That code will run through a string, ignore case, and find every instance of the sample text, then return the number of times that the sample text was found in the string. The g tells the code to search the entire string, to not stop at the first match, and the i tells the code to not take caps into account. For numbers, this works:
/\d/g
Will find the amount of numbers. The i is not needed in this case. If we do this:
/\d+/g
That code allows for the possibility of multi-digit numbers. Next, \s is used to find white spaces, like so:
/\s+/g
We can invert any match by using the uppercase version, so for example this code:
/\S+/g
Would find anything that is NOT a white space. This is a slot machine game we worked on today:
<script>
function runSlots(){
var slotOne;
var slotTwo;
var slotThree;
var images = ["http://i.imgur.com/9H17QFk.png", "http://i.imgur.com/9RmpXTy.png", "http://i.imgur.com/VJnmtt5.png"];
slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
$('.logger').html('');
$('.logger').html('Not A Win');
// Only change code below this line.
$($('.slot')[0]).html('<img src="' + images[slotOne-1]+'">');
$($('.slot')[1]).html('<img src="' + images[slotTwo-1]+'">');
$($('.slot')[2]).html('<img src="' + images[slotThree-1]+'">');
// Only change code above this line.
if(slotOne !== slotTwo || slotTwo !== slotThree){
return null;
}
if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){
$('.logger').html(slotOne);
$('.logger').append(' ' + slotTwo);
$('.logger').append(' ' + slotThree);
}
return [slotOne, slotTwo, slotThree];
}
$(document).ready(function(){
$('.go').click(function(){
runSlots();
});
});
</script>
<div>
<div class = 'container inset'>
<div class = 'header inset'>
<img src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz' alt='learn to code javascript at Free Code Camp logo' class='img-responsive nav-logo'>
<h2>FCC Slot Machine</h2>
</div>
<div class = 'slots inset'>
<div class = 'slot inset'>
</div>
<div class = 'slot inset'>
</div>
<div class = 'slot inset'>
</div>
</div>
<br/>
<div class = 'outset'>
<button class = 'go inset'>
Go
</button>
</div>
<br/>
<div class = 'foot inset'>
<span class = 'logger'></span>
</div>
</div>
</div>
<style>
.slot > img {
margin: 0!important;
height: 71px;
width: 50px;
}
.container {
background-color: #4a2b0f;
height: 400px;
width: 260px;
margin: 50px auto;
border-radius: 4px;
}
.header {
border: 2px solid #fff;
border-radius: 4px;
height: 55px;
margin: 14px auto;
background-color: #457f86
}
.header h2 {
height: 30px;
margin: auto;
}
.header h2 {
font-size: 14px;
margin: 0 0;
padding: 0;
color: #fff;
text-align: center;
}
.slots{
display: flex;
background-color: #457f86;
border-radius: 6px;
border: 2px solid #fff;
}
.slot{
flex: 1 0 auto;
background: white;
height: 75px;
width: 50px;
margin: 8px;
border: 2px solid #215f1e;
border-radius: 4px;
text-align: center;
}
.go {
width: 100%;
color: #fff;
background-color: #457f86;
border: 2px solid #fff;
border-radius: 2px;
box-sizing: none;
outline: none!important;
}
.foot {
height: 150px;
background-color: 457f86;
border: 2px solid #fff;
}
.logger {
color: white;
margin: 10px;
}
.outset {
-webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
}
.inset {
-webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
}
</style>
Super cool, huh? O.k., that seems like a good place to stop for the day as it's getting late (10 p.m.) and I want to wake up early and get back to coding again tomorrow morning. Today's been a great day for coding. I learned more Bootstrap, JQuery, and started using regular expressions.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
JavaScript: 1,120
Treehouse Ranking (%): "You have more total points than 94% of all students."
Treehouse Badge(s) Earned Today:
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)
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)
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 (768 pgs.)
In Progress: "Head First JavaScript," by Eric Freeman and Elisabeth Robson (on pg. 56)
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers (293 pgs., 89 chapters with 20 questions/problems per chapter, for a total of 1,780 coding questions/problems answered)
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.
Note: Switched to FCC for the great online community and better updates/support.
My Progress on Free Code Camp (FCC):
1. HTML5 and CSS Complete
2. Responsive Design with Bootstrap Complete
3. jQuery Complete
4. Basic JavaScript Complete
5. Object Oriented and Functional Programming On part 2 of 12
6. Basic Algorithm Scripting
7. Basic Front End Development Projects
8. Intermediate Algorithm Scripting
9. Upper Intermediate Algorithm Scripting
10. Automated Testing and Debugging
11. Advanced Algorithm Scripting
12. AngularJS
13. Intermediate Front End Development Projects
14. Git
15. Node.js and Express.js
16. MongoDB
17. Full Stack JavaScript Projects
After the FCC work above (estimated to take 800 hours), there are 800 more hours of coding projects on behalf of non-profits, which, in addition to contributing to the common good, provide us an opportunity to expand our networks and build a robust portfolio.
Hours Spent Coding Today: 7
Total Hours Coding: 629
No comments:
Post a Comment