Membuat Aplikasi Live Chat Para Jomblo Dengan JavaScript Terbaru adalah aplikasi chatting yang di buat untuk para jomblo, sebab para jombl...
Membuat Aplikasi Live Chat Para Jomblo Dengan JavaScript Terbaru
Minggu, Juli 21, 2019
Daftar Isi [Tampil]
Membuat Aplikasi Live Chat Para Jomblo Dengan JavaScript Terbaru adalah aplikasi chatting yang di buat untuk para jomblo, sebab para jomblo juga manusia butuh kebahagiaan, meskipun hanya sesaat 😂.
Panduan Code awalnya terinspirasi dari aplikasi chat room multi client python yang telah dibuat sebelumnya.
Namun jangan salah sangka dulu dengan aplikasi live chat para jomblo dengan javascript yang dibuat Panduan Code, aplikasi live chat ini sangat berbeda dengan aplikasi chat room multi client yang telah kita buat sebelumnya.
Kalau aplikasi live chat para jomblo dengan javascript ini dari segi design-nya sudah pasti menang telak, jika dibandingkan dengan aplikasi chat room multi client python yang monoton.
Selain dari segi tampilan, aplikasi live chat para jomblo dengan javascript ini juga dapat menghibur sejenak para jomblo yang kesepian, belum kunjung dapat pacar selama berbulan-bulan bahkan bertahun-tahun 😂.
Aplikasi ini dirancang khusus dan di teliti sekitar 3 menit untuk para jomblo yang ingin kebahagiaan secara instan, seperti halnya orang yang kelaparan menyeduh pop mie selama 3 menit 😂.
Jika Anda para jomblo mungkin aplikasi live chat para jomblo ini akan menjadi kebahagiaan tersendiri bagi Anda.
Tapi jika Anda Mahasiwa lama yang menyandang gelar STMJ Pangkat 3 ( semester 3 masih jomblo, semester 7 masih jomblo, dan sampai tamat masih jomblo), di hari wisuda Anda akan menyadari indahnya merasakan cinta 😂. M O_ Y _ T.
Dari gelar STMJ Pangkat 3 tersebut, mungkin Anda akan akan tertawa terbahak-bahak menertawakan gelar jomblo yang Anda sandang, sungguh menyedihkan nasib mu.
Nah, untuk menghibur Anda mari kita buat aplikasi live chat para jomblo dengan javascript dibawah ini.
Membuat Aplikasi Live Chat Para Jomblo Dengan JavaScript
Sebelum mulai ngoding Panduan Code tegaskan dulu bahwa kata-kata di artikel ini hanya untuk bahan lawakan, atau komedi saja.
Panduan Code tidak bermaksud menyindir pihak manapun, dan bila ada yang merasa tersindir Panduan Code mohon maaf sebesar-sebasarnya.
Oke sekarang mari kita membuat aplikasi live chat para jomblo nya.
Langkah-langkah Membuat Live Chat Para Jomblo
1. Buka teks editor Andalan Anda, saya disisni menggunakan Visual Studio Code.
2.Tekan Tombol CTRL+N untuk membuat file baru, dan berinama dengan "Live chat Para Jomblo.html", lalu save.
3.Salin Script Aplikasi Live chat Para Jomblo di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Live Chat Para Jomblo</title>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<style>
html,body
{
padding:0;
margin:0;
max-width:100%;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
}
.nice-font
{
font-family:'Josefin Sans',sans-serif;
}
header
{
text-align:center;
}
main
{
padding:10px;
margin-bottom:50px;
}
footer #command
{
position:fixed;
bottom:0;
width:100%;
padding:7px 7px;
padding-right:7px;
margin-bottom:5px;
border-radius:20px;
border:0.5px solid #9e9e9e50;
-ms-box-sizing:border-box;
box-sizing:border-box ;
background-color:#fff;
}
#command input
{
display:block;
width:73%;
float:left;
}
#command input,#command button
{
padding:10px 15px;
border:0;
outline:0;
}
button
{
background-color:#1e88e5;
color:#fff;
border-radius:20px;
font-weight:300;
float:right;
}
.row
{
width:100%;
margin-bottom:10px;
display:block;
}
.row::after{
content: "";
display: table;
clear: both;
}
.chat
{
border:0.7px solid #9e9e9e50;
word-wrap:break-word;
background-color:#fff;
border-radius:20px;
color:#333;
padding:10px 20px;
display:inline-block
}
.question
{
float:right;
background-color:#1e88e5;
color:#fff;
border-color:rgba(0,0,200,0.1);
}
.answer
{
float:left;
}
</style>
<script>
const Random = list => list[Math.floor(Math.random()*list.length)];
const Links = {
"facebook" : "https://www.facebook.com",
"google" : "https://www.google.com",
"twitter" : "https://www.twitter.com",
"panduancode" : "https://www.panduancode.com"
};
const getLink = siteName => `klik disini untuk membuka panduancode <a href="${Links[siteName]}">${siteName}</a>`;
const pertanyaan = [
`Gunakan pertanyaan yang mengandung kata kunci, contoh kata kunci (pembuat mu) dan pertanyaan yang dapat di ajukan adalah (siapa pembuat mu Anisa?) dan lain-lain.<br/>
Daftar kata kunci yang dapat di pakai:<br/>
1.Siapa pembuat mu<br/>
2.umur kamu berapa<br/>
3.apakabar<br/>
4.hi<br/>
5.kamu sedang apa<br/>
6.siapa saya<br/>
7.stmj pangkat 3<br/>
8.nama mu<br/>
9.ulang tahun mu<br/>
10.tanggal<br/>
11.jam<br/>
12.kamu mau hadiah apa<br/>
13.makan kesukaan mu<br/>
14.minuman kesukaan mu<br/>
15.sudah makan<br/>
16.selamat malam<br/>
17.selamat pagi<br/>
18.selamat siang<br/>
19.selamat sore<br/>
20.dimana kamu<br/>
21.aku boleh kesana<br/>
22.i love you<br/>
23.aku suka kamu<br/>
24.kamu sedang dimana<br/>
25.lol<br/>
26.cepet mandi<br/>
27.aku jemput<br/>
28.berangkat<br/>
29.panduancode<br/>
30.facebook<br/>
31.google<br/>
32.twitter<br/>
33.sampai jumpa<br/>`
];
const ini_adalah_daftar_pertanyaan_yang_dapat_Anda_gunakan = pertanyaan => Random(pertanyaan);
const Message = () => alert("If you want to suggest new jokes or questions and answer, feel free to comment. ");
const illegals = [
"window",
...Object.keys(window),
...Object.keys(document),
...Object.keys(Element.prototype)
];
const isLegal = string => {
let Legal = true;
illegals.forEach(illegal=>{
if(string.indexOf(illegal) !== -1)
{
Legal = false;
}
});
return Legal;
}
const HtmlSpecialChars = function(string) {
let escapedString = string;
const len = HtmlSpecialChars.specialchars.length;
for (let x = 0; x < len; x++) {
escapedString = escapedString.replace( new RegExp(HtmlSpecialChars.specialchars[x][0], 'g'), HtmlSpecialChars.specialchars[x][1] );
}
return escapedString;
};
HtmlSpecialChars.specialchars = [
[ '&', '&' ],
[ '<', '<' ],
[ '>', '>' ],
[ '"', '"' ]
];
const monthNames = [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
];
const today = monthNames =>
{
let date = new Date();
return `${monthNames[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
}
const now = () =>
{
let date = new Date();
return date.toLocaleTimeString();
}
const Evaluate = expression =>
{
try
{
if(isLegal(expression))
{
const result = eval(HtmlSpecialChars(expression));
return result;
}
else
{
return "error";
}
}
catch(err)
{
return "error";
}
}
const Answers = {
"pertanyaan" : ini_adalah_daftar_pertanyaan_yang_dapat_Anda_gunakan(pertanyaan),
"pembuat mu" : "Saya dibuat oleh panduancode 😃",
"umur kamu berapa" : "sekarang umur saya 18 tahun.",
"apakabar" : "aku baik-baik saja %U% 😃. kalau kamu bagaimana ? ",
"hi" : "Hi %U% 😁",
"kamu sedang apa" : "sedang chattan sama kamu 😂",
"siapa saya" : "kamu adalah %U% ✨ sebagai penyandang gelar STMJ Pangkat 3 😂",
"stmj pangkat 3" : "STMJ Pangkat 3 ( Semester 6 Masih Jomblo, Semester 7 Masih Jomblo, Sampai Tamat Masih Jomblo, Dan Pada Akhirnya Loe Sadar Betapa Indahnya Merasakan Cinta 😂😂😂",
"nama mu" : "Nama saya Anisa ✨",
"ulang tahun mu" : "ulang tahun ku tanggal 8 April 2002, emangnya kenapa nanya kapan ulang tahun ku? mau ngasih hadiah?",
"tanggal" : "sekarang "+ today(monthNames) + " %U% 😀",
"jam" : "sekarang jam " + now() + " %U% 😀",
"kamu mau hadiah apa" : "Ehh gak usah aku bercanda kok tapi ya kalau mau ngasih hadiah aku mau kamu pergi dari hidup ku bisa? %U% 😂",
"makanan kesukaan mu" : "Danging panggang mantan 😎",
"minuman kesukaan mu" : "air mata mantan buah naga 😂",
"sudah makan" : "belum.",
"selamat malam" : "selamat malam juga %U%",
"selamat pagi" : "selamat pagi juga %U%",
"selamat siang" : "selamat siang juga %U%",
"selamat sore" : "selamat sore juga %U%",
"dimana kamu" : "saya sedang di Taman dekat Air mancur 7 rupa %U%. 😃",
"aku boleh kesana" : "gak boleh, aku mau sendiri.",
"i love you" : "I Love you too %U% 😊",
"aku suka kamu" : "hmm aku juga suka kamu kok 😊",
"kamu sedang dimana" : "saya sedang di rumah",
"lol" : "Haha.. That was funny 😂",
"cepet mandi" : "mau apa?",
"aku jemput" : "iya deh aku tunggu sekarang",
"berangkat" : "jangan telat ya",
"sampai jumpa" : "sampai jumpa kembali %u%",
"panduancode" : getLink("panduancode"),
"facebook" : getLink("facebook"),
"google" : getLink("google"),
"twitter" : getLink("twitter")
};
const Notfound = "saya tidak mengenali pertanyaan Anda, coba gunakan pertanyaan yang telah di sediakan!";
const Invalid = "Invalid Expression";
const D = window.document;
const element = selector => D.querySelector(selector);
const Answer = (Main,User,Text) =>
{
let Flag = false;
const Result = Evaluate(Text);
text = Text.toLowerCase();
Object.keys(Answers).forEach(key =>{
if(!Flag)
{
if(text.indexOf(key) !== -1 )
{
addAnswer(
Main,
Answers[key].replace(
"%U%",
User
)
);
Flag = true;
}
else if(typeof Result == "number")
{
addAnswer(
Main,
`${Text} equals ${Result}`
);
Flag = true;
}
}
});
if(!Flag)
{
addAnswer(Main,Notfound);
}
};
const addQuestion = (Main,text) =>
{
Main.innerHTML += `
<div class="row">
<div class="chat question">${text}</div>
</div>
`;
}
const addAnswer = (Main,text) =>
{
Main.innerHTML += `
<div class="row">
<div class="chat answer">${text}</div>
</div>
`;
}
D.addEventListener("DOMContentLoaded",()=>{
const Main = element("main");
const Askbtn = element("button");
const Question = element("input");
const Lastdiv = element("#last");
let User = prompt("Enter your name :");
while(User === null || User === '')
{
User = prompt("Your name is required for the assistant to work properly : ");
}
Question.focus();
const Ask = () =>{
const Text = Question.value;
if(Text.length)
{
addQuestion(Main, Text);
Question.value = "";
Answer(Main,User,Text);
Lastdiv.scrollIntoView();
}
};
Askbtn.addEventListener("click",Ask);
Question.addEventListener("keyup",function(event){
if(event.keyCode === 13) Ask();
});
addAnswer(Main,`Hello ${User}..`);
Message();
});
</script>
</head>
<body>
<header>
<h1 class="nice-font" >LiveChat</h1>
</header>
<main class="nice-font">
</main>
<div id="last"></div>
<footer>
<div id="command">
<input placeholder="Ask me something ..." type="text" />
<button class="nice-font">Send</button>
</div>
</footer>
</body>
</html>
4. Jika sudah silahkan save.
5. Silahkan coba aplikasi Anda dengan cara klik open in browser.
Cara Penggunaan Aplikasi Live Chat Para Jomblo
Jika Anda bingung untuk memulai percakapan, Anda dapat mengetikkan perintah " pertanyaan" untuk melihat pertanyaan apa saja yang dapat Anda ajukan.
Anda juga dapat menambah jumlah kata kunci untuk pertanyaan nya, lihatlah contoh berikut ini.
const Answers = {
"pertanyaan" : ini_adalah_daftar_pertanyaan_yang_dapat_Anda_gunakan(pertanyaan),
"pembuat mu" : "Saya dibuat oleh panduancode 😃",
"umur kamu berapa" : "sekarang umur saya 18 tahun.",
"apakabar" : "aku baik-baik saja %U% 😃. kalau kamu bagaimana ? ",
"hi" : "Hi %U% 😁",
"kamu sedang apa" : "sedang chattan sama kamu 😂",
"siapa saya" : "kamu adalah %U% ✨ sebagai penyandang gelar STMJ Pangkat 3 😂",
"stmj pangkat 3" : "STMJ Pangkat 3 ( Semester 6 Masih Jomblo, Semester 7 Masih Jomblo, Sampai Tamat Masih Jomblo, Dan Pada Akhirnya Loe Sadar Betapa Indahnya Merasakan Cinta 😂😂😂",
"nama mu" : "Nama saya Anisa ✨",
"ulang tahun mu" : "ulang tahun ku tanggal 8 April 2002, emangnya kenapa nanya kapan ulang tahun ku? mau ngasih hadiah?",
"tanggal" : "sekarang "+ today(monthNames) + " %U% 😀",
"jam" : "sekarang jam " + now() + " %U% 😀",
"kamu mau hadiah apa" : "Ehh gak usah aku bercanda kok tapi ya kalau mau ngasih hadiah aku mau kamu pergi dari hidup ku bisa? %U% 😂",
"makanan kesukaan mu" : "Danging panggang mantan 😎",
"minuman kesukaan mu" : "air mata mantan buah naga 😂",
"sudah makan" : "belum.",
"selamat malam" : "selamat malam juga %U%",
"selamat pagi" : "selamat pagi juga %U%",
"selamat siang" : "selamat siang juga %U%",
"selamat sore" : "selamat sore juga %U%",
"dimana kamu" : "saya sedang di Taman dekat Air mancur 7 rupa %U%. 😃",
"aku boleh kesana" : "gak boleh, aku mau sendiri.",
"i love you" : "I Love you too %U% 😊",
"aku suka kamu" : "hmm aku juga suka kamu kok 😊",
"kamu sedang dimana" : "saya sedang di rumah",
"lol" : "Haha.. That was funny 😂",
"cepet mandi" : "mau apa?",
"aku jemput" : "iya deh aku tunggu sekarang",
"berangkat" : "jangan telat ya",
"sampai jumpa" : "sampai jumpa kembali %u%",
"panduancode" : getLink("panduancode"),
"facebook" : getLink("facebook"),
"google" : getLink("google"),
"twitter" : getLink("twitter")
};
Untuk menambah kata kunci awali dengan tanda petik dua dan isi kan kata kunci Anda, lalu titik dua dan tanda petik dua lagi isi dengan jawaban pertanyaan Anda, dan akhiri dengan tanda koma.
Dan yang dimaksud dengan code %U% adalah script untuk medeklarasikan nama Anda.
Anda juga dapat membuka facebook, google, twitter, dan situs panduancode dengan cara mengajukan pertanyaan yang mengandung kata kunci tersebut.
Demo-nya juga dapat Anda cek dengan mudah di bawah ini
Codepen https://codepen.io/panduan-code/pen/jjXOQE.
Atau Anda juga dapat berkontribusi dengan project live chat sederhana ini di GitHub Panduan-Code Live Chat Para Jomblo.
Sekian aplikasi live chat sederhana yang dapat panduancode bagikan pada kesempatan kali ini, semoga aplikasi live chat sederhana ini dapat bermanfaat bagi Anda.
Bila Anda mempunyai pertanyaan tentang aplikasi ini silahkan sampaikan di kolom komentar.
Akhirkata dari panduan code jangan lupa titik koma.
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.