We all know that tips are a huge deal in web3.0, especially when it comes to crypto and the many, many use cases we can think of. Tips just plays a huge role in the cryptoverse - I mean, it also plays a major role in web2.0 but who cares about those dinosaurs right?
This little project doesn't interact with blockchains, remember I am still a total n00b and coding is still like my 36th skill in order of mastership, but at least when it comes to JavaScript and CSS, I am getting better.
Before you ask, no, I didn't use Hive because Font-Awesome only has Bitcoin's icon. I could upload Hive as an icon but that costs 99 dollars a year so yeah, no can do amigos.
This is just an idea for a front-end that manages tips in Satoshis, showing in a graphical, interactive way how it would look if you tipped an author by double clicking on his photos.
Project: Double Click Event
In this project I will create a small function that allows the user to double click an image to like it. This event will include an animation and will be interactive, where the animation will show in the exact position where we click; this double click event will be intelligent..-->
HTML Code
<body>
<h3>
Double click on the image to tip some <i class="fab fa-bitcoin"></i> to
the author.
</h3>
You have tipped <span id="tips">0</span> satoshis to the author
<div class="shareTheSats"></div>
<script src="script.js"></script>
</body>
</html>
As always, the result of the HTML code is nothing to be amazed at, but the bones are there now.
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Poppins");
* {
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
text-align: center;
overflow: hidden;
margin: 0;
}
h3 {
margin-bottom: 0;
text-align: center;
font-size: 26px;
}
small {
display: block;
margin-bottom: 20px;
text-align: center;
}
I don't really like the BTC logo in black, so I will style it. I also want the BTC icon to show when the user double clicks on the image.
.fa-bitcoin {
color: red;
}
.shareTheSats {
height: 440px;
width: 588px;
background: url("cinco.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
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);
}
The position above is relative, because the BTC icon that will show when the user likes the image, will be positioned absolute within the Image.
.shareTheSats .fa-bitcoin {
position: absolute;
animation: grow 0.6s linear;
transform: translate(-50%, -50%) scale(0);
}
I want the animation to scale the BTC icon, to make it grow.
@keyframes grow {
to {
transform: translate(-50%, -50%) scale(10);
opacity: 0;
}
}
It's beginning to look a little more like what I want to portray, but I still need to give muscles and movement to this body with bones and meat.
JavaScript Code
I want to be able to double click on any area of the image and have the Bitcoin icon show in that spot.
const shareTheSats = document.querySelector(".shareTheSats");
const tips = document.querySelector("#tips");
The next piece of code is an easy way to create a double click event, but I am here to learn and if you are reading this, odd are you are also into learning, so disregard this part of the code:
shareTheSats.addEventListener("dblclick", (e) => {
console.log(123);
});
dblclick means double click and that's an easy way of doing this, but what if I want a personalized double click interval?
let clickTime = 0;
let totalTips = 0;
shareTheSats.addEventListener("click", (e) => {
if (clickTime === 0) {
clickTime = new Date().getTime();
} else {
if (new Date().getTime() - clickTime < 800) {
createBitcoin(e);
clickTime = 0;
} else {
clickTime = new Date().getTime();
}
}
});
const createBitcoin = (e) => {
const btc = document.createElement("i");
btc.classList.add("fab");
btc.classList.add("fa-bitcoin");
const x = e.clientX;
const y = e.clientY;
The (e) from the createBitcoin function is getting passed and pertains to the image, but I also need the offset from the left and from the top so I can substract the values from the coordinates from where the user double clicks.
const leftOffset = e.target.offsetLeft;
const topOffset = e.target.offsetTop;
const xOfImage = x - leftOffset;
const yOfImage = y - topOffset;
This gives us the coordinates of where the user clicks inside within the image, and not the coordinates of the whole viewport.
Remember that in the ".shareTheSats .fa-bitcoin" we set the position absolute? This means that we can use the properties of top, left, right, and I can use JS to softcode them.
btc.style.top = `${yOfImage}px`;
btc.style.left = `${xOfImage}px`;
shareTheSats.appendChild(btc);
Now for the last part, all I need to do is count how many times the user has double-clicked on the image, so the counter gets updated.
tips.innerHTML = ++totalTips;
Every BTC icon will remain in the DOM even after it disappears, so I have to set a function that erases them dinamically.
setTimeout(() => btc.remove(), 1000);
};
And damn, now we truly have a great front-end idea for tips using any crypto, do you like it?
Please, if you are a JavaScript developer leave a comment and I'll get in touch with you, I really want to get in the ring and I need amigos who can show me how.
I hope you liked this post idea.