├── Jarvis.mp3
├── README.md
├── app.js
├── battery1.png
├── clock1.png
├── heart.gif
├── index.html
├── internet1.jpg
├── internet1.png
├── iron-pic.png
├── iron_man.gif
├── power up.mp3
└── style.css


/Jarvis.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishnallana/Jarvis-With-JavaScript/782de7649c2998d5affd96879ff6184dab9396ac/Jarvis.mp3


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Jarvis-Friday-With-JavaScript
2 | 
3 | This project doesn't work properly with the current versions of browsers due to privacy issues.
4 | 
5 | This is A virtual voice Assistant for browsers made using HTML CSS & JAVASCRIPT.
6 | [Project Playlist](https://www.youtube.com/playlist?list=PLWqtZHJOTN49HtkbGvjM8DcsrytltF1kP)
7 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | // vars and elements
  2 | const turn_on = document.querySelector("#turn_on");
  3 | const jarvis_intro = document.querySelector("#j_intro");
  4 | const time = document.querySelector("#time");
  5 | const machine = document.querySelector(".machine");
  6 | // const msgs = document.querySelector(".messages");
  7 | // whether the recognition is stopiing on my command or automatically
  8 | let stopingR = false;
  9 | // friday's commands
 10 | let fridayComs = [];
 11 | fridayComs.push("hi friday");
 12 | fridayComs.push("what are your commands");
 13 | fridayComs.push("close this - to close opened popups");
 14 | fridayComs.push(
 15 |   "change my information - information regarding your acoounts and you"
 16 | );
 17 | fridayComs.push("whats the weather or temperature");
 18 | fridayComs.push("show the full weather report");
 19 | fridayComs.push("are you there - to check fridays presence");
 20 | fridayComs.push("shut down - stop voice recognition");
 21 | fridayComs.push("open google");
 22 | fridayComs.push('search for "your keywords" - to search on google ');
 23 | fridayComs.push("open whatsapp");
 24 | fridayComs.push("open youtube");
 25 | fridayComs.push('play "your keywords" - to search on youtube ');
 26 | fridayComs.push("close this youtube tab - to close opened youtube tab");
 27 | fridayComs.push("open firebase");
 28 | fridayComs.push("open netlify");
 29 | fridayComs.push("open twitter");
 30 | fridayComs.push("open my twitter profile");
 31 | fridayComs.push("open instagram");
 32 | fridayComs.push("open my instagram profile");
 33 | fridayComs.push("open github");
 34 | fridayComs.push("open my github profile");
 35 | 
 36 | // youtube window
 37 | let ytbWindow;
 38 | 
 39 | // create a new message
 40 | // function createMsg(who, msg) {
 41 | //   let newmsg = document.createElement("p");
 42 | //   newmsg.innerText = msg;
 43 | //   newmsg.setAttribute("class", who);
 44 | //   msgs.appendChild(newmsg);
 45 | // }
 46 | 
 47 | // show a warn to check for all the commands
 48 | console.warn('*to check for the commands speak "what are your commands"');
 49 | 
 50 | // date and time
 51 | let date = new Date();
 52 | let hrs = date.getHours();
 53 | let mins = date.getMinutes();
 54 | let secs = date.getSeconds();
 55 | 
 56 | // this is what friday tells about weather
 57 | let weatherStatement = "";
 58 | let charge,chargeStatus, connectivity, currentTime
 59 | chargeStatus = "unplugged"
 60 | 
 61 | window.onload = () => {
 62 |   // turn_on.play();
 63 |   turn_on.addEventListener("ended", () => {
 64 |     setTimeout(() => {
 65 |       // autoJarvis();
 66 |       readOut("Ready to go sir");
 67 |       if (localStorage.getItem("jarvis_setup") === null) {
 68 |         readOut(
 69 |           "Sir, kindly fill out the form on your screen so that you could access most of my features and if you want to see my commands see a warning in the console"
 70 |         );
 71 |       }
 72 |     }, 200);
 73 |   });
 74 | 
 75 |   fridayComs.forEach((e) => {
 76 |     document.querySelector(".commands").innerHTML += `<p>#${e}</p><br />`;
 77 |   });
 78 |   // battery
 79 |   let batteryPromise = navigator.getBattery();
 80 |   batteryPromise.then(batteryCallback);
 81 | 
 82 |   // internet connectivity
 83 | 
 84 |     if(navigator.onLine){
 85 |       document.querySelector("#internet").textContent = "online"
 86 |       connectivity = "online"
 87 |     } else {
 88 |       document.querySelector("#internet").textContent = "offline"
 89 |       connectivity = "offline"
 90 |     }
 91 | 
 92 |   setInterval(() => {
 93 |     if(navigator.onLine){
 94 |       document.querySelector("#internet").textContent = "online"
 95 |       connectivity = "online"
 96 |     } else {
 97 |       document.querySelector("#internet").textContent = "offline"
 98 |       connectivity = "offline"
 99 |     }
100 |   }, 60000);
101 | 
102 |   function batteryCallback(batteryObject) {
103 |     printBatteryStatus(batteryObject);
104 |     setInterval(() => {
105 |       printBatteryStatus(batteryObject);
106 |     }, 5000);
107 |   }
108 |   function printBatteryStatus(batteryObject) {
109 |     document.querySelector("#battery").textContent = `${
110 |       (batteryObject.level * 100).toFixed(2)
111 |     }%`;
112 |     charge = batteryObject.level * 100
113 |     if (batteryObject.charging === true) {
114 |       document.querySelector(".battery").style.width = "200px";
115 |       document.querySelector("#battery").textContent = `${
116 |         (batteryObject.level * 100).toFixed(2)
117 |       }% Charging`;
118 |       chargeStatus = "plugged in"
119 |     }
120 |   }
121 | 
122 |   // timer
123 |   // setInterval(() => {
124 |   //   let date = new Date();
125 |   //   let hrs = date.getHours();
126 |   //   let mins = date.getMinutes();
127 |   //   let secs = date.getSeconds();
128 |   //   time.textContent = `${hrs} : ${mins} : ${secs}`;
129 |   // }, 1000);
130 | };
131 | 
132 | function formatAMPM(date) {
133 |   var hours = date.getHours();
134 |   var minutes = date.getMinutes();
135 |   var ampm = hours >= 12 ? 'pm' : 'am';
136 |   hours = hours % 12;
137 |   hours = hours ? hours : 12; // the hour '0' should be '12'
138 |   minutes = minutes < 10 ? '0'+minutes : minutes;
139 |   var strTime = hours + ':' + minutes + ' ' + ampm;
140 |   currentTime = strTime
141 |   time.textContent = strTime
142 | }
143 | 
144 | formatAMPM(date)
145 | setInterval(() => {
146 |   formatAMPM(date)
147 | }, 60000);
148 | 
149 | // auto friday
150 | 
151 | function autoJarvis() {
152 |   setTimeout(() => {
153 |     recognition.start();
154 |   }, 1000);
155 | }
156 | 
157 | // 
158 | // start jarvis with btn
159 | document.querySelector("#start_jarvis_btn").addEventListener("click", () => {
160 |   recognition.start();
161 | })
162 | 
163 | 
164 | document.querySelector("#stop_jarvis_btn").addEventListener("click", () => {
165 |   stopingR = true;
166 |   recognition.stop();
167 | })
168 | 
169 | // show waether
170 | function weather(location) {
171 |   const weatherCont = document.querySelector(".temp").querySelectorAll("*");
172 | 
173 |   let url = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=48ddfe8c9cf29f95b7d0e54d6e171008`;
174 |   const xhr = new XMLHttpRequest();
175 |   xhr.open("GET", url, true);
176 |   xhr.onload = function () {
177 |     if (this.status === 200) {
178 |       let data = JSON.parse(this.responseText);
179 |       weatherCont[0].textContent = `Location : ${data.name}`;
180 |       weatherCont[1].textContent = `Country : ${data.sys.country}`;
181 |       weatherCont[2].textContent = `Weather type : ${data.weather[0].main}`;
182 |       weatherCont[3].textContent = `Weather description : ${data.weather[0].description}`;
183 |       weatherCont[4].src = `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
184 |       weatherCont[5].textContent = `Original Temperature : ${ktc(
185 |         data.main.temp
186 |       )}`;
187 |       weatherCont[6].textContent = `feels like ${ktc(data.main.feels_like)}`;
188 |       weatherCont[7].textContent = `Min temperature ${ktc(data.main.temp_min)}`;
189 |       weatherCont[8].textContent = `Max temperature ${ktc(data.main.temp_max)}`;
190 |       weatherStatement = `sir the weather in ${data.name} is ${
191 |         data.weather[0].description
192 |       } and the temperature feels like ${ktc(data.main.feels_like)}`;
193 |     } else {
194 |       weatherCont[0].textContent = "Weather Info Not Found";
195 |     }
196 |   };
197 | 
198 |   xhr.send();
199 | }
200 | 
201 | // convert kelvin to celcius
202 | function ktc(k) {
203 |   k = k - 273.15;
204 |   return k.toFixed(2);
205 | }
206 | 
207 | if (localStorage.getItem("jarvis_setup") !== null) {
208 |   weather(JSON.parse(localStorage.getItem("jarvis_setup")).location);
209 | }
210 | 
211 | // friday information setup
212 | 
213 | const setup = document.querySelector(".jarvis_setup");
214 | setup.style.display = "none";
215 | if (localStorage.getItem("jarvis_setup") === null) {
216 |   setup.style.display = "flex";
217 |   setup.querySelector("button").addEventListener("click", userInfo);
218 | }
219 | 
220 | function userInfo() {
221 |   let setupInfo = {
222 |     name: setup.querySelectorAll("input")[0].value,
223 |     bio: setup.querySelectorAll("input")[1].value,
224 |     location: setup.querySelectorAll("input")[2].value,
225 |     instagram: setup.querySelectorAll("input")[3].value,
226 |     twitter: setup.querySelectorAll("input")[4].value,
227 |     github: setup.querySelectorAll("input")[5].value,
228 |   };
229 | 
230 |   let testArr = [];
231 | 
232 |   setup.querySelectorAll("input").forEach((e) => {
233 |     testArr.push(e.value);
234 |   });
235 | 
236 |   if (testArr.includes("")) {
237 |     readOut("sir enter your complete information");
238 |   } else {
239 |     localStorage.clear();
240 |     localStorage.setItem("jarvis_setup", JSON.stringify(setupInfo));
241 |     setup.style.display = "none";
242 |     weather(JSON.parse(localStorage.getItem("jarvis_setup")).location);
243 |   }
244 | }
245 | 
246 | // speech recognition
247 | 
248 | // speech lang
249 | 
250 | let speech_lang = "hi-IN" // "hi-IN" | "en-US"
251 | if(localStorage.getItem("lang") === null){
252 |   localStorage.setItem("lang", "en-US")
253 | }
254 | 
255 | 
256 | const SpeechRecognition =
257 |   window.SpeechRecognition || window.webkitSpeechRecognition;
258 | 
259 | const recognition = new SpeechRecognition();
260 | recognition.continuous = true;
261 | recognition.lang = localStorage.getItem("lang")
262 | 
263 | var synth = window.speechSynthesis;
264 | // const speech = new SpeechSynthesisUtterance();
265 | 
266 | recognition.onstart = function () {
267 |   console.log("voice recognition activated");
268 |   document.querySelector("#stop_jarvis_btn").style.display = "flex"
269 | };
270 | 
271 | // arr of window
272 | let windowsB = []
273 | 
274 | recognition.onresult = function (event) {
275 |   let current = event.resultIndex;
276 |   let transcript = event.results[current][0].transcript;
277 |   transcript = transcript.toLowerCase();
278 |   let userData = localStorage.getItem("jarvis_setup");
279 |   console.log(transcript);
280 |   // createMsg("usermsg", transcript);
281 |   // commands
282 |   // hi - hello
283 | 
284 |   if(localStorage.getItem("lang") === "en-US"){
285 |     if (transcript.includes("hi jarvis")) {
286 |       readOut("hello sir");
287 |     }
288 | 
289 |     // change lang command
290 | 
291 |     if(transcript.includes("switch to hindi")){
292 |       readOut("switching to hindi")
293 |       speech_lang = "hi-IN"
294 |       localStorage.setItem("lang", "hi-IN")
295 |       stopingR = true
296 |       recognition.stop()
297 |       location.reload()
298 |       readOutHindi("मैं तैयार हूँ, सर")
299 |     }
300 |   
301 |     // some casual commands
302 |     if (transcript.includes("what's the current charge")) {
303 |       readOut(`the current charge is ${charge}`);
304 |     }
305 |     if (transcript.includes("what's the charging status")) {
306 |       readOut(`the current charging status is ${chargeStatus}`);
307 |     }
308 |     if (transcript.includes("current time")) {
309 |       readOut(currentTime);
310 |     }
311 |     if (transcript.includes("connection status")) {
312 |       readOut(`you are ${connectivity} sir`);
313 |     }
314 |     // jarvis commands
315 |     if (transcript.includes("what are your commands")) {
316 |       readOut("sir here's the list of commands i can follow");
317 |       if(window.innerWidth <= 400 ){
318 |         window.resizeTo(screen.width,screen.height)
319 |       }
320 |       document.querySelector(".commands").style.display = "block";
321 |     }
322 |     // jarvis bio
323 |     if (transcript.includes("Tell about yourself")) {
324 |       readOut(
325 |         "sir, i am a jarvis, a voice asistant made for browsers using javascript by one of the Enthusiastic dev on the planet. I can do anything which can be done from a browser."
326 |       );
327 |     }
328 |   
329 |     // close popups
330 |     if (transcript.includes("close this")) {
331 |       readOut("closing the tab sir");
332 |       document.querySelector(".commands").style.display = "none";
333 |       if(window.innerWidth >= 401 ){
334 |         window.resizeTo(250,250)
335 |       }
336 |       setup.style.display = "none";
337 |     }
338 |   
339 |     // info change
340 |     if (transcript.includes("change my information")) {
341 |       readOut("Opening the information tab sir");
342 |       localStorage.clear();
343 |       
344 |       if(window.innerWidth <= 400 ){
345 |         window.resizeTo(screen.width,screen.height)
346 |       }
347 |       setup.style.display = "flex";
348 |       setup.querySelector("button").addEventListener("click", userInfo);
349 |     }
350 |   
351 |     
352 |     // weather report
353 |     if (
354 |       transcript.includes("what's the temperature")
355 |     ) {
356 |       readOut(weatherStatement);
357 |     }
358 |   
359 |     if (transcript.includes("full weather report")) {
360 |       readOut("opening the weather report sir");
361 |       let a = window.open(
362 |         `https://www.google.com/search?q=weather+in+${
363 |           JSON.parse(localStorage.getItem("jarvis_setup")).location
364 |         }`
365 |       );
366 |       windowsB.push(a)
367 |     }
368 |     // availability check
369 |     if (transcript.includes("are you there")) {
370 |       readOut("yes sir");
371 |     }
372 |     // close voice recognition
373 |     if (transcript.includes("shut down")) {
374 |       readOut("Ok sir i will take a nap");
375 |       stopingR = true;
376 |       recognition.stop();
377 |     }
378 |   
379 |   // whatsapp
380 |     if (transcript.includes("open whatsapp")) {
381 |       readOut("opening whatsapp");
382 |       let a = window.open("https://web.whatsapp.com/");
383 |       windowsB.push(a)
384 |     }
385 |   // netlify
386 |     if (transcript.includes("open netlify")) {
387 |       readOut("opening netlify");
388 |       let a = window.open("https://app.netlify.com/");
389 |       windowsB.push(a)
390 |     }
391 |   // spotify
392 |     if (transcript.includes("open spotify")) {
393 |       readOut("opening spotify");
394 |       let a = window.open("https://open.spotify.com/");
395 |       windowsB.push(a)
396 |     }
397 |   
398 |   
399 |     // firebase
400 |   
401 |     if (transcript.includes("open fire base") && transcript.includes("account")) {
402 |       readOut("opening firebase console");
403 |       let accId = transcript;
404 |       accId = accId.split("");
405 |       accId.pop();
406 |       accId = accId[accId.length - 1];
407 |       console.log(`accId: ${accId}`);
408 |       // https://console.firebase.google.com/u/0/
409 |       let a = window.open(`https://console.firebase.google.com/u/${accId}/`);
410 |       windowsB.push(a)
411 |     }
412 |   
413 |     // canva
414 |   
415 |     if (transcript.includes("open my canva designs")) {
416 |       readOut("opening canva designs");
417 |       window.open("https://www.canva.com/folder/all-designs");
418 |     }
419 |   
420 |     if (transcript.includes("open canva") || transcript.includes("open camera")) {
421 |       readOut("opening canva");
422 |       window.open("https://www.google.com/");
423 |     }
424 |   
425 |     // userdata access commands
426 |   
427 |     if (transcript.includes("what's my name")) {
428 |       readOut(`Sir, I know that you are ${JSON.parse(userData).name}`);
429 |     }
430 |     if (transcript.includes("what's my bio")) {
431 |       readOut(`Sir, I know that you are ${JSON.parse(userData).bio}`);
432 |     }
433 |   
434 |     // google
435 |   
436 |     if (transcript.includes("open google")) {
437 |       readOut("opening google");
438 |       let a = window.open("https://www.google.com/");
439 |       windowsB.push(a)
440 |     }
441 |   
442 |     if (transcript.includes("search for")) {
443 |       readOut("here's your result");
444 |       let input = transcript.split("");
445 |       input.splice(0, 11);
446 |       input.pop();
447 |       input = input.join("").split(" ").join("+");
448 |       let a = window.open(`https://www.google.com/search?q=${input}`);
449 |       windowsB.push(a)
450 |     }
451 |   
452 |     // youtube
453 |     if (transcript.includes("open youtube")) {
454 |       readOut("opening youtube sir");
455 |       let a = window.open("https://www.youtube.com/");
456 |       windowsB.push(a)
457 |     }
458 |   
459 |     if (transcript.includes("play")) {
460 |       let playStr = transcript.split("");
461 |       playStr.splice(0, 5);
462 |       let videoName = playStr.join("");
463 |       playStr = playStr.join("").split(" ").join("+");
464 |       readOut(`searching youtube for ${videoName}`);
465 |       let a = window.open(`https://www.youtube.com/search?q=${playStr}`
466 |       );
467 |       windowsB.push(a)
468 |     }
469 |   
470 |   
471 |     // instagram
472 |     if (transcript.includes("open instagram")) {
473 |       readOut("opening instagram sir");
474 |       let a =window.open("https://www.instagram.com");
475 |       windowsB.push(a)
476 |     }
477 |     if (transcript.includes("open my instagram profile")) {
478 |       if (JSON.parse(userData).instagram) {
479 |         readOut("opening your instagram profile");
480 |         let a =window.open(
481 |           `https://www.instagram.com/${JSON.parse(userData).instagram}/`
482 |         );
483 |         windowsB.push(a)
484 |       } else {
485 |         readOut("sir i didn't found your instagram information");
486 |       }
487 |     }
488 |     // twitter
489 |     if (transcript.includes("open my twitter profile")) {
490 |       readOut("opening your twitter profile");
491 |       let a=window.open(`https://twitter.com/${JSON.parse(userData).twitter}`);
492 |       windowsB.push(a)
493 |     }
494 |     if (transcript.includes("open twitter")) {
495 |       readOut("opening twitter sir");
496 |       let a = window.open(`https://twitter.com/`);
497 |       windowsB.push(a)
498 |     }
499 |   
500 |     // github
501 |     if (transcript.includes("open my github profile")) {
502 |       readOut("opening your github profile");
503 |       let a = window.open(`https://github.com/${JSON.parse(userData).github}`);
504 |       windowsB.push(a)
505 |     }
506 |     if (transcript.includes("open github")) {
507 |       readOut("opening github");
508 |       let a = window.open("https://github.com/");
509 |       windowsB.push(a)
510 |     }
511 |     // calendar
512 |     if (transcript.includes("open calendar")) {
513 |       readOut("opening calendar");
514 |       let a = window.open("https://calendar.google.com/");
515 |       windowsB.push(a)
516 |     }
517 |     // close all opened tabs
518 |     if (transcript.includes("close all tabs")) {
519 |       readOut("closing all tabs sir")
520 |       windowsB.forEach((e) => {
521 |         e.close()
522 |       })
523 |   
524 |     }
525 |   
526 |     // news commands
527 |     if (transcript.includes("top headlines")) {
528 |       readOut("These are today's top headlines sir")
529 |       getNews()
530 |   
531 |     }
532 |   
533 |     if (transcript.includes("news regarding")) {
534 |       // readOut("These are today's top headlines sir")
535 |       let input = transcript
536 |       let a = input.indexOf("regarding")
537 |       input = input.split("")
538 |       input.splice(0,a+9)
539 |       input.shift()
540 |       input.pop()
541 |   
542 |       readOut(`here's some headlines on ${input.join("")}`)
543 |       getCategoryNews(input.join(""))
544 |   
545 |     }
546 |   }    
547 | 
548 |   if(localStorage.getItem("lang") === "hi-IN"){
549 |     if(transcript.includes("हैलो जार्विस")){
550 |       readOutHindi("हैलो सर")
551 |     }
552 | 
553 |     if(transcript.includes("इंग्लिश में बदलो")){
554 |       readOutHindi("इंग्लिश में बदल रहा हूँ")
555 |       speech_lang = "en-US"
556 |       localStorage.setItem("lang", "en-US")
557 |       stopingR = true
558 |       recognition.stop()
559 |       location.reload()
560 |       readOut("ready to go sir")
561 |     }
562 |   }
563 | 
564 | 
565 | }
566 | 
567 | 
568 | 
569 | 
570 | recognition.onend = function () {
571 |   if (stopingR === false) {
572 |     setTimeout(() => {
573 |       recognition.start();
574 |     }, 500);
575 |   } else if (stopingR === true) {
576 |     recognition.stop();
577 |     document.querySelector("#stop_jarvis_btn").style.display = "none"
578 |   }
579 | };
580 | 
581 | // speak out
582 | 
583 | 
584 | 
585 | function readOut(message) {
586 |   const speech = new SpeechSynthesisUtterance();
587 |   speech.text = message;
588 |   speech.volume = 1;
589 |   window.speechSynthesis.speak(speech);
590 |   console.log("Speaking out");
591 |   // createMsg("jmsg", message);
592 | }
593 | 
594 | 
595 | function readOutHindi(message) {
596 |   
597 |   const speech = new SpeechSynthesisUtterance();
598 |   speech.text = message;
599 |   speech.volume = 1;
600 |   speech.lang = "hi-IN"
601 |   window.speechSynthesis.speak(speech);
602 |   console.log("Speaking out");
603 |   // createMsg("jmsg", message);
604 | }
605 | 
606 | 
607 | 
608 | 
609 | 
610 | // small jarvis
611 | const smallJarvis = document.querySelector("#small_jarvis")
612 | 
613 | 
614 | 
615 | smallJarvis.addEventListener("click", () => {
616 |   window.open(`${window.location.href}`,"newWindow","menubar=true,location=true,resizable=false,scrollbars=false,width=200,height=200,top=0,left=0")
617 |   window.close()
618 | })
619 | 
620 | 
621 | 
622 | document.querySelector("#jarvis_start").addEventListener("click", () => {
623 |   recognition.start()
624 | })
625 | 
626 | // calendar
627 | 
628 | const lang = navigator.language;
629 | 
630 | let datex = new Date();
631 | let dayNumber 	= date.getDate();
632 | let monthx 		= date.getMonth();
633 | 
634 | let dayName 	= date.toLocaleString(lang, {weekday: 'long'});
635 | let monthName 	= date.toLocaleString(lang, {month: 'long'});
636 | let year 		= date.getFullYear();
637 | 
638 | document.querySelector("#month").innerHTML = monthName
639 | document.querySelector("#day").innerHTML = dayName
640 | document.querySelector("#date").innerHTML = dayNumber
641 | document.querySelector("#year").innerHTML = year
642 | 
643 | document.querySelector(".calendar").addEventListener("click", () => {
644 |   window.open("https://calendar.google.com/")
645 | })
646 | 
647 | 
648 | // news setup
649 | 
650 | async function getNews(){
651 |   var url = "https://newsapi.org/v2/top-headlines?country=in&apiKey=b0712dc2e5814a1bb531e6f096b3d7d3"
652 |   var req = new Request(url)
653 |   await fetch(req).then((response) => response.json())
654 |   .then((data) => {
655 |     console.log(data);
656 |     let arrNews = data.articles
657 |     arrNews.length = 10
658 |     let a = []
659 |     arrNews.forEach((e,index) => {
660 |       a.push(index+1)
661 |       a.push(".........")
662 |       a.push(e.title)
663 |       a.push(".........")
664 | 
665 |     });
666 |     readOut(a)
667 |   })
668 | }
669 | 
670 | // category news
671 | 
672 | let yyyy,mm,dd
673 | 
674 | dd = date.getDate()
675 | mm = date.getMonth()
676 | yyyy = date.getFullYear()
677 | 
678 | async function getCategoryNews(category){
679 |   var url =
680 |     "https://newsapi.org/v2/everything?" +
681 |     `q=${category}&` +
682 |     `from=${yyyy}-${mm}-${dd}&` +
683 |     "sortBy=popularity&" +
684 |     "apiKey=b0712dc2e5814a1bb531e6f096b3d7d3";
685 | 
686 |     // https://newsapi.org/v2/everything?q=Apple&from=2021-09-19&sortBy=popularity&apiKey=API_KEY
687 | 
688 |     var req = new Request(url)
689 | 
690 |   await fetch(req).then((response) => response.json())
691 |   .then((data) => {
692 |     console.log(data);
693 |     let arrNews = data.articles
694 |     arrNews.length = 10
695 |     let a = []
696 |     arrNews.forEach((e,index) => {
697 |       a.push(index+1)
698 |       a.push(".........")
699 |       a.push(e.title)
700 |       a.push(".........")
701 |     });
702 |     readOut(a)
703 |   })
704 | }
705 | 


