From af9c1b31aa066f6313f96d4192b7b8cd41914ec5 Mon Sep 17 00:00:00 2001
From: Ayush kumar <67006255+Ayush7614@users.noreply.github.com>
Date: Sun, 3 Oct 2021 17:28:34 +0530
Subject: [PATCH] added double click heart
---
Double Click Heart/README.md | 7 +++++
Double Click Heart/index.html | 18 ++++++++++++
Double Click Heart/script.js | 42 ++++++++++++++++++++++++++++
Double Click Heart/style.css | 52 +++++++++++++++++++++++++++++++++++
4 files changed, 119 insertions(+)
create mode 100644 Double Click Heart/README.md
create mode 100644 Double Click Heart/index.html
create mode 100644 Double Click Heart/script.js
create mode 100644 Double Click Heart/style.css
diff --git a/Double Click Heart/README.md b/Double Click Heart/README.md
new file mode 100644
index 0000000..0d1db50
--- /dev/null
+++ b/Double Click Heart/README.md
@@ -0,0 +1,7 @@
+# Double Click Heart
+An Double Click Heart created using pure HTML, CSS and JS when you click on it. It gives heart like whwn you click on any instagram post
+
+## Setup
+Just download and open index.html.
+
+
diff --git a/Double Click Heart/index.html b/Double Click Heart/index.html
new file mode 100644
index 0000000..5ff5d2a
--- /dev/null
+++ b/Double Click Heart/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+ Double Click Heart
+
+
+ Double click on the image to it
+ You liked it 0 times
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Double Click Heart/script.js b/Double Click Heart/script.js
new file mode 100644
index 0000000..a121037
--- /dev/null
+++ b/Double Click Heart/script.js
@@ -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(), 1000)
+}
\ No newline at end of file
diff --git a/Double Click Heart/style.css b/Double Click Heart/style.css
new file mode 100644
index 0000000..01da57c
--- /dev/null
+++ b/Double Click Heart/style.css
@@ -0,0 +1,52 @@
+@import url('https://fonts.googleapis.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://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')
+ 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;
+ }
+}
\ No newline at end of file