├── Batch 1 ├── Mini Project │ └── Mini Project.pdf ├── Day 1 │ ├── Notes │ │ ├── Client and Server.jpg │ │ ├── scripts │ │ │ ├── intro.js │ │ │ └── varletconst.js │ │ └── index.html │ └── Assignment │ │ └── Day 1 Assignment .pdf ├── Day 7 │ └── Notes │ │ ├── draganddrop │ │ ├── test.jpg │ │ ├── index.js │ │ ├── styles.css │ │ └── index.html │ │ ├── forms │ │ ├── index.js │ │ └── index.html │ │ ├── index.html │ │ ├── todo │ │ ├── index.html │ │ └── index.js │ │ ├── form2 │ │ ├── index.js │ │ └── index.html │ │ └── index.js ├── Day 2 │ ├── Assignment │ │ └── Day 2 Assignment .pdf │ └── Notes │ │ ├── scripts │ │ ├── one.js │ │ ├── maths.js │ │ ├── datatypes.js │ │ └── methods.js │ │ ├── assignment.html │ │ └── index.html ├── Day 3 │ ├── Assignment │ │ └── Day 3 Assignment.pdf │ └── Notes │ │ ├── scripts │ │ ├── objects.js │ │ ├── revision.js │ │ ├── functions.js │ │ ├── comparison.js │ │ └── conditionals.js │ │ └── index.html ├── Day 4 │ ├── Assignment │ │ └── Day 4 Assignment.pdf │ └── Notes │ │ ├── scripts │ │ ├── date.js │ │ ├── math.js │ │ ├── loops.js │ │ └── modernjs.js │ │ └── index.html ├── Day 5 │ ├── Assignment │ │ └── Day 5 Assignment .pdf │ └── Notes │ │ ├── index.html │ │ └── scripts │ │ ├── fetch.js │ │ ├── higherOrderFunctions.js │ │ ├── prom-async-call.js │ │ └── oops.js └── Day 6 │ ├── Assignment │ └── Day 6 Assignment.pdf │ └── Notes │ ├── styles.css │ ├── project1 │ ├── styles.css │ ├── index.js │ └── index.html │ ├── index.html │ └── scripts │ └── basics.js ├── Batch-2 ├── Day-2 │ ├── Assignment │ │ └── Day2 Assignment.pdf │ └── Notes │ │ ├── index.html │ │ └── index.txt ├── Day-3-4 │ ├── Assignment │ │ └── Day 4 Assignment.pdf │ └── Notes │ │ ├── scripts │ │ ├── index2.js │ │ ├── functions.js │ │ ├── objects.js │ │ └── domman.js │ │ ├── index.html │ │ └── index2.html ├── Day-5-6 │ ├── Assignment │ │ └── Day 6 Assignment.pdf │ └── Notes │ │ ├── Scripts │ │ ├── example.js │ │ ├── project1.js │ │ └── permanentproject1.js │ │ ├── localstorage.html │ │ ├── example.html │ │ ├── project1.html │ │ └── permanentproject1.html └── Day-7-8 │ ├── Assignment │ └── Day 8 Assignment.pdf │ └── Notes │ ├── api.html │ ├── index.html │ ├── asyncjs.html │ ├── Scripts │ ├── api.txt │ ├── index.txt │ ├── asyncjs.txt │ └── shopping.txt │ └── shopping.html └── README.md /Batch 1/Mini Project/Mini Project.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch 1/Mini Project/Mini Project.pdf -------------------------------------------------------------------------------- /Batch 1/Day 1/Notes/Client and Server.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch 1/Day 1/Notes/Client and Server.jpg -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/draganddrop/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch 1/Day 7/Notes/draganddrop/test.jpg -------------------------------------------------------------------------------- /Batch-2/Day-2/Assignment/Day2 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch-2/Day-2/Assignment/Day2 Assignment.pdf -------------------------------------------------------------------------------- /Batch 1/Day 1/Assignment/Day 1 Assignment .pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch 1/Day 1/Assignment/Day 1 Assignment .pdf -------------------------------------------------------------------------------- /Batch 1/Day 2/Assignment/Day 2 Assignment .pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch 1/Day 2/Assignment/Day 2 Assignment .pdf -------------------------------------------------------------------------------- /Batch 1/Day 3/Assignment/Day 3 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch 1/Day 3/Assignment/Day 3 Assignment.pdf -------------------------------------------------------------------------------- /Batch 1/Day 4/Assignment/Day 4 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch 1/Day 4/Assignment/Day 4 Assignment.pdf -------------------------------------------------------------------------------- /Batch 1/Day 5/Assignment/Day 5 Assignment .pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch 1/Day 5/Assignment/Day 5 Assignment .pdf -------------------------------------------------------------------------------- /Batch 1/Day 6/Assignment/Day 6 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch 1/Day 6/Assignment/Day 6 Assignment.pdf -------------------------------------------------------------------------------- /Batch-2/Day-3-4/Assignment/Day 4 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch-2/Day-3-4/Assignment/Day 4 Assignment.pdf -------------------------------------------------------------------------------- /Batch-2/Day-5-6/Assignment/Day 6 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch-2/Day-5-6/Assignment/Day 6 Assignment.pdf -------------------------------------------------------------------------------- /Batch-2/Day-7-8/Assignment/Day 8 Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsUpgrade/Javascript-Essentials/HEAD/Batch-2/Day-7-8/Assignment/Day 8 Assignment.pdf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | LetsUpgrade Logo 3 | 4 | # LetsUpgrade Javascript Essential Program 5 | -------------------------------------------------------------------------------- /Batch 1/Day 6/Notes/styles.css: -------------------------------------------------------------------------------- 1 | .blue{ 2 | color:blue; 3 | } 4 | 5 | .bgYellow{ 6 | background-color: yellow; 7 | } 8 | 9 | .highlight{ 10 | font-size: 22px; 11 | color: red; 12 | } -------------------------------------------------------------------------------- /Batch-2/Day-3-4/Notes/scripts/index2.js: -------------------------------------------------------------------------------- 1 | function showPassword() { 2 | const eles = document.getElementsByClassName("input"); 3 | eles[1].type = "text"; 4 | } 5 | 6 | function hidePassword() { 7 | const eles = document.getElementsByClassName("input"); 8 | eles[1].type = "password"; 9 | } 10 | -------------------------------------------------------------------------------- /Batch-2/Day-7-8/Notes/api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Batch-2/Day-2/Notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My First Web Page 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Batch-2/Day-7-8/Notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Batch 1/Day 3/Notes/scripts/objects.js: -------------------------------------------------------------------------------- 1 | console.log("Objects") 2 | 3 | 4 | // let name = { key : value } 5 | 6 | let person = { 7 | name:'Professor', 8 | skills: ['planning','mind games'], 9 | teamCount:8, 10 | canFly:false, 11 | }; 12 | 13 | console.log(person) 14 | 15 | console.log(person.name); 16 | console.log(person['skills']); 17 | 18 | -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/draganddrop/index.js: -------------------------------------------------------------------------------- 1 | let id; 2 | 3 | function allowDrop(ev){ 4 | ev.preventDefault(); 5 | } 6 | 7 | function dragStart(ev){ 8 | id = ev.target.id; 9 | // console.log(ev.target) 10 | // alert(id); 11 | } 12 | 13 | function drop(ev){ 14 | ev.target.append(document.getElementById(id)); 15 | } 16 | 17 | localStorage.setItem('user','Prasad'); -------------------------------------------------------------------------------- /Batch 1/Day 6/Notes/project1/styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | #text{ 8 | padding: 30px; 9 | background-color: wheat; 10 | max-height: 250px; 11 | overflow: hidden; 12 | 13 | transition: max-height 0.8s; 14 | 15 | } 16 | 17 | #text.show{ 18 | max-height: 1500px; 19 | 20 | transition: max-height 0.8s; 21 | } -------------------------------------------------------------------------------- /Batch-2/Day-5-6/Notes/Scripts/example.js: -------------------------------------------------------------------------------- 1 | function showModal(index) { 2 | let modal = document.getElementsByClassName("modal")[0]; 3 | modal.style.display = "block"; 4 | 5 | copySuperhero(index); 6 | } 7 | 8 | function hideModal(event) { 9 | if (event.target.className == "modal") { 10 | let modal = document.getElementsByClassName("modal")[0]; 11 | modal.style.display = "none"; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Batch-2/Day-7-8/Notes/asyncjs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/draganddrop/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: gainsboro;; 3 | } 4 | 5 | .dragZone,.dropZone{ 6 | height: 150px; 7 | width: 150px; 8 | border: 2px solid black; 9 | display: inline-block; 10 | background-color: white; 11 | } 12 | 13 | .image{ 14 | background:url('test.jpg'); 15 | height: 140px; 16 | width: 140px; 17 | position: relative; 18 | left: 5px; 19 | top:5px ; 20 | } -------------------------------------------------------------------------------- /Batch 1/Day 6/Notes/project1/index.js: -------------------------------------------------------------------------------- 1 | // console.log("Hello") 2 | 3 | 4 | const text = document.getElementById('text'); 5 | const button = document.getElementById('btn'); 6 | 7 | 8 | button.onclick = ()=>{ 9 | if(text.className == 'show'){ 10 | text.className = ''; 11 | button.innerText = "Read Less"; 12 | } 13 | else{ 14 | text.className = 'show'; 15 | button.innerText = "Read More"; 16 | } 17 | } -------------------------------------------------------------------------------- /Batch 1/Day 3/Notes/scripts/revision.js: -------------------------------------------------------------------------------- 1 | console.log("Lets Revise") 2 | 3 | // Difference between Number() and parseInt() 4 | 5 | let strnum = '1234hello' 6 | 7 | console.log(`The original value is ${strnum} & its type is ${typeof strnum}`); 8 | console.log(Number(strnum)); 9 | 10 | console.log(parseInt(strnum)); 11 | 12 | 13 | // Another way to convert a string to a number 14 | 15 | let one = '1'; 16 | let two = '2'; 17 | 18 | console.log(+one + +two); 19 | -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/forms/index.js: -------------------------------------------------------------------------------- 1 | console.log("Forms"); 2 | 3 | // const loginForm = document.forms.myForm; 4 | const loginForm = document.getElementById("myForm"); 5 | 6 | const message = document.getElementById('msg'); 7 | 8 | loginForm.addEventListener('submit',(event)=>{ 9 | event.preventDefault(); 10 | // console.log(event.target.email.value); 11 | if(loginForm.name.value == ""){ 12 | message.innerHTML = "Name should not be empty"; 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /Batch-2/Day-5-6/Notes/localstorage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 7 7 | 8 | 9 | 10 |

