Logical Approach to Common Problems

Image for post
Image for post

πŸ“„ Table of contents

➀ Misc

  • prime no. in JS
  • Fibonacci series
  • Factorial series
  • Palindrome
  • SUM

β†’ sum of no.s using rest operator and reduce()

β†’ sum of no.s using Recursion

➀ Array

➀ Objects

➀ Strings

➀ `this’ exercise

➀ setTimeout() exercise

➀ increment the counter on each page load

β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬ ✦ ✦ ✦ β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬

β—‰ Prime No.

source: https://www.w3resource.com/javascript-exercises/javascript-function-exercise-8.php

function test_prime(n) {
if (n === 1) {
return false;
} else if (n === 2) {
return true;
} else {
for (var x = 2; x <= n/2; x++) {
# we cannot start with 3 as in that case the test for 4 will fail.
if (n % x === 0) {
return false;
}
}
return true;
}
}
console.log(test_prime(37)); # true

You can also decrease the complexity of the algorithm from O(n) to O(sqrt(n)) if you run the loop until square root of a number:

With the ES6 syntax:

const isPrime = num => {
if (num === 1) return false;
for(let i = 2, s = Math.sqrt(num); i <= s; i++)
if(num % i === 0) return false;
return num > 1;
}

β—‰ Fibonacci series

1,1,2,3,5,8,13,21,34,55,89

source:https://stackoverflow.com/questions/7944239/generating-fibonacci-sequence

var i;
var fib = [];
fib[0] = 0;
fib[1] = 1;
for (i = 2; i <= 10; i++) {
fib[i] = fib[i - 2] + fib[i - 1];
console.log(fib[i]);
}
console.log(fib);
# [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55]

β—‰ Factorial using Recursion

5! = 5 * 4 * 3 * 2 * 1

function factorial(num) {
if (num == 1 || num == 0) {
return 1
}
return num * factorial(num - 1)
}
console.log(factorial(5)); # 120

β—‰ Palindrome using For loop

function palindrome(str) {
var re = /[^A-Za-z0-9]/g;
str = str.toLowerCase().replace(re, '');
var len = str.length;
for (var i = 0; i < len/2; i++) {
if (str.charAt(i) !== str.charAt(len - 1 - i) {
return false;
}
}
return true;
}
palindrome("A man, a plan, a canal. Panama");

β—‰ Removing Duplicates from a single Array

source: https://dev.to/mshin1995/back-to-basics-removing-duplicates-from-an-array-55he

1. Set

The easiest way in my opinion but only supported with ES6.

const arr = [2,3,4,2,3,4]
const uniqueSet = new Set(arr);
const backToArray = [...uniqueSet]

Set is a new data object introduced in ES6. Because Set only lets you store unique values. When you pass in an array, it will remove any duplicate values.

Once the duplicates are gone, we’re going to convert it back to an array by using the spread operator ...

2. forEach()

function removeDuplicates(array) {
let x = {};
array.forEach(function(i) {
if(!x[i]) {
x[i] = true
}
})
return Object.keys(x)
};

Checks to see if each element in the array is unique.

3. filter()

function removeDuplicates(array) {
return array.filter((eachItem, index) => array.indexOf(eachItem) === index)
};

4. map()

function removeDuplicates(array) {
let a = []
array.map(x =>
if(!a.includes(x) {
a.push(x)
})
return a
};

Maps through the array and adds unique elements to a new array.

β—‰ Removing Duplicates from two Arrays

array1 = array1.filter(function(val) {
return array2.indexOf(val) == -1;
});

β—‰ Find if two arrays contain any common item in Javascript?

source: https://www.geeksforgeeks.org/how-to-find-if-two-arrays-contain-any-common-item-in-javascript/?ref=rp

✍ Method 1:

Time Complexity: O(M + N): (Recommended method)

const arr1 = ['a', 'b', 'c', 'd']; 
const arr2 = ['e', 'f', 'g'];
function findCommonElements2(arr1, arr2) {let obj = {};
for (let i = 0; i < arr1.length; i++) {
if(!obj[arr1[i]]) {
const element = arr1[i];
obj[element] = true;
console.log(obj) ;
}
}
for (let j = 0; j < arr2.length ; j++) {
if(obj[arr2[j]]) {
return true;
}
}
return false;
}
findCommonElements2(arr1, arr2);

✍ Method 2 :

Time Complexity: O(M * N):

const array1 = ['a', 'b', 'c', 'd']; 
const array2 = ['k', 'x', 'z'];

function findCommonElement(array1, array2) {

for(let i = 0; i < array1.length; i++) {
for(let j = 0; j < array2.length; j++) {
if(array1[i] === array2[j]) {
return true;
}
}
}
// Return if no common element exist
return false;
}
findCommonElement(array1, array2);

β—‰ Sort an array using w/o using any inbuilt method.

function sorter(array)
{
var count = array.length - 1,
swap,
i,
j;
for (i = 0; i< count; i++)
{
for (j = 0; j< count; j++)
{
if (array[j] > array[j + 1])
{
swap = array[j + 1];
array[j + 1] = array[j];
array[j] = swap;
}
}
}
return array;
}
console.log(sorter([1, 0, 1, 1, 0, 0, 1]));
#Result: [0,0,0,1,1,1,1];

β—‰ using inbuilt β€œsort()” method

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

To compare numbers instead of strings, the compare function can simply subtract b from a. The following function will sort the array in ascending order (if it doesn't contain Infinity and NaN):

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]
# using ES6 methodlet numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);

// [1, 2, 3, 4, 5]

β—‰ Sort an array of objects based on some property

var items = [
{ name: 'Edward', value: 21 },
...
...
{ name: 'Zeros', value: 37 }
];

// sort by value (which is integer)
items.sort(function (a, b) {
return a.value - b.value;
});

// sort by name (which is string)
items.sort(function(a, b) {
var nameA = a.name.toUpperCase(); // ignore upper and lowercase
var nameB = b.name.toUpperCase(); // ignore upper and lowercase

if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}

// names must be equal
return 0;
});

β—‰ Rearrange positive and negative numbers in an array

Algorithm

  1. Declare an array and input the array elements.
  2. Start traversing the array and if the current element is negative, swap the current element with the first positive element and continue traversing until all the elements have been encountered.
  3. Print the rearranged array.

OR

var t = [2, -12, 4, 46, -20, -1];var positiveArr = [];
var negativeArr = [];
t.forEach(function(item) {
if (item < 0) {
negativeArr.push(item);
} else {
positiveArr.push(item)
}
});
console.log(positiveArr) // should output [5, 6, 1]
console.log(negativeArr)

OR

var t = [2, -12, 4, 46, -20, -1];var positiveArr = t.filter((elem) => elem > 0);
var negativeArr = t.filter((elem) => elem < 0);

OR

source: https://stackoverflow.com/questions/43711407/given-an-array-of-positive-and-negative-integers-rearrange-it-so-that-you-have

var arr = [2, -12, 4, 46, -20, -1],
res = arr.reduce(function(s,a) {
a <= 0 ? s.unshift(a) : s.push(a);
return s;
}, []);

console.log(res);

NOTE: Do you not realise that just sorting the array already does this β€œnegative at the start, positive at the end” thing?

β—‰ Count the occurrence of each character in a string

source: https://stackoverflow.com/questions/19480916/count-number-of-occurrences-for-each-char-in-a-string

var str = "count number of each char in this string";var counts = {};// Misc vars
var ch, index, len, count;
for (index = 0, len = str.length; index < len; ++index) {
ch = str.charAt(index);
count = counts[ch];
console.log("count =>"+ count); // "count =>undefined"
counts[ch] = count ? count + 1 : 1;
}
for (ch in counts) {
console.log(ch + " ==>: " + counts[ch]);
}

Note: The charAt() method of the String class returns the char value at the specified index. The indexOf(int ch, int fromIndex) method of the String class returns the index within this string of the first occurrence of the specified character, starting the search at the specified index.

β—‰ Array.prototype.reduce()

source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

const array1 = [1, 2, 3, 4];
const reducer = (accu, currValue) => accu + currValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

β—‰ balanced parenthesis

source:https://medium.com/@paulrohan/parenthesis-matching-problem-in-javascript-the-hacking-school-hyd-7d7708278911

let isMatchingBrackets = function (str) {
let stack = [];
let map = {
'(': ')',
'[': ']',
'{': '}'
}

for (let i = 0; i < str.length; i++) {

// If character is an opening brace add it to a stack
if (str[i] === '(' || str[i] === '{' || str[i] === '[' ) {
stack.push(str[i]);
}
// If that character is a closing brace, pop from the stack, which will also reduce the length of the stack each time a closing bracket is encountered.
else {
let last = stack.pop();

//If the popped element from the stack, which is the last opening brace doesn’t match the corresponding closing brace in the map, then return false
if (str[i] !== map[last]) {return false};
}
}
// By the completion of the for loop after checking all the brackets of the str, at the end, if the stack is not empty then fail
if (stack.length !== 0) {return false};

return true;
}
console.log(isMatchingBrackets("(){}")); // returns true
console.log(isMatchingBrackets("[{()()}({[]})]({}[({})])((((((()[])){}))[]{{{({({({{{{{{}}}}}})})})}}}))[][][]")); // returns true
console.log(isMatchingBrackets("({(()))}}")); // returns false

β—‰ Flattening nested arrays

source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

Alternatives

β—‰ reduce and concat

const arr = [1, 2, [3, 4]];// To flat single level array
arr.flat();
// is equivalent to
arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]
// or with decomposition syntax
const flattened = arr => [].concat(...arr);

β—‰ β€œthis”

var foo = {
name: "anil",
age: 30
};
function getDetails() {
return (this.name + " is + this.age + " yrs old.");
}
foo.logMyDetails = getDetails;
console.log(foo.logMyDetails());
//anil is 30 yrs old.
β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬
function Employee(name) {
this.name = name;
this.getName = function () {
return this.name;
}
}
var e1 = new Employee(β€œanil");
e1.getName();
# anilβ–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬
function Employee(name) {
this.name = name;
}
Employee.getName = function () {
return this.name;
}
var e2 = new Employee("kumar");
e2.getName(); #TypeError
var e3 = e2.getName;
console.log(e3()); #TypeError
var e4 = e2.getName.bind(e2);
console.log(e3()); # TypeError
β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬β–¬var x = 3;
var foo = {
x: 2,
baz: {
x: 1,
bar: function () {
return this.x;
}
}
}
var go = foo.baz.bar; # "this" refers to global object
console.log(go());
console.log(foo.baz.bar())
# 3
# 1

β—‰ What happens to 'this’ in a function nested inside a method of an object?

It is essential to understand how function invocations and method invocations differ because in each of these invocations, the value of this is different. Let’s see below examples of function invocations below:

Image for post
Image for post

Explanation: splitName() is a REGULAR function inside setName() but not directly bind to profile object. So, it sets β€œthis” to `window` object, which doesn’t have a firstname property, , and hence the NaN outputs are obtained.

How do we solve this issue?

[1]. One solution is to assign the this value from the outer function to a variable to be used in the nested function like so:

var self = this;

[2]. Second solution to this problem involve using bind(), call() or apply().

[3]. Thirdly, converting it to fat arrow function, splitName=()=> function looses its β€œthis” and gets value of this from enclosing body which is profile over here.

Image for post
Image for post

Explanation:

this.value refers to the value property in the β€˜object’ object.

And add method has a parameter called val and number functions takes that as a parameter and return val * this.value, but this.value in the number functions is undefined and 10 * undefined is equal to NaN. So, the answer is 20 , NaN.

Image for post
Image for post

Output : 5,NaN, 5

β—‰ `this` inside Classes

Image for post
Image for post

β—‰ reverse a string using inbuilt methods

function reverseString(str) {
return str.split("").reverse().join("");
}
reverseString("hello");

split() => split a string into an array of substrings, & returns a new array.

reverse()=> is ONLY applicable on Arrays ( & not String).

join() => join the elements of an array into a string:

β—‰ reverse an INTEGER using inbuilt methods

The first thing I’d do is to convert the number to a string by calling the inbuilt JavaScript .toString() in-built method.

let myNumber = 23;
let myChar = myNumber.toString().split('').reverse().join('');
console.log(myChar) // returns 32;
console.log(typeof(myChar)) // returns string

So we have successfully reversed the number but the output is still a string and not a number, meaning we cannot perform mathematical operations on our result. To change this back to a number, we would simply wrap this into the JavaScript parseInt() method.

const myNewNumber = parseInt(myChar);console.log(myNewNumber); // returns 32
console.log(typeof(myNewNumber)) // returns number

β—‰ find the max / min number in an array

const nums = [1, 2, 3]
Math.min(nums) // NaN
Math.max(nums) // NaN

That is because Math.min or Math.max functions expect distinct variables and not an array. So, in order to do that before ES6/ES2015 apply method was used.

var nums = [1, 2, 3]
Math.min.apply(Math, nums) // 1
Math.max.apply(Math, nums) // 3
Math.min.apply(null, nums) // 1
Math.max.apply(null, nums) // 3

With ES6/ES2016 destructuring assignment it becomes easier

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects into distinct variables.

const nums = [1, 2, 3]
Math.min(...nums) // 1
Math.max(...nums) // 3

old traditional approach:

var arr = [3, 6, 2, 56, 32, 5, 89, 32];
var largest = arr[0];

for (var i = 0; i < arr.length; i++) {
if (largest < arr[i] ) {
largest = arr[i];
}
}
console.log(largest);
Image for post
Image for post

NOTE:- Above can be done using built-in functions map() + Math.max()

β—‰ union of two arrays

Method 1:

  • Store all elements in a JavaScript object.

Storing elements in JavaScript Object is going to remove the duplicate elements.

  • At the end, push all element in a JavaScript array.
function computeUnion(a, b) { 
var object = {};

for (var i = a.length-1; i >= 0; --i)
object[a[i]] = a[i];

for (var i = b.length-1; i >= 0; --i)
object[b[i]] = b[i];

var ret = []

for (var i in object) {
if (object.hasOwnProperty(i))
ret.push(object[i]);
}
return ret;
}

Method 2 :

var union = [...new Set([...A, ...B])];

β—‰ merge two or more Javascript Arrays

Image for post
Image for post

β—‰ merge two Javascript objects

function extend(src, dest) {
for (var key in dest) {
if (dest.hasOwnProperty(key)){
src[key] = dest[key];
}
}
return src;
}
// examplevar a = { foo: true, name: "anil", gender: "male"};
var b = { bar: false, gender: "female", age: 30 };
var c = extend(a, b);
console.log(c);
# {"foo":true,"name":"anil","gender":"female","bar":false,"age":30}

β—‰ How to compare two JavaScript array objects using JavaScript ?

source: https://www.geeksforgeeks.org/how-to-compare-two-javascript-array-objects-using-jquery-javascript/?ref=rp

✍ Method 1:

var arr1 = [1, 3, 7, 5]; 
var arr2 = [1, 3, 5, 7];
function compare(arr1, arr2) {
arr1.sort();
arr2.sort();

if(arr1.length != arr2.length)
return false;

for(var i = 0; i < arr1.length; i++) {
if (arr1[i] != arr2[i])
return false;
}
return true;
}
compare(arr1, arr2)

❌ Caveat: sort() doesn’t produce incorrect result when sorting numbers.

✍ Method 2:

  • Use JSON.stringify() function to convert object into JSON string.
  • Now compare both JSON string using comparison operator (==) to check both array objects are equal or not.
  var arr1 = [ 
{id: "1", name: "GeeksforGeeks"},
{id: "2", name: "GFG"}
];

var arr2 = [
{id: "1", name: "GeeksforGeeks"},
{id: "2", name: "GFG"}
];
function compare(ar1, ar2) {
if(JSON.stringify(arr1) == JSON.stringify(arr2)){
return true;
}
else
return false;
}
compare(arr1, arr2);

Note: This method works only when both array objects sorted into the same fashion.

β—‰ Pass by value vs Pass by Reference:

function changeAgeAndReference(person) {
person.age = 25;
person = {
name: 'John',
age: 50
};

return person;
}
var personObj1 = {
name: 'Alex',
age: 30
};
var personObj2 = changeAgeAndReference(personObj1);console.log(personObj1); // -> { name: 'Alex', age: 25 }
console.log(personObj2); // -> { name: 'John', age: 50 }

The variable person in the function contains a reference to the personObj1 object, so initially it acts directly on that object.

Once we reassign person to a new object, it stops affecting the original.

β—‰ setTimeout() Exercise:

Image for post
Image for post

The reason is because `let` is block scoped. What that means is that scope of a variable declared using `let` is on a block level, hence for each block of code, a new memory address is assigned to variable, Hence, each of the setTimout will log the value of the variable at that point in the loop. But with `var` (which is globally scoped). The variable i retains it’s memory location(new memory locations are not assigned). For this reason , all the setTimout function are going to log the content of same memory location, unfortunately the value of i increases until the exit value 3. Hence all the setTimout functions will log 3. That’s you have 3 3 3 when it is var.

β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” -

Image for post
Image for post
Image for post
Image for post

Output is : Brooke Jonas Dennis 2020 TR

Why? In JS, by default all properties of obj are sorted in following order:

string keys >ascending order for number-like keys.

β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” -

β—‰ Sum of no.s using rest operator and reduce()

Image for post
Image for post

Javascript, rest parameter syntax allows us to show an indefinite number of arguments as an array and reduce method is used for reduce array to a single value.

Here, args convert all arguments passed to a function as an array, so you can use reduce() which only applies to an array.

let arr = [10,20,30,40,50];
let [a, b, c, ...d] = arr;
console.log(d); // [40, 50];

When there is a rest parameter we should pass an array as an argument so the answer is [40, 50].

The spread operator (…) allows an expression to be expanded in places where multiple elements/variables/arguments are expected.

When we use the spread operator within Math.min() it will expand, or spread out, our array and insert each variable as a separate parameter into Math.min()!

In other words:

Math.min(...[1,2,3,4]) is the same as Math.min(1,2,3,4)

β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€”

sum of no.s using Recursion

var array_sum = function(arr) {
if (arr.length === 1) {
return arr[0];
}
return arr.pop() + array_sum(arr);

};
console.log(array_sum([1,2,3,4,5,6])); # 21
Sum using Recursion

β—‰ 4 ways to SWAP variables in JS :

1. De-structuring assignment

Knowing how to de-structure an array, it’s easy to use it for swapping variables. Let’s swap the variables a and b using destructuring assignment:

let a = 1;
let b = 2;
[a, b] = [b, a];
a; // => 2
b; // => 1

[a, b] = [b, a] is the destructuring assignment that swaps the variables a and b.

2. Using β€œthird” variable

Let’s swap the values of variables a and b using a temporary variable temp:

let a = 1;
let b = 2;
let temp;
temp = a;
a = b;
b = temp;
a; // => 2
b; // => 1

3. Addition and difference

You can swap variables without the use of additional memory (like a temporary array or variable).

let a = 1;
let b = 2;

a = a + b;
b = a - b;
a = a - b;
a; // => 2
b; // => 1

Find a value in an array of objects in Javascript

Get all possible substrings of a given string

all possible substrings of a given string

check if a variable is an Object {}

console.log((variable !== null) && (variable.constructor === Object));

above returns false for nulls, arrays, and functions, but true for objects.

check if a variable is an array

variable.constructor === Array

Some other ways are:

Array.isArray(variable)

Clone an Array:

arr.slice(0);

get last element of an Array:

arr.slice(-1);

join all elements of an array:

//arr = ["A", "B", "C", "D"];
console.log(arr.toString()); // "A,B,C,D"
console.log(arr + ""); // "A,B,C,D"
console.log(arr.join()); // "A,B,C,D"
console.log(arr.join('+')); // A+B+C+D

Chaining in JS (as in jQuery)

Q. increment the counter on each page load

this can be solved using the concept of HTML5 localStorage.

This is a very simple example showing a counter that will increment by one every time you reload a a page. As the counter is saved in your own browser and it is associated with the site you visited, this number will be independent of what other people see, or what you’ll see if you visit the same page using a different device or even a different browser on the same device.

for more read @ https://code-maven.com/on-load-counter-with-javascript-and-local-storage

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store