Youtube video link - click here
Source code :
<!DOCTYPE html>
<html>
<head>
<title>
holi celebration
</title>
<style>
.container {
display: flex;
}
.drop-container {
width: 100%;
height: 100vh;
background-color: #eaf6f6;
position: relative;
}
.drops {
position: absolute;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="drop-container" onclick="add()">
</div>
</div>
<script>
var x, y, para, image, oldX, oldY;
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'aa', 'bb', 'cc'];
var i = 0;
var z = 0;
function add() {
if (i != arr.length) {
x = event.clientX;
y = event.clientY;
oldX = x;
oldY = y;
image = document.createElement("img");
para = document.createElement('para');
document.getElementsByClassName('drop-container')[0].appendChild(para);
para.appendChild(image);
image.src = "https://img.icons8.com/external-flatart-icons-outline-flatarticons/64/000000/external-water-drop-spring-flatart-icons-outline-flatarticons.png";
image.setAttribute('class', 'drops');
para.setAttribute("id", arr[i]);
document.getElementById(arr[i]).style.position = "relative";
if (oldX == x && oldY == y) {
z++;
document.getElementById(arr[i]).style.zIndex = z;
}
document.getElementById(arr[i]).style.left = x + "px";
document.getElementById(arr[i]).style.top = y + "px";
i++;
}
}
</script>
</body>
</html>
Post a Comment