Links

11 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | To Do List 7 | 8 | 9 |

My To do List

10 | 11 |
12 | 13 | 14 |
15 | 16 |
    17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Batch 1/Day 2/Notes/scripts/one.js: -------------------------------------------------------------------------------- 1 | // console.log("Hello") 2 | 3 | // These all are modals. Modals are those popups, which dont allow you to interact with other part of the webpage unless you have interacted with the modal popup. 4 | 5 | // Alert 6 | // alert("hey I am an alert"); 7 | 8 | // Prompt 9 | // syntax: prompt("title", "default value"[optional]) 10 | // let age = prompt("What is your age"); 11 | // console.log(age); 12 | 13 | // Confirm 14 | // return values : 15 | // OK -> true 16 | // Cancel -> false 17 | // let age = confirm("Are you over 18?"); 18 | // console.log(age) 19 | -------------------------------------------------------------------------------- /Batch 1/Day 4/Notes/scripts/date.js: -------------------------------------------------------------------------------- 1 | console.log("Date"); 2 | 3 | let today = new Date(); 4 | 5 | // today = new Date(2012,5,12,11,20,5,0); 6 | 7 | 8 | console.log(today); 9 | 10 | // console.log(today.toDateString()); 11 | // console.log(today.toString()); 12 | // // console.log(today.toString().split(' ')); 13 | 14 | // console.log(today.getDate()); 15 | // console.log(today.getDay()); 16 | // console.log(today.getHours()); 17 | //.getTime() return milliseconds from Jan 1 1970 18 | // console.log(today.getTime()); 19 | console.log(today.setDate(21)); 20 | console.log(today.setMonth(7)); 21 | console.log(today); 22 | -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/todo/index.js: -------------------------------------------------------------------------------- 1 | console.log("Todo List"); 2 | 3 | const button = document.querySelector('#btn'); 4 | const list = document.querySelector('#list'); 5 | 6 | 7 | button.onclick = function(){ 8 | let item = document.querySelector("#todo").value; 9 | console.log(item, typeof(item)); 10 | let text = document.createTextNode(item); 11 | console.log(text); 12 | let listItem = document.createElement('li'); 13 | listItem.appendChild(text); 14 | list.appendChild(listItem); 15 | document.forms.myForm.reset(); 16 | } 17 | 18 | // button.addEventListener('click',function(){ 19 | 20 | // }) -------------------------------------------------------------------------------- /Batch-2/Day-3-4/Notes/scripts/functions.js: -------------------------------------------------------------------------------- 1 | // function declaration 2 | 3 | // function add(num1, num2) { 4 | // let result = num1 + num2; 5 | // return result; 6 | // } 7 | 8 | // let res = add(30); 9 | // console.log(res); 10 | 11 | // function expression 12 | // const add = function (num1, num2) { 13 | // let result = num1 + num2; 14 | // console.log(result); 15 | // }; 16 | 17 | // normal function 18 | 19 | function doSomething(name) { 20 | console.log("hello " + name); 21 | } 22 | 23 | // arrow function 24 | doSomething = (name) => { 25 | console.log("hello " + name); 26 | }; 27 | 28 | doSomething("saurabh"); 29 | -------------------------------------------------------------------------------- /Batch 1/Day 5/Notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 5 7 | 8 | 9 |

Higher Order functions (Map, Filter, Reduce)

10 |

Object Oriented Programming

11 |

Promises, Async Await

12 |

Fetch Api

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/draganddrop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Drag and Drop 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 | 16 |
17 | 18 |
19 | 20 | 21 | 24 | 25 | -------------------------------------------------------------------------------- /Batch 1/Day 3/Notes/scripts/functions.js: -------------------------------------------------------------------------------- 1 | console.log("Functions") 2 | 3 | /* 4 | function nameOfFunction(param if any){ 5 | ..write code here 6 | } 7 | 8 | */ 9 | 10 | function hello(){ 11 | console.log("hello from a function"); 12 | } 13 | 14 | hello(); 15 | 16 | 17 | let greet = function(){ 18 | console.log("I am a function assinged to a variable"); 19 | } 20 | greet() 21 | 22 | let welcome = function(name="stranger"){ 23 | console.log(`Hello ${name}`) 24 | } 25 | 26 | welcome('Prasad'); 27 | 28 | 29 | let addition = function(num1=0,num2=0){ 30 | let sum = +num1 + +num2; 31 | return sum; 32 | } 33 | 34 | let result = addition('10','true'); 35 | console.log(result) 36 | 37 | -------------------------------------------------------------------------------- /Batch 1/Day 2/Notes/assignment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Assignment Day 2 7 | 8 | 9 |

Assignment Questions for Day 2

10 |

Question 1

11 |

Write a js code which takes input from the user and logs it in the console.

12 |

Question 2

13 |

Explain with examples the remaining methods of String and Array

14 | 15 | Optional Assignment 3 16 |

Question 3

17 |

Ask the user if he is 21+ and log the value "Can drink", "Cannot Drink"

18 | 19 | -------------------------------------------------------------------------------- /Batch-2/Day-7-8/Notes/Scripts/api.txt: -------------------------------------------------------------------------------- 1 | // fetch 2 | 3 | // get request 4 | 5 | // fetch("https://jsonplaceholder.typicode.com/users") 6 | // .then((response) => { 7 | // response.json().then((data) => { 8 | // console.log(data); 9 | // }); 10 | // }) 11 | // .catch((error) => { 12 | // console.log(error); 13 | // }); 14 | 15 | // post request 16 | 17 | // fetch("https://jsonplaceholder.typicode.com/users", { 18 | // method: "post", 19 | // body: JSON.stringify({ 20 | // name: "Shubahm", 21 | // username: "shubh", 22 | // }), 23 | // headers: { 24 | // "Content-Type": "application/json", 25 | // }, 26 | // }).then((response) => { 27 | // response.json().then((data) => { 28 | // console.log(data); 29 | // }); 30 | // }); 31 | -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/form2/index.js: -------------------------------------------------------------------------------- 1 | console.log("Forms 2"); 2 | 3 | function validation(){ 4 | const username = document.getElementById('name').value; 5 | const email = document.getElementById('email').value; 6 | const namemsg = document.getElementById('namemsg'); 7 | if(username == ""){ 8 | namemsg.innerHTML = "username cannot be empty"; 9 | return false; 10 | } 11 | if(username.length<4){ 12 | namemsg.innerHTML = "username cannot be less than 4 characters"; 13 | return false; 14 | } 15 | if(email==""){ 16 | emailmsg.innerHTML = "email cannot be empty"; 17 | return false; 18 | } 19 | if(!email.includes('@')){ 20 | emailmsg.innerHTML = "email should contain @"; 21 | return false; 22 | } 23 | 24 | } -------------------------------------------------------------------------------- /Batch 1/Day 3/Notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 3 7 | 8 | 9 |

Objects basics

10 |

Function basics

11 |

Comparison & Logical operators

12 |

Conditional Statements

13 | 14 |

Difference between Number() & parseInt()

15 | 16 | 17 | 18 | 19 | 21 | 23 | 24 | -------------------------------------------------------------------------------- /Batch-2/Day-7-8/Notes/Scripts/index.txt: -------------------------------------------------------------------------------- 1 | // let counter = 1; 2 | // function doSomething() { 3 | // console.log(counter); 4 | 5 | // if (counter == 10) { 6 | // clearInterval(timer); 7 | // } 8 | 9 | // counter++; 10 | // } 11 | 12 | // let timer = setInterval("doSomething()", 1000); 13 | 14 | // let t = setTimeout(function () { 15 | // console.log("hello"); 16 | // }, 10000); 17 | 18 | // function stopAdd() { 19 | // clearTimeout(t); 20 | // } 21 | 22 | let currentDate = new Date(); 23 | let currentTime = currentDate.toLocaleTimeString(); 24 | 25 | document.getElementById("clock").innerHTML = currentTime; 26 | 27 | setInterval(function () { 28 | let currentDate = new Date(); 29 | let currentTime = currentDate.toLocaleTimeString(); 30 | 31 | document.getElementById("clock").innerHTML = currentTime; 32 | }, 1000); 33 | -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/index.js: -------------------------------------------------------------------------------- 1 | console.log("Hello"); 2 | 3 | // createElement 4 | 5 | const list = document.querySelector('#list'); 6 | 7 | // const el = document.createElement('span'); 8 | // console.log(el); 9 | 10 | function createElement(el){ 11 | return document.createElement(el); 12 | } 13 | 14 | let li = createElement('li'); 15 | let a = createElement('a'); 16 | // console.log(li); 17 | 18 | list.appendChild(li); 19 | li.appendChild(a); 20 | a.innerHTML="Youtube"; 21 | a.setAttribute('href',"https://youtube.com"); 22 | 23 | list.insertBefore(li,document.getElementsByTagName('li')[1]); 24 | 25 | list.removeChild(document.getElementsByTagName('li')[2]) 26 | 27 | 28 | 29 | // Regex intro 30 | 31 | const str = "prasadgmail.com"; 32 | const pattern = /^((?!\.)[\w-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/gim; 33 | 34 | console.log(pattern.test(str)); 35 | -------------------------------------------------------------------------------- /Batch 1/Day 1/Notes/scripts/intro.js: -------------------------------------------------------------------------------- 1 | // alert("Click me to Proceed"); 2 | console.log("hey I am a javascript code"); 3 | 4 | // Comments in javascript 5 | // Single line comments are written using // 6 | // Multine Comments are written using /* */ 7 | 8 | /*console.log("Hello"); 9 | console.log("Hello"); 10 | console.log("Hello"); 11 | console.log("Hello");*/ 12 | 13 | var a = {name:"Prasad", age:"24", city:"Mexico"} 14 | var b = {name:"Sai Sir", age:"24", city:"Mexico"} 15 | var c = {name:"Viral Sir", age:"24", city:"Mexico"} 16 | 17 | console.time('Time taken'); 18 | console.log("Hey") 19 | console.error("an error occured!"); 20 | console.warn("Hey this is a warning!!"); 21 | // console.log(a); 22 | // console.log(b); 23 | // console.log(c); 24 | // console.log({a ,b ,c}) 25 | console.table({a ,b ,c}) 26 | console.log('%c Custom message','color:blue;') 27 | console.timeEnd('Time taken'); 28 | 29 | -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/forms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Forms 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 |
23 |
24 |

