Create BOT terminal with Jquery#1 : Preparation, Input and Output , teach commands
Repository
https://github.com/jquery/jquery
What Will I Learn?
- Preparation and make a bot frame HTML and CSS
- Input and Output bot
- Create command for bot
Requirements
- Html, CSS, javascript
- Install Jquery and basic Jquery
Resources
- jQuery - https://github.com/jquery/jquery
Difficulty
Basic
Tutorial Content
This time we will learn to explore jquery to become a terminal bot on our project. We will also teach the bot to do the commands that we have programmed and this tutorial we will also create functions that contain commands that will be carried out by the bot terminal. so we will create a terminal bot using only jquery. for that, we just start preparing it first.
Preparation
The first thing we will do is create static files first like HTML, CSS and others. I will create a project folder called botJquery and I will add index.html. in this file later we will insert HTML, javascript and CSS files. certainly better if we separate each into separate files. but in this tutorial, we will combine it to make it easier.
<!DOCTYPE html>
<html>
<head>
<title>Bot Jquery</title>
</head>
<body>
<div id="terminal">
<h3>//Welcome in my tutorial//<br>=====================</h3>
<span>$bot : </span> <input class="input" type="" name="input" placeholder="_">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
</body>
</html>
We make the static file first. the most important thing in this section is we import jquery via CDN
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
then we will add a little CSS to make it better.
<style type="text/css">
#terminal{
background: black;
color: white;
margin: 5% auto;
width: 80%;
padding: 7px;
overflow: hidden;
}
#terminal .input{
width: 90%;
background: black;
border: none;
color: white;
}
#terminal .input:focus{
outline: none;
}
</style>
#terminal{}111: We have given #id to the<div>element we can do styling based on the #id.What must be noticed is that we givebackground: black;andcolor: white;so that later the user can clearly see the command.#terminal .input{}: We style the input to delete the default style from the input. We change the background to black toobackground: black;and give a white color to the input text colorcolor: white;.#terminal .input:focus{}and finally, we eliminate the default style when the input is in focus. we put the CSS before the<head>closing tag, the result will be as follows.
Input Output Bot
We will begin to make the logic, we want when the user presses enter there is a Bot will execute the command and then later the bot will give a response as we teach it. for that, response will not appear before there is a command. Later to append the response we will make it in the div element, but that element we will make dynamic depends on the command from the user.
- Create event Keyup
The first thing we will do is listen in the <div element id = "element"> </div> is there any event called. we will create a keyup event in <input class="input">. for more details, we can see in the example below.
<script type="text/javascript">
$('#terminal').on('keyup', '.input',function(e){
if(e.keyCode == 13){
console.log($(this).val());
}
});
</script>
We will listen in parent element
$('#terminal')to user activity when typing on input with keyup event, we mark the input withclass = "input".We will do something when the user presses enter, therefore we can use keyCode.
keyCode = 13is what represents enter you can browse what keyCode list is available, This is a provision.We can check whether the user has pressed enter with this code
if(e.keyCode == 13), we can check whether the keyup function is running properly, I am doing console.log($(this).val()).$(this). $(this) refers to the intended input and we can take the value withval(), this is a method from jQuery you can visit the web for more.
- Command validation
Before the command that we run is executed by the bot, we must validate it first, we don't want the user to type empty values and spaces in our command line. for that we can add if($(this).val().trim()== ''){} logic as follows.
<script type="text/javascript">
$('#terminal').on('keyup', '.input',function(e){
if(e.keyCode == 13){
if($(this).val().trim()== ''){
// # You're code here
}
}
});
</script>
Command to open the link
We have done a number of things like making events and making command validations. Now we will teach our Bot to open a link according to the command we enter. Before that, we will create a function to make a response from the bot.
- Display the bot response
We will create a function to display the response of the bot, we will make the response from the bot dynamic depending on the command. for more details, we can see the example below.
<script type="text/javascript">
$('#terminal').on('keyup', '.input',function(e){
if(e.keyCode == 13){
if($(this).val().trim() == ''){
doResponse("Command not recognized")
}else{
//Do something when pass validation
}
commandBot()
}
});
function doResponse(msg){
$('#terminal').append("<div class='res_bot'>"+ msg +"</div>")
}
function commandBot(){
$('#terminal').append("<span>$bot : </span> <input class='input' name='input' placeholder='_'>")
}
</script>
- I will make the
function doResponse (msg)and the msg parameter is the message that we want to display. We have validated that the user cannot enter spaces in our command line, then I will pass the messagedoResponse("Command not recognized") - We can use the
append()method in jquery to display a new element$('#terminal').append("<div class='res_bot'>"+ msg +"</div>"). - Then when the results have been run we want to append the command line again as before, then I make one more function,
commandBot()to display the command line again$('#terminal').append("<span>$bot : </span> <input class='input' name='input' placeholder='_'>"). the result will be like the picture below:
- Open link command
We will start teaching our bot to open the link according to our command, for that I will make a function again to handle it. Its function will be as follows. I will make a provision that The first word will be a command and The second word is the link that we will open through the command line. for more details, we can see an example like the following
<!DOCTYPE html>
<html>
<head>
<title>Bot Jquery</title>
<style type="text/css">
#terminal{
background: black;
color: white;
margin: 5% auto;
width: 80%;
padding: 7px;
overflow: hidden;
}
#terminal .input{
width: 90%;
background: black;
border: none;
color: white;
}
#terminal .input:focus{
outline: none;
}
</style>
</head>
<body>
<div id="terminal">
<h3>//Welcome in my tutorial//<br>===================</h3>
<span>$bot : </span> <input class="input" type="" name="input" placeholder="_">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script type="text/javascript">
$('#terminal').on('keyup', '.input',function(e){
if(e.keyCode == 13){
//Separate words with split()
var value = $(this).val().trim().split(' ');
console.log(value);
if( value == ''){
doResponse("Command not recognized")
}else{
if(value[0] == "open"){
openLink(value[1])
}
}
commandBot()
}
});
function doResponse(msg){
$('#terminal').append("<div class='res_bot'>"+ msg +"</div>")
}
function commandBot(){
$('#terminal').append("<span>$bot : </span> <input class='input' name='input' placeholder='_'>")
}
function openLink(link){
window.open(link, '_blank');
}
</script>
</body>
</html>
- What we will do first is that we will separate the word by word to get the keywords we want. We will separate the split() method that we chain with trim()
$(this).val().trim().split(' ');. If we want to see the results we can doconsole.log(), the result will be array[].
- We have succeeded in separating words. now we can make it a reference to make
if else(). We will create an "open" command as a recognizable command to open the link. because the split () method results in an array, we will start from[0]. So we can make it like the following.
if(value[0] == "open"){
openLink(value[1])
}
value[0] contains the first word that we have specified as a command.
value[1] contains the link that we will open.
openLink(value[1]) then we create a function that we use to open the link and we pass the second word that is in value [1]. the following is the openLink() function.
function openLink(link){
window.open(link, '_blank');
}
If we don't make an error then we can test our terminal bot.
It's nice that our bot knows the command that we are running but the problem is the link that we open is not absolute so our bot looks for a file like this file:///D:/duskitutor/botjquery/google.com. to overcome this we can add code in openLink().
- Add HTTPS to open the link
This happens because we don't use HTTPS or HTTP on the link address we use. if we want to open a link without writing HTTP, we can provide additional code in the openLink () function as follows.
function openLink(link){
var newLink = link.includes("https://");
if(newLink){
window.open(link, '_blank');
}else{
newLink = "https://"+link;
window.open(newLink, '_blank');
}
}
- We can use the
includes()method to check whether the"https://"string is in the link. If there are we immediately open the link. - If our link does not contain
"https://"+link;then we will add to the link that we want, if there is no error then it should be as follows.
If there is no error, we will see our terminal BOT has opened the link that we want. This is the simple way we teach and program into the terminal bot, we will teach our terminal BOT new things. in the next tutorial, I will teach the bot to retrieve data from the database and perform some backend functions. I hope this tutorial helps you thank you..
I thank you for your contribution. Here are my thoughts;
There are lots of punctuation and structure mistakes in your paragraph as well as grammar mistakes. I suggest you to double check your post on spelling, grammar, structure, and punctuation. Having these mistakes makes your post hard to read and understand. A tutorial must be formal and easily understood.
What you really have shown is doing it by yourself, not teaching. You can avoid this by approaching more theoretical/technical to the subject. If you need examples, there are sites which offer professional tutorials. I won't include them because I don't want to advertise them, but checking them might change your approach to the tutorials and increase the value of your post.
You might consider changing topics to preserve some uniqueness. Your post is OK, but similar can be easily found on the internet. Being unique with tutorials on Utopian is not required, but preferable as we value rare posts more than other.
The volume of your tutorial is too sparse. To increase it, please reduce the amount of the filler content (like too long code blocks) and add several (up to 4-5) substantial concepts.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thank you for your review, @yokunjon!
So far this week you've reviewed 1 contributions. Keep up the good work!
Hey, @duski.harahap!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
An awesome way to creaye a BOT terminal using jquery, i had no idea how we simply apply "httml" And CSS to spice everything up. Way to go buddy!