Write JavaScript code that accepts an array of integer and output the sum of two largest integers from array. But the sum of those two largest integers should be even number.

Write JavaScript code that accepts an array of integer and output the sum of two largest integers from the array. But the sum of those two largest integers should be even number.

Example:

#1
var int_array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// should output 7+9 = 16

#2
var int_array = [9, 5, 3, 2, 8, 14, 5, 7, 3, 11, 12]

// should output 12+14 = 26

Following is the solution to the above interview question.

 

//var int_array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 var int_array = [9, 5, 3, 2, 8, 14, 5, 7, 3, 11, 12];
 var first_max_number = Math.max.apply(null, int_array); //Find first max number
 
 var index = int_array.indexOf(first_max_number);
 if (index > -1) { //Once get max number pop from array
  int_array.splice(index, 1);
 }
 
 var second_max_number =0;
 for (i=0; i < int_array.length; i++){ //for second max number 
   second_max_number = Math.max.apply(null, int_array); //find second max number
  if(isEven(first_max_number) && isEven(second_max_number)){ // check both number should be event or odd
   break; //Once condition get satisfy, break the look 
  }else if(isOdd(first_max_number) && isOdd(second_max_number)){
   break;
  }
 
  index = int_array.indexOf(second_max_number);
  if (index > -1) { //pop second max number from the array
   int_array.splice(index, 1);
  }
 }
 var sum = first_max_number + second_max_number;
 alert(first_max_number +" + "+ second_max_number +" = "+ sum);
 
 function isEven(n) { //check event number
  return n % 2 == 0;
 }

 function isOdd(n) { // check odd number
    return Math.abs(n % 2) == 1;
 }

Hope it will help you to in the future.

Read More

What is the difference between state and props in ReactJs

There are many times we play with state and props in javascript how it's different in react.

Those who don't know about the difference of state and props So I thought it will be a good idea to write a blog post about it.

You may ask, if data is only flown downwards from components to components, how could we access data we need from the previous component?
The answer to that is props.

React uses props to transfer data we need to different components.

Props and state are related.For parent-child communication, simply pass props.

Use state to store the data your current page needs in your controller-view.

Use props to pass data & event handlers down to your child components.

These lists should help you while working with data in different components.

Props:
- Props is immutable.
- Used to pass data down from your view-controller.
- Better performance
- Use this to pass data to child components

State:
- State is mutable
- Should be managed in your view-controller.
- Worse performance
- Don't access this to from child components, pass it down with props instead

The state of one component will often become the props of a child component.

Props are passed to the child within the render method of the parent as the second argument to React.createElement() or, if you're using JSX, the more familiar tag attributes.

The parent's state value of childsName becomes the child's this.props.name.

From the child's perspective, the name prop is immutable. If it needs to be changed, the parent should just change its internal state:

 this.setState({ childsName: 'New name' });

and React will propagate it to the child for you.

A natural follow-on question is: what if the child needs to change its name prop?

This is usually done through child events and parent callbacks. The child might expose an event called, for example, onNameChanged.

The parent would then subscribe to the event by passing a callback handler.

The child would pass its requested new name as an argument to the event callback by calling,
 e.g.,  this.props.onNameChanged('New name'), and the parent would use the name in the event handler to update its state.

Read More

Create your first Vue.js application using Visual Studio Code (VS Code)

Going to create Vue.js application using Visual Studio Code before going to create the application, I assume that you already familiar with Visual Studio Code editor.

If you are not aware of it so let me take opportunity to help on this. Visual Studio Code is an open source and free editor from Microsoft. So anyone can use as a free software for the web development.

You can download from here and use for the web development.

Once you open the VS Code its a welcome page open.

Now we are going to create new project/folder (choose your project path). I have created new folder VueJsWithVSCode.

Its an empty folder at moment so we are going to create the first file index.html.

Here, I am going to create simple Vue.js application which will help to understand to beginner.

Vue is a progressive framework for building user interfaces. Vue code library focus on view layer only, and is easy to pick up and integrate with other libraries or existing projects.

Created index.html file with basic html coding. Once you have ready with basic setup of html page.

Going to add Vue library. There is a multiple way to add Vue library.

1. If you are aware of NPM then you can use of Vue npm to install the package.
2. You can use vue-cli to create the application but do not recommend that beginners start with vue-cli.
3. You directly include vue library on your index.html file.

Going to add first vue app on index page.

 

{{ message }}

 

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive.
Binding with element attribute.
How to text interpolation using bind element attributes.

 


    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  

 
var app2 = new Vue({
  el: '#app-2',

  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

After adding code and run it. you will see the following line of message on the screen. Once you mouse hover on the text you will get the dynamic text which was bind with the title attribute.

 

Its a simple application for the newbie for Vue.js. 

Read More