25 |
26 | 27 |
28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Batch 1/Day 2/Notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 2 7 | 8 | 9 |

Alert, Prompt, Confirm

10 | 11 |

Datatypes in Javascript

12 | 13 | 14 | 15 |

Type Conversion

16 |

You can check the type of the variable using typeof keyword

17 | 18 |

To comment single line use Ctrl + /

19 | 20 |
To copy the whole tag , select it and press Shift + Alt + Up arrow
21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Batch 1/Day 2/Notes/scripts/maths.js: -------------------------------------------------------------------------------- 1 | console.log("Unary , binary, operand"); 2 | 3 | // let x = 10; 4 | 5 | // x = -x; 6 | // console.log(x); 7 | 8 | // let y = 5; 9 | 10 | // console.log(x-y) 11 | 12 | 13 | /* 14 | 1. Addition + 15 | 2. Subtraction - 16 | 3. Multiplication * 17 | 4. Division / 18 | 5. Remainder % 19 | 6. Exponent ** 20 | */ 21 | 22 | console.log( 2 + 3 ); 23 | console.log( 2 - 6 ); 24 | console.log( 2 * 3 ); 25 | console.log( 4 / 2 ); 26 | console.log( 12 % 5 ); 27 | console.log(6 ** 2); 28 | 29 | 30 | console.log( 1 + '2' ); 31 | console.log( '1' + 2 ); 32 | console.log(10 + 20 + '5'); 33 | 34 | 35 | console.log(1 - '2'); 36 | console.log('6' / '3'); 37 | 38 | let x; 39 | let y; 40 | let z; 41 | 42 | x = y = z = 'LetsUpgrade'; 43 | console.log(x,y,z) 44 | 45 | let n = 5; 46 | // n = n + 1;. 47 | n += 1; 48 | // n =+ 1; 49 | console.log(n) 50 | 51 | let p = 5; 52 | p -= 1; 53 | console.log(p) 54 | 55 | -------------------------------------------------------------------------------- /Batch-2/Day-3-4/Notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Hii

10 |

Hello

11 |

Olah

12 |

something in spanish

13 |

bon jour

14 | 15 |
Hello JS Developers
16 | 17 | 18 | 19 |
20 | 25 | 26 | 27 | 28 |

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Batch-2/Day-5-6/Notes/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Events 7 | 8 | 34 | 35 | 36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Batch 1/Day 5/Notes/scripts/fetch.js: -------------------------------------------------------------------------------- 1 | console.log('Fetch API'); 2 | 3 | // https://jsonplaceholder.typicode.com/comments 4 | 5 | // Making a get request 6 | fetch('https://jsonplaceholder.typicode.com/posts') 7 | .then(response=>response.json()) 8 | .then(data=>console.log(data)) 9 | 10 | let obj = { 11 | userId:254, 12 | title:"Some Title", 13 | body:'lorem ipsum', 14 | } 15 | 16 | // Make a post Request 17 | fetch('https://jsonplaceholder.typicode.com/posts',{ 18 | method:'POST', 19 | body: JSON.stringify(obj) 20 | }).then(response=>response.json()) 21 | .then(data=>console.log(data)) 22 | 23 | 24 | // jokes api 25 | 26 | async function fetchJokes(){ 27 | const response = await fetch('https://api.chucknorris.io/jokes/random'); 28 | const data = await response.json(); 29 | 30 | console.log(data); 31 | } 32 | 33 | fetchJokes(); 34 | 35 | 36 | let obj1 = { 37 | name:'Prasad', 38 | age:24, 39 | canDrive:true, 40 | } 41 | 42 | console.log(obj1); 43 | let str = JSON.stringify(obj1); 44 | console.log(str) 45 | 46 | let strobj = JSON.parse(str); 47 | console.log(strobj) 48 | 49 | -------------------------------------------------------------------------------- /Batch 1/Day 1/Notes/scripts/varletconst.js: -------------------------------------------------------------------------------- 1 | // Var 2 | // String 3 | var name = "Prasad"; 4 | // Number 5 | var age = 24; 6 | // Boolean 7 | var canFly = false; 8 | // Array 9 | var languages = ['Hindi','English','Marathi']; 10 | // Objects 11 | var friends = { 12 | name:"Vishal", 13 | hobby:"Coding", 14 | } 15 | 16 | var a = 10; 17 | console.log(a); 18 | 19 | var a = null; 20 | console.log(a); 21 | 22 | // Let 23 | { 24 | let city; 25 | let name = "Sai Sir"; 26 | name = "Viral Sir"; 27 | console.log("Using Let: ", name); 28 | } 29 | console.log(name) 30 | 31 | // const - Constant 32 | 33 | const country = "India"; 34 | console.log(country); 35 | 36 | // country = "UK"; 37 | 38 | const _fruits = ["mango", "apple"] 39 | console.log(_fruits) 40 | _fruits.push('banana'); 41 | console.log(_fruits) 42 | 43 | 44 | /* Naming a variable 45 | 1. variable name cannot start with a number 46 | 2. It can start with letters, $, _. 47 | 48 | 3. $ is mainly used in JQuery 49 | 50 | 4. _ is used to declare private variables [OOPS in Javscript] 51 | */ 52 | 53 | /* 54 | 1. camelCase ************ 55 | 2. kebab-case 56 | 3. snake_case 57 | 4. PascalCase 58 | */ -------------------------------------------------------------------------------- /Batch 1/Day 1/Notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 1 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Hello There

14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem aperiam iste sequi dolorem esse, delectus asperiores iusto repellendus dolore voluptates nihil eius, sit ut! Ex numquam molestiae veritatis sint voluptas. Error, sequi aliquam praesentium ea natus alias et? Sit, optio facere accusamus autem ipsam cupiditate error a voluptatem nisi voluptas.

15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Batch 1/Day 4/Notes/scripts/math.js: -------------------------------------------------------------------------------- 1 | console.log("Math Object") 2 | 3 | //Math.min 4 | // console.log(Math.min(1,2,3,4,5)); 5 | 6 | // console.log(Math.max(1,2,3,4,5)); 7 | 8 | // console.log(Math.pow(10,3)) 9 | 10 | // console.log(Math.abs(-5)) 11 | 12 | // console.log(Math.sqrt(10)); 13 | 14 | // console.log(Math.PI); 15 | 16 | // console.log(Math.PI * Math.pow(2,2)) 17 | 18 | 19 | // let num = 52.6578; 20 | 21 | // console.log(Math.round(num)) 22 | // console.log(Math.ceil(num)) 23 | // console.log(Math.floor(num)) 24 | 25 | // console.log(num.toFixed(10)) 26 | 27 | // Math.random() 28 | // It wil generate a number between 0 to 1 (1 is excluded) 29 | 30 | console.log(Math.random()); 31 | 32 | // Number between 0-9 33 | console.log(Math.floor(Math.random()*10)); 34 | 35 | // Number from 1-10 36 | console.log(Math.floor(Math.random()*10)+1) 37 | 38 | 39 | // min, max 40 | // To generate a random number between min(included) & max(excluded) 41 | // console.log(Math.floor(Math.random()*(max-min))+min) 42 | console.log(Math.floor(Math.random()*(10-1))+1) 43 | 44 | 45 | // To generate a random number between min(included) & max(included) 46 | // console.log(Math.floor(Math.random()*(max-min+1))+min) 47 | console.log(Math.floor(Math.random()*(25-10+1))+10) -------------------------------------------------------------------------------- /Batch 1/Day 7/Notes/form2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Forms2 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 | 22 |
23 |
24 | 25 | 26 | 27 |
28 |
29 | 30 |
31 |
32 |

