From this article you will know how to make scratch card using html css and javascript. Here you will find complete step by step tutorial to make JavaScript Scratch Card.
Scratch Card We mainly see coupons or gift cards in many websites. Where the user can see the hidden information by scratching the card.
Earlier I have shared more than 100 JavaScript related tutorials. Hope you will like those tutorials. Making this scratch card is very easy if you know basic html css and javascript.
Scratch Card using JavaScript
This simple scratch card consists of 2 layers. The first layer contains some text or information. There is another layer inside the scratch card to hide that layer. When the user will scratch within that layer, the first layer will be visible.
See the Pen Untitled by Ground Tutorial (@groundtutorial) on CodePen.
As you can see above, this is a simple project (Create Scratch Card using JavaScript). Here first I have created a box in the webpage. Another box is made in that box which will work as Scratch Card. Gradient background color is used in that html scratch card.
Create Scratch Card with HTML CSS JavaScript
Now if you want to know how to make Scratch Card using JavaScript then follow the tutorial below. Here I have used html to create the structure of the project. This simple scratch card is designed by css. Then the Scratch Card is activated by JavaScript.
If you just want the source code, use the download button below the article. But if you are a beginner then I request you to follow the complete tutorial.
Step 1: Basic Structure of Scratch Card
First I created a box on the web page using the following HTML and CSS codes. In that box javascript will see all the infomatin of Scratch Card.
First I used the gradient color in the webpage using linear-gradient.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(135deg, #57acd1, #0758c2);
}
The box on the web page is designed using the following css codes. I used width: 21em and height: 21em of the box and used background color white.
.container {
width: 21em;
height: 21em;
background-color: #f5f5f5;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.6em;
}
Step 2: Add scratch card information
Now add some basic information in this box. Basically, this information can be found in the first layer of the scratch card, which will be hidden. project(Scratch Card using html css JavaScript) uses a shadow around the box-shadow: 0 1.2em 2.5em rgba(16, 2, 96, 0.15).
Here box height: 300px, width: 300px is used. Besides, I have used cursor: grabbing here.
You Won
$10
.base {
background-color: #ffffff;
font-family: "Poppins", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 1.2em 2.5em rgba(16, 2, 96, 0.15);
height: 300px;
width: 300px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
cursor: grabbing;
border-radius: 0.3em;
}
.base h3 {
font-weight: 600;
font-size: 1.5em;
color: #17013b;
}
.base h4 {
font-weight: 400;
color: #746e7e;
}
Step 3: Create a second layer of Scratch Card
Now create second layer using canvas. I have kept the width and height of this second layer equal to the first layer. When you scratch over this layer, the first layer will be visible.
The size of this layer is kept equal to the first layer. User-select: none is used so that the user cannot select.
#scratch {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
height: 300px;
width: 300px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
cursor: grabbing;
border-radius: 0.3em;
}
Step 4: Activate Scratch Card with JavaScript
Now it’s time to implement this simple scratch card using JavaScript. Above we only designed it by html css.
Here I have put all the code together but you have no reason to worry. Below I have provided the necessary explanation and information that will help you.
//First some constants of id and class are defined
let canvas = document.getElementById("scratch");
let context = canvas.getContext("2d");
const init = () => {
//createLinearGradient() method creates a linear gradient object.
let gradientColor = context.createLinearGradient(0, 0, 135, 135);
//addColorStop() method specifies the color stops, and its position along the gradient
gradientColor.addColorStop(0, "#57acd1");
gradientColor.addColorStop(1, "#6414e9");
context.fillStyle = gradientColor;
// fillRect() method draws a filled rectangle whose starting point is at (x, y)
context.fillRect(0, 0, 300, 300);
};
//initially mouse X and mouse Y positions are 0
let mouseX = 0;
let mouseY = 0;
let isDragged = false;
//Events for touch and mouse
let events = {
mouse: {
down: "mousedown",
move: "mousemove",
up: "mouseup",
},
touch: {
down: "touchstart",
move: "touchmove",
up: "touchend",
},
};
let deviceType = "";
//Detech touch device
const isTouchDevice = () => {
try {
//We try to create TouchEvent. It would fail for desktops and throw error.
//CreateEvent as an alias which automatically selects the ANSI
document.createEvent("TouchEvent");
deviceType = "touch";
return true;
} catch (e) {
deviceType = "mouse";
return false;
}
};
//Get left and top of canvas
//getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
let rectLeft = canvas.getBoundingClientRect().left;
let rectTop = canvas.getBoundingClientRect().top;
//Exact x and y position of mouse/touch
const getXY = (e) => {
mouseX = (!isTouchDevice() ? e.pageX : e.touches[0].pageX) - rectLeft;
mouseY = (!isTouchDevice() ? e.pageY : e.touches[0].pageY) - rectTop;
};
isTouchDevice();
//Start Scratch
//addEventListener() is an inbuilt function in JavaScript
canvas.addEventListener(events[deviceType].down, (event) => {
isDragged = true;
//Get x and y position
getXY(event);
scratch(mouseX, mouseY);
});
//mousemove/touchmove
canvas.addEventListener(events[deviceType].move, (event) => {
if (!isTouchDevice()) {
event.preventDefault();
}
if (isDragged) {
getXY(event);
scratch(mouseX, mouseY);
}
});
//stop drawing
canvas.addEventListener(events[deviceType].up, () => {
isDragged = false;
});
//If mouse leaves the square
canvas.addEventListener("mouseleave", () => {
isDragged = false;
});
const scratch = (x, y) => {
//destination-out draws new shapes behind the existing canvas content
//globalCompositeOperation property sets or returns how a source (new) image are drawn
context.globalCompositeOperation = "destination-out";
//beginPath() method begins a path, or resets the current path
context.beginPath();
//arc makes circle - x,y,radius,start angle,end angle
context.arc(x, y, 12, 0, 2 * Math.PI);
context.fill();
};
//onload event occurs when an object has been loaded.
window.onload = init();
Hope this tutorial has helped you completely to know how I made this Scratch Card using html css and javascript.
Earlier I have created many other projects that help you learn more about JavaScript. Comment how you like this JavaScript Scratch Card Design.
It is not possible to make scratch card only by html. For this you need to use css. But you can make scratch cards without javascript. Of course next time I will tell you how to make scratch card by html css.
Instead of javascript you can also create scratch card using jQuery. But nowadays jQuery is not much used so I used javascript. If you are a beginner then definitely try to build it using javascript.
This simple scratch card design is made by Canvas. But in this I didn’t use animation. You can visit my website for using animations in this JavaScript Scratch Card.
If you want to create Scratch Card with JavaScript and Canvas then you can use this design