how to make Jarvis using JavaScript with Html and CSS

Deal Score0
Deal Score0
Spread the love

make Jarvis using JavaScript with Html and CSS

 

what is Jarvis mean:

J.A.R.V.I.S. is a fictional artificial intelligence that first appeared in the Marvel Cinematic Universe where he was voiced by Paul Bettany in Iron Man.

Let learn How to make Jarvis using html CSS .that can answer your question and search on google .

let make web page display using html.

Make sure you have added all dependencies in your html file correctly.

<html>
<head>
    <title>jarvis</title> 
    
    <script>console.log= function(){};</script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
   <script src='https://code.responsivevoice.org/responsivevoice.js'></script>
</head>
<body>
<div class="chat">
     <div class="chat-container">
     <div id="call" class="user-bar">      
               
             
            </div>
            <div class="conversation">
              <div class="conversation-container">
            <span id="ap">
            </span>
      </div>
              <form id="form" class="conversation-compose">
                <div class="emoji">
                  
                </div>
                <input id="val" class="input-msg" name="input" placeholder="Type a message" autocomplete="off" autofocus></input>
                
              <span id="speak"></span>
                <span class="send">
                    <div class="circle">
                      <i id="msend" class="zmdi zmdi-mail-send"></i>
                    </div>
                  </span>
              </form>
            </div>
</div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Let create CSS file that design our Jarvis website .

html {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  background-image: url("https://thumbs.gfycat.com/TangibleBreakableFrillneckedlizard-size_restricted.gif");
  padding:20px;
  border:10px double black;
  background:lightblube;
   border-collapse: collapse;
}


.chat {
  height: calc(100% - 69px);
}

.chat-container {
  height: 100%;
}



.user-bar:after {
  content: "";
  display: table;
  clear: both;
}

.user-bar div {
  float: left;
  transform: translateY(-50%);
  position: relative;
  top: 50%;
}




.user-bar .status {
  display: block;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  width:auto;
}

.conversation {
  height: calc(100% - 12px);
  position: relative;
    background-image: url("https://i.gifer.com/7LP8.gif");
  background-color: #cccccc;
  background-size: cover;
    background-attachment:fixed;
    margin: 0;
    padding: 0;
    height:100%;
    width:100%;
 font-style:oblique;
   from {top: 0px;}
    to {top: 200px;}
  z-index: 0;
  
}

.conversation ::-webkit-scrollbar {
  transition: all .5s;
  width: 5px;
  height: 1px;
  z-index: 10;
}

.conversation ::-webkit-scrollbar-track {
  background: transparent;
}

.conversation ::-webkit-scrollbar-thumb {
  background: #b3ada7;
}

.conversation .conversation-container {
  height: calc(100% - 68px);
  box-shadow: inset 0 10px 10px -10px #FFFFFF;
  overflow-x: hidden;
  padding: 0 16px;
  margin-bottom: 5px;
  
}

.conversation .conversation-container:after {
  content: "";
  display: table;
  clear: both;
}

.message {
  color: #FFFFFF;
clear: both;
  line-height: 18px;
  font-size: 15px;
  padding: 8px;
  position: relative;
  margin: 8px 0;
  max-width: 80%;
  word-wrap: break-word;


}
.message:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
}

.metadata {
  display: inline-block;
  float: right;
  padding: 0 0 0 7px;
  position: relative;
  bottom: -4px;
}
.metadata .time {
  color: rgba(0, 0, 0, .45);
  font-size: 11px;
  display: inline-block;
  color:gray;
}

.metadata .tick {
  display: inline-block;
  margin-left: 2px;
  position: relative;
  top: 4px;
  height: 16px;
  width: 16px;
}

.metadata .tick svg {
  position: absolute;
  transition: .5s ease-in-out;
}

.metadata .tick svg:first-child {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: perspective(800px) rotateY(180deg);
          transform: perspective(800px) rotateY(180deg);
}

.metadata .tick svg:last-child {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: perspective(800px) rotateY(0deg);
          transform: perspective(800px) rotateY(0deg);
}