33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Batch 1/Day 3/Notes/scripts/comparison.js: -------------------------------------------------------------------------------- 1 | console.log("Comparison & Logical operators"); 2 | 3 | /* 4 | Comparison 5 | 1. > Greater than 6 | 2. < Less tha 7 | 3. >= Greater than or equal to 8 | 4. <= Less than or equal to 9 | 5. == Equals (value) 10 | 6. != Not equals 11 | 7. === Strict equality (Type + Value) 12 | 8. !== Not stricly equal(type + value) 13 | 14 | Logical 15 | 1. AND -> && 16 | 2. OR -> || 17 | */ 18 | 19 | 20 | // console.log(7 > 6); 21 | // console.log(11<10); 22 | 23 | // let num = 9; 24 | // console.log(num >= 10); 25 | 26 | // console.log(num <= 9); 27 | 28 | // console.log(1 == [1]); 29 | 30 | // console.log(1 === '1'); 31 | // console.log(1 !== '1'); 32 | 33 | 34 | // console.log(2>3 && 1>0) 35 | // console.log(2>3 || 1>0) 36 | 37 | // let val = 5 > 2; 38 | // console.log(val) 39 | 40 | 41 | // String Comparison 42 | // Lexicographic order 43 | console.log("abcd" > "abc") 44 | console.log('abcd'>'abcde') 45 | 46 | // null 47 | console.log(null > 0); 48 | console.log(null == 0); 49 | console.log(null < 0); 50 | console.log(null >= 0); 51 | 52 | console.log(Number(null)) 53 | 54 | //undefined 55 | console.log(undefined > 0); 56 | console.log(undefined == 0); 57 | console.log(undefined < 0); 58 | console.log(undefined >= 0); 59 | 60 | console.log(Number(undefined)) 61 | -------------------------------------------------------------------------------- /Batch-2/Day-3-4/Notes/scripts/objects.js: -------------------------------------------------------------------------------- 1 | // Objects 2 | 3 | // collection of properties (features that it has) 4 | // & methods (work that it does) 5 | 6 | // properties - variables 7 | // methods - functions 8 | 9 | // let avenger = { 10 | // name: "Thor", 11 | // age: 1500, 12 | // weapons: ["Mjolnir", "Stormbreaker", "Thunder"], 13 | // address: { 14 | // planet: "Asgard", 15 | // home: "Apratment", 16 | // }, 17 | 18 | // printWeapon: function () { 19 | // this.weapons.forEach(function (weapon) { 20 | // console.log(weapon); 21 | // }); 22 | 23 | // console.log(this.address); 24 | // }, 25 | // }; 26 | 27 | // avenger.printWeapon(); 28 | 29 | // console.log(avenger.address.planet); 30 | 31 | // let avengers = [ 32 | // { 33 | // name: "Thor", 34 | // age: 1500, 35 | // }, 36 | // { 37 | // name: "Captain America", 38 | // age: 100, 39 | // }, 40 | // { 41 | // name: "Ironman", 42 | // age: 43, 43 | // }, 44 | // ]; 45 | 46 | // for (let i = 0; i < avengers.length; i++) { 47 | // console.log(avengers[i].name); 48 | // } 49 | 50 | // avengers.forEach(function (avenger) { 51 | // console.log(avenger.name); 52 | // }); 53 | 54 | demo = { 55 | name: "Laptop", 56 | printName: () => { 57 | console.log(this); 58 | }, 59 | }; 60 | 61 | demo.printName(); 62 | -------------------------------------------------------------------------------- /Batch-2/Day-7-8/Notes/Scripts/asyncjs.txt: -------------------------------------------------------------------------------- 1 | let users = [ 2 | { name: "Darshan", age: 25 }, 3 | { name: "Velan", age: 34 }, 4 | { name: "Geetika", age: 22 }, 5 | ]; 6 | 7 | // promises 8 | 9 | let user; 10 | 11 | function getUserData() { 12 | return new Promise((resolve, reject) => { 13 | user = users.filter(function (u) { 14 | return u.age == 22; 15 | }); 16 | 17 | if (user.length == 1) { 18 | resolve(user[0]); 19 | } else { 20 | reject("User was not found"); 21 | } 22 | }); 23 | } 24 | 25 | function updateUser(user) { 26 | return new Promise((resolve, reject) => { 27 | user.name = "geet"; 28 | resolve(user); 29 | }); 30 | } 31 | 32 | function updateAge(user) { 33 | return new Promise((resolve, reject) => { 34 | user.age = 45; 35 | resolve(user); 36 | }); 37 | } 38 | 39 | // getUserData() 40 | // .then((response) => { 41 | // console.log(response); 42 | // updateUser(response).then((response1) => { 43 | // console.log(response1); 44 | // }); 45 | // }) 46 | // .catch((error) => console.log(error)); 47 | 48 | async function callEverything() { 49 | let response = await getUserData(); 50 | console.log(response); 51 | let up1user = await updateUser(response); 52 | console.log(up1user); 53 | let up2user = await updateAge(up1user); 54 | console.log(up2user); 55 | } 56 | 57 | callEverything(); 58 | -------------------------------------------------------------------------------- /Batch 1/Day 6/Notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 6 7 | 8 | 9 | 10 |

DOM - Document Object Model

11 | Google 12 | 13 | 14 | 15 |

Day 6

16 | 17 |

18 | 19 |

List of Fruits

20 | 23 | 24 |

Hey I am a demo text

25 | 26 |
27 |

Lorem, ipsum dolor.

28 |

Lorem ipsum dolor sit amet.

29 |

Lorem ipsum dolor sit, amet consectetur adipisicing.

30 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe, consequatur?

31 |

Lorem, ipsum dolor.

32 |
33 | 34 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam exercitationem placeat consequuntur? Ullam illo doloremque aspernatur aliquam placeat temporibus quisquam.

35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Batch-2/Day-3-4/Notes/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 25 | 26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 | 39 |
40 |
41 | 42 |
43 |
44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Batch 1/Day 5/Notes/scripts/higherOrderFunctions.js: -------------------------------------------------------------------------------- 1 | console.log("Higher Order Functions"); 2 | 3 | // MAP 4 | 5 | let arr = [1,2,3,4,5,6]; 6 | 7 | 8 | 9 | arr.forEach((el)=>{ 10 | console.log(el**2) 11 | }) 12 | 13 | let square = arr.map((el)=>el**2); 14 | 15 | let square = arr.map(function(el){ 16 | return el**2; 17 | }) 18 | 19 | console.log(square); 20 | 21 | 22 | Filter 23 | 24 | let even = arr.filter(el=>el%2==0); 25 | 26 | let evenSquares = arr.filter(el=>el%2==0).map(el=>el**2); 27 | 28 | console.log(even); 29 | console.log(evenSquares); 30 | 31 | let users = [{"user": "👩🏻‍💻"},{"user": "👨🏾‍💻"},{"user": "💃"},{"user": "👨🏻‍🎓"},{"user": "🧑🏻‍🏫"},{"user": "🦸‍♂️"},{"user": "🧟‍♂️"}]; 32 | 33 | let resultDetails = users.map(user=>{ 34 | let mark = Math.random()*100; 35 | user.mark = mark; 36 | return user; 37 | }) 38 | 39 | console.log(resultDetails); 40 | 41 | let pass = resultDetails.filter(user=>{ 42 | if(user.mark>35){ 43 | return user; 44 | } 45 | }) 46 | 47 | console.log(pass); 48 | 49 | // Reduce 50 | let names = ['berlin', 'denver','rio']; 51 | let red = names.reduce((acc, val)=>{ 52 | let obj = { 53 | name:val, 54 | len:val.length, 55 | } 56 | acc.push(obj); 57 | return acc; 58 | },[]); 59 | 60 | console.log(red); 61 | 62 | let sum = arr.reduce((acc,val)=>{ 63 | acc+=val; 64 | return acc; 65 | },0) 66 | 67 | console.log(sum); 68 | 69 | 70 | -------------------------------------------------------------------------------- /Batch 1/Day 4/Notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 4 7 | 8 | 9 | 10 | 11 |

Agenda for today

12 |

Loops

13 |
    14 |
  1. For loop
    2. 15 |
  2. While Loop
    3. 16 |
  3. Do while
    4. 17 |
18 | 19 |

Math & Date Object

20 |
Math
21 |
    22 |
  1. Math.min()
    2. 23 |
  2. Math.max()
    3. 24 |
  3. Math.pow()
    4. 25 |
  4. Math.abs()
    5. 26 |
  5. Math.sqrt()
    6. 27 |
  6. Math.round()
    7. 28 |
  7. Math.floor()
    8. 29 |
  8. Math.ceil()
    9. 30 |
  9. Math.random()
    10. 31 | 32 |
33 |
Date
34 |
    35 |
  1. new Date()
    2. 36 |
  2. Variants of above
    3. 37 |
  3. get Methods
    4. 38 |
  4. set methods
    5. 39 |
