Web Technology Experts Notes

Showing posts with label Frontend Interview Questions and Answers. Show all posts

Monday 29 May 2017

Angularjs 2 Interview Questions and Answers

Question: Why AngualrJS2 over AngualrJS1?

Angular 2 is simpler and faster than Angular 1.
You can update the large data sets with minimal memory overhead.
It will speed up the initial load through server side rendering.

Question: What are the feature of AngualrJS2?

Angular 2 is faster than Angular 1
Angular 2 is easier than Angular 1
It supports old browsers also including IE9+ and Android 4.1+.
It is a cross platform framework.
Angular 2 is mainly focused on mobile apps.
Code structure is very simplified than the previous.

Question: How to install AngualrJS2 in NodeJS?

Create an folder and go inside that folder using command line.

Create en empty file package.json and add following contents.

{
  "name": "angular2-demo",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

Create an empty file tsconfig.json and add following contents.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Create an empty file typings.json and add following contents.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js",
    "jasmine": "registry:dt/jasmine",
    "node": "registry:dt/node"
  }
}

Execute following command from command line.
```
npm install
```

Tuesday 25 April 2017

React JS Interview Questions and Answers

Question: What is ReactJS?
React is front end library developed by Facebook.

Question: Why ReactJS is used?
React is used to handle the view part of Mobile application and Web application.

Question: Does ReactJS use HTML?
No, It uses JSX which is simiar to HTM.

Question: When ReactJS released?
March 2013

Question: What is current stable version of ReactJS?
Version: 16.2.0
Release on: November 28, 2017

Question: What is Repository URL of ReactJS?
https://github.com/facebook/react

Question: What are the life Cycle of ReactJS?

Initialization
State/Property Updates
Destruction

Question: What are the feature of ReactJS?

JSX: JSX is JavaScript syntax extension.
Components : React is all about components.
One direction flow: React implements one way data flow which makes it easy to reason about your app

Question: What are the Advantages of ReactJS?

React uses virtual DOM which is JavaScript object. This will improve apps performance
It can be used on client and server side
Component and Data patterns improve readability.
Can be used with other framework also.

Question: How to embed two components in One component?

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}

export default App;

Monday 17 April 2017

Bootstrap Datatable Example - Export into CSV

Bootstrap DataTables integration provides a renderer for the pagination control in DataTables to ensure that the pagination of the table is also styled consistently by Bootstrap. It also provide sorting and searching. It enable to download the data as csv.

HTML Part

<table cellspacing="0" class="display nowrap" id="example" style="width: 100%px;">
            <thead>
<tr>
                    <th>Employee Name</th>
                    <th>Designation</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Date</th>
                    <th>Salary</th>
                </tr>
</thead>
            
            <tbody>
<tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>320,800</td>
                </tr>
<tr>
                    <td>Fiona Green</td>
                    <td>Chief Operating Officer (COO)</td>
                    <td>San Francisco</td>
                    <td>48</td>
                    <td>2010/03/11</td>
                    <td>850,000</td>
                </tr>
<tr>
                    <td>Shou Itou</td>
                    <td>Regional Marketing</td>
                    <td>Tokyo</td>
                    <td>20</td>
                    <td>2011/08/14</td>
                    <td>163,000</td>
                </tr>
<tr>
                    <td>Michelle House</td>
                    <td>Integration Specialist</td>
                    <td>Sidney</td>
                    <td>37</td>
                    <td>2011/06/02</td>
                    <td>95,400</td>
                </tr>
<tr>
                    <td>Serge Baldwin</td>
                    <td>Data Coordinator</td>
                    <td>Singapore</td>
                    <td>64</td>
                    <td>2017/04/09</td>
                    <td>138,575</td>
                </tr>
<tr>
                    <td>Zenaida Frank</td>
                    <td>Software Engineer</td>
                    <td>New York</td>
                    <td>63</td>
                    <td>2010/01/04</td>
                    <td>125,250</td>
                </tr>
<tr>
                    <td>Zorita Serrano</td>
                    <td>Software Engineer</td>
                    <td>San Francisco</td>
                    <td>56</td>
                    <td>2017/06/01</td>
                    <td>115,000</td>
                </tr>
<tr>
                    <td>Jennifer Acosta</td>
                    <td>Junior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>43</td>
                    <td>2013/02/01</td>
                    <td>75,650</td>
                </tr>
<tr>
                    <td>Cara Stevens</td>
                    <td>Sales Assistant</td>
                    <td>New York</td>
                    <td>46</td>
                    <td>2011/12/06</td>
                    <td>145,600</td>
                </tr>
<tr>
                    <td>Hermione Butler</td>
                    <td>Regional Director</td>
                    <td>London</td>
                    <td>47</td>
                    <td>2011/03/21</td>
                    <td>356,250</td>
                </tr>
<tr>
                    <td>Lael Greer</td>
                    <td>Systems Administrator</td>
                    <td>London</td>
                    <td>21</td>
                    <td>2009/02/27</td>
                    <td>103,600</td>
                </tr>
