How to create ScanQR design in ionic3

I just came to a situation where I have to create a UI same as PayTm Scan Screen or any other OR code UI.

I was struggling with background opacity issues. The outer/inner inconsistencies.

Finally I came to a solution with Ionic Grid.

I created a grid view and that helped me achieve the same.

Below is the code. Suggestion are welcomed for extension.

HTML Code

https://gist.github.com/tarun-nagpal-github/e0f43cf399a16fa9aef915c4447bcce9

CSS for the HTML Given above

https://gist.github.com/tarun-nagpal-github/2da0eb705a1bda3b8df398859f058aa2

Create a flip Magazine from HTML Tags in 4 easy Steps — Turn.js

Turn JS

We often come to a situation where we need to give awesome flip/book page effect to our HTML pages and make them look like real magazines and books.

Recently, I have studied a library named Turn.js (http://www.turnjs.com/). This can make beautiful flip effects on the pages based on simple HTML.

It will make your content look like a real book or magazine using all the advantages of HTML5. It is a light weighted library (10Kb) with simple and clean API.

All you need to do is to provide a container and pass an ID to an HTML tag and you are good to go. All the elements (div, span, h1) in the container will become pages and your magazine/book is ready.

You can find the working Code here.

http://jsfiddle.net/A9a7E/14984/

Below are the steps to achieve

Step 1 :- Install the dependencies — We have to include the jQuery.

https://gist.github.com/tarun-nagpal-github/968a575ef4355055ff767a6cc635b13b

Step 2 :- Add the HTML

https://gist.github.com/tarun-nagpal-github/1c240eca1e7488d88865b5f8b81c0562

Step 3:- Add the JavaScript

https://gist.github.com/tarun-nagpal-github/518c3bcc20eb72657d1832b1067ddaa5

Step 4 — Add the CSS

https://gist.github.com/tarun-nagpal-github/4f3e201fe8319b064768f06e2bf63428

Conclusion — Turn.js is a fantastic library to create the flip effect using HTML sections. Although it provide the various features that may be hard to implement but it comes with a dependency of jQuery.

Apart from this, it is must try library for various use cases like news, magazines and other publication portals.

CSS Loader — Pure HTML, CSS and JS based loader

CSS Loader (Without Library)

We often need a code snippet for CSS loader and we do not want to include any library for that.

To deal with this situation, I have created a code snippet which can be easily embedded into any project and you can get the loader feature.

I have created 2 selector that can show/hide the loader and fade out the content till the time page is loading.

#fade and #modal — These will toggle the loader based on their display properties.

  1. Show loader — Simply change their style display to block (style.display = ‘block’).
  2. Hide Loader — Simply change their style display to block (style.display = ‘none’).

https://gist.github.com/tarun-nagpal-github/ba15a273d30b0d1be62508abcc79df8d

The example above is the one implementation and we can use it anyway we need.

Conclusion :- Use this code snippet to embed the loader in your app. You can customise it at any level to match your need.


More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.

Commonly Asked JavaScript Puzzles

Commonly Asked JavaScript Puzzles

Recently, I have gone through various JavaScript interviews and I have composed a list which could help others as well.

These are just few and I would like to have more contributions from readers to enhance it more.

Please feel free to add more in comments.

Puzzle 1 (Closures)

/* 
Write a mul function which behaves like below
mul(1)(1)(1)(1)(1)(); return 5
*/
function addNum(x) {
return function(y) {
if (typeof y !== 'undefined') {
x = x + y;
return arguments.callee;
} else {
return x;
}
}
}
console.log( addNum(1)(2)(3)() );

Puzzle 2 (delete operator on local variable)

// // What is the output 
var output = (function(x) {
delete x;
return x;
})(0);
console.log(output);
// output 0

Puzzle 3 (delete operator on Object)

// What is the Output 
var Employee = {
company: 'xyz'
}
var emp1 = Object.create(Employee);
delete emp1.company
console.log(emp1.company);
// Output  'xyz'

Puzzle 4 (delete operator on Array)

// What is the output 
var trees = ["xyz", "xxxx", "test", "ryan", "apple"];
delete trees[3];
console.log(trees.length);
// output 4

Puzzle 5 (Type conversion)

// What is the Output 
var bar = true;
console.log(bar + 0);
console.log(bar + "xyz");
console.log(bar + true);
console.log(bar + false);
// output 1 truexyz 1 2

Puzzle 6 (Variable Hoisting)

var salary = "9999";
(function() {
console.log("Original salary was " + salary);
var salary = "8888";
console.log("My New Salary " + salary);
})();
// output undefined 8888

Puzzle 7 (Array Checking)

// How to check if an variable is array or not
function isArray(value) {
return Object.prototype.toString.call(value) === '[object Array]';
}

Puzzle 8 (How to Empty an Array)

// // How to empty an array
var Uids = [1, 2, 3, 4];
newUids = Uids;
// Pattren 1 
Uids = [];
console.log(Uids);
console.log(newUids);
// Pattren 2
Uids.length = 0;
console.log(Uids);
console.log(newUids);

Puzzle 9 (What are closures and give an example of it)

function createFunction(x) {
return function(y) {
return x + y;
}
}
var myFunc = createFunction(10);
console.log(myFunc(20));

More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.

Revealing Module Design Pattern — In JavaScript

Revealing Module Design Pattren

The Revealing Module pattern is the commonalty used design pattern which is easy to use and understand. This pattern define all of our functions and variables in the private scope and it return an object with pointers to the private functionality we wished to reveal as public.

In this way we can expose all those properties which we wish to make them public. The pattern can also be used to reveal private functions and properties with a more specific naming scheme if we would prefer.

It also makes it more clear at the end of the module which of our functions and variables may be accessed publicly which increase the readability.

This pattern allows us to actually invoke private functions via our public methods.

I have created an example which might clear the implementation.

This is a calculator class which is having the following methods.

  1. _privateFunction() // private function

2. sum() // public function

3. mul() // public function

4. divide() // public function

We can manipulate the operations with passing variables in constructor and getting the results accordingly.

https://gist.github.com/tarun-nagpal-github/92da292e1fa453cd5dfd603c1c6dc2ef

Facade Design Pattren in PHP

Facade Design Pattern (Implemented in PHP)

Facade Design Pattern is useful in the cases where we need to hides all the complexities of the system and displays a friendly picture.

It is a Structural design patterns which plays a vital role in some use cases. It is an object that provides a simplified interface to a larger body of code, such as a class library/code.

It make the library more readable and reduce dependencies of outside code on the inner workings of a library.

Below is the example implementation in PHP.

This code is used to give the Transport Fare between 2 cities. I have created 3 different classes for these (not actual logic but a basic one).

  • Bus — Calculate the Bus Fare.
  • Train — Calculate the Train Fare
  • Plane — Calculate the Air Fare

Now, we have 2 ways to access all the data. First is the normal in which we create the objects normally and access it globally. Second is using the Facade Pattern (As we did).

In Facade, we instantiated all the objects in a single class and it acts as an interface for all the other classes.

<?php
class Bus
{
public $baseFare = 500;
public $tax = 50;
function getFare()
{
return $this->baseFare + $this->tax;
}
}
class Train
{
public $baseFare = 800;
public $tax = 80;
function getFare()
{
return $this->baseFare + $this->tax;
}
}
class Plane
{
public $baseFare = 5500;
public $tax = 500;
function getFare()
{
return $this->baseFare + $this->tax;
}
}
class ShowCityFare
{
function showFares($origin, $destination)
{
$busFare = new Bus();
$trainFare = new Train();
$planeFare = new Plane();
        print "List of Fares " . $origin . " to " . $destination;
print "<br>Bus Fare --> " . $busFare->getFare();
print "<br>Train Fare --> " . $trainFare->getFare();
print "<br>Plane Fare --> " . $planeFare->getFare();
    }
}
$fares = new ShowCityFare();
$fares->showFares("Chnadigarh", "Delhi");