adnanaheer
diff --git a/‎index.html‎
Lines changed: 25 additions & 0 deletions b/‎index.html‎
Lines changed: 25 additions & 0 deletions
diff --git a/‎script.js‎
Lines changed: 42 additions & 0 deletions b/‎script.js‎
Lines changed: 42 additions & 0 deletions
diff --git a/‎style.css‎
Lines changed: 52 additions & 0 deletions b/‎style.css‎
Lines changed: 52 additions & 0 deletions
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
+ integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
+ crossorigin="anonymous" />
+ <title>Double Click Heart</title>
+</head>
+
+<body>
+ <h3>Double click on the image to <i class="fas fa-heart"></i>it</h3>
+ <small>You liked it <span id="times">0</span> times</small>
+ 
+ <div class="loveMe"></div>
+ 
+
+ <script src="script.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,42 @@
+const loveMe = document.querySelector('.loveMe')
+const times = document.querySelector('#times')
+
+let clickTime = 0
+let timesClicked = 0
+
+loveMe.addEventListener('click', (e) => {
+ if(clickTime === 0) {
+ clickTime = new Date().getTime()
+ } else {
+ if((new Date().getTime() - clickTime) < 800) {
+ createHeart(e)
+ clickTime = 0
+ } else {
+ clickTime = new Date().getTime()
+ }
+ }
+})
+
+const createHeart = (e) => {
+ const heart = document.createElement('i')
+ heart.classList.add('fas')
+ heart.classList.add('fa-heart')
+
+ const x = e.clientX
+ const y = e.clientY
+
+ const leftOffset = e.target.offsetLeft
+ const topOffset = e.target.offsetTop
+
+ const xInside = x - leftOffset
+ const yInside = y - topOffset
+
+ heart.style.top = `${yInside}px`
+ heart.style.left = `${xInside}px`
+
+ loveMe.appendChild(heart)
+
+ times.innerHTML = ++timesClicked
+
+ setTimeout(() => heart.remove(), 5000)
+}
@@ -0,0 +1,52 @@
+@import url("https://fonts.gooogleapis.com/css?family=Oswald");
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Oswald", sans-serif;
+ text-align: center;
+ overflow: hidden;
+ margin: 0;
+}
+
+h3 {
+ margin-bottom: 0;
+ text-align: center;
+}
+
+small {
+ display: block;
+ margin-bottom: 20px;
+ text-align: center;
+}
+
+.fa-heart {
+ color: red;
+}
+
+.loveMe {
+ height: 440px;
+ width: 300px;
+ background: url('https://www.whatsappimages.in/wp-content/uploads/2021/01/Boys-Feeling-Very-Sad-Images-Pics-Downlaod.jpg') no-repeat center center/cover;
+ margin: auto;
+ cursor: pointer;
+ max-width: 100%;
+ position: relative;
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
+ 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.loveMe .fa-heart {
+ position: absolute;
+ animation: grow 0.6s linear;
+ transform: translate(-50% , -50%) scale(0);
+}
+
+@keyframes grow {
+ to {
+ transform: translate(-50% , -50%) scale(10);
+ opacity: 0;
+ }
+}