Thursday, December 24, 2020

Pure CSS Parallax Scrolling

HTML

<!DOCTYPE html>

<head>

<title>Pure CSS Parallax Scrolling</title>

</head>

<body>

<h1>Ujjwal Technical Tips</h1>

<p>Parallax Effects</p>

</header>

</body>

</html>

CSS

html{

height: 100%; overflow: hidden;

}

body{

color: #FFF; margin: 0; padding:0; perspective: 1px;

transform-style: preserve-3d; overflow: hidden; height: 100%;

overflow-y: scroll; overflow-x: hidden;

font-family: "covered By Your Grace", cursive;

}

.header_part{

box-sizing: border-box; min-height: 100vh; padding: 32vw 0 8vw;

position: relative; transform-style: inherit; width: 100vw;

}

header.header_part p{

font-size: 33px;

}

header h1{

margin-top: -100px; font-size: 65px; color: #FFF;

background-color: rgba(255,57,177, 0.3);

}

header, header::before{

background: 50% 50% / cover;

}

header::before{

bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0;

display: block;

background-image: url(https://images.unsplash.com/photo-1566227675319-d3498bb2b584?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);

background-size: cover; transform-origin: center center 0;

transform: translateZ(-1px) scale(3); z-index: -1; min-height: 100vh;

}

header *{

font-weight: normal; letter-spacing: 0.2em;

text-align: center; margin: 0;

padding: 1em 0;

}

Monday, August 31, 2020

Watch This:- https://bit.ly/3lBDrRm

Angular 10 tutorial #4 How to Use Jquery in Angular

#ujjwaltechnicaltips #angular10 #jquery

Sunday, August 30, 2020

Angular 10 tutorial #3 Add Bootstrap in Angular

Watch This:- https://bit.ly/31HFF9C

Angular 10 tutorial #3 Add Bootstrap in Angular

#ujjwaltechnicaltips #angular10 #bootstrap

Saturday, August 29, 2020

Watch This :- https://bit.ly/3losgv4
Angular 10 tutorial #1 Install
#ujjwaltechnicaltips #angular #installangular

Wednesday, August 5, 2020

Tabs Using HTML and CSS || Pure CSS Tabs - HTML CSS Tabs (Tabs Without ...

Tuesday, July 14, 2020

Menu Toggle Button || toggle menu icon || toggle menu jquery || jQuery t...

Friday, July 3, 2020

Node.js + MySQL CRUD - GET,POST and DELETE

const mysql = require('mysql');
const express = require('express');
var app = express();
const bodyparser = require('body-parser');
app.use(bodyparser.json());

var mysqlConnection = mysql.createConnection({
host:'localhost',
user:'root',
database:'employeedb'
});

mysqlConnection.connect((err)=>{

if(!err)
console.log('DB Connection SuccessFull');
else
console.log('DB Connection Failed\n Error: '+JSON.stringify(err,undefined,2));
});

// Get All Employees
app.listen(3000, ()=>console.log('Express server is running at port No: 3000'));
app.get('/employees',(req,res)=>{
mysqlConnection.query('SELECT * FROM employees', (err, rows, fields)=>{
if(!err)
res.send(rows);
else
console.log(err);
})
});
// Get an Employees
app.get('/employees/:id',(req,res)=>{
mysqlConnection.query('SELECT * FROM employees WHERE id =?', [req.params.id],(err, rows, fields)=>{
if(!err)
res.send(rows);
else
console.log(err);
})
});

// Delete an Employees
app.delete('/employees/:id',(req,res)=>{
mysqlConnection.query('DELETE from employees WHERE id =?', [req.params.id],(err, rows, fields)=>{
if(!err)
res.send('Deleted SuccessFully');
else
console.log(err);
})
});

Tuesday, June 30, 2020

Creating Tables in MySQL from Node.js - MySQL / Node.js MySQL Create Database/ node js tutorial

Database

const express = require('express');
const mysql = require('mysql');

// create connection
const db = mysql.createConnection({
  host :'localhost',
  user :'root',
  password:'',
  });
  
  // connect 
  db.connect((err) => {
    if(err){
    throw err;
    }
    console.log('MySql Connected ....');
    
    });

const app = express();
// create DB 
app.get('/createDb', (req, res) => {
  let sql = 'CREATE DATABASE ujjwaldatabase';
  db.query(sql, (err, result) => {
      if(err) throw err;
      console.log(result);
      res.send('Database created...');
  });
});

app.listen('3000', () => 
{
  console.log('server started on port 3000');
});

Table

const express = require('express');
const mysql = require('mysql');

// create connection
const db = mysql.createConnection({
  host :'localhost',
  user :'root',
  password:'',
  database : 'ujjwaldatabase'

  });
  
  // connect 
  db.connect((err) => {
    if(err){
    throw err;
    }
    console.log('MySql Connected ....');
    
    });

const app = express();
// create DB 
app.get('/createpoststable', (req, res) => {
  let sql = 'CREATE TABLE profile(id int AUTO_INCREMENT, fullname VARCHAR(255), address VARCHAR(255), PRIMARY KEY(id))';
  db.query(sql, (err, result) => {
      if(err) throw err;
      console.log(result);
      res.send('Posts table created...');
  });
});

app.listen('3000', () => {
  console.log('Server started on port 3000');
});
Insert Data
// Insert post 1
app.get('/addpost1', (req, res) => {
  let post = {fullname:'Ujjwal Tripathi', address:'USA'};
  let sql = 'INSERT INTO profile SET ?';
  let query = db.query(sql, post, (err, result) => {
      if(err) throw err;
      console.log(result);
      res.send('Post 1 added...');
  });
});
// Insert post 2
app.get('/addpost2', (req, res) => {
  let post = {fullname:'Tripti Tripathi', address:'USA'};
  let sql = 'INSERT INTO profile SET ?';
  let query = db.query(sql, post, (err, result) => {
      if(err) throw err;
      console.log(result);
      res.send('Post 2 added...');
  });
});

Saturday, May 16, 2020

Angular 8/9 angular-datatables: DataTables using angular

Angular DataTables is one of the best datatable I have used in the angular. Angular DataTables is built on the top of JQuery DataTables.

Here is the complete working code and use this carefully:

1. Here are the basics commands, you need to run for latest angular 8/9 setup and environment:

$ npm install -g @angular/cli

$ ng new ang9datatables

$ cd ang9datatables

$ ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

2. Here are the basics commands, you need to run into your terminal for datatable and its dependencies:

npm install jquery --save

npm install datatables.net --save

npm install datatables.net-dt --save

npm install angular-datatables --save

npm install @types/jquery --save-dev

npm install @types/datatables.net --save-dev

npm install ngx-bootstrap bootstrap --save

3. After done with commands add below code into you angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
            ],
            "scripts": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/datatables.net/js/jquery.dataTables.js",
            "node_modules/bootstrap/dist/js/bootstrap.js",
            ]