--------------------------------------------------------------------------------
/battery1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishnallana/Jarvis-With-JavaScript/782de7649c2998d5affd96879ff6184dab9396ac/battery1.png


--------------------------------------------------------------------------------
/clock1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishnallana/Jarvis-With-JavaScript/782de7649c2998d5affd96879ff6184dab9396ac/clock1.png


--------------------------------------------------------------------------------
/heart.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishnallana/Jarvis-With-JavaScript/782de7649c2998d5affd96879ff6184dab9396ac/heart.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta name="description" content="Hi I am FRIDAy" />
 7 |     <title>Ted's JARVIS</title>
 8 |     <link rel="stylesheet" href="./style.css" />
 9 |     <link rel="icon" href="./iron-pic.png">
10 |   </head>
11 |   <body>
12 |     <audio src="./Jarvis.mp3" id="j_intro"></audio>
13 |     <audio src="./power up.mp3" id="turn_on"></audio>
14 | 
15 |     <div class="machine hide_on_small">
16 |       <div class="clock cont">
17 |         <img src="./clock1.png" class="icon" />
18 |         <p id="time"></p>
19 |       </div>
20 |       <div class="internet cont">
21 |         <img src="./internet1.png" class="icon" />
22 |         <p id="internet"></p>
23 |       </div>
24 |       <div class="battery cont">
25 |         <img src="./battery1.png" class="icon" />
26 |         <p id="battery"></p>
27 |       </div>
28 |       <div class="temp">
29 |         <p id="location"></p>
30 |         <p id="country"></p>
31 |         <p id="weatherT"></p>
32 |         <p id="weatherD"></p>
33 |         <img src="" id="weatherIcon" />
34 |         <p id="oTemp"></p>
35 |         <p id="feelLikeTemp"></p>
36 |         <p id="minT"></p>
37 |         <p id="maxT"></p>
38 |       </div>
39 |       <img src="./heart.gif" id="heart" />
40 |       <!-- <img src="./iron_man.gif" id="iron_man" /> -->
41 |     </div>
42 | 
43 |     <button id="start_jarvis_btn" class="hide_on_small">
44 |       <img src="https://i.gifer.com/origin/43/434771e3bf841e79abb2d4da70d6b1e2.gif" alt="start jarvis" />
45 |       <p>Start Recognition</p>
46 |     </button>
47 | 
48 |     <button id="stop_jarvis_btn" class="hide_on_small">
49 |       <img src="https://i.gifer.com/origin/43/434771e3bf841e79abb2d4da70d6b1e2.gif" alt="start jarvis" />
50 |       <p>Stop Recognition</p>
51 |     </button>
52 | 
53 |     <div class="small_jarvis hide_on_small">
54 |       <button id="small_jarvis"><img src="./iron_man.gif" height="350"><p>Make Me Small</p></button>
55 |     </div>
56 | 
57 |     <div class="jarvis_setup in_middle hide_on_small">
58 |       <label for="">Your Name</label>
59 |       <input type="text" />
60 |       <br />
61 |       <label for="">Your Bio</label>
62 |       <input type="text" />
63 |       <br />
64 |       <label for="">Your Location</label>
65 |       <input type="text" />
66 |       <br />
67 |       <label for="">Instagram Profile</label>
68 |       <input type="text" />
69 |       <br />
70 |       <label for="">Twitter Profile</label>
71 |       <input type="text" />
72 |       <br />
73 |       <label for="">GitHub Profile</label>
74 |       <input type="text" />
75 |       <br />
76 |       <button id="sub_btn">Submit</button>
77 |     </div>
78 | 
79 |     <!-- <div class="messages hide_on_small"></div> -->
80 | 
81 |     <div class="commands in_middle hide_on_small"></div>
82 | 
83 |     <div class="new_jarvis_window">
84 |       <img src="./heart.gif" height="230" id="jarvis_start"/>
85 |     </div>
86 | 
87 |     <script src="./app.js"></script>
88 |   </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/internet1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishnallana/Jarvis-With-JavaScript/782de7649c2998d5affd96879ff6184dab9396ac/internet1.jpg


