├── app.js
├── gif.gif
├── index.html
└── style.css


/app.js:
--------------------------------------------------------------------------------
  1 | const btn = document.querySelector('.talk');
  2 | const content = document.querySelector('.content');
  3 | 
  4 | function speak(sentence) {
  5 |     const text_speak = new SpeechSynthesisUtterance(sentence);
  6 | 
  7 |     text_speak.rate = 1;
  8 |     text_speak.pitch = 1;
  9 | 
 10 |     window.speechSynthesis.speak(text_speak);
 11 | }
 12 | 
 13 | function wishMe() {
 14 |     var day = new Date();
 15 |     var hr = day.getHours();
 16 | 
 17 |     if(hr >= 0 && hr < 12) {
 18 |         speak("Good Morning Boss");
 19 |     }
 20 | 
 21 |     else if(hr == 12) {
 22 |         speak("Good noon Boss");
 23 |     }
 24 | 
 25 |     else if(hr > 12 && hr <= 17) {
 26 |         speak("Good Afternoon Boss");
 27 |     }
 28 | 
 29 |     else {
 30 |         speak("Good Evening Boss");
 31 |     }
 32 | }
 33 | 
 34 | window.addEventListener('load', ()=>{
 35 |     speak("Activating Inertia");
 36 |     speak("Going online");
 37 |     wishMe();
 38 | })
 39 | 
 40 | const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 41 | const recognition = new SpeechRecognition();
 42 | 
 43 | recognition.onresult = (event) => {
 44 |     const current = event.resultIndex;
 45 |     const transcript = event.results[current][0].transcript;
 46 |     content.textContent = transcript;
 47 |     speakThis(transcript.toLowerCase());
 48 | }
 49 | 
 50 | btn.addEventListener('click', ()=>{
 51 |     recognition.start();
 52 | })
 53 | 
 54 | function speakThis(message) {
 55 |     const speech = new SpeechSynthesisUtterance();
 56 | 
 57 |     speech.text = "I did not understand what you said please try again";
 58 | 
 59 |     if(message.includes('hey') || message.includes('hello')) {
 60 |         const finalText = "Hello Boss";
 61 |         speech.text = finalText;
 62 |     }
 63 | 
 64 |     else if(message.includes('how are you')) {
 65 |         const finalText = "I am fine boss tell me how can i help you";
 66 |         speech.text = finalText;
 67 |     }
 68 | 
 69 |     else if(message.includes('name')) {
 70 |         const finalText = "My name is Inertia";
 71 |         speech.text = finalText;
 72 |     }
 73 | 
 74 |     else if(message.includes('open google')) {
 75 |         window.open("https://google.com", "_blank");
 76 |         const finalText = "Opening Google";
 77 |         speech.text = finalText;
 78 |     }
 79 | 
 80 |     else if(message.includes('open instagram')) {
 81 |         window.open("https://instagram.com", "_blank");
 82 |         const finalText = "Opening instagram";
 83 |         speech.text = finalText;
 84 |     }
 85 | 
 86 |     else if(message.includes('what is') || message.includes('who is') || message.includes('what are')) {
 87 |         window.open(`https://www.google.com/search?q=${message.replace(" ", "+")}`, "_blank");
 88 |         const finalText = "This is what i found on internet regarding " + message;
 89 |         speech.text = finalText;
 90 |     }
 91 | 
 92 |     else if(message.includes('wikipedia')) {
 93 |         window.open(`https://en.wikipedia.org/wiki/${message.replace("wikipedia", "")}`, "_blank");
 94 |         const finalText = "This is what i found on wikipedia regarding " + message;
 95 |         speech.text = finalText;
 96 |     }
 97 | 
 98 |     else if(message.includes('time')) {
 99 |         const time = new Date().toLocaleString(undefined, {hour: "numeric", minute: "numeric"})
100 |         const finalText = time;
101 |         speech.text = finalText;
102 |     }
103 | 
104 |     else if(message.includes('date')) {
105 |         const date = new Date().toLocaleString(undefined, {month: "short", day: "numeric"})
106 |         const finalText = date;
107 |         speech.text = finalText;
108 |     }
109 | 
110 |     else if(message.includes('calculator')) {
111 |         window.open('Calculator:///')
112 |         const finalText = "Opening Calculator";
113 |         speech.text = finalText;
114 |     }
115 | 
116 |     else {
117 |         window.open(`https://www.google.com/search?q=${message.replace(" ", "+")}`, "_blank");
118 |         const finalText = "I found some information for " + message + " on google";
119 |         speech.text = finalText;
120 |     }
121 | 
122 |     speech.volume = 1;
123 |     speech.pitch = 1;
124 |     speech.rate = 1;
125 | 
126 |     window.speechSynthesis.speak(speech);
127 | }