40 | 41 |
forEach
42 | 
for(let i in x){
43 |        ...code here 
44 |     }
45 |
Debugger
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Batch 1/Day 2/Notes/scripts/datatypes.js: -------------------------------------------------------------------------------- 1 | console.log("Learning datatypes"); 2 | 3 | /* 4 | Primitive 5 | 1. Number 6 | 2. String 7 | 3. Boolean 8 | 4. Bigint 9 | 5. null 10 | 6. undefined 11 | 12 | Reference 13 | 1. Array 14 | 2. Functions 15 | 3. Objects 16 | 17 | */ 18 | 19 | // Number 20 | 21 | let num = 25; 22 | console.log(num); 23 | 24 | let num1 = 123.854; 25 | // num1 = Number(num1); 26 | // console.log(num1, typeof num1) 27 | // console.log(Number(true)); 28 | // console.log(Number(false)); 29 | 30 | // console.log(parseFloat(num1)); 31 | // console.log(num1.toFixed(2)); 32 | 33 | // let strn = 500; 34 | // console.log(typeof strn); 35 | // console.log(typeof(strn)); 36 | 37 | // console.log(Number('123d457g')) 38 | 39 | // String 40 | // let str = "Prasad"; 41 | // console.log(typeof str); 42 | // let str = 'LetsUpgrade'; 43 | // let str = `LetsUpgrade`; 44 | // console.log(str); 45 | 46 | // let numstr = 123; 47 | // numstr = String(numstr) 48 | // console.log(typeof(numstr)) 49 | 50 | 51 | 52 | 53 | // Boolean 54 | 55 | // let canDrive = false; 56 | // console.log(typeof canDrive); 57 | // console.log(canDrive); 58 | 59 | 60 | 61 | // Bigint 62 | // let numb = 1235485n; 63 | // console.log(typeof numb); 64 | // console.log(numb); 65 | 66 | // null 67 | // let nullvar = null; 68 | // console.log(typeof nullvar); 69 | // console.log(nullvar); 70 | 71 | // undefined 72 | // let a; 73 | // let a = undefined; 74 | // console.log(typeof a); 75 | // console.log(a) 76 | -------------------------------------------------------------------------------- /Batch 1/Day 4/Notes/scripts/loops.js: -------------------------------------------------------------------------------- 1 | console.log("Loops") 2 | 3 | // For Loop 4 | /* 5 | 6 | for(initializer;condition;increment/decrement) { 7 | code to be repeated until the condition is satisfied 8 | } 9 | */ 10 | let arr = ['apple', 'mango','orange','banana']; 11 | 12 | // Break statement breaks out of the loop 13 | 14 | // Continue statement skips the iteration 15 | 16 | for(let i=1;i<=10;i++){ 17 | // if(i==3){ 18 | // break; 19 | // } 20 | // if(i%2==0){ 21 | // continue; 22 | // } 23 | // if(i==3){ 24 | // continue; 25 | // } 26 | // debugger; 27 | let num = i; 28 | console.log(num); 29 | } 30 | console.log('done'); 31 | 32 | // for(let i=0;i Hey there 4 |

All good.

5 | `; 6 | console.log(str); 7 | 8 | let name = "Rio"; 9 | let skill = "hacking"; 10 | let weakness = "Tokyo"; 11 | 12 | console.log("The name is " + name + " .His skill is " + skill + " and his weakness is " + weakness); 13 | 14 | console.log(`The name is ${name}. His skill is ${skill} and his weakness is ${weakness}.`); 15 | 16 | 17 | let text = "The quick brown fox jumps over the wall"; 18 | 19 | console.log(text); 20 | 21 | // To check the length 22 | console.log(text.length) 23 | 24 | // To change the case 25 | console.log(text.toLowerCase()); 26 | console.log(text.toUpperCase()); 27 | 28 | // Accessing the index 29 | console.log(text[5]); 30 | console.log(text.indexOf('o')); 31 | console.log(text.lastIndexOf('o')) 32 | 33 | console.log(text.charAt('12')); 34 | 35 | console.log(text.endsWith("well")); 36 | 37 | console.log(text.split('e')); 38 | 39 | // substring 40 | // splice 41 | // replaceAll 42 | // replace 43 | 44 | 45 | // Array 46 | let arr = ['one', true, 32, ['1','2']]; 47 | let arr2 = ['rio', 'berlin','alicia']; 48 | console.log(arr); 49 | 50 | 51 | console.log(Array.isArray(arr)); 52 | // indexOf('value') 53 | 54 | console.log(arr.reverse()) 55 | 56 | console.log(arr[3]); 57 | 58 | console.log(arr.concat(arr2)); 59 | 60 | // Appending an element 61 | // At the start 62 | arr2.unshift('tokyo'); 63 | console.log(arr2); 64 | // At the end 65 | arr2.push('helsinki'); 66 | console.log(arr2); 67 | 68 | 69 | 70 | // Removing an element 71 | // From the start 72 | arr2.shift('tokyo'); 73 | console.log(arr2); 74 | 75 | // From the end 76 | console.log(arr2.pop()); 77 | 78 | 79 | -------------------------------------------------------------------------------- /Batch 1/Day 3/Notes/scripts/conditionals.js: -------------------------------------------------------------------------------- 1 | console.log("Conditional Statements") 2 | 3 | /* 4 | 1. If 5 | 2. If Else 6 | 3. If ElseIf else 7 | 4. Ternary 8 | */ 9 | 10 | // let age = Number(prompt("Enter your age",0)); 11 | // let age = 18; 12 | 13 | // console.log(age, typeof age); 14 | 15 | /* 16 | if (condition) { 17 | code to evaluate if condition is true 18 | } 19 | */ 20 | // age = '18' 21 | // if (age===18) { 22 | // console.log('you are an adult') 23 | // } 24 | 25 | // if(1){ 26 | // console.log("True") 27 | // } 28 | 29 | // If else 30 | // age = 30; 31 | // voterCard = false; 32 | // if(age >= 18 && voterCard==false){ 33 | // console.log('you are an adult but you dont have a voter card') 34 | // } 35 | 36 | // if(age == 25){ 37 | // console.log("you are 25") 38 | // } 39 | // else{ 40 | // console.log("you are not an adult"); 41 | // } 42 | 43 | // if(age == 18 ){ 44 | // console.log("your age is 18"); 45 | // } 46 | // else if(age==20){ 47 | // console.log("your age is 20"); 48 | // } 49 | // else{ 50 | // console.log("Hello") 51 | // } 52 | 53 | // Ternary Operators 54 | // syntax: conditon ? value if true : value if false 55 | 56 | // let age = 25; 57 | 58 | // console.log(age >= 18 ? 'You are an adult':'You are not an adult'); 59 | 60 | // let result = (age ==18) ? 'You are 18': 61 | // (age == 20) ? 'You are 20': 62 | // 'Your age is neither 18 or 20'; 63 | 64 | // console.log(result); 65 | 66 | 67 | // Switch case 68 | 69 | /* 70 | switch(arg){ 71 | case 1: 72 | code here; 73 | break; 74 | case 2: 75 | code here; 76 | break; 77 | default: 78 | code here; 79 | break; 80 | } 81 | */ 82 | 83 | let age = 58; 84 | 85 | switch (age) { 86 | case 18: 87 | console.log("you are 18"); 88 | break; 89 | case 20: 90 | case 21: 91 | console.log("you are 20 or 21"); 92 | break; 93 | default: 94 | console.log('Your age is neither 18 or 20'); 95 | } 96 | -------------------------------------------------------------------------------- /Batch-2/Day-2/Notes/index.txt: -------------------------------------------------------------------------------- 1 | // numbers 2 | 3 | // let num = 5; 4 | // let num2 = 2; 5 | // Arithmatic operators 6 | 7 | // + - * / % ** 8 | 9 | // console.log(num + num2); 10 | // console.log(num2 - num); 11 | // console.log(num2 * num); 12 | // console.log(num / num2); 13 | // console.log(num % num2); 14 | // console.log(num ** num2); 15 | 16 | // Strings 17 | 18 | let name = "Thor"; 19 | let weapon = "Stormbreaker"; 20 | let age = 1500; 21 | 22 | // let data1 = name + " has " + weapon; 23 | 24 | // templating way of concatinating strings 25 | 26 | // let data2 = `superhero ${name} has ${weapon} and 27 | // his age is ${age}`; 28 | 29 | // let data3 = `

${name}

