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

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>