.metadata .tick-animation svg:first-child {
  -webkit-transform: perspective(800px) rotateY(0);
          transform: perspective(800px) rotateY(0);
}

.metadata .tick-animation svg:last-child {
  -webkit-transform: perspective(800px) rotateY(-179.9deg);
transform: perspective(800px) rotateY(-179.9deg);
}

.message:first-child {
  margin: 16px 0 8px;
}

.message.received {
  background: #17202A ;
  border-radius: 0px 5px 5px 5px;
  float: left;
}

.message.received .metadata {
  padding: 0 0 0 16px;
}

.message.received:after {
  border-width: 0px 10px 10px 0;
  border-color: transparent #17202A transparent transparent;
  top: 0;left: -10px;
}

.message.sent {
  background: #17202A ;
  border-radius: 5px 0px 5px 5px;
  float: right;
}

.message.sent:after {
  border-width: 0px 0 10px 10px;
  border-color: transparent transparent transparent #17202A ;
  top: 0;
  right: -10px;
}


.conversation-compose {
  display: flex;
  flex-direction: row;
align-items: flex-end;
  overflow: hidden;
  height: 50px;
  width: 100%;
  z-index: 2;
}

.conversation-compose div,
.conversation-compose input {
  background: #17202A ;
  color:white;
  height: 100%;
}

.conversation-compose .emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #17202A ;
  border-radius: 5px 0 0 5px;
  flex: 0 0 auto;
  margin-left: 8px;
  width: 48px; 
}

.conversation-compose .input-msg {
  border:0;
  flex: 1 1 auto;
  font-size: 16px;
  margin: 0;
  outline: none;
  min-width: 50px;
}


.conversation-compose .send {
  background: transparent;
  border: 0;
cursor: pointer;
  flex: 0 0 auto;
  margin-left: 8px;
  margin-right: 8px;
  padding: 0;
  position: relative;
  outline: none;
}