...

4. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DataTablesModule} from 'angular-datatables';
import { AppComponent } from './app.component';

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

5. Now add below code into app.component.ts file:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data = [
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
    {name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
];

  title = 'angulardatatables';
  dtOptions: DataTables.Settings = {};
  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
}
}

6. Now add below code into app.component.html file:

<div class="container">
<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of data">
         <td>{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     </tr>
  </tbody>
</table>
<div>

Saturday, May 2, 2020

Example of Angular 9 Pagination Using ngx-pagination

app.component.html

<h1 style="text-align: center; color:orange; font-size:45px">Example of

Angular 9

Pagination Using ngx-pagination</h1>

<table class="table table-striped">

  <thead>

  <tr>

  <th>Gender</th>

  <th>Name</th>

  <th>Email</th>

  <th>Picture</th>

  </thead>

  <tbody>

    <tr *ngFor="let user of data | paginate: { id: 'listing_pagination',

    itemsPerPage: 10,

    currentPage: page,

    totalItems: totalRecords }">

  <td>{{user.gender}}</td>

<td>{{user.name.first}}</td>

<td>{{user.email}}</td>

<td><img src="{{user.picture.medium}}"></td>

 </tr>

  </tbody>

  </table>

  <div>

    <pagination-controls  id="listing_pagination" maxSize="5"

directionLinks="true"

(pageChange)="page = $event"></pagination-controls>

  </div>

app.component.ts

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

import { RandomService } from './random.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

data:Array<any>

totalRecords:number

page:number =1

  constructor(private random:RandomService)

  { this.data = new Array<any>() }

  ngOnInit() {

     this.getUsers();

    }

  getUsers(){

    this.random.getData().subscribe((data)=>{

    console.log(data)

    this.data = data.results

    this.totalRecords = data.results.length

    console.log(this.page)

    })

  }

}

app.module.ts

=> npm install ngx-pagination --save

=> import {NgxPaginationModule} from 'ngx-pagination';

=> imports: [NgxPaginationModule],

import {HttpClientModule} from '@angular/common/http';

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule } from './app-routing.module';

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

import { RandomService } from './random.service';

import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({

  declarations: [AppComponent],

  imports: [

    HttpClientModule,

    BrowserModule,

    NgxPaginationModule,

    AppRoutingModule,

  ],

  providers: [RandomService],

  bootstrap: [AppComponent]

})

export class AppModule { }

random.service.ts

=> ng g s random

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

import{HttpClient} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable({

  providedIn: 'root'

})

export class RandomService {

  constructor(private http:HttpClient) { }

  getData():Observable<any>{

    const url ="https://randomuser.me/api?results=100"

    return this.http.get<any>(url)

  }

}

Monday, April 27, 2020

Angular Material Form Controls Select (mat-select) Example

app.component.ts

<h2>Basic mat-select Example</h2>

