Hello! I’m giving you one of the codes I have written. You won’t see it anywhere because it is my creation. It’s a really good code and it can help you a lot. It is for the ‘POST’ command. But if you understand it, you can easily change it to other commands. It can only be used within the PragmaFlow WebView component. I’m not connected to them in any way, but I have one request - if you are already using this component, please support the PragmaFlow command in Patrions. I’ll be joining there myself next week, and apparently they even have a support amount of 1EUR per month. It’s really a symbolic amount. If you ask me why I am giving it away and not asking for anything? To be honest, there are some people who still think that money is not always happiness:) And I should add that I didn’t see this code display function yesterday because I was really tired.
<html>
<head>
<audio id="send-sound">
<source src="***Your send sound URL***" type="audio/mp3">
</audio>
<script>
const musicList = [
'https://example.com/music1.mp3',
'https://example.com/music2.mp3',
'https://example.com/music3.mp3'
];
function getRandomMusic() {
return musicList[Math.floor(Math.random() * musicList.length)];
}
function playRandomMusic() {
const audio = new Audio(getRandomMusic());
audio.play();
}
const songs = [
'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3'
];
function playMusic() {
const music = document.getElementById('music');
const randomSong = songs[Math.floor(Math.random() * songs.length)];
music.src = randomSong;
music.volume = 0.5; // Set volume to 50%
music.addEventListener('loadedmetadata', () => {
music.play();
});
}
const apiKey = '*********YOUR API KEY*********';
const appId = '*********YOUR APP ID************';
const collectionId = '************YOUR COLLECTION ID*************';
const url = `https://api.adalo.com/v0/apps/${appId}/collections/${collectionId}`;
async function countMessageCharacters(message) {
return message.length;
}
async function sendMessage() {
const messageInput = document.getElementById('messageInput');
const message = messageInput.value.trim();
const sendButton = document.querySelector('.send-icon'); // assuming you have a send icon with class "send-icon"
const sendSound = document.getElementById('send-sound');
const music = document.getElementById('music');
sendSound.currentTime = 0; // reset audio to start if already playing
sendSound.play(); // play audio
music.pause(); // pause music
messageInput.classList.add('fade-out'); // add the fade-out class to the message input
// Add event listener to remove the fade-out class after the transition ends
messageInput.addEventListener('transitionend', () => {
messageInput.classList.remove('fade-out');
}, {once: true});
if (!message) {
return; // return without sending the message if the message is empty
}
const messageCount = await countMessageCharacters(message);
const data = {
'Message': message,
'UserName': 'LOG IN USERNAME............................',
'CoverstaionRoomID': ROOMID(JUST NUMBER HERE, FOR EXAMPLE 10. IN THIS WAY YOUR MESSAGES/COMMENTS WILL BE SHOWED IN ADALO IN RIGHT WAY),
'UserImageUrl': 'LOG IN USERIMGAE.........................',
'MessageImageUrl': '***********HERE YOU CAN GRAB IMAGE URL FROM ADALO IMAGE PICKER URL*************',
'MessageCount': messageCount
};
const headers = {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json'
};
const options = {
method: 'POST',
headers: headers,
body: JSON.stringify(data)
};
try {
const response = await fetch(url, options);
const data = await response.json();
console.log(data);
messageInput.value = '';
// change icon color after sending message
const sendIcon = document.querySelector('.send-icon');
sendIcon.style.color = "#fff";// new color here
} catch (error) {
console.error(error);
}
}
</script>
<style>
.input-container {
position: fixed;
top: 20px;
left: 20px;
width: 90%;
height: 90%;
display: flex;
justify-content: center;
align-items: center;
}
#messageInput::placeholder {
color: #fff
}
textarea {
height: 80%;
overflow: auto;
padding: 1.33%;
border: none;
border-radius: 20%;
width: calc(100% - 4%);
resize: none;
font-family: 'Roboto', sans-serif;
font-size: 4.78vw;
color: #650ceb;
background-color: #650ceb;
outline: none;
animation: fade-in 1.9s ease-out;
border: 3px solid #650ceb;
box-shadow: 0 0 10px rgba(101, 12, 235, 0.9);
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.user-info {
display: flex;
align-items: center;
margin-bottom: 0.1px;
}
textarea:focus {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
textarea.fade-out {
opacity: 0;
pointer-events: none;
transition: opacity 1.5s ease-in-out;
}
textarea.fade-in {
opacity: 1;
pointer-events: auto;
transition: opacity 1s ease-in-out;
}
/* Style the send icon */
.send-icon {
position: absolute;
top: 50%;
right: 3%;
font-size: 7.33vw;
color: #fff;
background-color: #650ceb;
transform: translateY(-50%);
border-radius: 50%;
padding: 1.5%;
border: 3px solid #650ceb;
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 1.11% rgba(0, 0, 0, 0.1);
z-index: 9999;
animation: fade-in 1.9s ease-out;
border: 3px solid #650ceb;
box-shadow: 0 0 10px rgba(101, 12, 235, 0.9);
}
.send-icon {
border-color: #fff
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.user-info {
display: flex;
align-items: center;
margin-bottom: 0.1px;
}
.send-icon:hover {
background-color: #fff; /* hover color */
}
.send-icon:active {
transform: translateY(-50%) scale(1.95);
box-shadow: 0 0 1.11% rgba(
173, 113, 201, 0.3);
}
input[type="text"]:focus {
box-shadow: 0 0 1.11% rgba(173, 113, 201, 0.2);
}
</style>
<div class="input-container">
<textarea id="messageInput" placeholder="Type your message..." onclick="playMusic()"></textarea>
<i class="fas fa-paper-plane send-icon" onclick="sendMessage()"></i>
</div>
<audio id="music"></audio>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
</html>