var $messages = document.getElementsByClassName("messages-content"),
d, h, m,
i = 0;
$(window).load(function() {
$messages.mCustomScrollbar();
setTimeout(function() {
fakeMessage();
}, 100);
});
function updateScrollbar() {
$messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {
scrollInertia: 10,
timeout: 0
});
}
function setDate(){
d = new Date()
if (m != d.getMinutes()) {
m = d.getMinutes();
$('<div class="timestamp">' + d.getHours() + ':' + m + '</div>').appendTo($('.message:last'));
}
}
function insertMessage() {
msg = $('.message-input').val();
if ($.trim(msg) == '') {
return false;
}
$('<div class="message message-personal">' + msg + '</div>').appendTo($('.mCSB_container')).addClass('new');
setDate();
$('.message-input').val(null);
updateScrollbar();
setTimeout(function() {
fakeMessage();
}, 1000 + (Math.random() * 20) * 100);
}
$('.message-submit').click(function() {
insertMessage();
});
$(window).on('keydown', function(e) {
if (e.which == 13) {
insertMessage();
return false;
}
})
var Fake = [
'Hi AlgoOracle at your service ',
'please enter the stock you\'d like to predict<input type="text" class="form-control oracle-search" name="query" placeholder="Start typing something to search..."> ',
'Please Enter Your Target Price',
'good.....What is your comfortable level for investment loss (in %) <input type="range" value="50" min="0" max="100" step="10" />',
'we are Predicting... <div class="loading-img"><img src="http://algom.x10host.com/chat/img/chat.gif" alt=""/></div>',
'great.. do you want to predict another? <button class="buttonx sound-on-click">Yes</button> <button class="buttony sound-on-click">No</button> ',
'Bye',
':)'
]
function fakeMessage() {
if ($('.message-input').val() != '') {
return false;
}
$('<div class="message loading new"><figure class="avatar"><img src="http://algom.x10host.com/chat/img/icon-oracle.gif" /></figure><span></span></div>').appendTo($('.mCSB_container'));
updateScrollbar();
setTimeout(function() {
$('.message.loading').remove();
$('<div class="message new"><figure class="avatar"><img src="http://algom.x10host.com/chat/img/icon-oracle.gif" /></figure>' + Fake[i] + '</div>').appendTo($('.mCSB_container')).addClass('new');
setDate();
updateScrollbar();
i++;
}, 1000 + (Math.random() * 20) * 100);
}
``` Could someone help convert this to vanilla javascript?Shouldn’t this be a bounty as you’re not asking for code help but rather a task?
2 Likes
I’d be happy to do this for you, just can’t for a little while since I’m going somewhere, but once I’m back, later today, I can 
1 Like
I can help 
Update:
does this work? I haven’t tested it since I don’t have an html document to connect it to
const messages = document.getElementsByClassName("messages-content");
let d, h, m;
let i = 0;
window.addEventListener("load", function() {
messages.mCustomScrollbar();
setTimeout(function() {
fakeMessage();
}, 100);
});
function updateScrollbar() {
messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {
scrollInertia: 10,
timeout: 0
});
}
function setDate() {
d = new Date()
if (m !== d.getMinutes()) {
m = d.getMinutes();
const timestamp = document.createElement("div");
timestamp.className = "timestamp";
timestamp.innerText = `${d.getHours()}:${m}`;
const lastMessage = document.querySelector(".message:last-of-type");
lastMessage.appendChild(timestamp);
}
}
function insertMessage() {
const msg = document.querySelector(".message-input").value;
if (!msg.trim()) {
return false;
}
const message = document.createElement("div");
message.className = "message message-personal new";
message.innerText = msg;
const mCSBContainer = document.querySelector(".mCSB_container");
mCSBContainer.appendChild(message);
setDate();
document.querySelector(".message-input").value = null;
updateScrollbar();
setTimeout(function() {
fakeMessage();
}, 1000 + (Math.random() * 20) * 100);
}
document.querySelector(".message-submit").addEventListener("click", function() {
insertMessage();
});
window.addEventListener("keydown", function(e) {
if (e.which === 13) {
insertMessage();
return false;
}
});
const fake = [
'Hi AlgoOracle at your service ',
'please enter the stock you\'d like to predict<input type="text" class="form-control oracle-search" name="query" placeholder="Start typing something to search..."> ',
'Please Enter Your Target Price',
'good.....What is your comfortable level for investment loss (in %) <input type="range" value="50" min="0" max="100" step="10" />',
'we are Predicting... <div class="loading-img"><img src="http://algom.x10host.com/chat/img/chat.gif" alt=""/></div>',
'great.. do you want to predict another? <button class="buttonx sound-on-click">Yes</button> <button class="buttony sound-on-click">No</button> ',
'Bye',
':)'
];
function fakeMessage() {
if (document.querySelector(".message-input").value !== '') {
return false;
}
const loadingMessage = document.createElement("div");
loadingMessage.className = "message loading new";
loadingMessage.innerHTML = `<figure class="avatar"><img src="http://algom.x10host.com/chat/img/icon-oracle.gif" /></figure><span></span>`;
const mCSBContainer = document.querySelector(".mCSB_container");
mCSBContainer.appendChild(loadingMessage);
updateScrollbar();
setTimeout(function() {
const loadingMessage = document.querySelector(".message.loading");
loadingMessage.remove();
const newMessage = document.createElement("div");
newMessage.className = "message new";
newMessage.innerHTML = `<figure class="avatar"><img src="http://algom.x10host.com/chat/img/icon-oracle.gif" /></figure>${fake[i]}`;
mCSBContainer.appendChild(newMessage).classList.add('new');
setDate();
updateScrollbar();
i++;
}, 1000 + (Math.random() * 20) * 100);
}
2 Likes
I am doing this because I have nothing to do.
var $messages = document.getElementsByClassName("messages-content"),
d, h, m,
i = 0;
window.onload = function() {
$messages.mCustomScrollbar();
setTimeout(function() {
fakeMessage();
}, 100);
};
function updateScrollbar() {
$messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {
scrollInertia: 10,
timeout: 0
});
}
function setDate(){
d = new Date()
if (m != d.getMinutes()) {
m = d.getMinutes();
document.querySelector(".message:last").innerHTML += `<div class="timestamp">${d.getHours()}:${m}</div>`;
}
}
function insertMessage() {
msg = document.getElementById("message-input").value;
if (msg.trim() == '') {
return false;
}
document.getElementsByClassName("nCSB_container").forEach(element => {
element.innerHTML += `<div class="message message-personal>${msg}</div>`;
element.className = "nCSB_container new";
});
setDate();
document.querySelector(".message-input").value = null;
updateScrollbar();
setTimeout(function() {
fakeMessage();
}, 1000 + (Math.random() * 20) * 100);
}
document.querySelector(".message-submit").addEventListener("click", function() {
insertMessage();
});
window.addEventListener("keydown", function(e) {
if (e.which == 13) {
insertMessage();
return false;
}
});
var Fake = [
'Hi AlgoOracle at your service ',
'please enter the stock you\'d like to predict<input type="text" class="form-control oracle-search" name="query" placeholder="Start typing something to search..."> ',
'Please Enter Your Target Price',
'good.....What is your comfortable level for investment loss (in %) <input type="range" value="50" min="0" max="100" step="10" />',
'we are Predicting... <div class="loading-img"><img src="http://algom.x10host.com/chat/img/chat.gif" alt=""/></div>',
'great.. do you want to predict another? <button class="buttonx sound-on-click">Yes</button> <button class="buttony sound-on-click">No</button> ',
'Bye',
':)'
]
function fakeMessage() {
if (document.querySelector(".message-input").value != '') {
return false;
}
document.getElementsByClassName("mCSB_container").forEach(element => {
element.innerHTML += `<div class="message loading new"><figure class="avatar"><img src="http://algom.x10host.com/chat/img/icon-oracle.gif" /></figure><span></span></div>`;
});
updateScrollbar();
setTimeout(function() {
document.getElementsByClassName("message.loading").forEach(element => {
element.remove();
});
document.getElementsByClassName("mCSB_container").forEach(element => {
element.innerHTML += `<div class="message new"><figure class="avatar"><img src="http://algom.x10host.com/chat/img/icon-oracle.gif" /></figure>${Fake[i]}</div>`;
element.className = "mCSB_container new";
});
setDate();
updateScrollbar();
i++;
}, 1000 + (Math.random() * 20) * 100);
}
Haven’t tested out yet, but I think it works.
1 Like
Thanks, but I used Ghostwriter for it All of you guys are awesome!
1 Like