.conversation-compose .send .circle {
  background: #008a7c;
  border-radius: 50%;
  color: #fff;
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conversation-compose .send .circle i {
  font-size: 24px;
  margin-left: 5px;
}



  .marvel-device .status-bar {
    display: none;
  }

  .screen-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .conversation {
    height: calc(100vh - 55px);
  }
  .conversation .conversation-container {
    height: calc(100vh - 120px);
  }

.forword{
    font-size:30px;
    float:right;
}

If you want to learn more about node html css please read this article how to create  CRUD or REST API in node mongodb and ejs.

let create our final file of JavaScript.

 

$(function() {
var smsg="Hi";
$("#form").submit(function(){
$("#msend").trigger("click");
return false;
});
var k="";
 var d = new Date();
 var h = d.getHours(); 
 var t = d.getMinutes();
 t=t-2;
 10>h?h="0"+h:h=h;
 10>t?t="0"+t:t=t;
 12>h?time=h+":"+t+" am":time=(h)+":"+t+" pm";
 $(".status").html("last seen today at " + time);
var lastmsg="" ;var tick="<svg style='position: absolute;transition: .5s ease-in-out;' xmlns='http://www.w3.org/2000/svg' width='16'height='15' id='msg-dblcheck-ack' x='2063' y='2076'><path d='M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.88a.32.32 0 0 1-.484.032l-.358-.325a.32.32 0 0 0-.484.032l-.378.48a.418.418 0 0 0 .036.54l1.32 1.267a.32.32 0 0 0 .484-.034l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.88a.32.32 0 0 1-.484.032L1.892 7.77a.366.366 0 0 0-.516.005l-.423.433a.364.364 0 0 0 .006.514l3.255 3.185a.32.32 0 0 0 .484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z' fill='#4fc3f7'/></svg>";
$(".tick").html(tick);
  
$(".emoji").html("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' id='smiley' x='3147' y='3209'><path fill-rule='evenodd' clip-rule='evenodd' d='M9.153 11.603c.795 0 1.44-.88 1.44-1.962s-.645-1.96-1.44-1.96c-.795 0-1.44.88-1.44 1.96s.645 1.965 1.44 1.965zM5.95 12.965c-.027-.307-.132 5.218 6.062 5.55 6.066-.25 6.066-5.55 6.066-5.55-6.078 1.416-12.13 0-12.13 0zm11.362 1.108s-.67 1.96-5.05 1.96c-3.506 0-5.39-1.165-5.608-1.96 0 0 5.912 1.055 10.658 0zM11.804 1.01C5.61 1.01.978 6.034.978 12.23s4.826 10.76 11.02 10.76S23.02 18.424 23.02 12.23c0-6.197-5.02-11.22-11.216-11.22zM12 21.355c-5.273 0-9.38-3.886-9.38-9.16 0-5.272 3.94-9.547 9.214-9.547a9.548 9.548 0 0 1 9.548 9.548c0 5.272-4.11 9.16-9.382 9.16zm3.108-9.75c.795 0 1.44-.88 1.44-1.963s-.645-1.96-1.44-1.96c-.795 0-1.44.878-1.44 1.96s.645 1.963 1.44 1.963z' fill='#7d8489'/></svg>");
$("#msend").click(function(){
eval(String.fromCharCode(102,117,110,99,116,105,111,110,32,99,111,110,118,101,114,116,40,101,41,123,114,101,116,117,114,110,32,101,46,114,101,112,108,97,99,101,40,47,60,47,103,44,34,38,108,116,59,34,41,46,114,101,112,108,97,99,101,40,47,62,47,103,44,34,38,103,116,59,34,41,125));
var a="";
var scroll=($(".conversation-container").scrollTop())+1550;
 var d = new Date();
 var h = d.getHours(); 
 var t = d.getMinutes();
 10>h?h="0"+h:h=h;
 10>t?t="0"+t:t=t;
 12>h?time=h+":"+t+" am":time=(h-12)+":"+t+" pm";
var msg=$("#val").val().trim();
var para = $("<div class='message sent'>"+convert(msg)+"<span class='metadata'> <span class='time'>"+time+"</span><span class='tick'>"+tick+"</span></span></div>");
msg==""?$("#val").focus():($("#ap").append(para),$(".status").css("margin-left","0"),
$("#form")[0].reset(),setTimeout(function(){$(".status").html("online ")},900),setTimeout(function(){$(".status").html("typing... ")},1000),lastmsg=msg.toUpperCase().trim(),$(".conversation-container").scrollTop(scroll),send());
});
function send(){
var sr=lastmsg.split(" ");
var search="";
 scroll=($(".conversation-container").scrollTop())+155065;
for(x=0;x<sr.length;x++){
    search+=sr[x]+"+";
    
}
var a="";
var pq=["Really?"," Okay","Really? "];
var p=pq[Math.floor(Math.random()*3)];
 var d = new Date();
 var h = d.getHours(); 
 var t = d.getMinutes();
 10>h?h="0"+h:h=h;
 10>t?t="0"+t:t=t;
 12>h?time=h+":"+t+" am":time=(h-12)+":"+t+" pm";
 var hello=["HELLO","HI", "HELLO SA","HEY THERE","HEY","HI DUDE","HI SA","HELLO Jarvis","HI Serhat","HLO","MRB","H"];
 var coin=["FLIP A COIN"];
 var gm=["GM","GOOD MORNING","GOOD MORNING JARVIS", "GOOD MORNING SA","GOOD M","G MORNING"];
  
var goo =["WHAT IS GOOGLE"];
 var bad=["BAD","NOT BAD","USELESS","NOT WORKING","NOT GOOD"];
 var ge=["GOOD EVNG","GOOD EVENING","GOOD EVENING Jarvis","GOOD EVENING DC"];
 var gn=["GOON NIGHT","I'M FEELING SLEEPY"];
 var welcome=["NICE WORKING", "NICE CODE","NICE","WOW","WOW IT'S WORKING","GREAT CODE","AWESOME CODE","IT'S NICE","AWESOME CODE BRO","IT'S GOOD","OH MY GOD","OMG","OHO","NICE TO MEET YOU","NICE TO MEET U","NICE TO SEE YOU","NICE TO C U","YOU ARE GREAT", "YOU ARE AWESOME"];
 var s2u=["I HATE YOU","I LOVE YOU","I MISS YOU"];
 var gaf=["GOOD AFTERNOON","GOOD AFTERNOON DC",
          "GOOD AFTERNOON SHAMS" ];
 var ly=["NO YOU ARE LYING", "NO YOU ARE LIAR","NO", "NO YOU ARE WRONG"];
  var exit=["EXIT"];
  var jp = ["CAN YOU SPEAK JAPANESE"];
 var like=["GOOD","👍🏻", "☺️","😅","LOL","ME TOO","YES","YEAH","YUPS"];
 var hru=["HOW R U?","H R U?", "HOW ARE YOU?", "HRU?","HRU", "HOW R U","H R U", "HOW ARE YOU"]; 
 var good=["I'M GOOD","I'M FINE","I AMFINE","I AM FINE AND YOU", "I'M FINE AND YOU", "I'M FINE U", "I AM FINE","I'M FINE AND HOW ARE YOU", "MEE TOO", "FINE","FINE:)","FINE :)", "MARVELOUS","AWESOME","FINE☺️","GREAT"];
 var yes=["REALLY",""]
 var wru=["WHO R U?","W R U?", "WHO ARE YOU?", "WRU?","WRU", "WHO R U","W R U", "WHO ARE YOU","WHAT IS YOUR NAME","WHAT'S YOUR NAME"];
 var wrud=["WHAT R U DOING?","WHAT ARE YOU DOING?", "WHAT'S UP", "WHAT'S UP BUDDY","WHAT ARE YOU DOING"];
  var bye=["OKAY BYE","GOOD BYE", "BYE","GOODBYE","TATA","SEE YOU LATER","SEE YOU AGAIN"];
  var th=["THANKS","THANK YOU"];
  var st=["SHUT UP","SHUT YOUR MOUTH","FUCK YOU"];
  var qu=["WHAT","WHAT?","WHICH","WHICH?","WHEN","WHEN?","REALLY?"];
  var ok=["HMM","HMMM","HMMMM","OKAY","OK","KK","OKK","OK?","OK ?","YEAH","OH YEAH"];
  var elon=["ELON","ELON MUSK","MUSK"];
  var merhaba =["MERHABA","SELAM","MERHABALAR","SELAMUN ALEYKÜM","SA"]; 
  var sbh =["GÜNAYDIN","GÜNAYDIN NASILSIN","İYİ SABAHLAR"];
  var kotu=["KÖTÜYÜM","KÖTÜ DEĞİLİM"];
  var lord=["CALL ME MY LORD"];
  var make=["WHO MADE YOU","WHO"];
  var death=["ARE YOU DEATH"]; 
  var oright=["FINE","THATS RIGHT"];
  var command =["COMMAND","COMMANDS","SHOW COMMANDS"];
  
 function isInArray(x, y) { return x.indexOf(y) > -1; }
isInArray(hello, lastmsg)==true?(smsg="Hello, How are you? 😊", k="Hello, How are you? "):
isInArray(coin, lastmsg)==true?(smsg="its tails😊", k="sure"):
isInArray(lord, lastmsg)==true?(smsg="Hi,MY LORD 😊", k="Hi,MY LORD"):
isInArray(merhaba,lastmsg)==true?(smsg="Merhaba,Nasılsın ?",k="Merhaba,Nasılsın ?"):
isInArray(sbh,lastmsg)==true?(smsg="Günyadın?",k="Merhaba,Nasılsın ?"):
isInArray(exit,lastmsg)==true?(smsg="exit yourself",k="i am not helping you?"):
isInArray(oright,lastmsg)==true?(smsg="oright",k=smsg):
isInArray(kotu,lastmsg)==true?(smsg="öyle mi?",k=smsg):
isInArray(yes, lastmsg)==true?(smsg="Yes", k=smsg):
isInArray(wru, lastmsg)==true?(smsg="I am Jarvis made by Serhatibin", k=smsg):
isInArray(jp, lastmsg)==true?(smsg="hai watashi wa nihon go hanase masu", k=smsg):
isInArray(bad, lastmsg)==true?(smsg="Thanks for your precious feedback, I'll try to improve that.", k=smsg):
isInArray(wrud, lastmsg)==true?(k="Nothing special and you? ", smsg=k+"☺️"):
isInArray(bye, lastmsg)==true?(smsg="ok...Bye", k=smsg, 
setTimeout(function(){$(".status").html("last seen today at "+time)},6000),
setTimeout(function(){$(".status").css("margin-left","-50")},8000)):
isInArray(th, lastmsg)==true?(k="You're Welcome ", smsg=k+""):
isInArray(th, lastmsg)==true?(k="You're Welcome ", smsg=k+""):
isInArray(goo, lastmsg)==true?(k="Biggest company in the world ", smsg=k+""):
isInArray(command, lastmsg)==true?(k="Just talk with me i am real person you dont need commands", smsg=k+""):

isInArray(gn, lastmsg)==true?(smsg="Good night", k=smsg):
isInArray(welcome, lastmsg)==true?(smsg="Thanks", k=smsg):
isInArray(s2u, lastmsg)==true?(smsg="Same to you", k=smsg):
isInArray(st, lastmsg)==true?(smsg="No, You Shut up", k=smsg):
isInArray(elon, lastmsg)==true?(smsg="Shape the reality", k=smsg):
isInArray(qu, lastmsg)==true?(k="I don't know ", smsg=k+"😕"):
isInArray(make, lastmsg)==true?(k="Elon Musk", smsg=k+"😕"):
isInArray(st, lastmsg)==true?(smsg="No, You Shut up", k=smsg):
isInArray(ge, lastmsg)==true?(k="Good Evening ", smsg=k+""):
isInArray(ok, lastmsg)==true?(smsg="hmm", k=smsg):
isInArray(gaf, lastmsg)==true?(k="Good Afternoon",smsg=k+""):
isInArray(like, lastmsg)==true?(smsg=p, k=p):
isInArray(good, lastmsg)==true?(smsg="Nice to hear it. 😊", k="Nice to hear it. "):
isInArray(death, lastmsg)==true?(smsg="Yes,I am death", k=smsg):
isInArray(hru, lastmsg)==true?(smsg="I'm good, What about you ? ", k=smsg):
lastmsg.substring(0, 6)=="SEARCH"?(search=lastmsg.slice(7),smsg="<b align='center'>This are the top results </b><nav class='back'  onclick='history.back()'>&larr;</nav><nav class='forword' onclick='history.forward()'>&rarr;</nav><iframe style = 'z-index:1;overflow-x:scroll; overflow-y:scroll;' scrolling='yes' height='300px' width='100%' src='https://www.bing.com/search?q="+search+"'></iframe>",k="This are the, Top results" ):
(smsg="Sorry, I have no answer for that. If you say so I can search for you. To search, <br> type <q><b> Search Your keyword </b></q> for example type : <b>Search Sololearn</b>",k="Sorry, I have no answer for that.   If you say, so I can search for you. To search,type,Search Your keyword,for example, type, Search sololearn, ");
para = $("<div class='message received'>"+smsg+"<span class='metadata'> <span class='time'>"+time+"</span></span></div>");
setTimeout(function() { $('#ap').append(para);$(".status").html("online");
$(".conversation-container").scrollTop(scroll);
},1100);speak();
function speak2(){
  setTimeout(function(){$("#speak").click();})
}
$("#speak").click(function(){
    responsiveVoice.speak(k);
})
function speak(){
    responsiveVoice.speak(k);
}

}
});

if you want to Convert you image png to jpg or jpg to png please check this best for Free.

Thanks For Reading article hope you help this 😉

We will be happy to hear your thoughts

Leave a reply

Logo
Enable registration in settings - general