<tr>
                    <td>Jonas Alexander</td>
                    <td>Developer</td>
                    <td>San Francisco</td>
                    <td>30</td>
                    <td>2010/07/14</td>
                    <td>86,600</td>
                </tr>
<tr>
                    <td>Shad Decker</td>
                    <td>Regional Director</td>
                    <td>Edinburgh</td>
                    <td>51</td>
                    <td>2008/11/13</td>
                    <td>183,000</td>
                </tr>
<tr>
                    <td>Michael Bruce</td>
                    <td>Javascript Developer</td>
                    <td>Singapore</td>
                    <td>29</td>
                    <td>2011/06/27</td>
                    <td>183,000</td>
                </tr>
<tr>
                    <td>Donna Snider</td>
                    <td>Customer Support</td>
                    <td>New York</td>
                    <td>27</td>
                    <td>2011/01/25</td>
                    <td>112,000</td>
                </tr>
</tbody>
        </table>

CSS Part


<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"></link>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"></link>

JavaScript Part


<script language="javascript" src="//code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js" type="text/javascript"></script>         
<script language="javascript" src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js" type="text/javascript"></script>

    $(document).ready(function() {
        $('#example').DataTable({
            "order": [[0, "asc"]]/* First column in ascending order */,
            dom: 'Bfrtip',
            "pageLength": 5, /* Number of records */
            buttons: [
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
            ]
        });
    });

Thursday 18 August 2016

How to get visitor location with JavaScript ?

Today there are lots Free/Paid API avaiable which give you client information.
Following are two example which give you client information like city, country, country code, ip, local date time, timezone etc with javascript.
Question: How to get visitor location javascript with freegeoip.net?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready( function() {
   $.getJSON("http://freegeoip.net/json/", function(result){
       console.log(result);                        

       });
   });

Output

{  "ip": "112.196.3.177",
  "country_code": "IN",
  "country_name": "India",
  "region_code": "PB",
  "region_name": "Punjab",
  "city": "Mohali",
  "zip_code": "",
  "time_zone": "Asia/Kolkata",
  "latitude": 30.78,
  "longitude": 76.69,
  "metro_code": 0
}

Question: How to get visitor location javascript with ipinfo.io?


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready( function() {
   $.getJSON('http://ipinfo.io', function(data){
    console.log(data)
  })
    }); 
</script>

Output

  {"ip": "112.196.3.177",
  "hostname": "No Hostname",
  "city": "Mohali",
  "region": "Punjab",
  "country": "IN",
  "loc": "30.7800,76.6900",
  "org": "AS17917 Quadrant Televentures Limited"
}

Wednesday 17 August 2016

Bootstrap Interview Questions and Answers for 3 Month Experience

Question: Why Use Bootstrap?

Responsive features: Website built using bootstrop will automatically adjust themselves on all devices like all type phone, ipad, and all type of desktop/laptop.
Bootstrap is compatibile with all browser (mobile and desktop).
Easy to start.
Fast development

Question: How to start Bootstrap without downloading?
Just including following files in web page, and start working on bootstrp.


<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Question: What doctype use by bootstrap?
Just including following files in web page, and start working on bootstrap.

HTML5 doctype

Question: What are meta tag require to set for proper rending in mobile?
<meta name="viewport" content="width=device-width, initial-scale=1">

Question: Which main class need to declare for fixed layout and fluid layout?
.container For fixed layout.
.container-fluid For fluid layout.

Question: How many column are allowed in Bootstrap Grid System?
12

Question: How many Grid Classes are available in Bootstrap Grid System?
4

xs: phones
sm : tablets
md : desktops
lg : large desktops

Question: Basic Structure of a Bootstrap Grid?

<div class="row">
<div class="col-*-*">
</div>
</div>
<div class="row">
<div class="col-*-*">
</div>
<div class="col-*-*">
</div>
<div class="col-*-*">
</div>
</div>

Question: What are Structure of Bootstrap Grid?

Question: What are the classes used for Success and warning?
.bg-primary: Important message.
.bg-success: successful message.
.bg-info: Informatoinal message.
.bg-warning: Warning message.
.bg-danger: Represent message.

Question: How to make an image Rounded Corners?
Just add below class in img tag.

.img-rounded

Question: How to make an image Responsive?
Just add below class in img tag.

.img-responsive

Question: How to make an youtube video as Responsive?
Just add below class in iframe tag.

.embed-responsive-item

Question: How to make an div with rounded border?
Just add below class in tag.

.well

Question: How to make display successful or failure message with cross link?


<div class="container">
<h2>
Alerts</h2>
The .fade and .in classes adds a fading effect when closing the alert message.<br />
<div class="alert alert-success fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Success!</strong> Successful Message.
  </div>
<div class="alert alert-info fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Info!</strong> Informational Message.
  </div>
<div class="alert alert-warning fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Warning!</strong> Warning Message.
  </div>
<div class="alert alert-danger fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Danger!</strong> Something danger.
  </div>
</div>