<mat-form-field>

  <mat-label>Your student</mat-label>

  <mat-select>

    <mat-option *ngFor="let student of students" [value]="student.name">

      {{student.name}}

    </mat-option>

  </mat-select>

</mat-form-field>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule } from './app-routing.module';

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatSelectModule } from '@angular/material/select';

import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    BrowserAnimationsModule,

    FormsModule,

  ReactiveFormsModule,

  MatSelectModule,

  MatFormFieldModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.component.ts

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

import {FormControl} from '@angular/forms';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent{

  students: any[] = [

    { name: 'Michael' },

    { name: 'John'},

    { name: 'David' },

    { name: 'Robert' },

    {name:'james'},

];  

  }

Saturday, January 25, 2020

Can Activate Route Guard for User Authentication Angular 8 | angular log...

Saturday, January 11, 2020

Table Dropdown Filter with jQuery

app.component.ts
<div class="icon-bar">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
</div>
<header><h3><span style="color: yellow; font-size: 65px;">Angular Font Awesome</span> Sticky Social Side Bar</h3></header>

<p>The Sticky social bar will stick to the screen when you scroll.</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>

styles.css

body {

margin: 0;

height: 1800px;

background: #000;

color: #FFF;

}

.icon-bar {

position: fixed;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

header{

position: fixed; width: 100%;

top: -52px;

}

header h3 {

background: #0400ff;

padding: 18px;

font-size: 47px;

color: #00ffe0;

}

.icon-bar a {

display: block;

text-align: center;

padding: 16px;

transition: all 0.3s ease;

color: white;

font-size:50px;

}

.icon-bar a:hover {

background-color: #ff6b01;

}

.facebook {

background:#0541be;

color: white;

}

.twitter {

background:#0091ff;

color: white;

}

.linkedin {

background:#005780;

color: white;

font-size: 37px;

}

.content {

font-size: 30px;

width: 80%;

text-align: justify;

float: right;

margin-top: 20px;

right: 8%!important;

font-family: sans-serif;

z-index: -111;

position: relative;

}

Install Packages

npm i angular-font-awesome

angular.cli.json
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"

],

Thursday, January 9, 2020

Angular 8+ with ngx-charts

app.component.html
----------------------------------------------
<div style="display: inline-block">
<ngx-charts-area-chart
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoScale"
(select)="onSelect($event)">
</ngx-charts-area-chart>
</div>

app.component.ts
----------------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

public multi = [
{
"name": "India",
"series": [
{
"name": "2009",
"value": 7500000
},
{
"name": "2010",
"value": 8948000
}
]
},

{
"name": "USA",
"series": [
{
"name": "2009",
"value": 7874000
},
{
"name": "2010",
"value": 8276000
}
]
},
{
"name": "Singapur",
"series": [
{
"name": "2009",
"value": 5004002
},
{
"name": "2010",
"value": 5804000
}
]
}
];
view: any[] = [700, 400];
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Number';
showYAxisLabel = true;
yAxisLabel = 'data';
timeline = true;
colorScheme = {
domain: ['#E91E63', '#CDDC39', '#3F51B5', '#AAAAAA']
};}

app.module.ts
-----------------------------------------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxChartsModule } from "@swimlane/ngx-charts";
import { AppComponent } from './app.component';

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

Install

To use ngx-charts in your project install it via npm:

npm i @swimlane/ngx-charts --save

Ujjwal Technical Tips

Thursday, December 24, 2020

Pure CSS Parallax Scrolling

Pure CSS Parallax Scrolling

Monday, August 31, 2020

Sunday, August 30, 2020

Angular 10 tutorial #3 Add Bootstrap in Angular

Saturday, August 29, 2020

Saturday, August 15, 2020

How to Use Google Forms to Collect Data

Angular 10/9|8 Input File Image/ File Upload | Angular Image Upload Made...

Wednesday, August 5, 2020

Tabs Using HTML and CSS || Pure CSS Tabs - HTML CSS Tabs (Tabs Without ...

Tuesday, July 14, 2020

Menu Toggle Button || toggle menu icon || toggle menu jquery || jQuery t...

Friday, July 3, 2020

Node.js + MySQL CRUD - GET,POST and DELETE

Tuesday, June 30, 2020

Creating Tables in MySQL from Node.js - MySQL / Node.js MySQL Create Database/ node js tutorial

Saturday, May 16, 2020

Angular 8/9 angular-datatables: DataTables using angular

Angular DataTables is one of the best datatable I have used in the angular. Angular DataTables is built on the top of JQuery DataTables.

6. Now add below code into app.component.html file:

Saturday, May 2, 2020

Example of Angular 9 Pagination Using ngx-pagination

app.component.html

Monday, April 27, 2020

Angular Material Form Controls Select (mat-select) Example

Saturday, January 25, 2020

Can Activate Route Guard for User Authentication Angular 8 | angular log...

Saturday, January 11, 2020

Thursday, January 9, 2020

Angular 8+ with ngx-charts

Install

Fetching JSON data from REST APIs

Search This Blog