--------------------------------------------------------------------------------
/internet1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishnallana/Jarvis-With-JavaScript/782de7649c2998d5affd96879ff6184dab9396ac/internet1.png


--------------------------------------------------------------------------------
/iron-pic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishnallana/Jarvis-With-JavaScript/782de7649c2998d5affd96879ff6184dab9396ac/iron-pic.png


--------------------------------------------------------------------------------
/iron_man.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishnallana/Jarvis-With-JavaScript/782de7649c2998d5affd96879ff6184dab9396ac/iron_man.gif


--------------------------------------------------------------------------------
/power up.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishnallana/Jarvis-With-JavaScript/782de7649c2998d5affd96879ff6184dab9396ac/power up.mp3


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,400;0,600;0,700;1,100;1,400;1,500&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   color: white;
  8 |   position: fixed;
  9 |   font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 10 |     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 11 | }
 12 | 
 13 | body {
 14 |   background-color: black;
 15 | }
 16 | 
 17 | button {
 18 |   color: black;
 19 |   /* top: 50%;
 20 |   left: 50%; */
 21 | }
 22 | label {
 23 |   color: rgb(163, 0, 0);
 24 |   text-align: left;
 25 | }
 26 | input {
 27 |   color: black;
 28 |   outline: none;
 29 |   border: none;
 30 |   border-bottom: 3px solid black;
 31 |   width: 60vw;
 32 | }
 33 | 
 34 | #sub_btn {
 35 |   background-color: red;
 36 |   color: white;
 37 |   width: 80px;
 38 |   padding: 10px 5px;
 39 |   outline: none;
 40 |   border: none;
 41 |   border-radius: 10px;
 42 | }
 43 | 
 44 | .machine {
 45 |   background-color: black;
 46 |   height: 100vh;
 47 |   width: 100vw;
 48 |   user-select: none;
 49 | }
 50 | 
 51 | .machine * {
 52 |   position: absolute;
 53 | }
 54 | 
 55 | #heart {
 56 |   bottom: 0;
 57 |   left: 0;
 58 | }
 59 | 
 60 | #iron_man {
 61 |   bottom: 0;
 62 |   right: 0;
 63 | }
 64 | 
 65 | #time {
 66 |   color: white;
 67 |   top: 10px;
 68 |   left: 10px;
 69 | }
 70 | 
 71 | .in_middle {
 72 |   top: 50%;
 73 |   left: 50%;
 74 |   transform: translate(-50%, -50%);
 75 |   background-color: white;
 76 |   padding: 50px;
 77 |   border-radius: 10px;
 78 |   display: flex;
 79 |   justify-content: center;
 80 |   flex-direction: column;
 81 |   align-items: center;
 82 |   z-index: 10000;
 83 | 
 84 |   width: 80vw;
 85 |   height: 70vh;
 86 |   overflow-y: scroll;
 87 | }
 88 | 
 89 | .in_middle::-webkit-scrollbar {
 90 |   display: block;
 91 | }
 92 | 
 93 | .in_middle::-webkit-scrollbar-track {
 94 |   border-radius: 10px;
 95 | }
 96 | 
 97 | .in_middle::-webkit-scrollbar-thumb {
 98 |   background: red;
 99 |   border-radius: 10px;
100 | }
101 | 
102 | .icon {
103 |   height: 50px;
104 |   width: 50px;
105 |   object-fit: cover;
106 |   padding: 3px;
107 |   background-color: white;
108 |   border-radius: 50%;
109 | }
110 | 
111 | .cont * {
112 |   position: static;
113 | }
114 | 
115 | .cont {
116 |   top: 10px;
117 |   display: flex;
118 |   align-items: center;
119 |   justify-content: space-around;
120 | }
121 | 
122 | .battery {
123 |   left: 50%;
124 |   width: 100px;
125 |   transform: translateX(-50%);
126 | }
127 | 
128 | .clock {
129 |   width: 150px;
130 |   letter-spacing: 2px;
131 | }
132 | 
133 | .internet {
134 |   top: 100px;
135 |   left: 5px;
136 |   width: 120px;
137 | }
138 | 
139 | .in_middle * {
140 |   position: static;
141 | }
142 | 
143 | .temp {
144 |   top: 10px;
145 |   right: 10px;
146 |   text-align: right;
147 |   font-size: smaller;
148 | }
149 | 
150 | .temp * {
151 |   position: static;
152 | }
153 | 
154 | .messages * {
155 |   position: static;
156 | }
157 | 
158 | .messages {
159 |   bottom: 0;
160 |   left: 50%;
161 |   transform: translateX(-50%);
162 |   height: 400px;
163 |   overflow-y: scroll;
164 |   display: flex;
165 |   flex-direction: column;
166 |   align-items: center;
167 |   justify-content: flex-end;
168 |   padding-bottom: 15px;
169 |   z-index: 1000;
170 | }
171 | 
172 | .usermsg {
173 |   text-align: right;
174 |   width: 300px;
175 |   color: rgb(113, 113, 235);
176 | }
177 | 
178 | .jmsg {
179 |   text-align: left;
180 |   margin-top: 5px;
181 |   width: 300px;
182 |   color: rgb(245, 61, 61);
183 | }
184 | 
185 | .messages::-webkit-scrollbar {
186 |   display: none;
187 | }
188 | 
189 | .commands {
190 |   display: none;
191 |   background-color: white;
192 | }
193 | 
194 | .commands p {
195 |   color: rgb(197, 0, 0);
196 | }
197 | 
198 | #start_jarvis_btn {
199 |   border: none;
200 |   outline: none;
201 |   position: fixed;
202 |   left: 150px;
203 |   transform: translateX(0);
204 |   top: 300px;
205 |   display: flex;
206 |   justify-content: center;
207 |   align-items: center;
208 |   z-index: 9999;
209 | }
210 | 
211 | #start_jarvis_btn p {
212 |   font-size: 30px;
213 | }
214 | 
215 | #start_jarvis_btn img {
216 |   height: 300px;
217 | }
218 | 
219 | #stop_jarvis_btn {
220 |   border: none;
221 |   outline: none;
222 |   position: fixed;
223 |   left: 400px;
224 |   transform: translateX(0);
225 |   top: 300px;
226 |   display: flex;
227 |   justify-content: center;
228 |   align-items: center;
229 |   z-index: 9999;
230 |   display: none;
231 | }
232 | 
233 | #stop_jarvis_btn p {
234 |   font-size: 30px;
235 | }
236 | 
237 | #stop_jarvis_btn img {
238 |   height: 300px;
239 |   filter: blur(5px);
240 | }
241 | 
242 | .small_jarvis {
243 |   position: absolute;
244 |   top: calc(100vh - 370px);
245 |   left: calc(100vw - 370px);
246 | }
247 | 
248 | .small_jarvis button {
249 |   background-color: black;
250 |   height: 370px;
251 |   width: 370px;
252 |   display: flex;
253 |   justify-content: center;
254 |   align-items: center;
255 |   outline: none;
256 |   border: none;
257 | }
258 | .small_jarvis button p {
259 |   font-size: 50px;
260 | }
261 | 
262 | .new_jarvis_window {
263 |   display: none;
264 | }
265 | 
266 | @media (max-width: 300px) {
267 |   .hide_on_small {
268 |     display: none;
269 |   }
270 |   .new_jarvis_window {
271 |     display: block;
272 |   }
273 |   #start_jarvis_btn {
274 |     display: none;
275 |   }
276 | }
277 | 


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