The reason this code does not work is because only one event listener is created and it is being assigned a selector of getElementById('btn-3')
You can see this yourself in the following example:
var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
document.getElementById('btn-' + btnNum).onclick = function() {
alert(btnNum); // 3
};
};
To insure multiple event listeners are created you can wrap them in a function (a closure ) and pass in the iteration variable. This insures an event listener gets created and assigned for each loop iteration.
var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
function assignEventListener(btnNum){
document.getElementById('btn-' + btnNum).onclick = function() {
alert(prizes[btnNum]);
};
};
for (var btnVal = 0; btnVal < prizes.length; btnVal++) {
assignEventListener(btnVal)
};
When your application gets big you may wish to remove some of the logic from your controllers to make your code easier to read. The way you do this in Angular is by creating something called a service(s). Services come in various “flavors” or “styles”. The word service is an umbrella term that includes these "flavors" or “styles”. Three of the most common services are:
Provider-service
Factory-service
Service-service (This is not to be confused with the higher-level concept of service. I know that this is confusing so I will refer to the Service “style” as the Service-service to distinguish from the higher-level umbrella term of “service”.)
The Factory-service and the Service-service do (mostly) the same thing that the Provider-service does but with different syntax.
So what does the provider service do ?
The provider syntax returns the data from a method called $get. The data can be an object, a string or something else. The following example returns an object.
app.provider("myProvider",function(){
this.$get = function(){
return {name:"Dave"}
}
});
app.controller("myController",function(myProvider){
console.log(myProvider) // {name: “Dave”}
});
This example is the same as the previous one except it returns a string:
app.provider("myProvider",function(){
this.$get = function(){
return “Hello world”
}
});
app.controller("myController",function(myProvider){
console.log(myProvider) // Hello world
});
The factory can be used as a more syntax friendly way of writing the previous code. This example returns an object
app.factory("myFactory",function(){
return {name:"Dave"}
});
app.controller("myController",function(myFactory){
console.log(myFactory) // {name:”Dave”}
});
This is another example that returns a string:
app.factory("myFactory",function(){
return "Hello world"
});
app.controller("myController",function(myFactory){
console.log(myFactory) // “Hello world”
});
Service-services do the same things as factories but the difference is that it uses constructor-style syntax and can only return an object. The following is an example:
app.service("myService",function(){
this.myMethod = function(){
return "myData"
}
});
app.controller("myController",function(myService){
console.log(myService.myMethod()) // myData
});
Factories-service: Simple syntax , can be used to return any type of data.
Service-service: Can only be used to return an object
Provider-service:
The one thing the provider-service can do that the other two cannot is to be integrated with the config() method allowing it to be accessed during the configuration phase of you app. Here is an example of what the syntax looks like. In this example the property data is changed from the word “data” to “We are the world”.
app.provider("myProvider",function(){
this.data = "my data";
this.setData = function(modifiedData){
this.data = modifiedData
};
this.$get = function(){
return this.data;
};
})
app.controller("myController",function(myProvider){
console.log(myProvider)
});
To use a provider with the config method you need to set the suffix “provider” to your providers name.
app.config(function(myProviderProvider){
myProviderProvider.setData("We are the world");
});
The difference between a library and a framework is that a library is a collection of code pieces that you can use however you want. Frameworks on the other hand are opinionated in how you are expected to use them. The benefit of using a framework over a library is that a framework forces you into working a certain way (and if it is a good framework forces good habits on the developer). This is good if you are working with a team and you need to read each other’s code. If everyone is writing code in a similar manner it helps with collaboration. Frameworks also lend structure to an application. A library can be used in anyway an individual see fit. Libraries have less rules surrounding how you are expected to use it. This adds more flexibility but also more confusion if you are working with others.
Dear student, Before I explain how my solution works I will tell you what I did. Prior to fixing your problems I ran the code through the W3C HTML and CSS validator tools to check for errors. I then did the following things.
-
I replaced the float-left property on line 24 with display:inline-block
-
I removed the width:100% from the class “pricing”
-
I also removed the bullet points from the li items on line 39 using list-style-type: none.
-
On .tier h1 I changed margin-bottom: 20px to margin:0px and added padding-bottom:10px;
-
On line 38 I set the ul to padding: 0px and on line 36 I set margin:0px
-
I ran the code through the W3c HTML validator and CSS validator tools again.
The final CSS code is placed at the bottom of the document.
Understanding the first issue requires an understanding of block-level vs. inline level elements and their behavior in relation to HTML/CSS. Block level elements by default display stacked vertically and inline level elements display horizontally. Block level elements respond to the width and height properties of CSS and inline level elements do not.
List item elements are block level elements.
It is possible to brute-force a block level element to behave as an inline level element and vice versa using CSS by using the display property with the following syntax:
display:block
display:inline
However, if you want to have a collection of element display horizontally and have them respond to the width and height properties of CSS the way that you will do it is to use a third option:
display:inline-block.
Sometimes developers try to "float" elements to create this effect. This is usually because as a side effect of floating elements they will render horizontally.
The second issue is that you had the class “pricing” width property set to 100%.
This does not work because the body element of a page has a default padding and margin value and when the width is set to 100% on an element it extends beyond these boundaries.
The remaining steps should be self-explanatory. If they are not please email me and I will go over them. -Mentor
header {
width: 100%;
height: 60px;
background-color: #333;
}
.pricing {
padding: 20px;
background-color: tomato;
}
.pricing-tiers {
width: 960px;
margin: 0px auto;
background-color: #ddd;
}
.pricing-tiers .tier {
width: 260px;
margin: 20px;
padding: 10px;
background-color: white;
display:inline-block;
}
.tier h1 {
font-family: "Helvetica", sans-serif;
font-weight: bold;
font-size: 2em;
margin: 0px;
padding-bottom:10px;
text-align: center;
}
.pricing-tiers > .tier:last-child {
margin-right: 0px;
}
ul{
padding:0px;
margin:0px;
}
li{
list-style-type:none;
}