Hey Student,
This is a tricky one! What I would first do is use console.log() to make things more transparent and see what's really going on when your onclick event listener callback is fired.
When I console.log(btnNum) inside the onclick callback function I get 3 not matter what button I click, which isn't what we want. So I would start using console.log() to really dig in and see what's going on.
If you still feel stuck I provided an explanation of what is happening below:
When the for loop is executing it is registering an event listener on each button (btn-1, btn-2, btn-3), just like we want. However, each time we go through a loop the variable btnNum gets reassigned to btnNum + 1. So after the DOM loads and we start interacting with the page, in this case clicking our buttons, btnNum is 3. So no matter what button we click we are asking the browser to alert(prizes[3]), which unfortunately doesn't exist.
Remember, arrays are 0 index based, so even though prizes length is 3 the index of the last string in the prizes array is 2. So the reason we are getting undefined is because we are asking for the 4th string in the prizes array when we alert(prizes[3]), and it doesn't exist.
Here are some links that might be helpful:
Hey Student,
Good question. There is a subtle difference, but an important one. has_and_belongs_to_many allows you to make the many-to-many relationship directly, has_many :through makes the association indirectly using a join model.
Why would you want a join model you might ask? has_and_belongs_to_many is certainly simpler, but doesn't give any flexibility with the join model. You would use has_many :through when you would like to interact with the join model independently. For example, if you needed callbacks, validations, etc.
The docs go over exactly this here
Hey Student,
I can totally see how SQL injections can be a bit confusing and scary.
SQL injection is a technique hackers or users with bad intent use by "injecting" or manipulating SQL commands into your SQL statement on the back-end, usually via text input. As a developer you want to be extremely careful, because if there is nothing preventing a user from entering "wrong" data then they can technically attempt to enter "smart data". Let me explain.
You very commonly see SQL injections via search features. If a user enters data that always evaluates to true and there is nothing preventing them from entering wrong data, they could potentially do some damage. Like this for example:
If a user enters in the search field 105 or 1=1
The resulting query would be: SELECT * FROM Users WHERE UserId = 105 or 1=1
This query will grab all users WHERE 1=1, which is always true, so all users and their data would be returned :(
SQL injections are hardly ever an issue in Rails applications, because Rails does some stuff for you. However there are many strategies developers use to prevent SQL injections themselves. Here is a link to a prevention cheatsheet.
Let me know if you have any further questions!
Dear Student,
Good question. Javascript is such a flexible programming language used everywhere nowadays, and it can be confusing understanding these frameworks/libraries and when to use them.
A high level answer is that Angular and jQuery work on different levels and are used for different purposes.
jQuery
jQuery was originally created to interact with the DOM (Document Object Model) on various browsers. It has since expanded a bit and we can do some pretty cool stuff with jQuery (like AJAX), but at it's core it is used for DOM manipulation. Things like:
- Finding elements
- Onclick handlers
- Changing UI
- etc
Angular
Angular (and other front-end javascript frameworks) were built to add MVC (Model, View, Controller) concepts to front-end development. Instead of just dealing with things at the base-level like the DOM, Angular aims to give more structure as well, making it easier to scale and work with other developers. Some of it's appealing features are:
- MVC
- 2 way data-binding
- Routing
- Modular
- Maintainable/Scalable
- Fast
Summary
You use jQuery for mostly DOM manipulation, with Angular (or other front-end frameworks) you build web applications. Here is a Quora link I really like that has multiple great answers.
Hope this was helpful. I would focus less on the "pros/cons" when comparing the two because they both should be used to accomplish different tasks. Let me know if you have any further questions!
Dear Student,
Unfortunately I am probably not the best mentor for this one. I don't have that much experience with algorithms. I am a little familiar with Big O notation however, and will give this my best shot.
So Big O is meant to calculate how an algorithm scales. It helps to know how inefficient an algorithm is for scaling purposes.
Basically the way you do that is measure the amount of data going in and the amount of time it is taking for the algorithm to execute and return an output. For example O(n^2) would look like this:
- 1 item: 1 second
- 10 items: 100 seconds
- 100 items: 1000 seconds
The items are increasing by 10 but the amount of time is increasing by 10^2.
So overall we know there are 7 notations, and which one your algorithm uses is based on the relationship between the data size being inputted and the amount of time it takes to execute.
These stackoverflows go into great depth here:
- http://stackoverflow.com/questions/487258/what-is-a-plain-english-explanation-of-big-o-notation?rq=1
- http://stackoverflow.com/questions/3255/big-o-how-do-you-calculate-approximate-it
Also I'm sure there are other mentors who are better suited for this question. I'd be more than happy to help you find one if you need. Hope this was somewhat helpful!
Dear Student,
This is definitely a tricky one, no doubt. Before we dive in, it's worth noting that the use of float is becoming more and more discouraged now that new alternatives are starting to emerge like flexbox and display: inline-block. But anyways, let's dig into your code.
So the issue is that your container, in this case div.pricing-tiers, is collapsing because it's children (div.tier) have the property float: left. Because it's children have the property float: left, the div is not aware there is content inside of it. This is a super common problem, and the solution designed for this issue is referred to commonly as clearfix. Clearfix just automatically clears all of its children elements.
I updated your css file with some changes here. I added a .clearfix class that when applied to an HTML tag uses the :after selector to give it some content, display as a table, and clear both. Hope this was helpful! Let me know if you have any other questions. You can read more about clearfix here