These days you may have seen many Payment applications like Google pay, Paytm, PhonePe, etc having scratch cards where users can scratch like real one to reveal offers or points.
In Ionic as well we can create similar Scratch Cards effect, loved by users as it involves user interactions and a touch of suspense. These Scratch cards are very much popular and seen in many applications.
Also Read: Ionic | Crop Images using Ionic 4 native plugin with Image Picker
Here we will create an Ionic 4 Application using the latest CLI with Angular 7.
For Scratch Card effect we will use ScratchCardJS library using NPM
Let’s Scratch It! 😛
Make sure you have the latest version of Ionic CLI installed (Current is v4.12.0)
$ npm i ionic
Create a new Ionic 4 Application with Blank template by running following NPM command
$ ionic start Ionic4ScratchDemo blank
$ cd Ionic4ScratchDemo
Install Scratch Card JS in Application
Run following NPM command for ScratchCardJS module
$ npm install --save scratchcard-js
Now we will simply Add a Scratch Card in Home Component
Open home.page.html file then add following HTML
<ion-header>
<ion-toolbar>
<ion-title>
Ionic 4 Scratch Cards
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content text-center>
<div class="sc__wrapper">
<div id="js--sc--container"></div>
</div>
</ion-content>
Next, we will call ScratchCard method on the above element from the home.component.ts file.
import { Component, OnInit } from '@angular/core';
import { ScratchCard, SCRATCH_TYPE } from 'scratchcard-js'
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
ngOnInit() {
this.createNewScratchCard();
}
createNewScratchCard() {
const scContainer = document.getElementById('js--sc--container')
const sc = new ScratchCard('#js--sc--container', {
scratchType: SCRATCH_TYPE.CIRCLE,
containerWidth: 300,//scContainer.offsetWidth,
containerHeight: 300,
imageForwardSrc: './assets/images/scratchcard.png',
//imageBackgroundSrc: './assets/images/scratchcard-background.svg',
htmlBackground: '<div class="cardamountcss"><div class="won-amnt">30</div><div class="won-text">Points<br>Won!</div></div>',
clearZoneRadius: 40,
nPoints: 30,
pointSize: 4,
callback: () => {
console.log('Now the window will reload !')
}
})
// Init
sc.init();
}
}
Option parameters
imageForwardSrc: Image source in PNG, JPG or SVG
imageBackgroundSrc: If you want to show an image after the scratch or you can add HTML in htmlBackground
You can play with other options nPoints, clearZoneRadius, pointSize.
callback method is called after a specified percentage in nPoints of the card is scratched.
SCSS Styling
In file global.scss add the following code
#js--sc--container{
max-width: 300px;
width:100%;
height: 300px;
margin: auto;
position: relative;
canvas{
position: absolute;
top:0px;
left:0px;
z-index: 99;
border-radius: 5px;
}
.cardamountcss{
z-index: 9;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
position: absolute;
.won-amnt{
font-size:5em;
color: #424242;
}
.won-text{
font-size: 4em;
color: #424242;
}
}
.sc__inner{
background-color: #ffffff;
height: 100%;
width: 100%;
border-radius: 5px;
border: 1px solid #26005f;
}
}
add following in home.page.scss
.scratch-card-bottom{
margin-top:20px;
.card-bottom-text{
font-size:1.2em;
}
}
That’s it now you can run your ScratchCard in the browser to win 30 Points 😛
Run the following command
$ ionic serve --open
You can build your application amazing by using this nice ScratchCard library in Angular Web Application as well.
Leave a Reply