DEV'S

Angular 5 - Material Design

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>ShoppingAppMat</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <app-root></app-root>
</body>

</html>

style.css

/* You can add global styles to this file, and also import other style files */

@import "@angular/material/prebuilt-themes/indigo-pink.css";
body {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
}

.base-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.example-radio-group {
    display: block;
    border: 1px solid #555;
    margin: 20px;
    padding: 10px;
}

.full-width {
    width: 100%;
}

.side-bar-size {
    width: 300px;
    height: 100%;
}

.my-container {
    height: 100%;
    margin: 15px;
}

app.component.html

<router-outlet></router-outlet>

app.component.ts

import { Component } from ‘@angular/core’;
import { AppService } from ‘./app.service’;

@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [’./app.component.css’]
})
export class AppComponent {
  title = ‘app’;
  public userObj:any = {};
  constructor(private service:AppService){
    this.service.setParentInstance(this);
  }

}

app.module.ts

import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’;
import {BrowserModule} from ‘@angular/platform-browser’;
import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’;
import {NgModule} from ‘@angular/core’;
import {RouterModule,Routes} from ‘@angular/router’
import {FormsModule, ReactiveFormsModule} from ‘@angular/forms’;
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatStepperModule,
} from ‘@angular/material’;

import {HttpModule} from ‘@angular/http’;
import {HttpClientModule} from ‘@angular/common/http’;
import {CdkTableModule} from ‘@angular/cdk/table’;

import { AppComponent } from ‘./app.component’;
import { AddComponent } from ‘./add/add.component’;
import { LoginComponent } from ‘./login/login.component’;
import { NotFoundComponent } from ‘./not-found/not-found.component’;
import { RegisterComponent } from ‘./register/register.component’;
import { AppService } from ‘./app.service’;
import { DevExpPipe } from ‘./dev-exp.pipe’;
import { DevHideDirective } from ‘./dev-hide.directive’;
import { HomeComponent } from ‘./home/home.component’;

