You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.2 KiB
67 lines
2.2 KiB
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
const left = document.querySelector('.left-emoji');
|
|
const right = document.querySelector('.right-emoji');
|
|
const childText = document.getElementById('child-text');
|
|
const heartGif = document.getElementById('heart-gif');
|
|
|
|
fetch(`https://localhost:8000/emojis/fusion/${id_user}/${id_left}/${id_right}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
child_emoji=data['baby'];
|
|
left.dataset.content=data['mommy'];
|
|
right.dataset.content=data['daddy'];
|
|
function insertEmojiOrImage(el) {
|
|
const value = el.dataset.content;
|
|
console.log(value)
|
|
if (/^https?:\/\//.test(value)) {
|
|
const img = document.createElement('img');
|
|
img.src = value;
|
|
img.className = 'emoji-img';
|
|
el.appendChild(img);
|
|
} else {
|
|
el.textContent = value;
|
|
}
|
|
}
|
|
|
|
insertEmojiOrImage(left);
|
|
insertEmojiOrImage(right);
|
|
|
|
left.classList.add('slide-in-left');
|
|
right.classList.add('slide-in-right');
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
if (/^https?:\/\//.test(child_emoji)) {
|
|
emojiHtml = `
|
|
<div class="emoji-glow-img">
|
|
<img src="${child_emoji}" style="width:64px; height:64px">
|
|
</div>`;
|
|
} else {
|
|
emojiHtml = `
|
|
<span class="emoji-glow-text" data-emoji="${child_emoji}">${child_emoji}</span>`;
|
|
}
|
|
|
|
childText.innerHTML = `
|
|
<div class="emoji-wrapper">
|
|
${emojiHtml}
|
|
|
|
</div>`;
|
|
childText.classList.add('growing-animation');
|
|
childText.style.display = 'block';
|
|
heartGif.style.display = 'block';
|
|
heartGif.classList.add('fade-in');
|
|
|
|
|
|
}, 3000);
|
|
})
|
|
.catch(error => {
|
|
console.error('Erreur:', error);
|
|
});
|
|
|
|
document.getElementById('btn-retour').addEventListener('click', () => {
|
|
window.location.href = `https://localhost:8000/`;
|
|
});
|
|
}); |