--------------------------------------------------------------------------------
/gif.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reddevill007/yt-vitual-assistant-javascript/25db45050098aa89ba7730a209760dffd2f5bb58/gif.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>INERTIA - Virtual Assistant</title>
 9 | 
10 |     <!---- CSS Linkage ------>
11 |     <link rel="stylesheet" href="style.css">
12 | 
13 |     <!---- Font Awesome Cdn Linkage ------>
14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
15 | 
16 | </head>
17 | 
18 | <body>
19 |     <section class="main">
20 |         <div class="image-container">
21 |             <div class="image">
22 |                 <img src="gif.gif" alt="image">
23 |             </div>
24 |             <h1>I N E R T I A</h1>
25 |             <p>I'm a Virtual Assistant how can i help you</p>
26 |         </div>
27 |         <div class="input">
28 |             <button class="talk"><i class="fas fa-microphone-alt"></i></button>
29 |             <h1 class="content"> Click here to speak</h1>
30 |         </div>
31 |     </section>
32 | 
33 |     <!------- Js Linkage --------->
34 |     <script src="app.js"></script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap");
 2 | 
 3 | * {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   box-sizing: border-box;
 7 |   font-family: "Roboto Mono", monospace;
 8 | }
 9 | 
10 | .main {
11 |   min-height: 100vh;
12 |   position: relative;
13 |   width: 100%;
14 |   background: #000;
15 |   display: flex;
16 |   flex-direction: column;
17 |   align-items: center;
18 |   justify-content: center;
19 | }
20 | 
21 | .main .image-container {
22 |   padding: 10px;
23 | }
24 | 
25 | .main .image-container .image {
26 |   width: 100%;
27 |   display: flex;
28 |   align-items: center;
29 |   justify-content: center;
30 | }
31 | 
32 | .main .image-container .image img {
33 |   width: 170px;
34 |   align-items: center;
35 | }
36 | 
37 | .main .image-container h1 {
38 |   color: #00bcd4;
39 |   text-align: center;
40 |   margin-bottom: 10px;
41 |   font-size: 40px;
42 | }
43 | 
44 | .main .image-container p {
45 |   color: #324042;
46 |   text-align: center;
47 |   margin-bottom: 40px;
48 | }
49 | 
50 | .main .input {
51 |   display: flex;
52 |   justify-content: center;
53 |   align-items: center;
54 |   width: 40vw;
55 |   height: 50px;
56 |   border-radius: 20px;
57 |   background: rgb(202 253 255 / 50%);
58 | }
59 | 
60 | .main .input .talk {
61 |   background: transparent;
62 |   outline: none;
63 |   border: none;
64 |   width: 50px;
65 |   height: 50px;
66 |   display: flex;
67 |   justify-content: center;
68 |   align-items: center;
69 |   font-size: 15px;
70 |   cursor: pointer;
71 | }
72 | 
73 | .main .input .talk i {
74 |   font-size: 20px;
75 |   color: #aed0d0;
76 | }
77 | 
78 | .main .input .content {
79 |   color: #aed0d0;
80 |   font-size: 15px;
81 |   margin-right: 20px;
82 | }
83 | 


--------------------------------------------------------------------------------