`; 30 | 31 | // console.log("length is " + weapon.length); 32 | 33 | // console.log(weapon.replace("r", "a")); 34 | 35 | // let index = weapon.indexOf("r"); 36 | // console.log(index); 37 | 38 | // let sub = weapon.substr(weapon.length - 3, 3); 39 | 40 | // let data = "hello"; 41 | 42 | // console.log(data.substr(1, data)); 43 | 44 | // substr(0,) 45 | 46 | // arrays 47 | 48 | // collection of elements of same type 49 | 50 | // let data = ["laptop", "mouse", "keyboard", "monitor", "camera", "mobile"]; 51 | // data.push("mic"); 52 | 53 | // let numbers = [23, 45, 67, 89]; 54 | 55 | // for (let i = 0; i < data.length; i++) { 56 | // console.log(data[i]); 57 | // } 58 | 59 | // data.forEach(function (a) { 60 | // console.log(a); 61 | // }); 62 | 63 | // control statements 64 | 65 | // booleans & conditional statements 66 | // true & false 67 | 68 | // ==,<=,>=,!=,&&,|| 69 | 70 | // let grade = 90; 71 | // console.log(a == b); 72 | // console.log(a <= b); 73 | 74 | // if (grade >= 50 && grade < 70) { 75 | // console.log("second class"); 76 | // } else if (grade >= 70 && grade <= 100) { 77 | // console.log("first class"); 78 | // } else if (grade >= 35 && grade < 50) { 79 | // console.log("third class"); 80 | // } else { 81 | // console.log("fail"); 82 | // } 83 | 84 | // null & undefined 85 | 86 | let data = null; 87 | console.log(data); 88 | 89 | let number = Number("sghf"); 90 | console.log(number); 91 | -------------------------------------------------------------------------------- /Batch 1/Day 4/Notes/scripts/modernjs.js: -------------------------------------------------------------------------------- 1 | console.log("Modern javascript") 2 | 3 | // Destructuring Objects 4 | 5 | // let person = { 6 | // name:'Prasad', 7 | // age:24, 8 | // hobby:'Coding', 9 | // address : { 10 | // city:'Mumbai', 11 | // laneNumber:2, 12 | // }, 13 | // } 14 | 15 | // console.log(person.hobby); 16 | // console.log(person.address.city); 17 | 18 | // const {name , age , address:{laneNumber}} = person; 19 | // console.log(name, age,laneNumber) 20 | 21 | 22 | // Destructuring Arrays 23 | // let arr = ['Robert','Downey','Jr.']; 24 | 25 | // let firstname = arr[0]; 26 | // let lastname = arr[1]; 27 | 28 | // console.log(`${firstname} ${lastname}`) 29 | 30 | // let [firstname,lastname] = ['Robert','Downey','Jr.']; 31 | 32 | // console.log(`${firstname} ${lastname}`); 33 | 34 | 35 | // Spread Operator in Array 36 | 37 | // let friends = ['Vishal', 'Aditya','Nihar']; 38 | 39 | // let contacts = ["Doctor",...friends,"Emergency"]; 40 | // friends.push('Error 404'); 41 | // console.log(friends); 42 | // console.log(contacts); 43 | 44 | 45 | // Spread Operator in Objects 46 | 47 | 48 | // let person = { 49 | // name:'Raj', 50 | // age:25, 51 | // city:'Raipur', 52 | // } 53 | 54 | 55 | // let employee = { 56 | // ...person, 57 | // salary:40000, 58 | // designation:"Accountant" 59 | // } 60 | 61 | // console.log(person) 62 | // console.log(employee) 63 | 64 | 65 | // Arrow Functions 66 | 67 | // let add = function(num1,num2){ 68 | // return num1+num2 69 | // } 70 | 71 | // let result = add(10,20); 72 | // console.log(result) 73 | 74 | // (parameters)=>execute and return the value 75 | // let add = (num1,num2)=> num1+num2; 76 | 77 | // let result = add(10,20); 78 | // console.log(result); 79 | 80 | // let join = (a,b)=>`the value of a is ${a} & b is ${b}` 81 | 82 | // let line = join('Hello', 'World'); 83 | // console.log(line) 84 | 85 | 86 | // let greet = name =>`Hey ${name},Welcome to LetsUpgrade's way of Teaching.` 87 | 88 | // let log = greet('Gaurav') 89 | // console.log(log) 90 | 91 | let greet = ()=> { 92 | console.log("Hello"); 93 | } 94 | greet(); 95 | -------------------------------------------------------------------------------- /Batch 1/Day 5/Notes/scripts/prom-async-call.js: -------------------------------------------------------------------------------- 1 | console.log("Promises"); 2 | 3 | let users = [ 4 | { 5 | name:'Berlin', 6 | email:'b@gmail.com', 7 | }, 8 | { 9 | name:'Rio', 10 | email:'r@gmail.com', 11 | }, 12 | { 13 | name:'Tokyo', 14 | email:'t@gmail.com', 15 | }, 16 | ] 17 | 18 | function getUsers(){ 19 | setTimeout(()=>{ 20 | let result = ''; 21 | users.forEach(user=>{ 22 | result += `The user is ${user.name} \n`; 23 | }); 24 | console.log(result); 25 | },1000); 26 | } 27 | 28 | // function createUser(user, callback){ 29 | // setTimeout(()=>{ 30 | // users.push(user); 31 | // callback(); 32 | // },3000); 33 | // } 34 | 35 | // // getUsers(); 36 | 37 | // createUser({name:'Denver',email:'d@gmail.com'}, getUsers); 38 | 39 | 40 | // Promises 41 | 42 | // function createUser(user){ 43 | // return new Promise((resolve, reject)=>{ 44 | // setTimeout(()=>{ 45 | // users.push(user); 46 | 47 | // const error = false; 48 | 49 | // if(!error){ 50 | // resolve(); 51 | // } 52 | // else{ 53 | // reject("Oops an error occured"); 54 | // } 55 | 56 | // }, 3000); 57 | // }) 58 | // } 59 | 60 | // createUser({name:'Denver',email:'d@gmail.com'}) 61 | // .then(getUsers) 62 | // .catch(error=>console.log(error)); 63 | 64 | 65 | // Example two 66 | 67 | // const userData = new Promise((resolve,reject)=>{ 68 | // const error = false; 69 | 70 | // if(error){ 71 | // reject("an error occured"); 72 | // } 73 | // else{ 74 | // resolve({ 75 | // firstname:"Sachin", 76 | // age:24, 77 | // class:'12th', 78 | // }) 79 | // } 80 | 81 | 82 | // }); 83 | 84 | // userData 85 | // .then(data=>console.log(data)) 86 | // .catch(error=>console.log(error)) 87 | 88 | 89 | // Async Await 90 | 91 | const photos = []; 92 | async function photoUpload(){ 93 | let status = new Promise((resolve, reject)=>{ 94 | setTimeout(()=>{ 95 | photos.push('Avatar'); 96 | resolve('Profile Updated'); 97 | },3000) 98 | }) 99 | 100 | let result = await status; 101 | console.log(photos.length); 102 | } 103 | 104 | photoUpload(); 105 | photoUpload(); -------------------------------------------------------------------------------- /Batch 1/Day 5/Notes/scripts/oops.js: -------------------------------------------------------------------------------- 1 | console.log("OOPS IN JS"); 2 | 3 | // const userOne = { 4 | // name:'Dilip', 5 | // age:20, 6 | // email:'dilip@gmail.com', 7 | // login(){ 8 | // console.log('Dilip has logged in'); 9 | // }, 10 | // logout(){ 11 | // console.log('Dilip has logged out'); 12 | // }, 13 | // } 14 | 15 | // console.log(userOne.email) 16 | 17 | class User { 18 | constructor(name, age,email) { 19 | this.name = name; 20 | this.age = age; 21 | this.email = email; 22 | this.luCoins = 0; 23 | this.courses = []; 24 | } 25 | 26 | static greet(){ 27 | console.log("Hello There"); 28 | } 29 | 30 | login(){ 31 | console.log(`${this.name} has logged in`); 32 | return this; 33 | } 34 | logout(){ 35 | console.log(`${this.name} has logged out`); 36 | return this; 37 | } 38 | addCoins(){ 39 | this.luCoins++; 40 | console.log(`${this.name} has ${this.luCoins} coins`); 41 | return this; 42 | } 43 | getDetails(){ 44 | console.log(`Name is ${this.name}, email is ${this.email}`); 45 | return this; 46 | } 47 | 48 | } 49 | 50 | class Moderator extends User{ 51 | constructor(name,age,email,role){ 52 | super(name,age,email); 53 | this.role = role; 54 | } 55 | 56 | deleteUser(user){ 57 | users = users.filter(u =>{ 58 | return u.email != user.email; 59 | }) 60 | } 61 | 62 | } 63 | 64 | class Admin extends Moderator{ 65 | addCourse(user,course){ 66 | user.courses.push(course); 67 | console.log(user); 68 | } 69 | } 70 | 71 | 72 | let user1 = new User('Dilip',25,'dilip@gmail.com') 73 | let user2 = new User('Krishnan',24,'k@gmai.com') 74 | let mod = new Moderator('Berlin',24,'b@gmail.com','Moderator'); 75 | let admin = new Admin('Rio',25,'r@gmail.com'); 76 | let users = [user1,user2,mod,admin]; 77 | 78 | users.forEach(element => { 79 | console.log(element); 80 | }); 81 | 82 | User.greet(); 83 | admin.addCourse(user1,'Javascript'); 84 | admin.addCourse(user1,'Python'); 85 | 86 | 87 | 88 | // user1.login() 89 | // user1.addCoins(); 90 | // user1.addCoins(); 91 | // user1.addCoins(); 92 | // user1.logout() 93 | 94 | // user1.login().addCoins().addCoins().getDetails().logout(); 95 | 96 | // mod.deleteUser(user1); 97 | // console.log(users); 98 | 99 | 100 | -------------------------------------------------------------------------------- /Batch-2/Day-7-8/Notes/shopping.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 87 | 88 | 89 |
90 |

Shopping 360

91 |
92 | 97 |
98 |
99 | 100 |
101 |
102 |
103 | 104 |
105 |

Cart

