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.


CSS for the HTML Given above

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 ( 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.

Below are the steps to achieve

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

Step 2 :- Add the HTML

Step 3:- Add the JavaScript

Step 4 — Add the CSS

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’).

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;
// output 0

Puzzle 3 (delete operator on Object)

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

Puzzle 4 (delete operator on Array)

// What is the output 
var trees = ["xyz", "xxxx", "test", "ryan", "apple"];
delete trees[3];
// 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 Array]';

Puzzle 8 (How to Empty an Array)

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

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

function createFunction(x) {
return function(y) {
return x + y;
var myFunc = createFunction(10);

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.

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.

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");