Ordinal Indicator/Suffix for numbers in Javascript

Input | Output

1 => 1st
2 => 2nd
3 => 3rd
4 => 4th
0 => Not Placed
21 => 21st
etc…


function ordinalSuffixGen(inputVal) {
var mod10 = inputVal % 10,
mod100 = inputVal % 100;
if (inputVal <= 0) {
return "Not placed";
}
if (mod10 == 1 && mod100 != 11) {
return inputVal + "st";
}
if (mod10 == 2 && mod100 != 12) {
return inputVal + "nd";
}
if (mod10 == 3 && mod100 != 13) {
return inputVal + "rd";
}
return inputVal + "th";
}

Advertisements

Vue.js ‘$remove’ method

$remove is a handy internal method of Vue.js to remove an element in an array. This method is pretty much just calling the splice() function, but reducing the number of lines of code.

Example: https://jsfiddle.net/jpv056o2/


this.yourArrayName.$remove(elementIndex)

How to: ReactJS basics

(by AXDS)

ReactJS is a library developed at Facebook. It uses a concept called a Virtual DOM that renders nodes based on state changes. It performs mostly on the client side, but can be rendered server side.

The CDN links: https://facebook.github.io/react/downloads.html

ReactJS blank JSFiddle: https://jsfiddle.net/00d9dwzs/

The main idea around ReactJS is that is built around rendering components.

Firstly, we need to define a place in the HTML for the ReactJS application to render to. (You could also just use the HTML document or body)

<div id="container">

</div>

Components are defined using the 'createClass' method.

var App = React.createClass({

render: function() {
return (
<h1>Hello world!</h1>
)
}

});

Rendering out this components is pretty straight forward:

React.render(<App/>, document.getElementById('container'));

The above should render and display ‘Hello world!’ in the defined location.
components are custom classes, which can call and use other components.

Here’s a JSFiddle showing component rendering: https://jsfiddle.net/o0e73fqf/

In order to make this more useful we can introduce ‘props’. These are variables passes through components using attributes. For example, including 'attributeName="Hello"' This attributes are then available using '{this.props.attributeName}'

var App = React.createClass({

render: function() {
return (
<h1>Hello, {this.props.firstName} {this.props.lastName}!</h1>
)
}
});

React.render(<App firstName="John" lastName="Smith"/>, document.getElementById('container'));

Here’s a JSFiddle of the use of props:  https://jsfiddle.net/13jg12t9/

Another thing to know about ReactJS is it’s use of ‘state’. A component has state variables, these variables can be initialised straight away by setting them inside of the ‘getInitialState’ function. This can be available and read using '{this.state.stateVariable}' or, set using the 'this.setState' function.

var App = React.createClass({

getInitialState: function(){
return{
firstName: "John",
lastName: "Smith"
}
},


render: function() {
return (
<h1>Hello, {this.state.firstName} {this.state.lastName}!</h1>
);
}

});

React.render(<App />, document.getElementById('container'));

Here’s a JSFiddle of the use of state: https://jsfiddle.net/jrk9ycmn/

Components can be called and used inside of another component. This can be useful as you can set up a component that branches off to relevant other components that handle and return some HTML creation given their data attributes.

 

var peopleList =
[
{
firstName: "John",
lastName: "Smith"
},
{
firstName: "James",
lastName: "Bond"
}
];

var App = React.createClass({
render: function() {
return (
<div>
<Message message="Hello, world!"/>
<MakeListOfPeople data={this.props.data}/>
</div>
);
}
});

var Message = React.createClass({
render: function() {
return (
<div className="messageDiv">
<h1>{this.props.message}</h1>
</div>
);
}
});

var MakeListOfPeople = React.createClass({
render: function() {
var PeopleList = this.props.data.map(function(people) {
return (
	<li>{people.firstName} {people.lastName}< /li>
);
});
return (
<ul className="commentList">
{PeopleList}</ul>
);
}
});

React.render(<App data={peopleList}/>, document.getElementById('container'));

Here’s a JSFiddle of components inside components: https://jsfiddle.net/2m4vLL56/

Although there are a lot more component functions to know, it’s pretty much the basics of ReactJS.


 

Information/Tutorials Links:

 

Useful Examples:


 

How to: AngularJS

(by AXDS)

Example: http://jsfiddle.net/jc5au247/

Angular is a JavaScript Framework that extends HTML with directives and attributes. When an Angular app is set up on an element it sets up a ‘scope’. The JavaScript deals with what happens to the values inside this scope. This is very useful for forms, inputs, or displaying data.

The AngularJS script can be referenced using:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Once the script has been added the functionality should be all there.

There are many ‘ng-directives’ that can be used inside HTML elements. All these are online.

The main directive is ‘ng-app’ which sets up an AngularJS section. This can be set to be for the whole page by including it in the <html> as <html ng-app=”myApp”> or inside any element.

For my example I’ll set it up in a <div>:

<div ng-app="myApp">

The next directive I’ll use is ‘ng-controller’. This defines a controller inside of the ‘ng-app’. This controller, once referenced, handles all the ‘ng-model’ elements included. The ‘ng-model’ elements just bind a name to the element so it can be used.

<div ng-app="myApp">
<div ng-controller="myCtrl">
<input ng-model="fullName">
<h1>My name is {{fullName}}</h1>
<div ng-controller="myCtrl">
</div>
</div>

Inside the ‘ng-controller’, a scoped variable name can be called using double brackets:

{{variable}}

The AngularJS app is finished off by including script and calling a function to build a module. In this same script we can manipulate the controller scope.

<script>

//Sets up the App
var app = angular.module('myApp', []);

//Sets up the Controller
app.controller('myCtrl', function($scope) {
//Looks for the model 'fullName' in the controller and sets it.
$scope.fullName= "John Smith";
});

</script>