106 |
107 |
108 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /Batch 1/Day 6/Notes/scripts/basics.js: -------------------------------------------------------------------------------- 1 | console.log("DOM Basics"); 2 | 3 | // Id - # 4 | // Class - . 5 | 6 | // getting the elements 7 | /* 8 | 1. getElementById 9 | 2. getElementsByClassName 10 | 3. getElementsByTagName 11 | 4. querySelector 12 | 5. querySelectorAll 13 | 14 | */ 15 | 16 | const title = document.getElementById('title'); 17 | 18 | console.log(title); 19 | console.log(title.innerHTML); 20 | console.log(title.innerText); 21 | 22 | const para = document.getElementsByClassName('imp'); 23 | 24 | console.log(para); 25 | 26 | const data = document.getElementsByTagName('p'); 27 | 28 | console.log(data); 29 | 30 | // for (let index = 0; index < data.length; index++) { 31 | // const element = data[index]; 32 | // console.log(element) 33 | 34 | // } 35 | 36 | // const dataarr = [...data]; 37 | const dataarr = Array.from(data); 38 | 39 | dataarr.forEach(el=>{ 40 | console.log(el); 41 | }) 42 | 43 | // console.log(document.querySelector('.imp')); 44 | 45 | // const data1 = document.querySelectorAll('.imp'); 46 | const data1 = document.querySelectorAll('p'); 47 | console.log(data1); 48 | 49 | // data1.forEach(el=>{ 50 | // console.log(el); 51 | // }) 52 | 53 | 54 | 55 | // Changing Attributes 56 | 57 | const attr = document.getElementById('attribute'); 58 | 59 | console.log(attr.getAttribute('id')); 60 | 61 | // attr.setAttribute('style','color:red;'); 62 | // attr.setAttribute('style','background-color:blue'); 63 | 64 | attr.classList.add('blue'); 65 | attr.classList.add('bgYellow'); 66 | // attr.classList.remove('blue'); 67 | // attr.classList.toggle('blue'); 68 | // attr.classList.toggle('blue'); 69 | 70 | 71 | // attr.style.color = "red"; 72 | // attr.style.backgroundColor = "yellowgreen"; 73 | // attr.style.backgroundColor = ""; 74 | 75 | 76 | let fruits = ['apple','orange','watermelon','mango','grapes']; 77 | 78 | 79 | console.log(fruits); 80 | 81 | const list = document.querySelector('#list'); 82 | console.log(list); 83 | 84 | fruits.forEach(fruit=>{ 85 | // list.innerText += `
  • ${fruit}
    • `; 86 | list.innerHTML += `
  • ${fruit}
    • `; 87 | }) 88 | 89 | 90 | // dataarr 91 | 92 | dataarr.forEach(para=>{ 93 | if(para.innerText.includes('amet')){ 94 | para.classList.add('highlight'); 95 | } 96 | }) 97 | 98 | 99 | // Button Click 100 | 101 | function showAlert(){ 102 | alert("Hey I am an alert from the button"); 103 | } 104 | 105 | const button = document.getElementById('btn'); 106 | 107 | button.onclick = function(){ 108 | alert("Hey I am an alert from the button"); 109 | } 110 | 111 | 112 | // get name from user and change the title 113 | // const name = prompt("Enter your name","Anonymous"); 114 | 115 | // title.innerText += `Welcome to the family ${name}`; 116 | 117 | 118 | const dmode = document.getElementById('dark'); 119 | 120 | dmode.onclick = function changeColor(){ 121 | 122 | document.body.style.backgroundColor = 'black'; 123 | document.body.style.color = 'white'; 124 | document.body.style.fontFamily = 'Helvetica'; 125 | 126 | } 127 | 128 | 129 | const ctime = document.getElementById('time'); 130 | 131 | 132 | function clock(){ 133 | let date = new Date(); 134 | let time = date.toLocaleTimeString(); 135 | ctime.innerText = time; 136 | } 137 | 138 | // clock(); 139 | 140 | setInterval(clock,1000); 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /Batch-2/Day-5-6/Notes/project1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Crud Application 7 | 65 | 66 | 67 |
    68 |
    69 |
    70 |
    71 | 72 | 73 | 74 | 75 | 76 |
    77 |
    78 |
    79 |
    80 | 81 |
    82 |

    Superheroes

    83 | 84 |
    85 |
    86 | 87 | 88 | 89 | 90 | 91 |
    92 |
    93 | 94 |
    95 | 101 |
    102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
    Sr noNameAgePlanetHeightActions
    116 |
    117 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /Batch-2/Day-5-6/Notes/permanentproject1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Crud Application 7 | 65 | 66 | 67 |
    68 |
    69 |
    70 |
    71 | 72 | 73 | 74 | 75 | 76 |
    77 |
    78 |
    79 |
    80 | 81 |
    82 |

    Superheroes

    83 | 84 |
    85 |
    86 | 87 | 88 | 89 | 90 | 91 |
    92 |
    93 | 94 |
    95 | 101 |
    102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
    Sr noNameAgePlanetHeightActions
    116 |
    117 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /Batch 1/Day 6/Notes/project1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Read More/Read Less 7 | 8 | 9 | 10 | 11 |
    12 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam voluptatum nisi quis ullam debitis distinctio, iste pariatur vero deleniti eveniet a quo, voluptatibus saepe voluptate rerum quos quisquam iusto autem placeat reiciendis quod officiis, ipsam et. Neque debitis, iste itaque repellendus natus eum. Voluptatibus quos praesentium blanditiis facere amet sed. Quasi, fugit perspiciatis iure facere alias aut nam, maxime quaerat eum magni cum porro nisi ipsam, similique tenetur ab a vero animi velit ad commodi. Placeat a nobis ullam voluptatem. Placeat libero suscipit nihil dolore quis. Consectetur, ipsum! Rem, officiis nostrum eveniet atque ratione earum non tempore optio quos iusto! Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum recusandae animi ab illo at veniam similique illum, officia soluta adipisci aliquam asperiores deleniti totam. Maiores possimus voluptatem mollitia tempora pariatur sunt sint fugit molestiae commodi sapiente impedit molestias quasi, ab vitae nesciunt recusandae, sequi itaque! Harum maiores numquam commodi placeat nesciunt a. Quod illo expedita assumenda esse autem incidunt vitae architecto asperiores voluptatibus, inventore sed ipsa, rem itaque? Officiis, eos! Omnis placeat aut unde ipsa quis, aperiam dolores, animi rerum iure quos asperiores aspernatur reprehenderit delectus nihil iusto! Esse aperiam, vitae commodi minima rerum a pariatur quo nobis ullam mollitia? Dolore et similique consectetur magnam. Aut, id, maiores quam quidem dicta vitae nulla harum totam quaerat, similique dolorem consequatur modi. Eius, dolorum. Sed sapiente ea blanditiis hic explicabo, excepturi libero asperiores deserunt aperiam quos? Modi in, officiis veritatis ipsum ad facilis suscipit corrupti minima mollitia voluptatum, fugit autem impedit temporibus aperiam inventore, itaque quo facere tempora accusantium accusamus animi ab! Quaerat, ea saepe, laudantium, ipsa numquam enim labore error eum sed veniam quo. Autem deleniti asperiores inventore earum temporibus harum, porro assumenda ut nulla libero non neque eum esse, ratione ipsa. Debitis ullam iure dignissimos quia hic ex at quo aspernatur totam nulla unde optio necessitatibus qui culpa facilis, nemo recusandae tempore! Aspernatur minima inventore ratione nihil placeat ab deleniti unde, fugiat magnam? Distinctio sapiente voluptatibus quasi delectus voluptatem consequuntur sit quae! Voluptatibus deleniti porro quam ullam, sunt obcaecati quaerat dignissimos, vel quos eligendi odio dolorum adipisci labore et culpa? Quos accusamus modi optio eveniet, iusto asperiores porro veniam suscipit, magnam rerum dignissimos pariatur voluptas, iste excepturi eum repudiandae commodi dolorum. Architecto aliquid atque esse deleniti, officiis ea dolores, earum quidem ducimus aliquam hic quod dolorum vero debitis nostrum dignissimos itaque quae rem aperiam aspernatur laudantium, eaque tempora sit. Incidunt ipsum delectus quos dolorum recusandae quo et, voluptatum velit asperiores cumque, illo ipsa, necessitatibus perspiciatis. Laborum laudantium maiores laboriosam ad tempore quaerat doloremque error exercitationem dolor. Culpa corporis quis distinctio iure quae, atque labore optio quas nihil? Sed aliquid dolor nisi beatae, cumque esse vel. 13 |

    14 |
    15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Batch-2/Day-5-6/Notes/Scripts/project1.js: -------------------------------------------------------------------------------- 1 | let superheroes = [ 2 | { 3 | name: "Thor", 4 | age: 1500, 5 | planet: "Asgard", 6 | height: "6.3", 7 | }, 8 | { 9 | name: "Iron Man", 10 | age: 34, 11 | planet: "Earth", 12 | height: "5.10", 13 | }, 14 | { 15 | name: "Captain America", 16 | age: 101, 17 | planet: "Earth", 18 | height: "6", 19 | }, 20 | ]; 21 | 22 | function display(superarray) { 23 | let tabledata = ""; 24 | 25 | superarray.forEach(function (superhero, index) { 26 | let currentrow = ` 27 | ${index + 1} 28 | ${superhero.name} 29 | ${superhero.age} 30 | ${superhero.planet} 31 | ${superhero.height} 32 | 33 | 34 | 35 | 36 | `; 37 | 38 | tabledata += currentrow; 39 | }); 40 | 41 | document.getElementsByClassName("tdata")[0].innerHTML = tabledata; 42 | // document.getElementById("tdata").innerHTML = tabledata; 43 | } 44 | 45 | display(superheroes); 46 | 47 | function addSuperhero(e) { 48 | e.preventDefault(); 49 | let superhero = {}; 50 | let name = document.getElementById("name").value; 51 | let age = document.getElementById("age").value; 52 | let planet = document.getElementById("planet").value; 53 | let height = document.getElementById("height").value; 54 | superhero.name = name; 55 | superhero.age = Number(age); 56 | superhero.planet = planet; 57 | superhero.height = height; 58 | 59 | superheroes.push(superhero); 60 | 61 | display(superheroes); 62 | 63 | document.getElementById("name").value = ""; 64 | document.getElementById("age").value = ""; 65 | document.getElementById("planet").value = ""; 66 | document.getElementById("height").value = ""; 67 | } 68 | 69 | function searchByName() { 70 | let searchValue = document.getElementById("searchName").value; 71 | 72 | let newdata = superheroes.filter(function (superhero) { 73 | return ( 74 | superhero.name.toUpperCase().indexOf(searchValue.toUpperCase()) != -1 75 | ); 76 | }); 77 | 78 | display(newdata); 79 | } 80 | 81 | function deleteSuperhero(index) { 82 | superheroes.splice(index, 1); 83 | display(superheroes); 84 | } 85 | 86 | let updateIndex; 87 | 88 | function copySuperhero(index) { 89 | updateIndex = index; 90 | let superhero = superheroes[index]; 91 | 92 | document.getElementById("upname").value = superhero.name; 93 | document.getElementById("upage").value = superhero.age; 94 | document.getElementById("upplanet").value = superhero.planet; 95 | document.getElementById("upheight").value = superhero.height; 96 | } 97 | 98 | function updateSuperhero(e) { 99 | e.preventDefault(); 100 | let superhero = superheroes[updateIndex]; 101 | console.log(superhero); 102 | let name = document.getElementById("upname").value; 103 | let age = document.getElementById("upage").value; 104 | let planet = document.getElementById("upplanet").value; 105 | let height = document.getElementById("upheight").value; 106 | superhero.name = name; 107 | superhero.age = Number(age); 108 | superhero.planet = planet; 109 | superhero.height = height; 110 | console.log(superhero); 111 | 112 | display(superheroes); 113 | 114 | // code for hiding from anywhere 115 | let modal = document.getElementsByClassName("modal")[0]; 116 | modal.style.display = "none"; 117 | } 118 | 119 | function showModal(index) { 120 | let modal = document.getElementsByClassName("modal")[0]; 121 | modal.style.display = "block"; 122 | 123 | copySuperhero(index); 124 | } 125 | 126 | function hideModal(event) { 127 | if (event.target.className == "modal") { 128 | let modal = document.getElementsByClassName("modal")[0]; 129 | modal.style.display = "none"; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /Batch-2/Day-7-8/Notes/Scripts/shopping.txt: -------------------------------------------------------------------------------- 1 | // guys i have made it a id based application as this is how to works in real world 2 | // there are only 2 easy to understand changes read the code carefully 3 | 4 | // new function getProductByID() is created check it out 5 | 6 | let products = [ 7 | { 8 | id: 1, 9 | name: "White Tshirt", 10 | size: "L", 11 | color: "white", 12 | price: 1200, 13 | image: "product1.jpeg", 14 | description: "Good looking white tshirt", 15 | }, 16 | { 17 | id: 2, 18 | name: "Black Shirt", 19 | size: "M", 20 | color: "Black", 21 | price: 1500, 22 | image: "product2.jpeg", 23 | description: "Good looking black shirt", 24 | }, 25 | 26 | { 27 | id: 3, 28 | name: "Checked Shirt", 29 | size: "S", 30 | color: "White & Black", 31 | price: 900, 32 | image: "product3.png", 33 | description: "Good looking Checked Shirt", 34 | }, 35 | 36 | { 37 | id: 4, 38 | name: "Black Female Blazer", 39 | size: "M", 40 | color: "Black", 41 | price: 3000, 42 | image: "product4.jpeg", 43 | description: "Beautifull Blazer", 44 | }, 45 | 46 | { 47 | id: 5, 48 | name: "Navy Blue Top", 49 | size: "S", 50 | color: "Blue", 51 | price: 1300, 52 | image: "product5.jpeg", 53 | description: "Good looking Top", 54 | }, 55 | 56 | { 57 | id: 6, 58 | name: "Indian Dress", 59 | size: "M", 60 | color: "Henna", 61 | price: 1500, 62 | image: "product6.jpg", 63 | description: "Good looking Traditional Dress", 64 | }, 65 | ]; 66 | 67 | cart = []; 68 | 69 | function displayProducts(productsData, who = "productwrapper") { 70 | let productsString = ""; 71 | 72 | productsData.forEach(function (product, index) { 73 | let { id, name, image, color, description, price, size } = product; 74 | 75 | if (who == "productwrapper") { 76 | productsString += `
    77 |
    78 | 79 |
    80 |

    ${name}

    81 |

    Price : ${price}$

    82 |

    Size : ${size}

    83 |

    Color : ${color}

    84 |

    ${description}

    85 |

    86 | 87 |

    88 |
    `; 89 | } else if (who == "cart") { 90 | productsString += `
    91 |
    92 | 93 |
    94 |

    ${name}

    95 |

    Price : ${price}$

    96 |

    Size : ${size}

    97 |

    Color : ${color}

    98 |

    ${description}

    99 |

    100 | 101 |

    102 |
    `; 103 | } 104 | }); 105 | 106 | document.getElementById(who).innerHTML = productsString; 107 | } 108 | 109 | displayProducts(products); 110 | 111 | function searchProduct(searchValue) { 112 | let searchedProducts = products.filter(function (product, index) { 113 | let searchString = 114 | product.name + " " + product.color + " " + product.description; 115 | 116 | return searchString.toUpperCase().indexOf(searchValue.toUpperCase()) != -1; 117 | }); 118 | 119 | displayProducts(searchedProducts); 120 | } 121 | 122 | // this is a function to get a product based on id from a particular array 123 | // @param 1 the array u want to get products from 124 | // @param 2 the id u want to search 125 | 126 | function getProductByID(productArray, id) { 127 | return productArray.find(function (product) { 128 | return product.id == id; 129 | }); 130 | } 131 | 132 | function addToCart(id) { 133 | // getting the product 134 | let pro = getProductByID(products, id); 135 | 136 | // putting in cart 137 | cart.push(pro); 138 | displayProducts(cart, "cart"); 139 | } 140 | 141 | function removeFromCart(id) { 142 | // getting the index based on id 143 | let index = cart.findIndex(function (product) { 144 | return product.id == id; 145 | }); 146 | 147 | // removing from cart based on index 148 | cart.splice(index, 1); 149 | displayProducts(cart, "cart"); 150 | } 151 | -------------------------------------------------------------------------------- /Batch-2/Day-5-6/Notes/Scripts/permanentproject1.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | let initialsuperheroes = [ 3 | { 4 | name: "Thor", 5 | age: 1500, 6 | planet: "Asgard", 7 | height: "6.3", 8 | }, 9 | { 10 | name: "Iron Man", 11 | age: 34, 12 | planet: "Earth", 13 | height: "5.10", 14 | }, 15 | { 16 | name: "Captain America", 17 | age: 101, 18 | planet: "Earth", 19 | height: "6", 20 | }, 21 | ]; 22 | 23 | if (localStorage.getItem("superheroes") == null) { 24 | localStorage.setItem("superheroes", JSON.stringify(initialsuperheroes)); 25 | } 26 | }; 27 | 28 | function display(superarray = undefined) { 29 | let tabledata = ""; 30 | let superheroes; 31 | if (superarray == undefined) { 32 | superheroes = JSON.parse(localStorage.getItem("superheroes")); 33 | } else { 34 | superheroes = superarray; 35 | } 36 | 37 | superheroes.forEach(function (superhero, index) { 38 | let currentrow = ` 39 | ${index + 1} 40 | ${superhero.name} 41 | ${superhero.age} 42 | ${superhero.planet} 43 | ${superhero.height} 44 | 45 | 46 | 47 | 48 | `; 49 | 50 | tabledata += currentrow; 51 | }); 52 | 53 | document.getElementsByClassName("tdata")[0].innerHTML = tabledata; 54 | // document.getElementById("tdata").innerHTML = tabledata; 55 | } 56 | 57 | display(); 58 | 59 | function addSuperhero(e) { 60 | e.preventDefault(); 61 | let superhero = {}; 62 | let name = document.getElementById("name").value; 63 | let age = document.getElementById("age").value; 64 | let planet = document.getElementById("planet").value; 65 | let height = document.getElementById("height").value; 66 | superhero.name = name; 67 | superhero.age = Number(age); 68 | superhero.planet = planet; 69 | superhero.height = height; 70 | 71 | // superheroes.push(superhero); 72 | 73 | let superheroes = JSON.parse(localStorage.getItem("superheroes")); 74 | superheroes.push(superhero); 75 | localStorage.setItem("superheroes", JSON.stringify(superheroes)); 76 | 77 | display(); 78 | 79 | document.getElementById("name").value = ""; 80 | document.getElementById("age").value = ""; 81 | document.getElementById("planet").value = ""; 82 | document.getElementById("height").value = ""; 83 | } 84 | 85 | function searchByName() { 86 | let searchValue = document.getElementById("searchName").value; 87 | let superheroes = JSON.parse(localStorage.getItem("superheroes")); 88 | let newdata = superheroes.filter(function (superhero) { 89 | return ( 90 | superhero.name.toUpperCase().indexOf(searchValue.toUpperCase()) != -1 91 | ); 92 | }); 93 | 94 | display(newdata); 95 | } 96 | 97 | function deleteSuperhero(index) { 98 | let superheroes = JSON.parse(localStorage.getItem("superheroes")); 99 | superheroes.splice(index, 1); 100 | localStorage.setItem("superheroes", JSON.stringify(superheroes)); 101 | display(); 102 | } 103 | 104 | let updateIndex; 105 | 106 | function copySuperhero(index) { 107 | let superheroes = JSON.parse(localStorage.getItem("superheroes")); 108 | updateIndex = index; 109 | let superhero = superheroes[index]; 110 | 111 | document.getElementById("upname").value = superhero.name; 112 | document.getElementById("upage").value = superhero.age; 113 | document.getElementById("upplanet").value = superhero.planet; 114 | document.getElementById("upheight").value = superhero.height; 115 | } 116 | 117 | function updateSuperhero(e) { 118 | e.preventDefault(); 119 | let superheroes = JSON.parse(localStorage.getItem("superheroes")); 120 | let superhero = superheroes[updateIndex]; 121 | console.log(superhero); 122 | let name = document.getElementById("upname").value; 123 | let age = document.getElementById("upage").value; 124 | let planet = document.getElementById("upplanet").value; 125 | let height = document.getElementById("upheight").value; 126 | superhero.name = name; 127 | superhero.age = Number(age); 128 | superhero.planet = planet; 129 | superhero.height = height; 130 | 131 | localStorage.setItem("superheroes", JSON.stringify(superheroes)); 132 | display(superheroes); 133 | 134 | // code for hiding from anywhere 135 | let modal = document.getElementsByClassName("modal")[0]; 136 | modal.style.display = "none"; 137 | } 138 | 139 | function showModal(index) { 140 | let modal = document.getElementsByClassName("modal")[0]; 141 | modal.style.display = "block"; 142 | 143 | copySuperhero(index); 144 | } 145 | 146 | function hideModal(event) { 147 | if (event.target.className == "modal") { 148 | let modal = document.getElementsByClassName("modal")[0]; 149 | modal.style.display = "none"; 150 | } 151 | } 152 | --------------------------------------------------------------------------------