I asked ChatGPT, Hugging Face Chat, and Bard:
“Write JavaScript that will make emoji float across the screen on page load.”
If I truly needed this code I would probably pick Hugging Face’s solution. Yes, the solution from the new, open source chat bot.
ChatGPT’s solution doesn’t include a page load listener like I was hoping for. Bard’s solution doesn’t either. What’s neat about Bard’s answer though is it provided a JavaScript only solution. It didn’t take the liberty to add CSS like the others. You might see this as a negative or positive. At least it obeyed what I asked.
I also don’t love using innerHTML. Hugging Face gave the only solution without that.
ChatGPT’s solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Floating Emoji</title>
<style>
.emoji {
position: absolute;
top: 0;
left: 0;
font-size: 50px;
animation: float 5s linear infinite;
}
@keyframes float {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(50%, 200px);
}
100% {
transform: translate(100%, 0);
}
}
</style>
</head>
<body>
<div class="emoji">🎉</div>
<script>
// Javascript code to select the emoji div and insert the desired emoji
const emojiDiv = document.querySelector('.emoji');
emojiDiv.innerHTML = '🎉';
</script>
</body>
</html>Hugging Face’s solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Add any CSS styles here -->
<title>Emoji Animations</title>
</head>
<body>
<!-- Your HTML elements go here -->
<script type="text/javascript">
// Wait for the document to fully load before running the code below
window.addEventListener("load", function() {
// Select all the images with the "emoji" class
const emojis = Array.from(document.querySelectorAll(".emoji"));
// Loop through each image
emojis.forEach((image) => {
// Create a new instance of the Image object
const animatedImage = new Image();
// Set the source attribute of the Image object to the SRC attribute of the original element
animatedImage.src = image.getAttribute("src");
// Set the style properties for the animated image (optional - you can customize these as desired!)
animatedImage.style.position = "absolute";
animatedImage.style.top = "-10px";
animatedImage.style.left = "-25px";
// Add the animation effect using CSS transform property
animatedImage.animate = true;
setTimeout(() => {
animatedImage.setAttribute('class','spin');
}, 0);
});
});
</script>
</body>
</html>Bard’s solution:
// Create an array of emojis
const emojis = [
'😀',
'😃',
'😄',
'😁',
'😆',
'😅',
'🤣',
'😂',
'😃',
'😄',
];
// Create a function to create an emoji element
function createEmoji(emoji) {
const element = document.createElement('div');
element.className = 'emoji';
element.innerHTML = emoji;
return element;
}
// Create a function to add an emoji to the page
function addEmoji(emoji) {
const element = createEmoji(emoji);
document.body.appendChild(element);
}
// Add all the emojis to the page
for (const emoji of emojis) {
addEmoji(emoji);
}
// Set the emojis in motion
for (const emoji of document.querySelectorAll('.emoji')) {
emoji.style.animation = 'emoji-bounce 10s infinite';
}
// Create an animation for the emojis
@keyframes emoji-bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
Leave a Reply