const r:Routes = [
  {path:’‘, redirectTo:‘home’, pathMatch:‘full’},
  {path:‘home’,component:HomeComponent},
  {path:‘login’,component:LoginComponent},
  {path:’**’,component:NotFoundComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    AddComponent,
    LoginComponent,
    NotFoundComponent,
    RegisterComponent,
    HomeComponent,
    DevExpPipe,
    DevHideDirective
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
    MatNativeDateModule,
    ReactiveFormsModule,
    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    RouterModule.forRoot(r)
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.service.ts

import { Injectable } from ‘@angular/core’;
import { HttpClient, HttpHeaders } from ‘@angular/common/http’;
import { Http, Headers} from ‘@angular/http’;
import { Observable } from ‘rxjs/Observable’;
import { RequestOptions } from ‘@angular/http’;
import { AppComponent } from ‘./app.component’;

const URL:string = "http://vasudevkumaran.com/ang/";
@Injectable()
export class AppService {

  private parent:AppComponent;
  
  constructor(private httpClient:HttpClient, private http:Http) { }

  public sendData(path:string,payload:any):Observable<any>{
    var headerParams:HttpHeaders = new HttpHeaders();
    headerParams.append(‘Content-Type’,‘application/json’);
    return this.httpClient.post(URL+path,payload,{headers:headerParams});
  }

  public getObservable():Observable<any>{
    
    var obs = new Observable(obsObject=>{
      setInterval(_=>{
        obsObject.next(Math.random());
      },1000);
      //obsObject.complete();
    });

    return obs;
  }

  public setParentInstance(parentObj){
    this.parent = parentObj;
  }

  private dirtyCodeToSendToParent(parent:AppComponent){

  }

  public sendDataAsPromise(path:string,payload:any){
    var headerObj = new Headers();
    headerObj.append(‘Content-Type’,‘application/json’);
    var reqOpt:RequestOptions = new RequestOptions();
    reqOpt.headers = headerObj;
    return this.http.post(URL+path,payload,reqOpt).toPromise();
  }

  public clearLogin(){
    localStorage.removeItem(‘login’);
    var loginObj = this.getLogin();
    if (this.parent){
      this.parent.userObj = loginObj;
    }
    return loginObj;
  }

  public setLogin(obj:any){
    localStorage.login = JSON.stringify(obj);
    if (this.parent){
      this.parent.userObj = this.getLogin();
    }
  }

  public getLogin():any{
    var obj = {status:‘FAILED’,data:{}};
    if (localStorage.login){
      obj.status = ‘OK’;
      obj.data = JSON.parse(localStorage.login);
    }

    return obj;
  }

  

  

  

}

login.component.html

<mat-toolbar color=‘primary’>
    <button mat-icon-button><mat-icon>note_add</mat-icon></button>
</mat-toolbar>
<div class="my-container">
    <mat-card>
        <mat-card-title>Login</mat-card-title>
        <mat-card-content>
            <form (ngSubmit)="onClickLogin()">
                <mat-form-field class="full-width">
                    <input type="text" matInput name="username" [(ngModel)]="login.username" placeholder="Enter Username">
                </mat-form-field>
                <mat-form-field class="full-width">
                    <input type="password" matInput name="password" [(ngModel)]="login.password" placeholder="Enter Password">
                </mat-form-field>
                <button type="submit" mat-raised-button [color]="‘primary’">Login</button>

            </form>
        </mat-card-content>
    </mat-card>
</div>

login.component.ts

import { Component, OnInit } from ‘@angular/core’;
import { AppService } from ‘../app.service’;
import { Input } from ‘@angular/core’;
import { Output } from ‘@angular/core’;
import { EventEmitter } from ‘@angular/core’;

import { Router } from ‘@angular/router’;

@Component({
  selector: ‘app-login’,
  templateUrl: ‘./login.component.html’,
  styleUrls: [’./login.component.css’]
})
export class LoginComponent implements OnInit {

  public login:any = {};
  @Input() titleName:string;
  @Output() onReceiveResult = new EventEmitter<any>();

  constructor(private service:AppService,private route:Router) { }

  ngOnInit() {

  }

  onClickLogin(){
    //console.log(this.login);
    /*
    this.service.sendData(‘login’,this.login).subscribe(data=>{
        //console.log(data);
        this.onReceiveResult.emit(data);
    });
    */
    this.service.sendDataAsPromise(‘login’,this.login).then(data => {
      var payload = data.json();
      if (payload.result == ‘OK’){
        var user = payload.data[0];
        this.service.setLogin(user);
        this.route.navigate([‘home’]);
        
    }else{
       
    }

      //console.log(data.json());
      //this.onReceiveResult.emit(data.json());
    });
    

    
  }

}

home.component.html

<mat-sidenav-container class="base-container">
    <mat-sidenav [mode]="‘over’" #sidenav>
        <div class="side-bar-size">
            <mat-list>
                <h3 matSubheader>Folders</h3>
                <mat-list-item>
                    <mat-icon matListIcon>folder</mat-icon>
                    <h4 matLine>name</h4>
                    <p matLine class="demo-2"> updated </p>

                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>folder</mat-icon>
                    <h4 matLine>name</h4>
                    <p matLine class="demo-2"> updated </p>

                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>folder</mat-icon>
                    <h4 matLine>name</h4>
                    <p matLine class="demo-2"> updated </p>

                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>folder</mat-icon>
                    <h4 matLine>name</h4>
                    <p matLine class="demo-2"> updated </p>

                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>folder</mat-icon>
                    <h4 matLine>name</h4>
                    <p matLine class="demo-2"> updated </p>

                </mat-list-item>
                <mat-divider></mat-divider>
                <h3 matSubheader>Notes</h3>
                <mat-list-item>
                    <mat-icon matListIcon>note</mat-icon>
                    <h4 matLine>name</h4>
                    <p matLine class="demo-2"> updated </p>
                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>note</mat-icon>
                    <h4 matLine>name</h4>
                    <p matLine class="demo-2"> updated </p>
                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>note</mat-icon>
                    <h4 matLine>name</h4>
                    <p matLine class="demo-2"> updated </p>
                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>note</mat-icon>
                    <h4 matLine>name</h4>
                    <p matLine class="demo-2"> updated </p>
                </mat-list-item>
                <mat-list-item>
                    <mat-icon matListIcon>note</mat-icon>
                    <h4 matLine>name</h4>
                    <p matLine class="demo-2"> updated </p>
                </mat-list-item>

            </mat-list>
        </div>
    </mat-sidenav>
    <mat-sidenav-content style="min-height:800px">

        <mat-toolbar color="primary">
            <mat-icon (click)="sidenav.toggle()">menu</mat-icon>

        </mat-toolbar>
        <div class="my-container">

            <ng-container *ngIf="loginObj.status == ‘OK’">
                <app-add></app-add>
            </ng-container>

        </div>

    </mat-sidenav-content>
</mat-sidenav-container>

<!—    <div class="col-md-4">

        <div class="rightNav" *ngIf="loginObj.status != ‘OK’">
            <app-login [titleName]="‘Registration’" (onReceiveResult)="onGetResultFromChild($event)"></app-login>
        </div>
        <div class="pull-right" *ngIf="loginObj.status == ‘OK’">
            <button class="btn btn-danger" (click)="onLogout()">Logout</button>
        </div>

    </div>—>

home.component.ts

import { Component, OnInit } from ‘@angular/core’;
import { OnDestroy, AfterViewInit } from ‘@angular/core/src/metadata/lifecycle_hooks’;
import { NgForm } from ‘@angular/forms’;
import { Title } from ‘@angular/platform-browser’;
import { ActivatedRoute } from ‘@angular/router’;
import { Router } from ‘@angular/router’;
import { AppService } from ‘../app.service’;
import { Output } from ‘@angular/core/src/metadata/directives’;
@Component({
  selector: ‘app-home’,
  templateUrl: ‘./home.component.html’,
  styleUrls: [’./home.component.css’]
})
export class HomeComponent implements OnInit , OnDestroy, AfterViewInit{
  public user:any = {};
  public message:string = "Hello this is Home page";
  public formdata:string = "";
  public gender:Array<String> = ["Male","Female","Other"];
  public selectedGender = "Female";
  public choice:any = {movies:true,travel:true};
  public loginObj:any = {};
  
  constructor(private pageTitle:Title, private router:Router, private service:AppService) { 
    this.pageTitle.setTitle("Home");
    console.log("Home constructor called");
    this.loginObj = this.service.getLogin();
    if (this.loginObj.status == ‘OK’){
      this.user = this.loginObj.data;
    }else{
      this.router.navigate([‘login’]);
    }
    
  }

  ngOnInit() {
    console.log("Home init called");
    
  }

  ngOnDestroy(){
    console.log("Home destroy called");
  }

  ngAfterViewInit(){
    console.log("Home after init called");
  
    
  }

  public onButtonPressed(){
    this.message = "Hi this message got changed";
  }

  public onDropDownChanged(){

  }

  public onFormSumbit(){
    console.log("Form submitted");
    console.log(this.choice);
  }

  public onGetResultFromChild(payload:any){
    console.log(payload);
    if (payload.result == ‘OK’){
        this.user = payload.data[0];
        this.service.setLogin(this.user);
        this.loginObj = this.service.getLogin();
        
    }else{
        this.user = payload.message;
    }

    //this.router.navigate([‘register’]);

  }

  public onLogout(){
      this.loginObj = this.service.clearLogin();
      this.user = {};
  }

}

add.component.html

<mat-card>
    <mat-card-title>Manage Items</mat-card-title>
    <form class="form-inline" (ngSubmit)="onSaveForm()">
        <mat-form-field>
            <input type="text" name="itemname" matInput id="itemname" placeholder="Item Name" [(ngModel)]="item.itemname">
        </mat-form-field>
        <mat-form-field>

            <input type="text" name="itemqty" matInput id="itemqty" placeholder="Item Qty" [(ngModel)]="item.itemqty">
        </mat-form-field>
        <mat-form-field>

            <input type="text" name="itemprice" matInput id="itemprice" placeholder="Item Price" [(ngModel)]="item.itemprice">
        </mat-form-field>
        <button type="submit" mat-raised-button color=‘primary’ style="margin: 5px;">Save</button>
    </form>

    <mat-accordion>
        <mat-expansion-panel *ngFor="let itemObj of items;let i = index">
            <mat-expansion-panel-header>
                <mat-panel-title style="width:50%">
                    {{itemObj.item_name | uppercase}}
                </mat-panel-title>
                <mat-panel-description>
                    Qty:{{itemObj.item_qty}}
                </mat-panel-description>
            </mat-expansion-panel-header>

            <mat-form-field class="full-width">
                <input matInput [name]="itemObj.item_name" [(ngModel)]="itemObj.item_name" placeholder="Item Name">
            </mat-form-field>
            <mat-form-field class="full-width">
                <input matInput [name]="itemObj.item_price" [(ngModel)]="itemObj.item_price" placeholder="Price">
            </mat-form-field>

            <mat-form-field class="full-width">
                <input matInput [name]="itemObj.item_qty" [(ngModel)]="itemObj.item_qty" placeholder="Qty">
            </mat-form-field>
            <button mat-raised-button color="primary" (click)="onEditPressed(itemObj)">Edit</button>
            <button mat-raised-button color="accent" (click)="onDeletePressed(itemObj,i)">Delete</button>
        </mat-expansion-panel>

    </mat-accordion>
    <!—        <div class="col-md-12">
            <table class="table table-bordered">
                <tr>
                    <th>Sl</th>
                    <th>Item</th>
                    <th>Price</th>
                    <th>Qty</th>
                    <th>Edit</th>
                    <th>Remove</th>
                </tr>
                <tr *ngFor="let itemObj of items;let i = index">
                    <td>{{i+1}}</td>
                    <ng-container *ngIf="itemObj.isBeingEdited; then isedit else noedit">

                    </ng-container>

                    <ng-template #noedit>
                        <td>{{itemObj.item_name | uppercase}}</td>
                        <td>{{itemObj.item_price | devExp:25}}</td>
                        <td>{{itemObj.item_qty}}</td>
                    </ng-template>
                    <ng-template #isedit>
                        <td><input type="text" class="form-control" [name]="itemObj.item_name" [(ngModel)]="itemObj.item_name"></td>
                        <td><input type="text" class="form-control" [name]="itemObj.item_price" [(ngModel)]="itemObj.item_price"></td>
                        <td><input type="text" class="form-control" [name]="itemObj.item_qty" [(ngModel)]="itemObj.item_qty"></td>
                    </ng-template>

                    <td><button class="btn btn-warning" (click)="onEditPressed(itemObj)">Edit</button></td>
                    <td><button class="btn btn-danger" (click)="onDeletePressed(itemObj,i)">Delete</button></td>
                </tr>
            </table>
        </div>
   —>

</mat-card>

add.component.ts

import { Component, OnInit } from ‘@angular/core’;
import { AppService } from ‘../app.service’;
import { OnDestroy } from ‘@angular/core’;
import { Title } from ‘@angular/platform-browser’;
import { Subscription } from ‘rxjs/Subscription’;

@Component({
  selector: ‘app-add’,
  templateUrl: ‘./add.component.html’,
  styleUrls: [’./add.component.css’]
})
export class AddComponent implements OnInit,OnDestroy {

  public items:Array<any> = [];
  public item:any = {};
  private loadSub:Subscription;
  private addSub:Subscription;
  constructor(private title:Title,private service:AppService) { 
    this.title.setTitle("Manage Items");
  }

  ngOnInit() {
    
    this.loadItems();
  }

  ngOnDestroy(){

  }

  private loadItems(){
    var user = this.service.getLogin().data;
    var payload:any = {};
    payload.username = user.user_name;
    payload.password = user.user_password;
    
    
    this.loadSub = this.service.sendData(‘getallitems’,payload).subscribe(data => {
      //console.log(data);
      if (data.result == ‘OK’){
        this.items = data.items;
        console.log(this.items);
        
      }
      this.loadSub.unsubscribe();
    });
  }

  public onSaveForm(){
    var user = this.service.getLogin().data;
    
    this.item.username = user.user_name;
    this.item.password = user.user_password;
    this.addSub = this.service.sendData(‘additem’,this.item).subscribe(data => {
      console.log(data);
      if (data.result == ‘OK’){
        this.item = {};
        this.loadItems();
      }
      this.addSub.unsubscribe();
    });
  }

  public onEditPressed(obj){
    console.log(obj);
    if (obj.isBeingEdited){
      var user = this.service.getLogin().data;
      var payload:any = {};
      payload.username = user.user_name;
      payload.password = user.user_password;
      payload.itemid = obj.item_id;
      payload.itemname = obj.item_name;
      payload.itemqty = obj.item_qty;
      payload.itemprice = obj.item_price;
      this.service.sendData(‘updateitem’,payload).subscribe(data=>{
        console.log(data);
      });
      obj.isBeingEdited = false;
    }else{
      obj.isBeingEdited = true;
    }
    
  }

  public onDeletePressed(obj,index){
    var user = this.service.getLogin().data;
      var payload:any = {};
      payload.username = user.user_name;
      payload.password = user.user_password;
      payload.itemid = obj.item_id;
      this.service.sendData(‘deleteitem’,payload).subscribe(data=>{
        console.log(data);
      });
      this.items.splice(index,1);
  }

}

HTML5

2018-11-27 21:35:02
1) Ionic - Angular Videos
2018-06-29 05:46:32
2) Service - Broadcast Receiver
2018-06-28 03:55:43
3) Activity - Bundle - Option Menu - ActionBar
2018-06-27 03:27:57
4) Relative Layout
2018-06-25 03:14:55
5) LinearLayout Calc
2018-02-08 05:14:15
6) PHP HelloWorld
2018-01-19 04:57:25
7) Angular 5 - Material Design - Reactive Form - Continued
2018-01-19 04:06:05
8) Feedback
2018-01-19 02:07:18
9) Angular 5 - Material Design
2018-01-18 03:05:47
10) Angular 5 - Custom Directives,Pipes - Promise And Observables
2018-01-17 22:51:45
11) Angular 5 - Component Interaction
2018-01-17 03:14:26
12) Angular 5 - Registration Form - WebService
2018-01-17 01:46:34
13) Angular 5 - Directives
2018-01-16 23:13:47
14) Angular 5 - Lifecycle Hooks - Routing
2018-01-16 21:36:25
15) CRUD Example - TS - LocalStorage - Delete
2018-01-16 13:34:40
16) Shopping App - Api Calls - JSON
2018-01-16 03:17:09
17) CRUD Example - TS - LocalStorage - View - Add
2018-01-15 23:57:32
18) TypeScript - Part 2
2018-01-15 23:02:07
19) TypeScript - Part 1
2018-01-15 04:46:29
20) TypeScript To JavaScript
2018-01-15 00:48:22
21) First Angular5 App
2016-01-17 23:47:13
22) JQuery Mobile - My Account Page Addon
2016-01-16 02:38:09
23) HTML5 - CSS - JavaScript Exam Preparation
2016-01-14 02:34:08
24) JQuery Validation Plugin - Basics
2016-01-13 02:35:46
25) Final - JQuery Mobile - IndexedDB Addon
2016-01-12 03:23:20
26) JQuery Mobile - IndexedDB Addon
2016-01-11 00:08:42
27) Students Record - JQuery Mobile App
2016-01-09 04:03:04
28) JQuery Mobile PageChange Event
2016-01-08 03:51:55
29) Beginning JQuery Mobile
2016-01-07 03:47:24
30) WebWorker Example
2016-01-06 04:11:18
31) IndexedDB - ObjectStore - Tansaction - Cursor - Part 2
2016-01-05 03:46:35
32) Student Record - IndexedDB Migration
2016-01-04 23:47:55
33) IndexedDB - ObjectStore - Tansaction - Cursor
2016-01-04 04:48:33
34) Single Page Design And Geolocation Example With Ajax
2016-01-03 23:39:19
35) Drag And Drop Example
2016-01-03 01:57:50
36) Beginning Responsive WebDesign Using JQuery
2016-01-03 01:56:17
37) HTML5 Canvas Simple Example
2016-01-03 01:55:11
38) JQuery Object - Context - Function Callbacks
2015-12-29 23:28:49
39) JQuery DOM Manipulation And LocalStorage
2015-11-30 23:50:59
40) JavaScript EventListeners
2015-11-30 04:34:08
41) MultiPage Design
2015-11-28 03:02:52
42) HTML Box Design
2015-07-03 03:09:55
43) KO Custom Component
2015-07-02 23:25:36
44) KO Custom Binding And Template Binding
2015-07-01 23:27:04
45) KO Simplelist
2015-07-01 01:44:40
46) KO Introduction And JQuery Simple List
2015-01-29 00:34:17
47) Canvas - DragDrop - Video - Audio Example
2015-01-28 03:57:05
48) CSS Media Type - IndexedDB WHERE And LIKE Clause
2015-01-27 02:24:12
49) IndexedDB Simple Example
2015-01-24 00:11:32
50) Students Record - JQueryMobile - GeoLocation - Ajax Addon
2015-01-24 00:08:19
51) GeoLocation And Ajax Example
2015-01-21 05:23:32
52) Students Record - JQueryMobile - SessionStorage - Login State
2015-01-19 23:33:29
53) JQueryMobile - Page Change - Popup Addon
2015-01-19 00:21:28
54) JQueryMobile - Data-Role Introduction
2015-01-17 03:22:07
55) Handle PageLinks
2015-01-16 04:28:20
56) Simple HTML5 Calculator
2015-01-16 03:03:45
57) Load External DOM - Ajax In Simple Way
2015-01-16 03:01:48
58) JQuery Document Ready - Placement Of Script Tag
2015-01-13 22:54:25
59) Dynamic Layout Technique Using JQuery
2015-01-13 04:04:19
60) JQuery - Introduction
2015-01-12 23:45:02
61) LocalStorage - CRUD
2015-01-12 00:06:03
62) JSON - LocalStorage Example
2015-01-11 22:47:24
63) JavaScript - Data Persistency Using LocalStorage - SessionStorage
2015-01-10 03:17:01
64) HTML - JavaScript - Dynamic Table
2015-01-10 00:32:26
65) JavaScript Introduction
2015-01-09 04:07:47
66) CSS - Continued
2015-01-08 03:26:39
67) CSS - Margin - Padding - HTML5 Semantic Elements
2015-01-07 22:44:01
68) HTML-CSS Introduction
2014-11-25 14:27:00
69) Angular JS Simple Example
2014-10-16 05:01:39
70) CSS Media Example - Different CSS For Desktop - Tablet - Phone Screen Sizes
2014-10-15 04:20:11
71) Miscellaneous In Addition To Previous Exercises
2014-10-15 04:13:45
72) Some Useful RegEx
2014-10-14 02:57:45
73) Shopping List App Using IndexedDB
2014-10-14 00:04:10
74) IndexedDB Introduction
2014-10-14 00:00:01
75) JavaScript Prototyping
2014-10-11 03:50:47
76) Introduction To Canvas Drawing - Tabs - Popup Warning Dialog
2014-10-11 00:03:50
77) Popup - Validation - Shopping List App Updated
2014-10-10 22:34:42
78) RegEx Pattern For Validation - Shopping List App
2014-10-10 05:12:13
79) Password Lock-Shopping List App
2014-10-09 22:49:34
80) JQuery Shopping - Updated
2014-10-09 05:10:00
81) JQuery Mobile Forms - Save Checkbox - Radio Button Checked States
2014-10-08 22:18:40
82) JQuery Mobile Forms - Additional Data-role Attribute Values
2014-10-08 02:17:48
83) JQuery Shopping List Alternate Approach. JQ Append & Pagechange
2014-10-07 03:02:43
84) JQuery Mobile Page Change Events
2014-10-06 02:19:53
85) JQuery Mobile Data- Attribute Reference
2014-10-06 00:13:01
86) Shopping List Using LocalStorage
2014-10-06 00:10:02
87) JQuery Mobile Introduction
2014-10-06 00:07:40
88) JQuery Page Loading Technique
2014-10-06 00:05:39
89) Mobile Ready Page Extended - Load Multiple Pages Using JQuery
2014-10-06 00:00:27
90) A Mobile First Design Using JQuery - Window-Size
2014-10-05 23:58:01
91) JavaScript Array - Create - Update - Delete
2014-10-05 23:55:43
92) JQuery CSS Capabilities - A Mobile Ready Page
2014-10-05 23:52:42
93) JQuery Introduction - Unit Conversion Using JQuery
2014-10-05 23:49:58
94) JavaScript - DOM Manipulation-Table-Calculator
2014-10-05 23:40:06
95) GeoLocation
2014-10-05 23:37:36
96) Margin And Border Radius
2014-10-05 23:34:06
97) HTML5 Semantic Elements, CSS,SVG Examples
2014-10-05 23:28:45
98) HTML,CSS Selectors

© Vasudev.H / Email: tech3in@live.com