chien/cm answer.md

## cm answer.md

      
    Raw
  

              cm answer.md
            
          
    ###JavaScript###
Hi,
The main problem of this code is the variable scope of btnNum.
When you define onclick callback function, it will not be called immediately, but will be triggered when users click one of the buttons. And by the time when users click a button, the btnNum is already set to 3. (It increments three times from zero to three.) And the onclick callback function will use the last btnNum value - 3 to run the callback function and since prizes array don't have corresponding element with the index of 3. ** prizes[btnNum] ** return undefined.
The following is the working version of code for your reference. Please let me know if you have further question. Happy to walk through this code with you in the call.
var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];

for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
    // for each of our buttons, when the user clicks it...
    document.getElementById('btn-' + btnNum).onclick = function(event) {
        // tell her what she's won!
        var targetBtn = event.target || event.srcElement;
        var btnId = targetBtn.id.split("-")[1];
        alert(prizes[btnId]);
    };
}
###Rails###
Hi,
First, you will need to use :through when you're defining active models when underlying database schema has a table between the tables you want to build the associations.
In the example below, one organization has many departments and one department has many employees. If you want to access/define employees from organization model. You will need to go through departments (a join table defines the relationship between employees and organizations.
In the same example, between employee and department model, there's no table between them. so you can use has_many without through to build the association.
class Employee
  belongs_to: :department
end

class Departmet
  belongs_to :organization
  has_many :employees
end

class Organization
  has_many :departments
  has_many :employees through: :departments
end
As for has_one through, the concept is the same as has_many through - when you have a table between the tables you want to build associations, you will need through. One use case is as below:
A supplier has a account with your company and each account has multiple records of account history. In this case, you can use has_one through definition.
class Supplier < ActiveRecord::Base
  has_one :account
  has_one :account_history, :through => :account
end

class Account < ActiveRecord::Base
  belongs_to :supplier
  has_one :account_history
end

class AccountHistory < ActiveRecord::Base
  belongs_to :account
end
##SQL##
SQL injection is a code injection technique used to attack data-driven application to get information/data from your database. The code is injected to one of your application's entry field to dump the whole database content.
Use rails application as an example.
User.first("login = '#{params[:name]}' AND password = '#{params[:password]}'")
If your authentication code is as above,
an attacker could enter "'' OR '1'='1'" for name field and "'' OR '2'>'1'" for password and the above code will generate the following query which would allow this attacker to login.
SELECT * FROM users WHERE login = '' OR '1'='1' AND password = '' OR '2'>'1' LIMIT 1
Rails has a built-in filter for special SQL characters, which will escape ' , " , NULL character and line breaks. So the following two ways will prevent SQL injection problems.
Model.where("login = ? AND password = ?", entered_user_name, entered_password).first
Model.where(login: entered_user_name, password: entered_password).first
Or you can use sanitize_sql() method to escape ' , " , NULL character and line breaks to prevent sql injection.
Here is the document about sql injection from the rails guide for your reference
###Angular/jQuery###
A framework, such as Angular, provides the foundation of how you could build a javascript application whereas a library provides functions for specific use. Using a framework, you will need to understand the design concept and architecture of the framework before you can start writing code efficiently working with the framework; using a library, you will need to design your own code structure and thinking about how to separate your code to make it maintainable and scalable.
Angular provides many things and the main benefits in my opnion are as below:

data binding (the data change will be reflected on the page after you specifi {{data-field}} in the template }}
reusable template
url routing
clean, modular, reusable architecture

The main drawback is that you have to learn the architecture before you can efficiently work with the framework.
Here is a very good blog post comparing Angular and jQuery for your reference.
###Algorithms###
Hi,
Big O notation is one of different ways to describe the performance or complexity of an algorithm (there are also theta and omega notation). Big O notation specifically describes the worst case scenario of an algorithm (theta is for the average case and omega is for the best case).
We usually use Big O Notation to determine the complexity of the algorthm.
Here is a cheat sheet of complexities of different algorithem and data structure
To understand better how to determine the complexity of an algorithm needs some work on understanding how to analyze algorithm. I'd suggest going trough some of the algorithm in the link above, such as quicksort and mergesort.
We could also go through one of these algorithm together in the call so that you could know better how to analyze the complexity of it.
###CSS###
Hi,
The main problem her is that the floated elements do not add to the height in the container element.
To correctly use float in the CSS, you will need to understand how float works first

Parent element collapses, when it contains floated child elements. In order to prevent this, we use clear: both; property, to clear the floated elements, which will prevent the collapsing of the parent element.
Think of it where we have a stack of various elements. When we use float: left; or float: right; the element moves above the stack by one. Hence the elements in the normal document flow will hide behind the floated elements because it is on stack level above the normal floated elements.

In this case, we want pricing section to recognize the height of the child elements, so we can't use clear both trick. Instead, we need to also float this parent element. Then the problem becomes that once we float all the elements, the pricing-tiers div is not centered. To fix this, we will need to put a wrapper and use relative position to center the pricing-tiers div.
Also, a few other minor bugs in your code, the ul element should use none list-style to remove the bullet before each li element. And the horizontal padding of the pricing is not needed. I also made these changes in the code below.
Please let me know if you have any further question. Happy to walk you through the process of fixing this problem.
<header></header>
<section class="pricing">
  <div class="wrapper">
    <div class="pricing-tiers">
      <div class="tier">
        <h1>The plan</h1>
        <ul>
          <li>You get all the things</li>
          <li>plus more!!</li>
        </ul>
      </div>

      <div class="tier">
        <h1>The plan</h1>
        <ul>
          <li>You get all the things</li>
          <li>plus more!!</li>
        </ul>
      </div>

      <div class="tier">
        <h1>The plan</h1>
        <ul>
          <li>You get all the things</li>
          <li>plus more!!</li>
        </ul>
      </div>
    </div>
  </div>
</section>
header {
  width: 100%;
  height: 60px;
  background-color: #333;
}

.pricing {
  width: 100%;
  padding: 20px 0px;
  background-color: tomato;
  float: left;
}

.wrapper {
  position: relative;
  left: 50%;
  float: left;
}

.pricing-tiers {
  width: 960px;
  margin: auto;
  background-color: #ddd;
  position: relative;
  left: -50%;
  float: left;
}

.pricing-tiers .tier {
  width: 260px;
  margin: 20px;
  padding: 10px;
  background-color: white;
  position: relative;
  float: left;
}

.tier h1 {
  font-family: "Helvetica", sans-serif;
  font-weight: bold;
  font-size: 2em;
  margin-bottom: 20px;
  text-align: center;
}

.pricing-tiers > .tier:last-child {
  margin-right: 0px;
}

.tier ul {
  list-style: none;
}