├── DOM ├── app.js ├── 09-styles-using-dom │ ├── app.js │ └── index.html ├── 03-Selectors-part3 │ ├── app.js │ └── index.html ├── index.html ├── 05-textContent,innerHtml,innerText │ ├── app.js │ └── index.html ├── 01-Selectors-part1 │ ├── app.js │ └── index.html ├── 06-attributes │ ├── app.js │ └── index.html ├── 04-DOM-navigation │ ├── index.html │ └── app.js ├── 07-class_classList │ ├── app.js │ └── index.html ├── 02-Selectors-part2 │ ├── app.js │ └── index.html └── 08-Nodes-playing │ ├── app.js │ └── index.html ├── JavaScript Files ├── InlineJavaScript │ ├── style.css │ └── index.html ├── .DS_Store ├── ExternalJavaScript │ ├── app.js │ ├── about.html │ └── index.html ├── " " or ' ' │ ├── app.js │ └── index.html ├── HelperMethods │ ├── app.js │ └── index.html ├── ConditionalStatementBasics │ ├── app.js │ └── index.html ├── WhileLoop │ ├── app.js │ └── index.html ├── Statements&Comments │ ├── app.js │ └── index.html ├── VariableRules │ ├── app.js │ └── index.html ├── DoWhileLoop │ ├── app.js │ └── index.html ├── Equality │ ├── app.js │ └── index.html ├── ForLoop │ ├── app.js │ └── index.html ├── Arrays │ ├── index.html │ └── app.js ├── Null vs Undefined │ ├── app.js │ └── index.html ├── Numbers │ ├── index.html │ └── app.js ├── DataTypes │ ├── index.html │ └── app.js ├── Variables │ ├── index.html │ └── app.js ├── letConstVar │ ├── app.js │ └── index.html ├── ImplicitTypeConversion │ ├── index.html │ └── app.js ├── String Concatination │ ├── index.html │ └── app.js ├── Functions,Declare&Invoke │ ├── index.html │ └── app.js ├── Number Additional Features │ ├── index.html │ └── app.js ├── VAriableAssignValueLater │ ├── index.html │ └── app.js ├── ArrayIterations │ ├── app.js │ └── index.html ├── LogicalOperators │ ├── app.js │ └── index.html ├── VariableLookUp │ ├── app.js │ └── index.html ├── Truthy and Falsy │ ├── app.js │ └── index.html ├── BackTicks │ ├── app.js │ └── index.html ├── ForEach_ArrayMethod │ ├── app.js │ └── index.html ├── LocalScope │ ├── app.js │ └── index.html ├── Functions,Return │ ├── app.js │ └── index.html ├── ExerciseFullName │ ├── app.js │ └── index.html ├── ConditionalStatement_2 │ ├── app.js │ └── index.html ├── Functions,Parameters,Arguments │ ├── app.js │ └── index.html ├── GLobalScope │ ├── index.html │ └── app.js ├── ExerciseCalculate │ ├── index.html │ └── app.js ├── StringMethods │ ├── index.html │ └── app.js ├── TernaryOperator │ ├── index.html │ └── app.js ├── Value vs Reference │ ├── index.html │ └── app.js ├── ArrayProperties&Methods │ ├── index.html │ └── app.js ├── Objects │ ├── index.html │ └── app.js ├── Switch │ ├── index.html │ └── app.js ├── Callback & HigherOrderFunctions │ ├── index.html │ └── app.js ├── Math_Object │ ├── app.js │ └── index.html ├── Functions, Expressions │ ├── index.html │ └── app.js ├── Map_ArrayMethod │ ├── index.html │ └── app.js ├── filter_ArrayMethod │ ├── index.html │ └── app.js ├── find_ArrayMethod │ ├── index.html │ └── app.js ├── reduce_ArrayMethod │ ├── index.html │ └── app.js ├── index.html ├── Date Object │ ├── index.html │ └── app.js ├── app.js └── InternalJavaScript │ └── index.html └── .DS_Store /DOM/app.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /JavaScript Files/InlineJavaScript/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/racharlasrikanth/new-javascript-full-course/HEAD/.DS_Store -------------------------------------------------------------------------------- /JavaScript Files/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/racharlasrikanth/new-javascript-full-course/HEAD/JavaScript Files/.DS_Store -------------------------------------------------------------------------------- /JavaScript Files/ExternalJavaScript/app.js: -------------------------------------------------------------------------------- 1 | document.querySelectorAll(".btn").forEach((item) => { 2 | item.addEventListener("click", () => { 3 | alert("This is External"); 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /JavaScript Files/" " or ' '/app.js: -------------------------------------------------------------------------------- 1 | // "" or '' 2 | 3 | // const firstName = 'Srikanth\'s have HTML, CSS, JavaScript Coruses'; 4 | const firstName = "Srikanth's have HTML, CSS, JavaScript Coruses"; 5 | console.log(firstName); -------------------------------------------------------------------------------- /JavaScript Files/HelperMethods/app.js: -------------------------------------------------------------------------------- 1 | // document.write("Hello World"); 2 | // alert("Hello World"); 3 | // console.log("Hello World"); 4 | 5 | document.write({ name: "srikanth" }); 6 | alert({ name: "srikanth" }); 7 | console.log({ name: "srikanth" }); 8 | -------------------------------------------------------------------------------- /DOM/09-styles-using-dom/app.js: -------------------------------------------------------------------------------- 1 | const navbar = document.querySelector(".navbar"); 2 | 3 | // navbar.style.backgroundColor = "red"; 4 | // navbar.style.color = "white"; 5 | // navbar.style.fontSize = "20px"; 6 | 7 | navbar.classList.add("navbar-styles"); 8 | console.log(navbar.style); 9 | -------------------------------------------------------------------------------- /JavaScript Files/ConditionalStatementBasics/app.js: -------------------------------------------------------------------------------- 1 | // Conditional Statements 2 | // >, <, >=, <=, ==, ===, !=, !== 3 | 4 | const value1 = 2 < 1; 5 | // console.log(typeof value1); 6 | 7 | if (value1) { 8 | console.log("Hello Everyone!"); 9 | } else { 10 | console.log("heyyyy!!"); 11 | } 12 | -------------------------------------------------------------------------------- /JavaScript Files/WhileLoop/app.js: -------------------------------------------------------------------------------- 1 | // Loops 2 | // Repeatedly run a block of code while condition is true 3 | // While Loop 4 | 5 | let amount = 10; 6 | 7 | while (amount > 0) { 8 | console.log("I have " + amount + " dollars so i will go to shopping"); 9 | amount--; // amount = amount - 1; 10 | } 11 | -------------------------------------------------------------------------------- /JavaScript Files/Statements&Comments/app.js: -------------------------------------------------------------------------------- 1 | // I woke up Early today. 2 | // Statements - set of instructions 3 | // Comments - Shortcut Command + / 4 | 5 | // These are statements 6 | console.log("hello world"); 7 | 8 | console.log("hello students"); 9 | console.log("hello my friend"); 10 | console.log("hello world"); 11 | -------------------------------------------------------------------------------- /JavaScript Files/VariableRules/app.js: -------------------------------------------------------------------------------- 1 | // Can contain digits, letters, underscore, $ 2 | // Must start with letter, $ or _ 3 | 4 | // no keyword 5 | // cannot start with number 6 | 7 | // case sensitive - fullname vs FullName 8 | 9 | // camelCase or underscore 10 | 11 | let first_name = "random variable"; 12 | console.log(first_name); 13 | -------------------------------------------------------------------------------- /JavaScript Files/DoWhileLoop/app.js: -------------------------------------------------------------------------------- 1 | // Loops 2 | // Repeatedly run a block of code while condition is true 3 | // Do While Loop 4 | // Code block first, Second Condition 5 | // Runs at least 6 | 7 | let amount = 8; 8 | 9 | do { 10 | console.log("You have " + amount + " dollars"); 11 | amount++; 12 | console.log(" ehyyy"); 13 | } while (amount < 10); 14 | -------------------------------------------------------------------------------- /DOM/03-Selectors-part3/app.js: -------------------------------------------------------------------------------- 1 | // getelementByid() 2 | // getElementByTagName() 3 | // getElementByClassName() 4 | 5 | // querySelector() 6 | // querySelectorAll() 7 | 8 | const listItem = document.querySelector("ul li:nth-child(3)"); 9 | console.log(listItem); 10 | 11 | const allParas = document.querySelectorAll( 12 | ".text-para1,.text-para2,.text-para3" 13 | ); 14 | console.log(allParas); 15 | -------------------------------------------------------------------------------- /DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/Equality/app.js: -------------------------------------------------------------------------------- 1 | // Conditional Statements 2 | // Comparison Operators 3 | // >, <, >=, <=, ==, ===, !=, !== 4 | // == checks only value 5 | // === checks value and type 6 | 7 | const num1 = 10; // type=number 8 | const num2 = "10"; // type=string 9 | 10 | const value1 = num1 != num2; 11 | const value2 = num1 !== num2; 12 | 13 | console.log(value1); 14 | console.log(value2); 15 | -------------------------------------------------------------------------------- /JavaScript Files/ForLoop/app.js: -------------------------------------------------------------------------------- 1 | // Loops 2 | // Repeatedly run a block of code while condition is true 3 | // For Loop 4 | // for(Initialization, Condition, Increment/Decrement) 5 | 6 | // let i; 7 | // for (i = 0; i <= 10; i++) { 8 | // console.log("The number is : " + i); 9 | // } 10 | 11 | for (let number = 10; number >= 0; number--) { 12 | console.log("The number is : " + number); 13 | } 14 | -------------------------------------------------------------------------------- /DOM/05-textContent,innerHtml,innerText/app.js: -------------------------------------------------------------------------------- 1 | // innerHtml 2 | // innerText 3 | // textContent 4 | 5 | 6 | const para = document.querySelector('.para'); 7 | console.log(para); 8 | 9 | console.log(para.textContent); 10 | console.log(para.innerText); 11 | console.log(para.innerHTML); 12 | 13 | para.textContent = "Hello srikanth"; 14 | para.innerHTML = "

Hello everyone

"; 15 | para.innerText ="welcome" -------------------------------------------------------------------------------- /JavaScript Files/Arrays/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/Null vs Undefined/app.js: -------------------------------------------------------------------------------- 1 | // Null and Undefined 2 | // Both represent no value 3 | 4 | // Undefined - "Javascript cannot find value for this." 5 | // variable without value 6 | // missing function arguments 7 | // missing object properties 8 | 9 | // Null - "Developer sets the value" 10 | 11 | let number1 = 20 + null; // 20 + 0 12 | console.log(number1); 13 | 14 | let number2 = null; 15 | console.log(number2); 16 | -------------------------------------------------------------------------------- /JavaScript Files/Numbers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/" " or ' '/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/DataTypes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/HelperMethods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/VariableRules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/Variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/letConstVar/app.js: -------------------------------------------------------------------------------- 1 | // LET VS CONST VS VAR 2 | 3 | // Using Var 4 | var someValue = "some data"; 5 | someValue = "new value added for var"; 6 | 7 | // Using Let 8 | let firstName; 9 | firstName = "Srikanth Racharla"; 10 | 11 | // Using Const - we cannot re-assign 12 | const address = "HYD"; 13 | // address = "Hyderabad"; 14 | 15 | console.log(someValue); 16 | console.log(firstName); 17 | console.log(address); 18 | -------------------------------------------------------------------------------- /JavaScript Files/letConstVar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/ImplicitTypeConversion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/Statements&Comments/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/String Concatination/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/Functions,Declare&Invoke/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/Number Additional Features/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/String Concatination/app.js: -------------------------------------------------------------------------------- 1 | // String Concatination - Combine String Values 2 | // `` - backticks (template strings) easier option. 3 | 4 | // const firstName = "Srikanth"; 5 | // const lastName = "Racharla"; 6 | // let fullName = firstName + " " + lastName; 7 | 8 | // console.log("My full name is: " + fullName); 9 | 10 | let website = "youtube"; 11 | let url = "https://www." + website + ".com"; 12 | console.log(url); 13 | -------------------------------------------------------------------------------- /JavaScript Files/VAriableAssignValueLater/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

JavaScript Tutorials

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript Files/ArrayIterations/app.js: -------------------------------------------------------------------------------- 1 | // Powerfull Array Methods 2 | // forEach, map, filter, find, reduce 3 | // Iterate over array - no for loop required 4 | // Accept CALLBACK function as an argument, calls Callback against each item in a array. Reference Item in the Callback Paramater. 5 | 6 | const numbers = [0, 1, 2, 3, 4]; 7 | 8 | // show all numbers 9 | 10 | for (let i = 0; i < numbers.length; i++) { 11 | console.log(numbers[i]); 12 | } 13 | -------------------------------------------------------------------------------- /JavaScript Files/LogicalOperators/app.js: -------------------------------------------------------------------------------- 1 | // Logical Operators 2 | // (|| - OR), (&& - And), ! 3 | 4 | const userName = "Emma"; 5 | const age = 37; 6 | 7 | if (userName === "Emma" && age !== 27) { 8 | console.log("Correct values"); 9 | } else { 10 | console.log("Wrong values"); 11 | } 12 | 13 | // if (userName === "Emma" || userName === "Ron") { 14 | // console.log("Heyy How are you!!"); 15 | // } else { 16 | // console.log("Wrong Values"); 17 | // } 18 | -------------------------------------------------------------------------------- /JavaScript Files/VariableLookUp/app.js: -------------------------------------------------------------------------------- 1 | // Variable Lookup 2 | // {} - code block 3 | 4 | const globalNumber = 5; 5 | 6 | function add(num1, num2) { 7 | const globalNumber = 20; 8 | const result = num1 + num2 + globalNumber; 9 | function multiply() { 10 | const globalNumber = 100; 11 | const multiplyResult = result * globalNumber; 12 | console.log(multiplyResult); 13 | } 14 | multiply(); 15 | return result; 16 | } 17 | 18 | console.log(add(4, 3)); 19 | -------------------------------------------------------------------------------- /JavaScript Files/Truthy and Falsy/app.js: -------------------------------------------------------------------------------- 1 | // Truthy and Falsy 2 | // "",'',``,0 ,-0 ,NaN ,false, null, undefined 3 | 4 | const bool1 = true; 5 | const bool2 = 2 > 1; 6 | 7 | let text = null; 8 | 9 | if (text) { 10 | console.log(`Hey this is ${text}`); 11 | } else { 12 | console.log("There is no text"); 13 | } 14 | 15 | // if (bool1) { 16 | // console.log("Hey it is working!"); 17 | // } 18 | // if (bool2) { 19 | // console.log("Hey it is also working!!"); 20 | // } 21 | -------------------------------------------------------------------------------- /JavaScript Files/Variables/app.js: -------------------------------------------------------------------------------- 1 | // Variable - Most basic building block 2 | // Variables - Store, Access, Modify === value 3 | // Declare, Assignment Operator, Assign Value 4 | 5 | let name = "This is Srikanth Racharla"; 6 | console.log(name); 7 | // somoe code 8 | console.log(name); 9 | // somoe code 10 | console.log(name); 11 | // somoe code 12 | console.log(name); 13 | // somoe code 14 | console.log(name); 15 | // somoe code 16 | console.log(name); 17 | // somoe code 18 | -------------------------------------------------------------------------------- /JavaScript Files/BackTicks/app.js: -------------------------------------------------------------------------------- 1 | // Template Literals - ES6+ 2 | // Backtick Characters `` --> above tab (left from one) 3 | // Interpolation ${} - Insert Expression(value) 4 | 5 | const firstName = "Emma"; 6 | const age = 27; 7 | 8 | const sentance = "Hey it's " + firstName + " she is " + age + " years old"; 9 | 10 | const value = `Hey it's ${firstName} she is ${age} years old. Math Calc ${ 11 | 4 + 3 12 | }`; 13 | 14 | console.log(value); 15 | 16 | console.log(sentance); 17 | -------------------------------------------------------------------------------- /JavaScript Files/VAriableAssignValueLater/app.js: -------------------------------------------------------------------------------- 1 | // Variable - Most basic building block 2 | // Variables - Store, Access, Modify === value 3 | // Declare, Assignment Operator, Assign Value 4 | // Assign value later, Modify Existing 5 | 6 | let firstName = "This is Srikanth Racharla"; 7 | let address, zip, state; 8 | address = "Hyderabad"; 9 | zip = "500100"; 10 | state = "TG"; 11 | firstName = "Srikanth"; 12 | console.log(address, zip, state); 13 | console.log(firstName); 14 | -------------------------------------------------------------------------------- /DOM/01-Selectors-part1/app.js: -------------------------------------------------------------------------------- 1 | // getelementByid() 2 | 3 | console.log(document.getElementById("text-div")); 4 | console.log(document.getElementById("item")); 5 | 6 | // getElementByTagName() 7 | 8 | const tagItems = document.getElementsByTagName("p"); 9 | console.log(tagItems); 10 | 11 | const newTagItems = [...tagItems]; 12 | console.log(newTagItems); 13 | 14 | // getElementByClassName() 15 | 16 | const classItems = document.getElementsByClassName("content"); 17 | console.log(classItems[1]); 18 | -------------------------------------------------------------------------------- /JavaScript Files/ForEach_ArrayMethod/app.js: -------------------------------------------------------------------------------- 1 | // forEach 2 | // Does not return new Array 3 | 4 | const people = [ 5 | { name: "Emma", age: 27, position: "The Leader" }, 6 | { name: "Daniel", age: 33, position: "Hero" }, 7 | { name: "Ron", age: 32, position: "Hero Friend" }, 8 | ]; 9 | 10 | function showPerson(person) { 11 | console.log(person.name.toUpperCase()); 12 | } 13 | 14 | // people.forEach(showPerson); 15 | 16 | people.forEach(function (item) { 17 | console.log(item.name); 18 | }); 19 | -------------------------------------------------------------------------------- /JavaScript Files/LocalScope/app.js: -------------------------------------------------------------------------------- 1 | // Local Scope 2 | // Cannot be access from outside code blocks 3 | // if - NOT VAR 4 | 5 | let firstName = "Emma"; 6 | 7 | function calculate() { 8 | const firstName = "srikanth"; 9 | console.log(firstName); 10 | 11 | // const firstName = "Harry"; 12 | // let lastName = "Watson"; 13 | // boom = "I'm global vairable"; 14 | } 15 | 16 | calculate(); 17 | 18 | if (true) { 19 | } 20 | 21 | console.log(`Hey this is ${firstName} and I'm awesome`); 22 | -------------------------------------------------------------------------------- /JavaScript Files/InlineJavaScript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 | 11 |

Hello World

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /JavaScript Files/ImplicitTypeConversion/app.js: -------------------------------------------------------------------------------- 1 | // Implicit Type Conversion 2 | 3 | const firstName = "Srikanth"; 4 | const lastname = "Racharla"; 5 | const fullName = firstName + " " + lastname; 6 | console.log(fullName); 7 | 8 | const number1 = 10; 9 | const number2 = 20; 10 | const result = number1 + number2; 11 | console.log(result); 12 | 13 | let result2 = firstName - lastname; 14 | console.log(result2); 15 | 16 | let number3 = 10; 17 | let number4 = "20"; 18 | let result3 = number3 - number4; 19 | console.log(result3); 20 | -------------------------------------------------------------------------------- /JavaScript Files/Functions,Return/app.js: -------------------------------------------------------------------------------- 1 | // Arrays, Functions and Objects 2 | // return 3 | // default undefined, shortcuts, ignore after 4 | // 1 inch 2.54cm 5 | 6 | const wallHeight = 80; 7 | 8 | function calculate(value) { 9 | // const newValue = value * 2.54; 10 | // console.log("The value in cm is: " + value * 2.54 + " cm"); 11 | return value * 2.54; 12 | } 13 | 14 | const width = calculate(100); 15 | const height = calculate(wallHeight); 16 | 17 | const dimensions = [width, height]; 18 | console.log(dimensions); 19 | -------------------------------------------------------------------------------- /JavaScript Files/ExerciseFullName/app.js: -------------------------------------------------------------------------------- 1 | // Arrays and for loop 2 | 3 | const firstNames = ["Emma", "Daniel"]; 4 | let lastName = "Watson"; 5 | 6 | const newArray = []; 7 | 8 | // for loop 9 | // for(initialization, condition, incerement/decrement) 10 | 11 | for (let i = 0; i < firstNames.length; i++) { 12 | // console.log(i); 13 | // console.log(firstNames[i]); 14 | 15 | // let fullName = `${firstNames[i]} ${lastName}`; 16 | newArray.push(`${firstNames[i]} ${lastName}`); 17 | } 18 | 19 | console.log(firstNames); 20 | console.log(newArray); 21 | -------------------------------------------------------------------------------- /DOM/06-attributes/app.js: -------------------------------------------------------------------------------- 1 | // attritutes 2 | // getAttribute() 3 | // setAttribute() 4 | // dataset 5 | 6 | const list = document.querySelector(".list"); 7 | console.log(list); 8 | 9 | // console.log(list.attributes); 10 | 11 | console.log(list.getAttribute("class")); 12 | console.log(list.getAttribute("id")); 13 | 14 | const h1 = document.querySelector("h1"); 15 | console.log(h1.getAttribute("id")); 16 | h1.setAttribute("class", "heading"); 17 | 18 | list.setAttribute("class", "new-list"); 19 | 20 | console.log(list.dataset.name); 21 | 22 | console.log(h1.dataset); 23 | -------------------------------------------------------------------------------- /JavaScript Files/ConditionalStatement_2/app.js: -------------------------------------------------------------------------------- 1 | // Conditional Statements 2 | // Comparison Operators 3 | // >, <, >=, <=, ==, ===, !=, !== 4 | // else if and ! 5 | 6 | const num1 = 7; 7 | const num2 = 70; 8 | 9 | const value = false; 10 | if (!value) { 11 | console.log("heyy i am coming"); 12 | } 13 | 14 | // if (num1 > num2) { 15 | // console.log("First number is greater than second number"); 16 | // } else if (num1 >= num2) { 17 | // console.log("Both are equall"); 18 | // } else { 19 | // console.log("Second number is greater than first number"); 20 | // } 21 | -------------------------------------------------------------------------------- /JavaScript Files/Functions,Parameters,Arguments/app.js: -------------------------------------------------------------------------------- 1 | // Arrays, Functions and Objects 2 | // Params - When declare/define 3 | // Placeholders, local variables 4 | // Arguments - When Invoke/Call/Run 5 | // Use Variables/Values, Multiple Params, Undefined. 6 | 7 | const ron = "Ron"; 8 | const emma = "Emma"; 9 | const don = "Daniel"; 10 | 11 | function greet(name, study) { 12 | console.log("Hello " + name + " " + study); 13 | } 14 | 15 | // greet Ron 16 | greet(ron, "10th Class"); 17 | // greet Emma 18 | greet(emma); 19 | // greet Daniel 20 | greet("Daniel"); 21 | -------------------------------------------------------------------------------- /JavaScript Files/BackTicks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/GLobalScope/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/LocalScope/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/ArrayIterations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/ExerciseCalculate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/ExerciseFullName/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Null vs Undefined/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/StringMethods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/TernaryOperator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Truthy and Falsy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/VariableLookUp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/ForEach_ArrayMethod/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Value vs Reference/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/ArrayProperties&Methods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Equality/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/ForLoop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/WhileLoop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Callback & HigherOrderFunctions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/DoWhileLoop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Math_Object/app.js: -------------------------------------------------------------------------------- 1 | // Math 2 | // Standart built-in objects - always available 3 | 4 | // const number = 7.323432; 5 | // const result = Math.floor(number); 6 | 7 | // const number = 6.723432; 8 | // const result = Math.ceil(number); 9 | 10 | // const number = 189; 11 | // const result = Math.sqrt(number); 12 | 13 | // const result = Math.PI; 14 | 15 | // const result = Math.min(-100, 1, 2, -1000, 3, 5, 6, 7, 7, 8, 8, 9); 16 | 17 | // const result = Math.max(-100, 1, 2, -1000, 3, 5, 6, 7, 7, 8, 8000000, 90000); 18 | 19 | const result = Math.floor(Math.random() * 10) + 1; 20 | 21 | console.log(result); 22 | -------------------------------------------------------------------------------- /JavaScript Files/Objects/app.js: -------------------------------------------------------------------------------- 1 | // Arrays, Functions and Objects 2 | // Objects - Key/value pairs, Methods 3 | // dot notation 4 | 5 | const person = { 6 | name: "Emma", 7 | lastName: "Watson", 8 | age: 27, 9 | education: true, 10 | married: false, 11 | friends: ["Ron", "Daniel"], 12 | greeting: function () { 13 | console.log("Heyy Emma!!!"); 14 | }, 15 | }; 16 | 17 | console.log(person.name); 18 | console.log(person.married); 19 | console.log(person.friends); 20 | person.greeting(); 21 | 22 | console.log(person["name"]); 23 | 24 | console.log(typeof person); 25 | console.log(typeof person["friends"]); 26 | -------------------------------------------------------------------------------- /JavaScript Files/Functions,Return/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/LogicalOperators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/ConditionalStatement_2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Functions, Expressions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Map_ArrayMethod/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Math_Object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/ConditionalStatementBasics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/Functions,Parameters,Arguments/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 |

16 | JavaScript Tutorials by Learn With Srikanth Racharla 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/filter_ArrayMethod/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/find_ArrayMethod/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/reduce_ArrayMethod/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 10 |

16 | Connect With JavaScript 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Files/TernaryOperator/app.js: -------------------------------------------------------------------------------- 1 | // unary operator - typeof 2 | let text = "some text"; 3 | // console.log(typeof text); // operand 4 | // binary operator - assignment 5 | let number = 3; 6 | let number2 = 2 + 5; 7 | // ternary operator 8 | // condition ? (runs if true) : (runs if false) 9 | 10 | let firstName = "Srikanth"; // let assume coming from database 11 | 12 | firstName 13 | ? console.log(`This is Truthy and name is ${firstName}`) 14 | : console.log("This is Falsy"); 15 | 16 | // if (firstName) { 17 | // console.log(`This is Truthy and name is ${firstName}`); 18 | // } else { 19 | // console.log("This is Falsy"); 20 | // } 21 | -------------------------------------------------------------------------------- /JavaScript Files/Numbers/app.js: -------------------------------------------------------------------------------- 1 | // Numbers 2 | // Loosely Typed = don't declare type 3 | 4 | // In java 5 | // int number = 20; 6 | // int number = "srik" 7 | // String data = "srr"; 8 | 9 | const firstNumber = 123; 10 | let secondNumber = 2.556; 11 | // secondNumber = "srikanth"; 12 | let thirdNumber = "123456"; 13 | 14 | let add = firstNumber + secondNumber; 15 | let sub = firstNumber - secondNumber; 16 | let multi = firstNumber * secondNumber; 17 | let div = firstNumber / secondNumber; 18 | let stringAdd = firstNumber + thirdNumber; 19 | 20 | console.log(add); 21 | console.log(sub); 22 | console.log(multi); 23 | console.log(div); 24 | console.log(stringAdd); 25 | -------------------------------------------------------------------------------- /DOM/04-DOM-navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

JavaScript DOM, Started🫶

13 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /JavaScript Files/filter_ArrayMethod/app.js: -------------------------------------------------------------------------------- 1 | // filter 2 | // does return new array 3 | // can manipulate the size of new array 4 | // returns based on condition 5 | 6 | const people = [ 7 | { name: "Emma Watson", age: 27, position: "The Leader" }, 8 | { name: "Daniel", age: 28, position: "Hero" }, 9 | { name: "Ron", age: 32, position: "Hero Friend" }, 10 | { name: "Ron", age: 32, position: "Hero Friend" }, 11 | ]; 12 | 13 | const youngPeople = people.filter(function (person) { 14 | return person.age <= 30; 15 | }); 16 | // console.log(youngPeople); 17 | 18 | const newArray = people.filter(function (person) { 19 | return person.position === "Hero Friend"; 20 | }); 21 | console.log(newArray); 22 | -------------------------------------------------------------------------------- /JavaScript Files/DataTypes/app.js: -------------------------------------------------------------------------------- 1 | // Data Types 2 | // Primitive - String, Number, Boolean, Null, Undefined, Symbol. 3 | // Object - Arrays, Functions, Objects. 4 | 5 | // typeof - operator (typeof variable) or (typeof value) 6 | 7 | // String 8 | const firstName = "srikanth"; 9 | // Number 10 | const number = 100; 11 | // Boolean 12 | const value1 = true; 13 | const value2 = false; 14 | // Null 15 | const name = null; 16 | // Undefined 17 | let lastName; 18 | // Symbol(ES6) 19 | 20 | console.log(typeof firstName); 21 | console.log(typeof "hello world"); 22 | console.log(typeof number); 23 | console.log(typeof value1); 24 | console.log(typeof value2); 25 | console.log(typeof name); 26 | console.log(typeof lastName); 27 | -------------------------------------------------------------------------------- /JavaScript Files/GLobalScope/app.js: -------------------------------------------------------------------------------- 1 | // Global Scope vs Local Scope 2 | // any variable outside code block {} is said to be in Global Scope 3 | // can be accesss anywhere in the program 4 | // Gotchas : name collisions, modify by mistake 5 | 6 | let firstName = "Emma"; 7 | firstName = "Harry"; 8 | 9 | // 100 lines of code 10 | function calculate() { 11 | // some oter code 12 | console.log(firstName); 13 | firstName = "orange"; 14 | 15 | function inner() { 16 | firstName = "inner function name"; 17 | } 18 | inner(); 19 | } 20 | calculate(); 21 | 22 | // if (true) { 23 | // console.log(firstName); 24 | // firstName = "Blackberry"; 25 | // } 26 | 27 | console.log(`Hey this is ${firstName} and I'm awesome`); 28 | -------------------------------------------------------------------------------- /JavaScript Files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 16 |

22 | Connect With JavaScript 23 |

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /JavaScript Files/Arrays/app.js: -------------------------------------------------------------------------------- 1 | // Arrays, Functions and Objects 2 | // Arrays - [], 0 index based 3 | 4 | const fruit1 = "apple"; 5 | const fruit2 = "banana"; 6 | const fruit3 = "cherries"; 7 | const fruit4 = "blueberries"; 8 | const fruit5 = "blackberries"; 9 | 10 | const fruitList = [ 11 | "apple", 12 | "banana", 13 | "cherries", 14 | "blueberries", 15 | "blackberries", 16 | 5, 17 | undefined, 18 | null, 19 | true, 20 | false, 21 | ]; 22 | 23 | // const fruitList = [0,1,2,3,4,5,6,.....] 24 | 25 | // console.log(fruitList); 26 | console.log(fruitList[1]); 27 | 28 | let bestFruit = fruitList[4]; 29 | console.log(bestFruit); 30 | 31 | fruitList[5] = "grapes"; 32 | console.log(fruitList); 33 | 34 | console.log(fruitList[100]); 35 | -------------------------------------------------------------------------------- /DOM/07-class_classList/app.js: -------------------------------------------------------------------------------- 1 | // className 2 | // classList 3 | // add() 4 | // remove() 5 | // contains() 6 | // toggle() 7 | 8 | const list = document.querySelector("ul"); 9 | console.log(list); 10 | 11 | if (list.classList.contains("normal")) { 12 | list.classList.add("orange"); 13 | console.log("yes normal class is present"); 14 | } else { 15 | list.classList.add("blue"); 16 | console.log("normal class not avaiable"); 17 | } 18 | 19 | list.classList.toggle("navbar"); 20 | 21 | // console.log(list.className); 22 | // list.className = "navbar"; 23 | 24 | // console.log(list.classList); 25 | // list.classList.add("navbar"); 26 | // list.classList.add("new-list"); 27 | 28 | // list.classList.remove("normal"); 29 | // list.classList.remove("navbar"); 30 | -------------------------------------------------------------------------------- /JavaScript Files/Date Object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript by Srikanth 8 | 9 | 16 |

22 | Connect With JavaScript 23 |

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /DOM/02-Selectors-part2/app.js: -------------------------------------------------------------------------------- 1 | // getelementByid() 2 | // getElementByTagName() 3 | // getElementByClassName() 4 | 5 | // querySelector() 6 | const textDiv = document.querySelector("#text-div"); 7 | console.log(textDiv); 8 | 9 | const content = document.querySelector(".content"); 10 | console.log(content); 11 | 12 | const byTag = document.querySelector("h1"); 13 | console.log(byTag); 14 | 15 | // querySelectorAll() 16 | const allContent = document.querySelectorAll(".content"); 17 | console.log(allContent); 18 | 19 | const insideH5Tag = document.querySelector(".text-container h5"); 20 | console.log(insideH5Tag); 21 | 22 | const ul = document.querySelector(".navbar"); 23 | console.log(ul); 24 | 25 | const lis = document.querySelectorAll(".navbar li"); 26 | console.log(lis); 27 | -------------------------------------------------------------------------------- /JavaScript Files/Functions, Expressions/app.js: -------------------------------------------------------------------------------- 1 | // Arrays, Functions and Objects 2 | // expressions - another way to define a funcion 3 | // create a variable, assign to function (not value), use variable 4 | // diff - hoisting, use - arrow functions and libraries. 5 | 6 | function addNumbers(num1, num2) { 7 | return num1 + num2; 8 | } 9 | 10 | const firstValue = addNumbers(5, 5); 11 | const secondValue = addNumbers(12, 13); 12 | 13 | // function expressions 14 | const add = function (num1, num2) { 15 | return num1 + num2; 16 | }; 17 | 18 | // const thirdValue = add(100, 200); 19 | 20 | const result = [firstValue, secondValue, add(100, 200)]; 21 | console.log(result); 22 | 23 | // Arrow functions will cover future videos 24 | const Addition = (num1, num2) => num1 * num2; 25 | -------------------------------------------------------------------------------- /DOM/05-textContent,innerHtml,innerText/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

JavaScript DOM, Started🫶

13 | 14 |

Welcome back to youtube

15 | 16 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /JavaScript Files/Map_ArrayMethod/app.js: -------------------------------------------------------------------------------- 1 | // map 2 | // does return new array 3 | // does not change the size of original array 4 | // use values from original array when making new one 5 | 6 | const people = [ 7 | { name: "Emma", age: 27, position: "The Leader" }, 8 | { name: "Daniel", age: 33, position: "Hero" }, 9 | { name: "Ron", age: 32, position: "Hero Friend" }, 10 | ]; 11 | 12 | const ages = people.map(function (person) { 13 | return person.age; 14 | }); 15 | 16 | const newPeopleArray = people.map(function (person) { 17 | return { 18 | firstName: person.name, 19 | oldAge: person.age, 20 | }; 21 | }); 22 | 23 | const renderNewArray = people.map(function (person) { 24 | return `

${person.name}

`; 25 | }); 26 | 27 | document.body.innerHTML = renderNewArray.join(""); 28 | 29 | console.log(renderNewArray); 30 | -------------------------------------------------------------------------------- /JavaScript Files/ArrayProperties&Methods/app.js: -------------------------------------------------------------------------------- 1 | // Array Properties and Methods 2 | 3 | let fruitNames = ["apple", "banana", "cherries", "orange", "blueberries"]; 4 | 5 | // length 6 | console.log(fruitNames.length); 7 | console.log(fruitNames[fruitNames.length - 1]); 8 | 9 | // concat 10 | const firstNames = ["Emma", "Ron", "Daniel"]; 11 | const allNames = fruitNames.concat(firstNames); 12 | console.log(allNames); 13 | // reverse 14 | console.log(allNames.reverse()); 15 | 16 | // push 17 | allNames.push("Grapes"); 18 | allNames.push("blackberries"); 19 | console.log(allNames); 20 | // pop 21 | allNames.pop(); 22 | allNames.pop(); 23 | console.log(allNames); 24 | 25 | // unshift 26 | allNames.unshift("BlackBerries"); 27 | allNames.unshift("Grapes"); 28 | console.log(allNames); 29 | // shift 30 | allNames.shift(); 31 | allNames.shift(); 32 | console.log(allNames); 33 | -------------------------------------------------------------------------------- /JavaScript Files/reduce_ArrayMethod/app.js: -------------------------------------------------------------------------------- 1 | // reduce 2 | // iterates, callback function 3 | // reduces to a single value - number, array, object 4 | // 1 parameter ('acc') - total of all calculations 5 | // 2 parameter ('curr') - current iteration/value 6 | 7 | const people = [ 8 | { name: "Emma Watson", age: 27, position: "The Leader", id: 1, salary: 500 }, 9 | { name: "Daniel", age: 28, position: "Hero", id: 2, salary: 300 }, 10 | { name: "Ron", age: 32, position: "Hero Friend", id: 3, salary: 200 }, 11 | { name: "Ron", age: 32, position: "Hero Friend", id: 4, salary: 200 }, 12 | ]; 13 | 14 | const newArray = people.reduce(function (acc, currPerson) { 15 | console.log(`Total Salary : ${acc}`); 16 | console.log(`Current person Salary : ${currPerson.salary}`); 17 | acc += currPerson.salary; 18 | return acc; 19 | }, 0); 20 | 21 | console.log(newArray); 22 | -------------------------------------------------------------------------------- /DOM/06-attributes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

JavaScript DOM, Started🫶

13 | 14 |

Welcome back to youtube

15 | 16 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /JavaScript Files/Value vs Reference/app.js: -------------------------------------------------------------------------------- 1 | // Refernce vs Value 2 | // Primitive Data Types 3 | // String, Number, Symbol, Boolean, Undefined, Null, 4 | // Arrays, Functions, Objects = object 5 | // typeof 6 | 7 | // when assigning primitive data type value to a variable any changes are made directly to that value, without affecting original value 8 | 9 | // when assigning non-primitive data type value to a variable is done by reference so any changes will affect all the references. 10 | 11 | let number1 = 10; 12 | let number2 = number1; 13 | number2 = 20; 14 | console.log(`The first number is ${number1}`); 15 | console.log(`The second number is ${number2}`); 16 | 17 | let person1 = { name: "emma" }; 18 | let person2 = { ...person1 }; 19 | person2.name = "Harry"; 20 | console.log(`The first name is ${person1.name}`); 21 | console.log(`The second name is ${person2.name}`); 22 | -------------------------------------------------------------------------------- /JavaScript Files/Functions,Declare&Invoke/app.js: -------------------------------------------------------------------------------- 1 | // Arrays, Functions and Objects 2 | // Functions - Declare, Invoke 3 | 4 | function hello() { 5 | // logic 6 | console.log("Hello how are you ?"); 7 | console.log("Hey are you there ?"); 8 | console.log("Hey I'm Here!"); 9 | } 10 | 11 | hello(); 12 | // some code 100 lines 13 | hello(); 14 | // some code 1000 lines 15 | hello(); 16 | 17 | // console.log("Hello how are you ?"); 18 | // console.log("Hello are you there ?"); 19 | // console.log("Hey I'm Here!"); 20 | // // some code here 100 lines 21 | 22 | // console.log("Hello how are you ?"); 23 | // console.log("Hello are you there ?"); 24 | // console.log("Hey I'm Here!"); 25 | // // some code here 100 lines 26 | 27 | // console.log("Hello how are you ?"); 28 | // console.log("Hello are you there ?"); 29 | // console.log("Hey I'm Here!"); 30 | // // some code here 31 | -------------------------------------------------------------------------------- /DOM/01-Selectors-part1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

JavaScript DOM, Started🫶

13 | 14 |
Hello, How are you??
15 | 16 |

17 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque 18 | repudiandae cupiditate id! Quia cupiditate fugit praesentium enim 19 | reprehenderit perspiciatis rem. 20 |

21 | 22 |

Hello, welcome

23 |

Hello, welcome

24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /DOM/07-class_classList/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 17 | 18 | 19 |

JavaScript DOM, Started🫶

20 | 21 |

Welcome back to youtube

22 | 23 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /JavaScript Files/ExerciseCalculate/app.js: -------------------------------------------------------------------------------- 1 | // Functions, return, if, arrays, for loop, Objects 2 | 3 | const gas = [20, 40, 50, 100, 400]; 4 | const food = [30, 50, 30]; 5 | 6 | function calculateTotal(arr) { 7 | let total = 0; 8 | for (let i = 0; i < arr.length; i++) { 9 | total += arr[i]; // total = tatal + arr[i] 10 | } 11 | if (total > 100) { 12 | console.log(`Heyy You are spending too much money`); 13 | return total; 14 | } 15 | console.log(`Heyy man you are good, total is lessthan 100`); 16 | return total; 17 | } 18 | 19 | let gasTotal = calculateTotal(gas); 20 | let foodTotal = calculateTotal(food); 21 | let randomTotal = calculateTotal([1, 2, 3, 4, 5, 6, 7, 7, 8, 8, 9, 10]); 22 | 23 | console.log({ 24 | gas: gasTotal, 25 | food: foodTotal, 26 | random: randomTotal, 27 | }); 28 | 29 | // console.log(gasTotal); 30 | // console.log(foodTotal); 31 | // console.log(randomTotal); 32 | -------------------------------------------------------------------------------- /JavaScript Files/ExternalJavaScript/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About 8 | 9 | 10 | back to home 11 |

About Page

12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /JavaScript Files/Number Additional Features/app.js: -------------------------------------------------------------------------------- 1 | // Numbers 2 | // +=, -=, /=, *=, ++, --, % 3 | // Modules (%) operator returns the remainder after integer divison 4 | 5 | let firstNumber = 10 + 4 - 10 * 10; 6 | let secondNUmber = (10 + 4 - 10) * 10; 7 | 8 | console.log(firstNumber); 9 | console.log(secondNUmber); 10 | 11 | // firstNumber = firstNumber + 10; 12 | // firstNumber = firstNumber - 10 13 | // firstNumber = firstNumber * 10 14 | // firstNumber = firstNumber / 10 15 | // firstNumber += 10; 16 | // firstNumber -= 10; 17 | // firstNumber *= 10; 18 | // firstNumber /= 10; 19 | 20 | // firstNumber = firstNumber + 1; 21 | // firstNumber = firstNumber - 1; 22 | // firstNumber++; 23 | // firstNumber++; 24 | // firstNumber++; 25 | // firstNumber++; 26 | // firstNumber++; 27 | // firstNumber++; 28 | // firstNumber--; 29 | // firstNumber--; 30 | // firstNumber--; 31 | // firstNumber--; 32 | // firstNumber--; 33 | // firstNumber--; 34 | -------------------------------------------------------------------------------- /JavaScript Files/ExternalJavaScript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 | 11 | about page 12 |

Home Page

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /JavaScript Files/StringMethods/app.js: -------------------------------------------------------------------------------- 1 | // String Properties and Methods 2 | // Wrapper String Object, Don't Memorize Methods 3 | 4 | let text = "Srikanth Racharla"; 5 | 6 | let result = text.length; 7 | console.log(result); 8 | 9 | console.log(text.length); 10 | console.log(text.toLowerCase()); 11 | console.log(text.toUpperCase()); 12 | console.log(text.charAt(1)); 13 | console.log(text.charAt(text.length - 2)); 14 | console.log(text.indexOf("S")); 15 | // console.log(text.startsWith(" Srikanth")); 16 | console.log(text); 17 | console.log(text.trim()); 18 | console.log(text.trim().toLowerCase().startsWith("srikanth")); 19 | console.log(text.toLowerCase().includes("rac")); 20 | console.log(text.slice(0, 8)); 21 | console.log(text.slice(-3)); 22 | 23 | // const person = { 24 | // name: "Srikanth", 25 | // greeting: function () { 26 | // console.log("Hey how are you??"); 27 | // }, 28 | // }; 29 | // console.log(person); 30 | // console.log(person.name); 31 | // console.log(person.greeting()); 32 | -------------------------------------------------------------------------------- /JavaScript Files/app.js: -------------------------------------------------------------------------------- 1 | // Date 2 | 3 | const months = [ 4 | "January", 5 | "February", 6 | "March", 7 | "April", 8 | "May", 9 | "June", 10 | "July", 11 | "August", 12 | "September", 13 | "October", 14 | "November", 15 | "December", 16 | ]; 17 | 18 | const days = [ 19 | "Sunday", 20 | "Monday", 21 | "Tuesday", 22 | "Wednesday", 23 | "Thursday", 24 | "Friday", 25 | "Saturtday", 26 | ]; 27 | 28 | const date = new Date("01/27/2021"); 29 | // console.log(date); 30 | 31 | const month = date.getMonth(); 32 | console.log(months[month]); 33 | 34 | const weekDay = date.getDay(); 35 | console.log(days[weekDay]); 36 | 37 | console.log(date.getFullYear()); 38 | 39 | console.log(date.getDate()); 40 | 41 | const sentence = `${days[weekDay]}, ${date.getDate()} ${ 42 | months[month] 43 | } ${date.getFullYear()}`; 44 | 45 | console.log(sentence); 46 | 47 | console.log(date.getTime()); 48 | 49 | // DOM ==> Document Object Model 50 | document.body.innerHTML = sentence; 51 | -------------------------------------------------------------------------------- /JavaScript Files/Date Object/app.js: -------------------------------------------------------------------------------- 1 | // Date 2 | 3 | const months = [ 4 | "January", 5 | "February", 6 | "March", 7 | "April", 8 | "May", 9 | "June", 10 | "July", 11 | "August", 12 | "September", 13 | "October", 14 | "November", 15 | "December", 16 | ]; 17 | 18 | const days = [ 19 | "Sunday", 20 | "Monday", 21 | "Tuesday", 22 | "Wednesday", 23 | "Thursday", 24 | "Friday", 25 | "Saturtday", 26 | ]; 27 | 28 | const date = new Date("01/27/2021"); 29 | // console.log(date); 30 | 31 | const month = date.getMonth(); 32 | console.log(months[month]); 33 | 34 | const weekDay = date.getDay(); 35 | console.log(days[weekDay]); 36 | 37 | console.log(date.getFullYear()); 38 | 39 | console.log(date.getDate()); 40 | 41 | const sentence = `${days[weekDay]}, ${date.getDate()} ${ 42 | months[month] 43 | } ${date.getFullYear()}`; 44 | 45 | console.log(sentence); 46 | 47 | console.log(date.getTime()); 48 | 49 | // DOM ==> Document Object Model 50 | document.body.innerHTML = sentence; 51 | -------------------------------------------------------------------------------- /JavaScript Files/find_ArrayMethod/app.js: -------------------------------------------------------------------------------- 1 | // find 2 | // returns single instance - (in this case object) 3 | // returns first match, if no match undefined 4 | // great for getting unique value 5 | 6 | const people = [ 7 | { name: "Emma Watson", age: 27, position: "The Leader", id: 1 }, 8 | { name: "Daniel", age: 28, position: "Hero", id: 2 }, 9 | { name: "Ron", age: 32, position: "Hero Friend", id: 3 }, 10 | { name: "Ron", age: 32, position: "Hero Friend", id: 4 }, 11 | ]; 12 | 13 | // const newNames = ["Emma", "Ron", "Harrry", "Daniel"]; 14 | // const findNewNames = newNames.find(function (firstName) { 15 | // return firstName === "Harrry"; 16 | // }); 17 | // console.log(findNewNames); 18 | 19 | const findingUnique = people.find(function (person) { 20 | return person.id === 10; 21 | }); 22 | console.log(findingUnique ? findingUnique.name : findingUnique); 23 | 24 | const findingUnique2 = people.filter(function (person) { 25 | return person.id === 1; 26 | }); 27 | console.log(findingUnique2[0].name); 28 | -------------------------------------------------------------------------------- /DOM/08-Nodes-playing/app.js: -------------------------------------------------------------------------------- 1 | // createElement() 2 | // createTextNode() 3 | // appendChild() insert at last 4 | // insertBefore() 5 | // replaceChild() 6 | // prepend() 7 | // remove() 8 | // removeChild 9 | 10 | const list = document.querySelector(".navbar"); 11 | const listItem = "
  • Dynamic NavItem
    • "; 12 | 13 | list.insertAdjacentHTML("afterend", listItem); 14 | 15 | console.log(listItem); 16 | 17 | // const list = document.querySelector(".navbar"); 18 | // console.log(list); 19 | 20 | // const first = document.querySelector(".first"); 21 | // const last = document.querySelector(".last"); 22 | 23 | // const listItem = document.createElement("li"); 24 | // const text = document.createTextNode("Dynamic Service"); 25 | // listItem.appendChild(text); 26 | // listItem.classList.add("nav-item"); 27 | // listItem.classList.add("first"); 28 | 29 | // list.removeChild(last); 30 | 31 | // list.remove(); 32 | 33 | // list.prepend(listItem); 34 | 35 | // list.replaceChild(listItem, first); 36 | 37 | // list.insertBefore(listItem, first); 38 | 39 | // list.appendChild(listItem); 40 | -------------------------------------------------------------------------------- /DOM/08-Nodes-playing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 17 | 18 | 19 |

    JavaScript DOM, Started🫶

    20 | 21 |

    Welcome back to youtube

    22 | 23 | 24 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /DOM/04-DOM-navigation/app.js: -------------------------------------------------------------------------------- 1 | // childNodes - whitespace 2 | // children - no whitespace 3 | // nextSibling - whitespace 4 | // nextElementSibling - no whitespace 5 | // previousSibling - whitespace 6 | // previousElementSibling - no whitespace 7 | // parentElement - no whitespace 8 | // firstChild - whitespace 9 | // firstElementChild - no whitespace 10 | // lastChild - whitespace 11 | // lastElementChild - no whitespace 12 | 13 | const list = document.querySelector("ul"); 14 | console.log(list.firstElementChild); 15 | 16 | const lastItem = list.lastElementChild; 17 | console.log(lastItem); 18 | 19 | // const listItem = document.querySelector("ul li:nth-child(4)"); 20 | 21 | // console.log(listItem); 22 | 23 | // console.log(listItem.parentElement.parentElement.parentElement.parentElement); 24 | 25 | // console.log(listItem.nextSibling.nextSibling); 26 | 27 | // const list = document.querySelector("ul"); 28 | // console.log(list); 29 | 30 | // console.log(list.childNodes); 31 | // console.log(list.children); 32 | 33 | // const body = document.querySelector("body"); 34 | // console.log(body.children); 35 | -------------------------------------------------------------------------------- /JavaScript Files/InternalJavaScript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript 8 | 9 | 10 | 11 |

    Hello World

    12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /DOM/09-styles-using-dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 21 | 22 | 23 |

    JavaScript DOM, Started🫶

    24 | 25 |

    Welcome back to youtube

    26 | 27 | 28 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /JavaScript Files/Callback & HigherOrderFunctions/app.js: -------------------------------------------------------------------------------- 1 | function morning(firstName) { 2 | // console.log(`Good Morning ${firstName}`); 3 | return `Good Morning ${firstName}`; 4 | } 5 | 6 | function afternoon(firstName) { 7 | return `Good Afternoon ${firstName}`; 8 | } 9 | 10 | function greet(firstName, cb) { 11 | const myName = "Srikanth"; 12 | console.log(`${cb(firstName)}, My name is ${myName}`); 13 | } 14 | 15 | greet("Emma", morning); 16 | greet("Harry", afternoon); 17 | 18 | // Callback Functions, Higher Order Functions, Functions as First Class Objects/Citizens 19 | 20 | // Functions are first class objects - stored in a variable (expression), passed as an argument to another function, return from the function (closure) 21 | 22 | // Higher Order function - accepts another function as an argument or returns another function as a result 23 | 24 | // Callback Function - passed to a another function as an an argument and executed inside that function 25 | 26 | // function greetMorning(firstName) { 27 | // const myName = "Srikanth"; 28 | // console.log(`Good Morning ${firstName}, My name is ${myName}`); 29 | // } 30 | 31 | // function greetAfternoon(firstName) { 32 | // const myName = "Srikanth"; 33 | // console.log(`Good Afternoon ${firstName}, My name is ${myName}`); 34 | // } 35 | -------------------------------------------------------------------------------- /DOM/02-Selectors-part2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 26 | 27 | 28 |

    JavaScript DOM, Started🫶

    29 | 30 |
    Hello, How are you??
    31 | 32 |
    I am outside h5 tag
    33 | 34 |
    35 |
    I am inside h5 tag
    36 |
    37 | 38 | 44 | 45 |

    46 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque 47 | repudiandae cupiditate id! Quia cupiditate fugit praesentium enim 48 | reprehenderit perspiciatis rem. 49 |

    50 | 51 |

    Hello, welcome 1

    52 |

    Hello, welcome 2

    53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /JavaScript Files/Switch/app.js: -------------------------------------------------------------------------------- 1 | // Switch 2 | // Dice Values: 1 - 6 3 | 4 | const dice = 6; 5 | 6 | // Switch 7 | 8 | switch (dice) { 9 | case 1: 10 | console.log("you got one"); 11 | break; 12 | case 2: 13 | console.log("You got two"); 14 | break; 15 | case 3: 16 | console.log("You got three"); 17 | break; 18 | case 4: 19 | console.log("you got four"); 20 | break; 21 | case 5: 22 | console.log("You got five"); 23 | break; 24 | case 6: 25 | console.log("You got six"); 26 | break; 27 | default: 28 | console.log("you did not roll the dice"); 29 | } 30 | 31 | // else if 32 | // if (dice === 1) { 33 | // console.log("You got one"); 34 | // } else if (dice === 2) { 35 | // console.log("you got two"); 36 | // } else if (dice === 3) { 37 | // console.log("You got three"); 38 | // } else if (dice === 4) { 39 | // console.log("you got four"); 40 | // } else if (dice === 5) { 41 | // console.log("You got five"); 42 | // } else if (dice === 6) { 43 | // console.log("you got six"); 44 | // } else { 45 | // console.log("you did not roll the dice"); 46 | // } 47 | 48 | // if 49 | // if (dice === 1) { 50 | // console.log("You got one"); 51 | // } 52 | // if (dice === 2) { 53 | // console.log("you got two"); 54 | // } 55 | // if (dice === 3) { 56 | // console.log("You got three"); 57 | // } 58 | // if (dice === 4) { 59 | // console.log("you got four"); 60 | // } 61 | // if (dice === 5) { 62 | // console.log("You got five"); 63 | // } 64 | // if (dice === 6) { 65 | // console.log("you got six"); 66 | // } 67 | // if (dice > 6 || dice <= 0) { 68 | // console.log("you did not roll the dice"); 69 | // } 70 | -------------------------------------------------------------------------------- /DOM/03-Selectors-part3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 22 | 23 | 24 |

    JavaScript DOM, Started🫶

    25 | 26 |
    Hello, How are you??
    27 | 28 |
    I am outside h5 tag
    29 | 30 |
    31 |
    I am inside h5 tag
    32 |
    33 | 34 | 40 | 41 |

    42 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque 43 | repudiandae cupiditate id! Quia cupiditate fugit praesentium enim 44 | reprehenderit perspiciatis rem. 45 |

    46 |

    47 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, tempore. 48 |

    49 |

    50 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit porro ipsam, 51 | nesciunt consequatur pariatur nihil dolorum odio aspernatur assumenda, 52 | neque ducimus. Facilis iste praesentium itaque eveniet rem dolor unde qui. 53 |

    54 | 55 |

    Hello, welcome 1

    56 |

    Hello, welcome 2

    57 | 58 | 59 | 60 | 61 | 62 | --------------------------------------------------------------------------------