Create Basic Calculator using Angular2

Setup Angular 2 Repo

https://github.com/angular/quickstart

In app.module.ts

import FormsModule as we need to use two way data binding

After making changes

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

In app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: '/app/app.component.html',
})
export class AppComponent  {
  inputOne: number = 0;
  inputTwo: number = 0;
  result: number = 0;
  operations: any[] = [
    {id: '+', name: '+'},
    {id: '-', name: '-'},
    {id: '*', name: '*'},
    {id: '/', name: '/'}
  ];

  performOperation(operation) {
    if(!this.inputOne || !this.inputTwo) {
      alert('Please filled Input');
      return false;
    }
    if(operation == '+') {
      this.result = this.inputOne  + this.inputTwo;
    } else if (operation == '-') {
      this.result = this.inputOne  - this.inputTwo;
    } else if (operation == '*') {
      this.result = this.inputOne  * this.inputTwo;
    } else {
      this.result = this.inputOne  / this.inputTwo;
    }
  }
}

create app.component.html file inside app folder


In app.component.html



<div class="row">
  <div class="col-md-2 col-md-offset-5">
    <h1>Calculator</h1>
    <p><input type="number" [(ngModel)] = "inputOne"/></p>
    <p><input type="number" [(ngModel)] = "inputTwo"/></p>
    <p>
      <select #selectOperation>
        <option *ngFor="let operation of operations" [value]="operation.id">{{ operation.name}}</option>
      </select>
    </p>
    <button type="submit" class="btn btn-primary" (click) = "performOperation(selectOperation.value)">SUBMIT</button>
    <h3>Result : {{ result }}</h3>
  </div>
</div>




In index.html

add this for using bootstrap

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Adding external js and css file in Laravel 5.1

Adding CSS File :-

<link rel="stylesheet" href="{{URL::asset('assets/css/bootstrap.min.css')}}">

Adding JS File :-

<script type="text/javascript" src="{{URL::asset('assets/js/angular/angular.min.js')}}"></script>

Validate passwords with Laravel 5.1

validate a password using following condition:

1) Password is at least 8 characters long

2) Password should contains at least 1 uppercase, 1 lowercase and 1 special character letter

  $rules = array(
        'username' => 'required',
        'email' => 'required | between:5,100 | email ',
        'password' => 'required | confirmed |regex:/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()+]+.*)[0-9a-zA-Z\w!@#$%^&*()+]{8,}$/'
    );

    $input = Input::all();

    $validation = Validator::make($input, $rules);

    if ($validation->fails()){
        //if validation fails redirect with inputs
        return redirect()->route('/')->withInput()
            ->withErrors($validation);
    }

Remove back button press behaviour of browsers

In most of online examination, developer uses concept of remove browser back button press behaviour, to implements user unable to press browser back button to go previous page .
   This can be acheived using Jquery:-
  This is the code - cheers :)

  window.location.hash="no-back-button";
  window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
  window.onhashchange=function(){
    window.location.hash="";
    history.replaceState('', document.title, window.location.pathname);
  }

  // remove fragment as much as it can go without adding an entry in browser history:
  window.location.replace("#");

  // slice off the remaining '#' in HTML5:    
  if (typeof window.history.replaceState == 'function') {
    history.replaceState({}, '', window.location.href.slice(0, -1));
  }

Add Attachment PHPmailer

PHPmailer : Probably the world's most popular code for sending email from PHP! 

$mail->AddAttachment('path_for_pdf', $name = 'Name_of_pdf',  $encoding = 'base64', $type = 'application/pdf');

Adding a Right-click context menu to a webpage

This is the code by which users can add customize right click context menu to web page.

Right Click context menu demo