├── Module. 12 - Polyfill ├── apply.js ├── map.js ├── bind.js ├── filter.js ├── reduce.js ├── flat.js └── call.js ├── Module. 11 - AsyncJS ├── promise.any.js ├── promise.js ├── createpromise.js ├── promise.allSettled.js ├── promise.race.js ├── callback.js ├── async-await.js ├── style.css ├── callbackhell.js ├── method-chaining.js ├── promise.all.js └── index.html ├── Module. 10-1 - Projects ├── Project 4 - Notes App │ ├── README.md │ ├── assets │ │ ├── notes.png │ │ ├── notes-sm.png │ │ └── notes-white.png │ ├── archive.js │ ├── archive.html │ ├── app.js │ ├── index.html │ ├── utility.css │ ├── main.js │ └── style.css ├── Project 2 - Wishlist │ ├── README.md │ ├── index.html │ ├── style.css │ └── index.js ├── Project 3 - Form Validation │ ├── README.md │ ├── success.html │ ├── style.css │ ├── index.html │ └── index.js ├── Project 5 - E-com Javacript │ ├── utils │ │ └── findProductInCart.js │ ├── index.js │ ├── cart.js │ ├── style.css │ ├── index.html │ ├── cart.html │ ├── db │ │ └── products.js │ ├── createProductCard.js │ └── createHorizontalProductCard.js └── Project 1 - Quiz App │ └── quiz-cli-app.js ├── Module. 15a - Project - Movie App ├── README.md ├── package.json ├── index.html ├── style.css ├── index.js └── package-lock.json ├── README.md ├── Module 7 - More About Functions ├── 4. map-filter-reduce.js ├── 6. rest.js ├── 8. scope-scopechain.js ├── 9. closures.js ├── 5. arguments.js ├── 1. pure-func.js ├── 10. recursion.js ├── 2. first-class-function.js ├── 7. global-local.js └── 3. higher-order-fun.js ├── Module 1 - Basics of Javascript ├── package.json ├── 1. hello geeks.js ├── 7. arithmetic.js ├── 3. var_let_const.js ├── 4. naming_convention.js ├── 8. type-conversion.js ├── 9. read-user-data.js ├── 6. concatenation.js ├── 2. variables.js └── 5. data_types.js ├── Module. 15b - Project recipe-app ├── reset.css ├── single-recipe.js ├── single-recipe.html ├── index.html ├── getCuisine.js ├── getRecipeCard.js ├── index.js ├── style.css └── utility.css ├── Module. 15c - Project quiz-app ├── hero.png ├── index.html ├── style.css └── index.js ├── Module. 14 - Machine Coding ├── 3. throttling │ ├── style.css │ └── index.js ├── 2. debounce │ ├── style.css │ ├── index.js │ └── index.html ├── 4. modal │ ├── style.css │ ├── index.js │ └── index.html ├── 1. timer │ ├── style.css │ ├── index.html │ └── timer.js ├── 6. carousel │ ├── style.css │ ├── index.js │ └── index.html └── 5. drop down │ ├── style.css │ ├── index.html │ └── index.js ├── Module 4 - String ├── 6. substring.js ├── 7. trim.js ├── 5. case.js ├── 2. str-meth-1.js ├── 1. string.js ├── 3. indexOf.js └── 4. includes.js ├── Module 6 - Objects ├── 9. object-methods.js ├── 2. functionProperty.js ├── 10. this-keyword.js ├── 4. shorthand.js ├── 1. object.js ├── 3. computed.js ├── 5. existence.js ├── 11. constructor-new.js ├── 6. reference.js ├── 7. optional-chaining.js ├── 12. this-exercise.js └── 8. destructuring.js ├── Module 5 - Array ├── 8. spread.js ├── 7. split-join.js ├── 9. destructuring.js ├── 6. sort.js ├── 5. includes.js ├── 3. push-concat.js ├── 1. array.js ├── 4. pop=slice-splice.js └── 2. array-reference.js ├── Module 8 - Coding Drills ├── 6. even-to-odd.js ├── 7. sum.js ├── 5. substring.js ├── 3. mask.js ├── 11. occurence.js ├── 2. delete-vowels.js ├── 10. average-age.js ├── 8. array_name.js ├── 9. object-even-odd-sum.js ├── 4. secret-code.js └── 1. palindrome.js ├── Module 2 - Javascript Fundamentals ├── 9. for-loop.js ├── 8. nullish-coalescing.js ├── 11. while.js ├── 12. while-exercise.js ├── 13. try-catch.js ├── 10. nested-for-loop.js ├── 3. nested-if.js ├── 4. ternary.js ├── 2. conditional-statements.js ├── 6. if-cond-exercise.js ├── 1. comparison.js ├── nested-conditional-statement.js ├── 5. logical-operator.js ├── 7. logical-operator-2.js ├── exercise-2.js └── exercise.js ├── Module. 16 - Prototype & Classes ├── private.js ├── static.js ├── class.js ├── prototype.js ├── inheritance.js └── index.html ├── Module 9 - Module-DOM ├── bubling-capturing-2.js ├── bubling-capturing.js ├── index1.html ├── index2.html ├── index.html └── event-listeners.js ├── Module 3 - Functions ├── 3. function return.js ├── 2. anonymous function & function expression.js ├── 1. function declaration.js ├── 5. func-exercise.js └── 4. arrow-function.js └── Module. 13 - Coding Drills Part 2 ├── reverse-words.js ├── arrange-words.js └── frequency.js /Module. 12 - Polyfill/apply.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/promise.any.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 4 - Notes App/README.md: -------------------------------------------------------------------------------- 1 | # notes-app-vanillasjs -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 2 - Wishlist/README.md: -------------------------------------------------------------------------------- 1 | # wishlist 2 | Create a wishlist 3 | -------------------------------------------------------------------------------- /Module. 15a - Project - Movie App/README.md: -------------------------------------------------------------------------------- 1 | # gfg_movie_app-student-version 2 | Movie App 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Javascript Basics to Advanced 2 | 3 | A complete step by step guide to learn Javascript. 4 | 5 | -------------------------------------------------------------------------------- /Module 7 - More About Functions/4. map-filter-reduce.js: -------------------------------------------------------------------------------- 1 | /** 2 | * map, filter, reduce 3 | */ 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Module 1 - Basics of Javascript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "express": "^4.17.3", 4 | "readline-sync": "^1.4.10" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 3 - Form Validation/README.md: -------------------------------------------------------------------------------- 1 | # form-validation 2 | Built with Javascript this app allows form validation with regex 3 | -------------------------------------------------------------------------------- /Module. 15b - Project recipe-app/reset.css: -------------------------------------------------------------------------------- 1 | /** RESET CSS */ 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | -------------------------------------------------------------------------------- /Module. 15c - Project quiz-app/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeeksforgeeksDS/javascript-basic-to-advanced/HEAD/Module. 15c - Project quiz-app/hero.png -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/3. throttling/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 300px; 3 | border: 1px solid black; 4 | padding: 1rem; 5 | overflow-y: auto; 6 | } 7 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 4 - Notes App/assets/notes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeeksforgeeksDS/javascript-basic-to-advanced/HEAD/Module. 10-1 - Projects/Project 4 - Notes App/assets/notes.png -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 4 - Notes App/assets/notes-sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeeksforgeeksDS/javascript-basic-to-advanced/HEAD/Module. 10-1 - Projects/Project 4 - Notes App/assets/notes-sm.png -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 4 - Notes App/assets/notes-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeeksforgeeksDS/javascript-basic-to-advanced/HEAD/Module. 10-1 - Projects/Project 4 - Notes App/assets/notes-white.png -------------------------------------------------------------------------------- /Module 4 - String/6. substring.js: -------------------------------------------------------------------------------- 1 | /** 2 | * sub string 🔥 3 | */ 4 | 5 | const userName = "Prakash Narsingrao Sakari"; 6 | 7 | const subString = userName.substring(0, 10); 8 | 9 | console.log(subString + "..."); -------------------------------------------------------------------------------- /Module 4 - String/7. trim.js: -------------------------------------------------------------------------------- 1 | /** 2 | * String.trim() 🚀⚡🚀 3 | */ 4 | 5 | 6 | const text = " Hola!! I love GFG "; 7 | console.log(text.trim().substring(0, 6) + "......"); -------------------------------------------------------------------------------- /Module 6 - Objects/9. object-methods.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Object Methods 3 | */ 4 | 5 | const obj = { 6 | x: 1, 7 | y: 2, 8 | z: 17, 9 | }; 10 | 11 | const values = Object.values(obj); 12 | console.log(values); 13 | -------------------------------------------------------------------------------- /Module 4 - String/5. case.js: -------------------------------------------------------------------------------- 1 | /** 2 | * uppercase() and lowercase() 3 | */ 4 | 5 | const message = "I am Prakash Sakari and I am 111 years old!!"; 6 | console.log(message.toLowerCase()); 7 | console.log(message); 8 | console.log(message.toUpperCase()); -------------------------------------------------------------------------------- /Module 1 - Basics of Javascript/1. hello geeks.js: -------------------------------------------------------------------------------- 1 | /** 2 | * First Program - Show Hello Geeks on Console 3 | * Understand what is console. 4 | */ 5 | 6 | console.log('Hello Geeks!!'); 7 | console.log("My name is Prakash Sakari!") 8 | 9 | console.log(7 + 3); -------------------------------------------------------------------------------- /Module 5 - Array/8. spread.js: -------------------------------------------------------------------------------- 1 | /** 2 | * spread 3 | * ..arr🔥🚀 4 | */ 5 | 6 | const arr1 = [1, 2, 3, 4, 5]; 7 | const arr2 = [8, 9]; 8 | 9 | const arr3 = [...arr1, 6, 7, ...arr2, 10, 11]; 10 | console.log(arr3); 11 | 12 | console.log(arr1); -------------------------------------------------------------------------------- /Module 8 - Coding Drills/6. even-to-odd.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Odd To Even & Vice Versa 3 | */ 4 | 5 | const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 6 | 7 | const result = arr.map((num) => (num % 2 === 0 ? num - 1 : num + 1)); 8 | 9 | console.log(result); 10 | -------------------------------------------------------------------------------- /Module 8 - Coding Drills/7. sum.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sum of numbers less than 40 3 | */ 4 | 5 | const arr = [10, 17, 61, 54, 44, 32, 39, 23]; 6 | 7 | const result = arr.reduce((acc, cur) => (cur < 40 ? acc + cur : acc), 0); 8 | 9 | console.log(result); 10 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 5 - E-com Javacript/utils/findProductInCart.js: -------------------------------------------------------------------------------- 1 | export const findProductInCart = (cart, prodId) => { 2 | const isProductInCart = 3 | cart && cart.length > 0 && cart.some(({ _id }) => _id === prodId); 4 | return isProductInCart; 5 | }; 6 | -------------------------------------------------------------------------------- /Module 8 - Coding Drills/5. substring.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sub String 3 | */ 4 | 5 | const str = "prakash_sakari"; 6 | 7 | for (let i = 0; i < str.length; i++) { 8 | for (let j = i + 1; j <= str.length; j++) { 9 | console.log(str.slice(i, j)); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/9. for-loop.js: -------------------------------------------------------------------------------- 1 | /** 2 | * for loop 3 | */ 4 | 5 | const userName = "Prakash Narsingrao Sakari Padma"; 6 | 7 | const stringLength = userName.length; 8 | 9 | for (let i=0; i madam -->palindrome string 4 | */ 5 | 6 | 7 | const inputStr = "madam"; 8 | const arrOfChar = inputStr.split(""); 9 | arrOfChar.reverse(); 10 | const reversedStr = arrOfChar.join(""); 11 | console.log(reversedStr); 12 | -------------------------------------------------------------------------------- /Module 9 - Module-DOM/bubling-capturing-2.js: -------------------------------------------------------------------------------- 1 | let btnContainer = document.querySelector("#btn-container"); 2 | 3 | btnContainer.addEventListener("click", (event) => { 4 | let btnText = event.target.innerText; 5 | if (btnText === "Red") { 6 | event.target.classList.toggle("btn-red"); 7 | } 8 | }); 9 | -------------------------------------------------------------------------------- /Module 1 - Basics of Javascript/7. arithmetic.js: -------------------------------------------------------------------------------- 1 | 2 | const x = "mango"; 3 | const y = "apple"; 4 | 5 | console.log(x + y); 6 | 7 | console.log(x - y); 8 | 9 | console.log(x * y); 10 | 11 | console.log(x / y); 12 | 13 | console.log(x % y); 14 | 15 | console.log(x ** 2); 16 | 17 | console.log(y ** 3); -------------------------------------------------------------------------------- /Module 7 - More About Functions/6. rest.js: -------------------------------------------------------------------------------- 1 | /** 2 | * REST parameter --> ...rest/...args 3 | */ 4 | 5 | function calculateTotal(...rest) { 6 | let total = 0; 7 | for (let value of rest) { 8 | total += value; 9 | } 10 | console.log(total); 11 | } 12 | 13 | calculateTotal(4, 5, 6, 7, 8, 9, 1, 2, 3, 3); 14 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/8. nullish-coalescing.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Nullish Coalescing ?? 🔥🔥 3 | * || vs ?? 🚀🚀 4 | */ 5 | 6 | let firstName = 0; 7 | console.log(firstName ?? "HiddenGeeks"); 8 | 9 | // const a = 0; 10 | 11 | // console.log(a ?? 1); 12 | 13 | // let a = 12 14 | // let b; 15 | 16 | // console.log(a + (b ?? 0)); -------------------------------------------------------------------------------- /Module 6 - Objects/2. functionProperty.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Function as Object Property🔥🔥 3 | */ 4 | 5 | const obj = { 6 | name: "Prakash Sakari", 7 | greetMessage: function (){ 8 | console.log("Hello Prakash Welcome to GFG!!!!!"); 9 | }, 10 | bye(){ 11 | console.log("Tata Bye Bye"); 12 | } 13 | } 14 | 15 | obj.bye(); 16 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/2. debounce/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | 7 | h1 { 8 | font-size: 3.5rem; 9 | } 10 | 11 | .input { 12 | font-size: 2rem; 13 | padding: 10px; 14 | border: 1px solid black; 15 | } 16 | 17 | .input:focus { 18 | outline: none; 19 | } 20 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/11. while.js: -------------------------------------------------------------------------------- 1 | /** 2 | * while loop ✌ 3 | * do while loop 🤞 4 | */ 5 | 6 | 7 | // let i = 0; 8 | 9 | // while (i > 10){ 10 | // console.log(i); 11 | // i = i + 1 12 | // } 13 | 14 | // console.log("execution done!!!") 15 | 16 | let i = 0; 17 | 18 | do { 19 | console.log(i); 20 | i++; 21 | }while(i > 10) -------------------------------------------------------------------------------- /Module 3 - Functions/3. function return.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Functions 🔥🔥🔥 3 | * return 🚀🚀 4 | */ 5 | 6 | function calculateSum(x, y){ 7 | return x + y; 8 | } 9 | 10 | // console.log(calculateSum(12, 15)); 11 | 12 | const result = calculateSum(13, 21); 13 | console.log(result); 14 | 15 | // const output = calculateSum(99, 101); 16 | // console.log(output); -------------------------------------------------------------------------------- /Module 1 - Basics of Javascript/3. var_let_const.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Lesson 3 3 | * var v/s let v/s const 4 | */ 5 | 6 | // var message = "Hello"; 7 | // var message = "Hii"; 8 | // var message = "Bye"; 9 | // console.log(message); 10 | 11 | // let message = "Hello"; 12 | // message = "Hiii"; 13 | // console.log(message); 14 | 15 | const message = "hello"; 16 | console.log(message); 17 | 18 | -------------------------------------------------------------------------------- /Module 6 - Objects/10. this-keyword.js: -------------------------------------------------------------------------------- 1 | /** 2 | * this keyword 3 | * Refers to the object that is executing the function 4 | */ 5 | 6 | const user1 = { 7 | name: "prakash", 8 | showName: function () { 9 | console.log("here -", this.name); 10 | function showMessage() { 11 | console.log(this); 12 | } 13 | showMessage(); 14 | }, 15 | }; 16 | 17 | user1.showName(); 18 | -------------------------------------------------------------------------------- /Module 1 - Basics of Javascript/4. naming_convention.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Lesson 4 3 | * Variable Naming Convention 4 | */ 5 | let userName = "Prakash"; 6 | let userAge; 7 | let userHomeAddress; 8 | 9 | let age; 10 | 11 | let Age; 12 | 13 | // let _; 14 | 15 | // let $ = "Hello"; 16 | // console.log($) 17 | 18 | // let number1; 19 | 20 | // let number_2; 21 | 22 | 23 | console.log(userName); 24 | 25 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/12. while-exercise.js: -------------------------------------------------------------------------------- 1 | /** 2 | * User enters a number, if the number is greater than 50 then ask the user to enter a number less than 50 again 3 | */ 4 | 5 | let readlineSync = require("readline-sync"); 6 | 7 | let number = 500; 8 | 9 | while (number >= 50){ 10 | number = readlineSync.question("Enter a number less than 50 - "); 11 | } 12 | 13 | console.log("Number accepted"); -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/4. modal/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | width: 100%; 4 | position: absolute; 5 | top: 0; 6 | left: 0; 7 | background-color: aliceblue; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | .modal-container { 14 | width: 300px; 15 | border: 1px solid black; 16 | } 17 | 18 | .hide { 19 | display: none; 20 | } 21 | -------------------------------------------------------------------------------- /Module 5 - Array/9. destructuring.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Destructuring Array🚀🚀 3 | */ 4 | 5 | // const arr = [["html", "css", "js"], 1, 2, 3, 4, 5, 6]; 6 | 7 | // const [courses,a, b, ...rest] = arr; 8 | 9 | // console.log(rest); 10 | // console.log(courses); 11 | 12 | /** Swap Numbers */ 13 | 14 | let a = 5; 15 | let b = 10; 16 | 17 | [a, b] = [b, a]; 18 | 19 | console.log("A -", a); 20 | console.log("B -", b); 21 | -------------------------------------------------------------------------------- /Module 7 - More About Functions/8. scope-scopechain.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Scope and Scope Chain 3 | */ 4 | 5 | let a = 3; 6 | 7 | function x() { 8 | console.log({ a }); 9 | let b = 5; 10 | function y() { 11 | // inner function - inside function x 12 | let c = 7; 13 | console.log({ b }); 14 | function z() { 15 | console.log({ c }); 16 | } 17 | z(); 18 | } 19 | y(); 20 | } 21 | 22 | x(); 23 | -------------------------------------------------------------------------------- /Module 7 - More About Functions/9. closures.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A closure is the combination of a function bundled together with references to its lexical environment. 3 | * 4 | * In other words, A closure is a function that remembers its outer variables and can access them 5 | */ 6 | 7 | function x() { 8 | var a = 5; 9 | function y() { 10 | console.log(a); 11 | var a = 7; 12 | } 13 | y(); 14 | } 15 | 16 | x(); 17 | -------------------------------------------------------------------------------- /Module 1 - Basics of Javascript/8. type-conversion.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Type Conversion 🌟🌟 3 | * to String.. 4 | * to Number.. 5 | * to Boolean.. 6 | */ 7 | 8 | 9 | const a = "prakash"; 10 | const b = 0; 11 | 12 | 13 | console.log(Boolean(b)); 14 | 15 | 16 | // const c = String(a); 17 | // const d = String(b); 18 | 19 | // console.log(typeof a); 20 | // console.log(typeof b); 21 | // console.log(typeof c); 22 | // console.log(typeof d); -------------------------------------------------------------------------------- /Module 1 - Basics of Javascript/9. read-user-data.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Read data from user 3 | */ 4 | 5 | const readlineSync = require("readline-sync"); 6 | 7 | const userName = readlineSync.question("May I know your name? "); 8 | const userAge = readlineSync.question("May I know your age? "); 9 | 10 | console.log(`Welcome ${userName} to GFG`); 11 | 12 | const yearOfBirth = 2022 + Number(userAge); 13 | console.log(`You were born in the year ${yearOfBirth}`); -------------------------------------------------------------------------------- /Module 3 - Functions/2. anonymous function & function expression.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Functions 3 | * 1. Anonymous Function & Function Expression 🐱‍🚀💖 4 | */ 5 | 6 | 7 | 8 | let anonymousFunction = function greetMessage (){ 9 | console.log("Hello from GFG"); // hello from gfg 10 | console.log(typeof greetMessage) // function 11 | } 12 | 13 | console.log(typeof anonymousFunction); // function 14 | 15 | anonymousFunction(); 16 | 17 | 18 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/4. modal/index.js: -------------------------------------------------------------------------------- 1 | const modalContainer = document.querySelector(".container"); 2 | const button = document.querySelector(".button"); 3 | 4 | button.addEventListener("click", () => { 5 | modalContainer.classList.remove("hide"); 6 | }); 7 | 8 | modalContainer.addEventListener("click", (event) => { 9 | const button = event.target.name; 10 | if (button === "close") { 11 | modalContainer.classList.add("hide"); 12 | } 13 | }); 14 | -------------------------------------------------------------------------------- /Module 6 - Objects/4. shorthand.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Short Hand ✋✋ 3 | */ 4 | 5 | function getOjects(name, city){ 6 | return { 7 | name, 8 | city 9 | } 10 | } 11 | 12 | const student1 = getOjects("Prakash", "Mumbai"); 13 | console.log(student1); 14 | 15 | const student2 = getOjects("ashish", "sirsa"); 16 | console.log(student2); 17 | 18 | // const student = "ashish"; 19 | // const course = "redux"; 20 | 21 | // console.log({student, course}) 22 | -------------------------------------------------------------------------------- /Module 8 - Coding Drills/11. occurence.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Count occurence of distinct elements 3 | * Output: {a:2, b:2,c:2,d:1,e:1,f:1} 4 | */ 5 | 6 | /** 7 | * const arr = [1, 2, 3, 4, 5] 8 | * {even: 6, odd: 9} 9 | */ 10 | 11 | const arr = ["a", "b", "c", "c", "d", "e", "b", "f", "a"]; 12 | 13 | const result = arr.reduce( 14 | (acc, cur) => 15 | cur in acc ? { ...acc, [cur]: acc[cur] + 1 } : { ...acc, [cur]: 1 }, 16 | {} 17 | ); 18 | console.log(result); 19 | -------------------------------------------------------------------------------- /Module. 15b - Project recipe-app/single-recipe.js: -------------------------------------------------------------------------------- 1 | const cardId = localStorage.getItem("id"); 2 | 3 | const SINGLERECIPEURL = `https://recipeapi.prakashsakari.repl.co/api/recipes/${cardId}`; 4 | 5 | const getData = async (URL) => { 6 | try { 7 | const { data } = await axios.get(URL); 8 | return data; 9 | } catch (err) { 10 | console.log(err); 11 | } 12 | }; 13 | 14 | const singleRecipe = await getData(SINGLERECIPEURL); 15 | console.log(singleRecipe); 16 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/1. timer/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | 8 | .heading-1 { 9 | font-size: 3rem; 10 | } 11 | 12 | .para { 13 | font-size: 3.5rem; 14 | } 15 | 16 | .btn-container { 17 | display: flex; 18 | gap: 1rem; 19 | } 20 | 21 | .button { 22 | font-size: 2rem; 23 | } 24 | 25 | .button:hover { 26 | cursor: pointer; 27 | } 28 | -------------------------------------------------------------------------------- /Module 5 - Array/6. sort.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Array Sort - 🚀🚀 3 | */ 4 | 5 | // const fruits = ["apple", "cherry", "orange", "banana", "ball"]; 6 | // fruits.sort(); 7 | // console.log(fruits); 8 | 9 | const numbers = [1, 4, 2, 6, 7, 3, 9, 8, 5, 61, 31, 51, 11]; 10 | 11 | function sortInAscendingOrder (a, b) { 12 | return a - b 13 | } 14 | 15 | function sortInDescendingOrder (a, b) { 16 | return b - a 17 | } 18 | 19 | numbers.sort(sortInDescendingOrder); 20 | console.log(numbers); -------------------------------------------------------------------------------- /Module 4 - String/2. str-meth-1.js: -------------------------------------------------------------------------------- 1 | /** 2 | * String Methods 🔥🔥 3 | * charAt() | charCodeAt() 4 | */ 5 | 6 | const displayMessage = "I am a Mentor at GeeksforGeekS"; 7 | const index = 29; 8 | const char = displayMessage.charAt(index); 9 | 10 | // console.log(char); 11 | 12 | // ASCII 13 | 14 | const asciiCode = displayMessage.charCodeAt(index); 15 | console.log(`The acsii code of ${char} is ${asciiCode}`) 16 | 17 | 18 | /** 19 | * exercise to encode 20 | * geeks --> iffmu 21 | */ -------------------------------------------------------------------------------- /Module 5 - Array/5. includes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * includes 🔥🔥 3 | * arr.includes(any) 4 | */ 5 | 6 | const availableSize = ["S", "M", "L", "XL"]; 7 | const readlineSync = require("readline-sync"); 8 | const userSize = readlineSync.question("Which size of Shirt do you want (S/M/L/XL/XXL/XXXL) - "); 9 | 10 | 11 | const isSizeAvailable = availableSize.includes(userSize); 12 | if (isSizeAvailable){ 13 | console.log("Size is available"); 14 | }else{ 15 | console.log("Size is unavailable"); 16 | } -------------------------------------------------------------------------------- /Module 6 - Objects/1. object.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Objects --> {key: value} 🔥🔥🔥 3 | */ 4 | 5 | //Object Literal 6 | const personObj = { 7 | name: "Prakash", //property 8 | age: 99, 9 | job: "Mentor", 10 | course: ["html", "css", "js", "reactjs"], 11 | "is Admin": "true" 12 | }; 13 | 14 | // console.log(personObj.age); 15 | // console.log(personObj.name); 16 | 17 | 18 | console.log(personObj["name"]); 19 | console.log(personObj["job"]); 20 | console.log(personObj["is Admin"]); -------------------------------------------------------------------------------- /Module 7 - More About Functions/5. arguments.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Arguments Object in Non-Arrow Function 3 | * -- arguments object is an array like object present locally inside a function 4 | * and it contains value of all the arguments passed to a function. 5 | */ 6 | 7 | function calculateTotal(a = 10) { 8 | // a = 100; 9 | console.log(a); 10 | console.log(arguments); 11 | arguments[0] = 9; 12 | console.log(arguments); 13 | console.log(a); 14 | } 15 | 16 | calculateTotal(4); 17 | -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/promise.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Promise - Promise is an object that has the status of an async operation, and its corresponding value. 3 | */ 4 | 5 | const URL = "https://mockdata.prakashsakari.repl.co/users"; 6 | 7 | let promise = fetch(URL); 8 | promise 9 | .then(function (response) { 10 | return response.json(); 11 | }) 12 | .then(function (data) { 13 | console.log({ data }); 14 | }) 15 | .catch(function (error) { 16 | console.log("Error Occured", error); 17 | }); 18 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/13. try-catch.js: -------------------------------------------------------------------------------- 1 | /**try catch block 2 | * 3 | * try{ 4 | * some line of code.... 5 | * }catch(error){ 6 | * console.log(error) 7 | * } 8 | * 9 | */ 10 | 11 | const username = "prakash"; 12 | try { 13 | someFunction(); 14 | console.log("hey there"); 15 | } catch (error) { 16 | console.log(error.name); 17 | console.log(error.message); 18 | console.log(error.stack); 19 | } finally { 20 | console.log("finally executed"); 21 | } 22 | 23 | console.log(username); 24 | -------------------------------------------------------------------------------- /Module 4 - String/1. string.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Iterating over Strings 3 | */ 4 | 5 | let displayMessage = "I am a Mentor at GeeksforGeeks" 6 | 7 | for (let i=0; i text.indexOf(char) === -1 ? "char not found" : "char found"; 15 | 16 | const result = findCharacter("prakash@xyz.com", "#"); 17 | console.log(result) -------------------------------------------------------------------------------- /Module 4 - String/4. includes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * string.includes() 🐱‍🚀🐱‍🚀 3 | */ 4 | 5 | const displayMessage = "Z love to code in dark modez"; 6 | const vowels = "aeiou"; 7 | let flag = false; 8 | 9 | for (let char of displayMessage){ 10 | if (vowels.includes(char.toLowerCase())){ 11 | flag = true; 12 | break 13 | }else{ 14 | flag = false; 15 | } 16 | } 17 | 18 | if (flag){ 19 | console.log("String has vowels"); 20 | }else{ 21 | console.log("String doesn't have vowels"); 22 | } -------------------------------------------------------------------------------- /Module 8 - Coding Drills/2. delete-vowels.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WAP to delete all the vowels from a string. 3 | */ 4 | 5 | const string = "The quick browm fox jumps over the lazy dog"; 6 | 7 | function getStrWithNoVowels(str) { 8 | const vowels = ["a", "e", "i", "o", "u"]; 9 | let result = ""; 10 | for (let char of str) { 11 | if (!vowels.includes(char.toLowerCase())) { 12 | result += char; 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | const updatedStr = getStrWithNoVowels(string); 19 | console.log(updatedStr); 20 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/2. debounce/index.js: -------------------------------------------------------------------------------- 1 | const input = document.querySelector(".input"); 2 | 3 | function inputHanlder(event) { 4 | console.log(event.target.value); 5 | } 6 | 7 | function debounce(callback, delay) { 8 | let timerId; 9 | return function (...args) { 10 | clearTimeout(timerId); 11 | timerId = setTimeout(() => { 12 | callback(...args); 13 | }, delay); 14 | }; 15 | } 16 | 17 | const deboouncedInputHandler = debounce(inputHanlder, 500); 18 | 19 | input.addEventListener("keyup", deboouncedInputHandler); 20 | -------------------------------------------------------------------------------- /Module. 13 - Coding Drills Part 2/reverse-words.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Q2: Reverse words of a string without changing their order 3 | * 4 | * Input: react is a library 5 | * Outut: tcaer si a yrarbil 6 | */ 7 | 8 | const str = "react is a library"; 9 | 10 | function reverseWordsOfStr(str) { 11 | let arrOfWords = str.split(" "); 12 | let reversedArrOfWord = arrOfWords.map((word) => 13 | word.split("").reverse().join("") 14 | ); 15 | return reversedArrOfWord.join(" "); 16 | } 17 | 18 | const result = reverseWordsOfStr(str); 19 | console.log(result); 20 | -------------------------------------------------------------------------------- /Module. 13 - Coding Drills Part 2/arrange-words.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Q1: Arrange the words in the sentence in ascending order of their length 3 | * Input - gfg is a comp science learning platform 4 | * Output - a is gfg comp science learning platform 5 | */ 6 | 7 | const str = "gfg is a comp science learning platform"; 8 | 9 | function sortTextByWordLength(str) { 10 | let arrOfWords = str.split(" "); 11 | arrOfWords.sort((a, b) => a.length - b.length); 12 | return arrOfWords.join(" "); 13 | } 14 | 15 | const resutl = sortTextByWordLength(str); 16 | console.log(resutl); 17 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/10. nested-for-loop.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Nested for loop 😎😎 3 | */ 4 | 5 | 6 | /** 7 | * i x j = i*j 8 | * 1 x 1 = 1 9 | * 1 x 2 = 2 10 | * 1 x 3 = 3 11 | * 12 | * ----- 13 | * 14 | * 2 x 1 = 2 15 | * 2 x 2 = 4 16 | */ 17 | 18 | for (let i=1; i<=10; i++){ 19 | for (let j=1; j<=12; j++){ 20 | let product = i * j; 21 | console.log(`${i} x ${j} = ${product}`) 22 | } 23 | console.log("---------") 24 | } 25 | 26 | /** 27 | * arr = ["apple", "mango", "banana"] 28 | * arr1 = ["apple", "oragne"] 29 | */ -------------------------------------------------------------------------------- /Module 3 - Functions/1. function declaration.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Functions 🔥🔥🔥 3 | * 1. Function Statement/Function Declaration 4 | * 5 | */ 6 | 7 | 8 | 9 | // Function Declaration or Function Statement 10 | function greetMessage(name, city){ // name is called as a parameter 11 | console.log(`${name}, welcome to geeksforgeeks`); 12 | console.log(`Thank you for joining from ${city}`) 13 | } 14 | 15 | 16 | //Calling the function 17 | greetMessage("Prakash", "Mumbai"); // Prakash is called as an argument 18 | greetMessage("Ashish", "Sirsa"); 19 | greetMessage("Jay"); 20 | -------------------------------------------------------------------------------- /Module 3 - Functions/5. func-exercise.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Exercise 🚀🤡 3 | * Sum of all numbers from 1-20 --> 0+1+2+3+4+......+20 4 | * total = 0 + 1 ==> 1 --> total = 1 5 | * total + 2 --> 1 + 2 --> 3 --> total 6 | * total + 3 --> 3 + 3 --> 6 --> total 7 | */ 8 | 9 | function calculateSum(min, max){ 10 | let total = 0; 11 | for (let i=min; i<=max; i++){ 12 | total = total + i; 13 | } 14 | return total 15 | } 16 | 17 | const result = calculateSum(1, 20); 18 | console.log(result); 19 | 20 | const output = calculateSum(20, 100); 21 | console.log(output); 22 | -------------------------------------------------------------------------------- /Module 5 - Array/3. push-concat.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Array Methods - Push & Concat 3 | */ 4 | 5 | 6 | /** Mutable (Changed) Object OR Immutable (Not Changed) */ 7 | 8 | // let fruits = ["apple", "mango", "banana"]; 9 | // console.log(fruits); 10 | // fruits.push("orange"); 11 | // console.log(fruits); 12 | 13 | // fruits.push("kiwi", "berries", "melons"); 14 | // console.log(fruits); 15 | 16 | let arr1 = [1, 2, 3]; 17 | let arr2 = [4, 5, 6]; 18 | let arr3 = [7, 8, 9]; 19 | 20 | let arr4 = arr1.concat(arr2); 21 | let arr5 = arr1.concat(arr2, arr3, arr4) 22 | console.log(arr4); 23 | console.log(arr5); -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/3. throttling/index.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector(".container"); 2 | 3 | const throttle = (callback, delay) => { 4 | let isWaiting = false; 5 | return (...args) => { 6 | if (isWaiting) return; 7 | callback(...args); 8 | isWaiting = true; 9 | setTimeout(() => { 10 | isWaiting = false; 11 | }, delay); 12 | }; 13 | }; 14 | 15 | const handleScroll = () => { 16 | console.log("scrolled"); 17 | }; 18 | 19 | const throttledScroll = throttle(handleScroll, 500); 20 | 21 | container.addEventListener("scroll", throttledScroll); 22 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/2. debounce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Debounce 9 | 10 | 11 | 12 | 13 |
14 |

Debounce

15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Module 6 - Objects/3. computed.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Adding Property to Object 3 | * Computed Property 4 | */ 5 | 6 | const readlineSync = require("readline-sync"); 7 | const key = readlineSync.question("What do you want to know about the mentor (name/age/city/state) - "); 8 | const course = readlineSync.question("Which course do you want to learn (html/css/js/react/redux) - "); 9 | 10 | const obj = { 11 | name: "Prakash", 12 | age: 100, 13 | [course]: "course not available" 14 | } 15 | 16 | obj.city = "Mumbai"; 17 | obj.state = "MH"; 18 | 19 | console.log(obj["name"]); 20 | console.log(obj[course]); -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/createpromise.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Promise 3 | */ 4 | 5 | const isRequestSuccessful = false; 6 | 7 | const db = [ 8 | { id: 1, name: "prakash" }, 9 | { id: 2, name: "ashish" }, 10 | ]; 11 | 12 | let promise = new Promise((resolve, reject) => { 13 | if (isRequestSuccessful) { 14 | setTimeout(() => resolve(db), 3000); 15 | } else { 16 | const error = new Error("Something went wrong"); 17 | reject(error.message); 18 | } 19 | }); 20 | 21 | promise 22 | .then((response) => console.log(response)) 23 | .catch(function (err) { 24 | console.log(err); 25 | }); 26 | -------------------------------------------------------------------------------- /Module. 16 - Prototype & Classes/static.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Static Methods 3 | * Static Properties 4 | */ 5 | 6 | class Children { 7 | static id = 1; 8 | 9 | constructor(name, age, id) { 10 | this.name = name; 11 | this.age = age; 12 | this.id = Children.id++; 13 | } 14 | 15 | static sortByAge(a, b) { 16 | return a.age - b.age; 17 | } 18 | } 19 | 20 | const child1 = new Children("prakash", 11); 21 | const child2 = new Children("ashish", 19); 22 | const child3 = new Children("riya", 9); 23 | 24 | let arr = [child1, child2, child3]; 25 | console.log(arr.sort(Children.sortByAge)); 26 | -------------------------------------------------------------------------------- /Module 8 - Coding Drills/10. average-age.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Average-Age of Family members 3 | */ 4 | 5 | const familyMembers = [ 6 | { 7 | name: "Narsingrao", 8 | age: 56, 9 | }, 10 | { 11 | name: "Padma", 12 | age: 52, 13 | }, 14 | { 15 | name: "Poonam", 16 | age: 30, 17 | }, 18 | { 19 | name: "Prakash", 20 | age: 27, 21 | }, 22 | { 23 | name: "Ashish", 24 | age: 50, 25 | }, 26 | ]; 27 | 28 | const totalAge = familyMembers.reduce((acc, cur) => acc + cur.age, 0); 29 | const averageAge = totalAge / familyMembers.length; 30 | console.log(averageAge); 31 | -------------------------------------------------------------------------------- /Module. 12 - Polyfill/map.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A polyfill is a piece of Javascript code used to provide modern functionality on older browsers that do not support it. 3 | */ 4 | 5 | // Polyfill for map 6 | 7 | const arr = [1, 2, 3, 4, 5]; 8 | 9 | function getSquareOfNum(number) { 10 | return number + 2; 11 | } 12 | 13 | Array.prototype.myMap = function (callback) { 14 | let tempArr = []; 15 | for (let i = 0; i < this.length; i++) { 16 | tempArr.push(callback(this[i], i, this)); 17 | } 18 | return tempArr; 19 | }; 20 | 21 | const squaredArr1 = arr.myMap(getSquareOfNum); 22 | console.log(squaredArr1); 23 | -------------------------------------------------------------------------------- /Module 8 - Coding Drills/8. array_name.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create an array of names of senoir employees 3 | */ 4 | 5 | const employees = [ 6 | { 7 | name: "Prakash", 8 | numOfYears: 5, 9 | }, 10 | { 11 | name: "Ashish", 12 | numOfYears: 3, 13 | }, 14 | { 15 | name: "Riya", 16 | numOfYears: 1, 17 | }, 18 | { 19 | name: "Jay", 20 | numOfYears: 1, 21 | }, 22 | { 23 | name: "Chinmoy", 24 | numOfYears: 5, 25 | }, 26 | ]; 27 | 28 | const result = employees 29 | .filter((employee) => employee.numOfYears > 3) 30 | .map((employee) => employee.name); 31 | console.log(result); 32 | -------------------------------------------------------------------------------- /Module 1 - Basics of Javascript/6. concatenation.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Concatenation 4 | * Template Literal/Strings 5 | */ 6 | 7 | let userName = "Prakash"; 8 | let age = 99; 9 | 10 | //My name is Prakash and I am 99 years old 11 | 12 | // let message = "My name is " + userName + " and I am " + age + " years old."; 13 | // console.log(message); 14 | 15 | let text = `My name is ${userName} and I am ${age} years old.` 16 | // console.log(text); 17 | 18 | 19 | let multipleLineText = `My name is ${userName} 20 | I am ${age} years old. 21 | I love to code 22 | I love to eat 23 | I love to sing` 24 | console.log(multipleLineText); 25 | 26 | -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/promise.allSettled.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Promise.allSettled(arrOfPromises) 3 | */ 4 | 5 | let promise1 = new Promise((resolve) => 6 | setTimeout(() => resolve("Promise 1 resolved"), 3000) 7 | ); 8 | let promise2 = new Promise((_, reject) => 9 | setTimeout(() => reject(new Error("Promise 2 reject")), 2000) 10 | ); 11 | let promise3 = new Promise((resolve) => 12 | setTimeout(() => resolve("Promise 3 rejected"), 1000) 13 | ); 14 | 15 | let arrOfPromises = [promise1, promise2, promise3]; 16 | 17 | let promise = Promise.allSettled(arrOfPromises); 18 | promise.then((response) => response.forEach((data) => console.log(data))); 19 | -------------------------------------------------------------------------------- /Module 1 - Basics of Javascript/2. variables.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Lesson - 2 3 | * Why Variables 🚀 4 | * What is a Variable 🔥 5 | * Different ways to create variables ⭐ 6 | */ 7 | 8 | // var message; 9 | 10 | // message = "Hello GeeksforGeeks!"; 11 | 12 | // message = "My name is Prakash Sakari!"; 13 | 14 | // console.log(message); 15 | 16 | let text; //Creating Variable or Declaring a variable 17 | 18 | text = "JavaScript is the best!!!!"; // Assigning a value to a variable 19 | 20 | // console.log(text); 21 | 22 | // let myname = "Prakash Sakari!!" 23 | 24 | // console.log(myname); 25 | 26 | const number = 1; 27 | 28 | console.log(number); 29 | -------------------------------------------------------------------------------- /Module 6 - Objects/5. existence.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Property Existence 🔥🔥 3 | * & for loop 4 | */ 5 | 6 | const obj = { 7 | name: "Prakash", 8 | city: "Mumbai" 9 | } 10 | 11 | // const key = "age"; 12 | 13 | // const isPropertyFound = key in obj; 14 | // console.log(isPropertyFound); 15 | 16 | // for (let key in obj){ 17 | // console.log(key, obj[key]); 18 | // } 19 | 20 | const Obj = { 21 | ashish: "700", 22 | prakash: "750", 23 | riya: "1000", 24 | adarsh: "500" 25 | } 26 | 27 | let totalAmount = 0; 28 | for (let key in Obj){ 29 | totalAmount = totalAmount + Number(Obj[key]) 30 | } 31 | 32 | console.log(totalAmount); -------------------------------------------------------------------------------- /Module 6 - Objects/11. constructor-new.js: -------------------------------------------------------------------------------- 1 | /** 2 | * new keyword and contructor functions 3 | * 4 | * Constructor functions technically are regular functions. They have 2 conventions though 5 | They are named with capital letter first. 6 | They should be executed only with "new" operator. 7 | */ 8 | 9 | function User(name, age) { 10 | (this.name = name), (this.age = age); 11 | } 12 | 13 | const user1 = new User("prakash", 101); 14 | const user2 = new User("ashish", 111); 15 | const user3 = new User("riya", 99); 16 | const user4 = new User("sadaf", 100); 17 | 18 | console.log(user1); 19 | console.log(user2); 20 | console.log(user3); 21 | console.log(user4); 22 | -------------------------------------------------------------------------------- /Module. 16 - Prototype & Classes/class.js: -------------------------------------------------------------------------------- 1 | /** 2 | * CLASS 3 | */ 4 | 5 | class User { 6 | constructor(name, role, isAdmin, isLoggedIn) { 7 | (this.name = name), 8 | (this.role = role), 9 | (this.isAdmin = isAdmin), 10 | (this.isLoggedIn = isLoggedIn); 11 | } 12 | 13 | displayInfo() { 14 | console.log(`${this.name} is a ${this.role}`); 15 | } 16 | } 17 | 18 | const user1 = new User("Prakash", "Mentor", false, true); 19 | const user2 = new User("Ashish", "Mentor", false, true); 20 | const user3 = new User("Sakshi", "Mentor", false, true); 21 | console.log(user1.displayInfo()); 22 | console.log(user2); 23 | console.log(user3); 24 | -------------------------------------------------------------------------------- /Module. 16 - Prototype & Classes/prototype.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Prototype:: 3 | * What is a Prototype 4 | * Protoype Chaining 5 | * Same methods 6 | * Value of this 7 | * for in v/s Object.keys 8 | */ 9 | 10 | const loggedInStatus = { 11 | isLoggedIn: false, 12 | }; 13 | 14 | const admin = { 15 | isAdmin: true, 16 | __proto__: loggedInStatus, 17 | showMessage() { 18 | console.log(this.isAdmin); 19 | }, 20 | }; 21 | 22 | const user = { 23 | name: "prakash", 24 | role: "mentor", 25 | __proto__: admin, 26 | }; 27 | console.log(user); 28 | console.log(Object.keys(user)); 29 | 30 | for (let key in user) { 31 | console.log(key); 32 | } 33 | -------------------------------------------------------------------------------- /Module 8 - Coding Drills/9. object-even-odd-sum.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Given an array write a function that returns an object with sum of even and odd numbers 3 | * arr = [1, 2, 3, 4, 5, 6] 4 | * OUTPUT = {even: 12, odd: 9} 5 | */ 6 | 7 | const arr = [1, 2, 3, 4, 5, 6, 7, 8]; 8 | 9 | const reducerFunction = (acc, cur) => 10 | cur % 2 === 0 11 | ? { ...acc, even: acc.even + cur } 12 | : { ...acc, odd: acc.odd + cur }; 13 | 14 | const result = arr.reduce(reducerFunction, { even: 0, odd: 0 }); 15 | 16 | console.log(result); 17 | 18 | /** 19 | * const acc = {even: 0, odd: 0} 20 | * const cur = 1 21 | * acc.even + cur; 22 | * acc --> {even: 1, odd: 0} 23 | */ 24 | -------------------------------------------------------------------------------- /Module 8 - Coding Drills/4. secret-code.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Generate Secret Code from a given string 3 | * Input --> prakash 4 | * Encode By Chars --> 2 5 | * Output --> rtcmcuj 6 | * ASCII Table 7 | */ 8 | 9 | const inputStr = "prakash"; 10 | const shiftByPos = 4; 11 | 12 | const getEncodedStr = (str, shiftByPos) => { 13 | let encodedStr = ""; 14 | let currentPos = 0, newPos = 0; 15 | for (let i=0; i 2 | 3 | 4 | 5 | 6 | 7 | Home | Success 8 | 9 | 10 | 11 |
12 |

Login Successful

13 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /Module. 15b - Project recipe-app/single-recipe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Single Recipe | Recipe App 8 | 9 | 10 | 11 |
12 |

13 | Recipe App 14 |

15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/promise.race.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Promise.race(arrOfPromises) 3 | */ 4 | 5 | let promise1 = new Promise((resolve) => 6 | setTimeout(() => resolve("Promise 1 resolved"), 3000) 7 | ); 8 | let promise2 = new Promise((_, reject) => 9 | setTimeout(() => reject(new Error("Promise 2 reject")), 2000) 10 | ); 11 | let promise3 = new Promise((resolve) => 12 | setTimeout(() => resolve("Promise 3 resolved"), 4000) 13 | ); 14 | 15 | let arrOfPromises = [promise1, promise2, promise3]; 16 | 17 | let promise = Promise.race(arrOfPromises); 18 | // promise.then((res) => console.log(res)); 19 | 20 | let promiseAny = Promise.any(arrOfPromises); 21 | promiseAny.then((res) => console.log(res)); 22 | -------------------------------------------------------------------------------- /Module 5 - Array/1. array.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Arrays ⚡⚡ --> Non-Primitive Data Type 3 | */ 4 | 5 | let s1 = "Prakash"; 6 | let s2 = "Ashish"; 7 | let s3 = "Riya"; 8 | let s4 = "Adarsh"; 9 | 10 | let studentsName = ["Prakash", "Adarsh", "Riya", "Ashish", "Jay", "Piyush", "Amit", "Kirti", "Sadaf", "Chinmoy"]; 11 | 12 | let arrLength = studentsName.length; 13 | 14 | for (let i=0; i= 0; i--) { 9 | reversedStr += str[i]; 10 | } 11 | return reversedStr; 12 | } 13 | 14 | const result = getReversedStr(str); 15 | if (result === str) { 16 | console.log("String is a Palindrome"); 17 | } else { 18 | console.log("String is not a Palindrome"); 19 | } 20 | 21 | // const reversedStr = str.split("").reverse().join("") 22 | 23 | // if (str === reversedStr){ 24 | // console.log("String is a Palindrome"); 25 | // }else{ 26 | // console.log("String is not a Palindrome"); 27 | // } 28 | -------------------------------------------------------------------------------- /Module. 12 - Polyfill/bind.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A polyfill is a piece of Javascript code used to provide modern functionality on older browsers that do not support it. 3 | */ 4 | 5 | // Polyfill for bind 6 | 7 | const obj = { 8 | name: "prakash", 9 | city: "mumbai", 10 | }; 11 | 12 | function displayUserInfo(state) { 13 | console.log(`Hi I am ${this.name} form ${this.city}, ${state}`); 14 | } 15 | 16 | Function.prototype.myBind = function (context, ...args) { 17 | context.wrapperFunc = this; 18 | return function (...rest) { 19 | context.wrapperFunc(...args, ...rest); 20 | delete context.wrapperFunc; 21 | }; 22 | }; 23 | 24 | const bindFunc = displayUserInfo.myBind(obj, "maharashtra"); 25 | bindFunc(); 26 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/4. ternary.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Ternary Operators🌟🔥🌟 --> condition ? yes : no 3 | */ 4 | 5 | const totalMarksScored = 100; 6 | 7 | if (totalMarksScored < 40){ 8 | console.log("You need to work hard."); 9 | }else if (totalMarksScored < 60){ 10 | console.log("B Grade"); 11 | }else if (totalMarksScored < 75){ 12 | console.log("A Grade"); 13 | }else if(totalMarksScored < 85){ 14 | console.log("A+ Grade") 15 | }else{ 16 | console.log("Genius") 17 | } 18 | 19 | const result = totalMarksScored < 40 ? "You need to work hard" : totalMarksScored < 60 ? "B Grade" : totalMarksScored < 75 ? "A Grade" : totalMarksScored < 85 ? "A+ Grade" : "Genius"; 20 | 21 | console.log(result); 22 | 23 | -------------------------------------------------------------------------------- /Module 7 - More About Functions/1. pure-func.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Pure Function 💖💖 3 | * 1. It takes an argument 4 | * 2. It should return something 5 | * 3. For same input you should get the same output 6 | * 4. The result should not be influenced by outer parameter 7 | * 5. It should not mutate the original argument 8 | */ 9 | 10 | // const x = 5; 11 | 12 | // function getDoubleValue(number){ 13 | // return number * 2 * x; 14 | // } 15 | 16 | // const result = getDoubleValue(5); 17 | // console.log(result); 18 | 19 | 20 | function appendNumbers(arr){ 21 | let newArr = []; 22 | newArr.push(...arr, 5, 6); 23 | return newArr; 24 | } 25 | 26 | const result = appendNumbers([1, 2, 3, 4]); 27 | console.log(result) -------------------------------------------------------------------------------- /Module 7 - More About Functions/10. recursion.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Recursion is a programming term where the function is called from itself 3 | */ 4 | 5 | // factorial of 5 --> 5x4x3x2x1 - 120 6 | // number x (number - 1) x (number - 2) x (number - 3) x (number - 4) 7 | 8 | function factorialRecursive(number) { 9 | if (number === 1) { 10 | return number; 11 | } 12 | return number * factorialRecursive(number - 1); 13 | } 14 | 15 | const result = factorialRecursive(5); 16 | console.log(result); 17 | 18 | // function factorial(number) { 19 | // let total = 1; 20 | // for (let i = number; i >= 1; i--) { 21 | // total = total * i; 22 | // } 23 | // return total; 24 | // } 25 | 26 | // console.log(factorial(5)); 27 | -------------------------------------------------------------------------------- /Module. 12 - Polyfill/filter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A polyfill is a piece of Javascript code used to provide modern functionality on older browsers that do not support it. 3 | */ 4 | 5 | // Polyfill for filter 6 | 7 | const arr = [1, 2, 3, 4, 5, 6]; 8 | 9 | function getFilteredArr(number) { 10 | return number > 3; // returns a boolean value; true or false 11 | } 12 | 13 | Array.prototype.myFilter = function (callback) { 14 | let tempArr = []; 15 | for (let i = 0; i < this.length; i++) { 16 | if (callback.call(this, this[i], i, this)) { 17 | // getFilteredArr(5) 18 | tempArr.push(this[i]); 19 | } 20 | } 21 | return tempArr; 22 | }; 23 | 24 | const result = arr.myFilter(getFilteredArr); 25 | console.log(result); 26 | -------------------------------------------------------------------------------- /Module 9 - Module-DOM/bubling-capturing.js: -------------------------------------------------------------------------------- 1 | /** Event Bubling and Capturing */ 2 | 3 | let form = document.querySelector("#form"); 4 | let div = document.querySelector("#div"); 5 | let para = document.querySelector("#p"); 6 | 7 | para.addEventListener("click", () => { 8 | alert("para tag"); 9 | }); 10 | 11 | div.addEventListener("click", () => { 12 | alert("div tag"); 13 | }); 14 | 15 | form.addEventListener("click", () => { 16 | alert("form tag"); 17 | }); 18 | 19 | para.addEventListener("click", () => { 20 | alert("para tag"); 21 | }, true); 22 | 23 | div.addEventListener("click", () => { 24 | alert("div tag"); 25 | }, true); 26 | 27 | form.addEventListener("click", () => { 28 | alert("form tag"); 29 | }, true); -------------------------------------------------------------------------------- /Module. 12 - Polyfill/reduce.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A polyfill is a piece of Javascript code used to provide modern functionality on older browsers that do not support it. 3 | */ 4 | 5 | // Polyfill for reduce 6 | 7 | const arr = [1, 2, 3, 4, 5, 6]; 8 | 9 | function getSum(acc, cur) { 10 | return acc + cur; // 3 + 3 11 | } 12 | 13 | Array.prototype.myReduce = function (callback, initalValue) { 14 | let acc = initalValue ? initalValue : this[0]; // acc = 1 15 | for (let i = initalValue ? 0 : 1; i < this.length; i++) { 16 | // this[2] = 3 = cur 17 | // cur = this[i]; 18 | acc = callback.call(this, acc, this[i], i, this); 19 | } 20 | return acc; 21 | }; 22 | 23 | const total = arr.myReduce(getSum, 8); 24 | console.log(total); 25 | -------------------------------------------------------------------------------- /Module 6 - Objects/7. optional-chaining.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Optional Chaining 😎😎 ?. 3 | */ 4 | 5 | const user = { 6 | name: "Prakash", 7 | age: 99, 8 | address: { // optional 9 | street: "Kalina", 10 | city: "Mumbai" 11 | }, 12 | likes: "Eat Sing Sleep Repeat", 13 | getDisplayMessage: function () { 14 | console.log("Welcome Prakash") 15 | } 16 | } 17 | 18 | // Sol 01 19 | 20 | // if (user.address !== undefined){ 21 | // console.log(user.address.city); 22 | // }else{ 23 | // console.log("address not found") 24 | // } 25 | 26 | // Sol 2 27 | console.log(user.address?.city); 28 | 29 | // user.getDisplayMessage(); 30 | // console.log(user.getDisplayAddress?.()); 31 | 32 | console.log(user.hobbies); 33 | -------------------------------------------------------------------------------- /Module. 15a - Project - Movie App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gfg_movie_app-student-version", 3 | "version": "1.0.0", 4 | "description": "Movie Listing App", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/prakashsakari/gfg_movie_app-student-version.git" 12 | }, 13 | "keywords": [ 14 | "Movies" 15 | ], 16 | "author": "Prakash Sakari", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/prakashsakari/gfg_movie_app-student-version/issues" 20 | }, 21 | "homepage": "https://github.com/prakashsakari/gfg_movie_app-student-version#readme", 22 | "dependencies": { 23 | "axios": "^1.3.4" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /Module. 12 - Polyfill/flat.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A polyfill is a piece of Javascript code used to provide modern functionality on older browsers that do not support it. 3 | */ 4 | 5 | // Polyfill for flat 6 | 7 | const arr = [1, 2, 3, 4, [5, 6], [[7, 8]]]; // [1, 2, 3, 4, 5, 6, 7, 8];\ 8 | 9 | Array.prototype.myFlat = function (depth = 1) { 10 | let tempArr = []; 11 | function getFlattendArr(array, depth) { 12 | for (let element of array) { // array = [[7, 8]] 13 | if (Array.isArray(element) && depth) { 14 | getFlattendArr(element, depth - 1); 15 | } else { 16 | tempArr.push(element); 17 | } 18 | } 19 | } 20 | getFlattendArr(this, depth); 21 | return tempArr; 22 | }; 23 | 24 | const result = arr.myFlat(2); 25 | 26 | console.log(result); 27 | -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/callback.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Callback Functions - A callback function is a function passed into another function as an argument, which is then invoked inside the outer function. 3 | */ 4 | 5 | // e.g - 01 6 | 7 | function outer(callback) { 8 | callback(); 9 | } 10 | 11 | function showMessage() { 12 | console.log("Hello from callback function"); 13 | } 14 | 15 | outer(showMessage); 16 | 17 | // e.g - 02 18 | 19 | const btn = document.getElementById("btn"); 20 | btn.addEventListener("click", function () { 21 | console.log("clicked"); 22 | }); 23 | 24 | // e.g - 03 25 | 26 | setTimeout(function callback() { 27 | console.log("executed after a delay"); 28 | }, 4000); 29 | 30 | // fetch("http://.....") 31 | // .then(function(){ 32 | // //response logic 33 | // }) 34 | -------------------------------------------------------------------------------- /Module. 16 - Prototype & Classes/inheritance.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Inheritance 3 | */ 4 | // Parent 5 | class Laptop { 6 | constructor(ram, processor, generation) { 7 | this.ram = ram; 8 | this.processor = processor; 9 | this.generation = generation; 10 | } 11 | } 12 | 13 | // Child 14 | class Dell extends Laptop { 15 | constructor(ram, processor, generation, modelName, price) { 16 | super(ram, processor, generation); 17 | this.modelName = modelName; 18 | this.price = price; 19 | } 20 | displayMessage() { 21 | console.log( 22 | `Laptop Spec:: RAM ${this.ram} - Processor ${this.processor} - ${this.generation} Gen - ModelName ${this.modelName} - Price ${this.price}` 23 | ); 24 | } 25 | } 26 | 27 | const dell1 = new Dell("8GB", "intel", "i5", "Dell Latitude", "45000Rs"); 28 | dell1.displayMessage(); 29 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/1. timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Stop Watch 10 | 11 | 12 | 13 |
14 |

Stop Watch Timer

15 |

00 : 00 : 00

16 |
17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/2. conditional-statements.js: -------------------------------------------------------------------------------- 1 | /** Conditional Statements 2 | * 3 | */ 4 | 5 | const readlineSync = require("readline-sync"); 6 | 7 | const number = Number(readlineSync.question("Enter a number? ")); 8 | 9 | const remainderAfterDivisionByThree = number % 3; 10 | const remainderAfterDivisionByFive = number % 5; 11 | const remainderAfterDivisionBySeven = number % 7; 12 | 13 | if (remainderAfterDivisionByThree === 0 && remainderAfterDivisionByFive === 0){ 14 | console.log("Fizzz"); 15 | }else{ 16 | 17 | } 18 | if (remainderAfterDivisionByThree === 0 || remainderAfterDivisionByFive === 0){ 19 | console.log("Buzz"); 20 | }else{ 21 | 22 | } 23 | 24 | if (remainderAfterDivisionBySeven === 0){ 25 | console.log("BuzzBuzz"); 26 | } 27 | else { 28 | console.log("Not divisible by 3, 5 and 7"); 29 | } 30 | 31 | 32 | -------------------------------------------------------------------------------- /Module. 12 - Polyfill/call.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A polyfill is a piece of Javascript code used to provide modern functionality on older browsers that do not support it. 3 | */ 4 | 5 | // Polyfill for call & apply 6 | 7 | const obj = { 8 | name: "prakash", 9 | city: "mumbai", 10 | }; 11 | 12 | function displayUserInfo(state) { 13 | console.log(`Hi I am ${this.name} from ${this.city}, ${state}`); 14 | } 15 | 16 | Function.prototype.myCall = function (context, ...args) { 17 | context.showMessage = this; 18 | context.showMessage(...args); 19 | delete context.showMessage; 20 | }; 21 | 22 | Function.prototype.myApply = function (context, args) { 23 | context.showMessage = this; 24 | context.showMessage(...args); 25 | delete context.showMessage; 26 | }; 27 | 28 | // displayUserInfo.myCall(obj, "maharashtra"); 29 | displayUserInfo.myApply(obj, ["maharashtra"]); 30 | -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/async-await.js: -------------------------------------------------------------------------------- 1 | /** 2 | * async await 3 | */ 4 | 5 | // let promise = new Promise((resolve) => resolve("done")); 6 | // promise.then((res) => console.log(res)).catch((err) => console.log(err)); 7 | 8 | const getUserData = async () => { 9 | try { 10 | const promise = await fetch("https://mockdata.prakashsakari.repl.co/users"); 11 | const response = await promise.json(); 12 | console.log(response); 13 | } catch (err) { 14 | console.log(err); 15 | } 16 | }; 17 | 18 | getUserData(); 19 | 20 | async function showResponse() { 21 | try { 22 | let promise = new Promise((res, rej) => rej("promise rejected")); 23 | let result = await promise; // function execution stop her until the promise is settled 24 | console.log(result); 25 | } catch (err) { 26 | console.log("Error Occured::", err); 27 | } 28 | } 29 | 30 | // showResponse(); 31 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/6. carousel/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .carousel-container { 8 | width: 100vw; 9 | height: 350px; 10 | position: relative; 11 | } 12 | 13 | .carousel { 14 | width: 100%; 15 | height: 100%; 16 | position: absolute; 17 | transition: all 0.5s; 18 | } 19 | 20 | .img { 21 | width: 100%; 22 | height: 100%; 23 | object-fit: cover; 24 | } 25 | 26 | .btn { 27 | width: 40px; 28 | height: 40px; 29 | border-radius: 50%; 30 | padding: 10px; 31 | background-color: #fafafa; 32 | position: absolute; 33 | border: none; 34 | cursor: pointer; 35 | font-size: 1.5rem; 36 | } 37 | 38 | .btn:active { 39 | transform: scale(1.1); 40 | } 41 | 42 | .btn-next { 43 | top: 45%; 44 | right: 2%; 45 | } 46 | 47 | .btn-prev { 48 | top: 45%; 49 | left: 2%; 50 | } 51 | -------------------------------------------------------------------------------- /Module 1 - Basics of Javascript/5. data_types.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Data Types - 📃📜 4 | */ 5 | 6 | 7 | /** String */ 8 | // let userName = "Prakash"; 9 | // console.log(typeof userName); 10 | 11 | /** Number */ 12 | // let age = 99.5; 13 | // console.log(typeof age); 14 | 15 | /** Boolean --> true/false --> yes/no */ 16 | // let isProductInCart = false; 17 | // //if product is added to cart then isProductInCart = true otherwise isProductInCart = false 18 | // console.log(typeof isProductInCart); 19 | 20 | /** Undefined */ 21 | // let userName; 22 | // console.log(typeof userName); 23 | 24 | /** null */ 25 | // let noValue = null; 26 | // console.log(typeof noValue); 27 | 28 | 29 | /** Object */ 30 | // const personDetails = {name: "Prakash", age: 99, education: "Engg"} 31 | // console.log(typeof personDetails); 32 | 33 | const arrayOfNumbers = [1, 2, 3, 4, 5]; 34 | console.log(typeof arrayOfNumbers); 35 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/5. drop down/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | .main { 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | 14 | .container { 15 | border: 1px solid black; 16 | padding: 10px 1rem; 17 | width: 300px; 18 | font-size: 1.5rem; 19 | margin-top: 1rem; 20 | } 21 | 22 | .country-container { 23 | width: 300px; 24 | border: 1px solid black; 25 | height: 200px; 26 | overflow-y: auto; 27 | } 28 | 29 | .input { 30 | width: 100%; 31 | font-size: 1rem; 32 | padding: 10px; 33 | } 34 | 35 | .input:focus { 36 | outline: none; 37 | } 38 | 39 | .container:hover { 40 | cursor: pointer; 41 | } 42 | 43 | .name { 44 | font-size: 1.5rem; 45 | } 46 | 47 | .name:hover { 48 | cursor: pointer; 49 | } 50 | 51 | .hide { 52 | display: none; 53 | } 54 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/6. if-cond-exercise.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A program that reads 3 string and print the smallest string 3 | */ 4 | 5 | const firstString = "papaya"; 6 | const secondString = "banana"; 7 | const thirdString = "watermelon" 8 | 9 | const lengthOfFirstStr = firstString.length; 10 | const lengthOfSecondStr = secondString.length; 11 | const lengthOfThirdStr = thirdString.length; 12 | 13 | if (lengthOfFirstStr < lengthOfSecondStr && lengthOfFirstStr < lengthOfThirdStr){ 14 | console.log(`${firstString} is the smallest string`); 15 | }else if(lengthOfSecondStr < lengthOfFirstStr && lengthOfSecondStr < lengthOfThirdStr){ 16 | console.log(`${secondString} is the smallest string`); 17 | }else if(lengthOfThirdStr < lengthOfFirstStr && lengthOfThirdStr < lengthOfSecondStr){ 18 | console.log(`${thirdString} is the smallest string`); 19 | }else{ 20 | console.log("Found 2 or more strings of the same length"); 21 | } 22 | -------------------------------------------------------------------------------- /Module 9 - Module-DOM/index1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | GFG JavaScript Foundation Course 9 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

GeeksforGeeks

18 |
19 |
20 | Form 21 |
22 | Div 23 |

Para

24 |
25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Module 3 - Functions/4. arrow-function.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Arrow Function => () 🤗 3 | */ 4 | 5 | const calculateSum = function(x, y){ 6 | return x + y; 7 | } 8 | 9 | 10 | // const calculateAddition = (x, y) => { 11 | // return x + y 12 | // } 13 | 14 | const calculateAddition = (x, y) => x + y; 15 | 16 | const calculateSumXGreaterY = (x, y) => { 17 | if (x > y){ 18 | return x + y 19 | }else{ 20 | return x - y 21 | } 22 | } 23 | 24 | function TotalXandY (x, y){ 25 | if (x > y){ 26 | return x + y 27 | }else{ 28 | return x - y 29 | } 30 | } 31 | 32 | // const output = cond ? true action : false action) 33 | 34 | const Sum = (x, y) => x > y ? x + y : x - y; 35 | 36 | const output = Sum(150, 17); 37 | console.log(output); 38 | 39 | // console.log(calculateSum(12, 4)); 40 | 41 | 42 | // console.log(calculateAddition(22, 20)); 43 | 44 | // console.log(calculateSumXGreaterY(11, 12)); -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/1. comparison.js: -------------------------------------------------------------------------------- 1 | 2 | /** Comparison Operators */ 3 | 4 | 5 | // console.log(50 > 30); 6 | 7 | // console.log(30 >= 30); 8 | 9 | // console.log(50 == 40); 10 | 11 | // String 12 | 13 | // console.log("apple" > "banana"); 14 | 15 | // console.log("glowing" > "glow"); 16 | 17 | // console.log("2" > 1); 18 | // console.log("01" == 1); 19 | 20 | /** Strict Equality */ 21 | 22 | // console.log("01" === 1); 23 | 24 | console.log(null == undefined); 25 | // console.log(null === undefined); 26 | 27 | console.log(null > 0); // null becomes 0 28 | 29 | console.log(null < 1); 30 | 31 | console.log(null >= 0); 32 | 33 | // console.log(null == 0); // here null is null 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | /** 48 | * 3 <= 5 --> true 49 | * "mango" > "banana" --> true 50 | * "2" > "3" --> false 51 | * undefined == null --> true 52 | * null === undefined --> false 53 | * null < 1 --> true 54 | */ -------------------------------------------------------------------------------- /Module. 15b - Project recipe-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home | Recipe App 8 | 9 | 10 | 11 |
12 |

13 | Recipe App 14 |

15 |
16 | 17 |
18 |
19 |
20 | 21 |
22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 2 - Wishlist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Wishlist 8 | 9 | 10 | 11 |
12 |

Your Wishlist

13 | 14 |
15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/5. drop down/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drop Down 8 | 10 | 11 | 12 | 13 |
14 |

Drop Down

15 |
16 |

Select Country 17 | arrow_downward 18 |

19 |
20 |
21 |
22 | 23 |
24 |
25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/4. modal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modal 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 |

16 | industry. Lorem Ipsum has been the industry's standard dummy text 17 | ever since the 1500s, when an unknown printer took a galley of type 18 | and scrambled it to make a type specimen book. 19 |

20 |
21 | 22 | 23 |
24 |
25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/nested-conditional-statement.js: -------------------------------------------------------------------------------- 1 | const readlineSync = require("readline-sync"); 2 | const totalMarksInPercentage = Number(readlineSync.question("Enter your marks in percentage? ")); 3 | 4 | const passingPercentage = 50; 5 | const minAPlusPercentage = 75; 6 | const minAPercentage = 65; 7 | const minBPlusPercentage = 60; 8 | const minBPercentage = 50; 9 | 10 | if (totalMarksInPercentage >= passingPercentage) { 11 | 12 | if (totalMarksInPercentage > minAPlusPercentage){ 13 | console.log("A+"); 14 | }else if (totalMarksInPercentage > minAPercentage && totalMarksInPercentage < minAPlusPercentage){ 15 | console.log("A"); 16 | }else if (totalMarksInPercentage > minBPlusPercentage && totalMarksInPercentage < minAPercentage){ 17 | console.log("B+"); 18 | }else if (totalMarksInPercentage > minBPercentage && totalMarksInPercentage < minBPlusPercentage){ 19 | console.log("B"); 20 | }else { 21 | console.log("You barely made it through"); 22 | } 23 | 24 | }else { 25 | console.log("You should study hard") 26 | } 27 | -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap"); 2 | 3 | * { 4 | font-family: "Montserrat", sans-serif; 5 | } 6 | 7 | :root { 8 | --primary-color: green; 9 | } 10 | 11 | body { 12 | background-color: #27272a; 13 | } 14 | 15 | .container { 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | gap: 1rem; 20 | height: 100vh; 21 | } 22 | 23 | .main-heading { 24 | display: flex; 25 | align-items: center; 26 | gap: 1rem; 27 | } 28 | .title { 29 | color: var(--primary-color); 30 | font-size: 3rem; 31 | } 32 | 33 | .button { 34 | font-size: 2rem; 35 | padding: 8px 2rem; 36 | border-radius: 4px; 37 | margin-right: 10px; 38 | } 39 | 40 | .button:hover { 41 | cursor: pointer; 42 | opacity: 0.8; 43 | } 44 | 45 | .btn-red { 46 | background-color: red; 47 | color: #fff; 48 | } 49 | 50 | .input { 51 | font-size: 2rem; 52 | border: none; 53 | border-radius: 4px; 54 | } 55 | 56 | .input:focus { 57 | outline: none; 58 | } 59 | -------------------------------------------------------------------------------- /Module 5 - Array/4. pop=slice-splice.js: -------------------------------------------------------------------------------- 1 | /** 2 | * pop, slice, splice 🌟🌟 3 | */ 4 | 5 | let courses = ["html", "css", "js", "jqyery", "vue.js", "angular"]; 6 | 7 | courses.splice(3, 0, "reactjs"); 8 | 9 | console.log(courses); 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | // let courses = ["html", "css", "js", "reactjs", "jquery"]; 24 | 25 | // let value = courses.slice(0, 4); 26 | // console.log(courses) 27 | // console.log(value); 28 | 29 | // let userName = "PRAKASH"; 30 | 31 | // let firstUpperCaseChar = userName[0].toUpperCase(); 32 | // let capitalizeName = firstUpperCaseChar + userName.slice(1).toLowerCase(); 33 | 34 | // console.log(capitalizeName); 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | // console.log("Courses -", courses); 48 | // let removedItem = courses.pop(); 49 | // console.log("RI -", removedItem); 50 | // console.log("Updated Courses -", courses); 51 | 52 | // removedItem = courses.pop(); 53 | // console.log("RI Again -", removedItem); 54 | // console.log("Updated Courses Again -", courses); -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/5. logical-operator.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Logical Operator with Conditional Statement 3 | * 1. OR || ⚡ --> if atleast one condition us true then || will return true otherwise || will return false 4 | * 2. AND && 🔥 --> all the conditions must be true then && will return true otherwise && will return false 5 | * 3. NOT ! ⛄ 6 | * 4. NULLISH COALESCING ?? 🌈 7 | */ 8 | 9 | const physics = 90; 10 | const maths = 84; 11 | const chemistry = 83; 12 | const biology = 96; 13 | 14 | if (physics > 85 && maths > 85 && chemistry > 87){ 15 | console.log("You are eligible for IIT......") 16 | }else{ 17 | console.log("You are not eligible for IIT...") 18 | } 19 | 20 | if (physics > 90 || maths > 85 || chemistry > 89){ 21 | console.log("You are eligible for Engg....") 22 | }else{ 23 | console.log("You are not eligible for Enggg...") 24 | } 25 | 26 | const isStudentEligible = false; 27 | 28 | if (!isStudentEligible){ 29 | console.log(!isStudentEligible); 30 | console.log("You are eligible"); 31 | }else{ 32 | console.log("You are not eligible"); 33 | } 34 | 35 | 36 | -------------------------------------------------------------------------------- /Module 7 - More About Functions/2. first-class-function.js: -------------------------------------------------------------------------------- 1 | /** 2 | * First Class Function🚊🚆 3 | * 4 | * A programming language is said to have First-class functions if functions in that language are treated like other variables. 5 | * So the functions can be assigned to any other variable or passed as an argument or can be returned by another function. 6 | * -- Souce: GFG Article 7 | */ 8 | 9 | // 01 10 | // const greetMessage = function (){ 11 | // console.log("Hello Prakash welcome to GFG!!!"); 12 | // } 13 | 14 | // greetMessage(); 15 | 16 | // 02 17 | 18 | // function wrapper(){ 19 | // return "welcome to GFG"; 20 | // } 21 | 22 | // function greetMessage(inner, name){ 23 | // let message = inner(); 24 | // console.log(name, message); 25 | // } 26 | 27 | // greetMessage(wrapper, "Prakash"); 28 | 29 | // 03 30 | 31 | function greetMessage(){ 32 | function wrapper(){ 33 | let name = "Prakash" 34 | console.log(name, "welcome to GFG!!!!"); 35 | } 36 | 37 | return wrapper 38 | } 39 | 40 | const output = greetMessage(); 41 | output(); 42 | 43 | greetMessage()(); 44 | 45 | 46 | -------------------------------------------------------------------------------- /Module 9 - Module-DOM/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | GFG JavaScript Foundation Course 9 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

GeeksforGeeks

18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/callbackhell.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Callback Hell 3 | * Pyriamid of doom 4 | * Inversion of Control 5 | */ 6 | 7 | // bookHotel --> proceedPayment --> showBookingStatus --> updateBookingHistory (APIs) 8 | 9 | bookHotel(hotelId, function(){ // 1 10 | if (error){ 11 | handleError 12 | }else{ 13 | proceedToPayment(hotelId, function(){ //2 14 | if (error){ 15 | handleError 16 | }else{ 17 | showBookingStatus(function(){ //3 18 | if (error){ 19 | handleError 20 | }else{ 21 | updateBookingHistory(function(){ //4 22 | if (error){ 23 | handleError 24 | }else{ 25 | success 26 | } 27 | }) 28 | } 29 | }) 30 | } 31 | }) 32 | } 33 | }) 34 | 35 | bookHotel(hotelId, function(){ 36 | proceedToPayment(hotelId, function(){ 37 | 38 | }) 39 | }) -------------------------------------------------------------------------------- /Module 9 - Module-DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | GFG JavaScript Foundation Course 9 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

GeeksforGeeks

18 |
19 |
20 | 21 | 22 | 23 |
24 | 25 |
26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/method-chaining.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Promise 3 | */ 4 | 5 | const hotelName = "The Taj Palace"; 6 | 7 | function bookHotel(hotel) { 8 | const promise = new Promise((resolve, reject) => { 9 | const hotelId = "xyz123"; 10 | if (!validateHotel()) { 11 | const error = new Error("No Hotel Found"); 12 | reject(error); 13 | } 14 | 15 | if (hotelId && validateHotel) { 16 | setTimeout(() => { 17 | resolve(hotelId); 18 | }, 3000); 19 | } 20 | }); 21 | 22 | return promise; 23 | } 24 | 25 | function validateHotel() { 26 | return true; 27 | } 28 | 29 | function payment(hotelId) { 30 | return new Promise((resolve) => resolve("payment successful")); 31 | } 32 | 33 | let hotel = bookHotel(hotelName); 34 | hotel 35 | .then((hotelId) => { 36 | console.log({ hotelId }); 37 | return hotelId; 38 | }) //1 39 | .catch((err) => console.log(err)) 40 | .then(function (hotelId) { 41 | //2 42 | return payment(hotelId); 43 | }) 44 | .catch((err) => console.log(err)) 45 | .then((response) => console.log(response)) //3 46 | .catch((error) => console.log(error.message)); 47 | -------------------------------------------------------------------------------- /Module 5 - Array/2. array-reference.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copying an Array --> Array Reference 📚📚 3 | */ 4 | 5 | // let arr1 = [1, 2, 3]; // Is referring to Memory Location - abc123; 6 | // let arr2 = arr1; // Is also pointing/referring to the same memory location 7 | 8 | // // Shallow Copy 9 | 10 | // console.log("Arr1 -", arr1); 11 | // console.log("Arr2 -", arr2); 12 | 13 | // arr2.push(4); 14 | 15 | // console.log("Updated Arr1 -", arr1); 16 | // console.log("Updated Arr2 -", arr2); 17 | 18 | // // Spread Operator 19 | // let arr3 = [...arr1]; 20 | // console.log("Arr3 -",arr3); 21 | // arr3.push(5); 22 | // console.log("Updated Arr1 -", arr1); 23 | // console.log("Updated Arr3 -", arr3); 24 | 25 | // for loop 26 | 27 | // let arr4 = [1, 2, 3, 4]; 28 | 29 | // let arr5 = []; 30 | 31 | // for (let number of arr4){ 32 | // arr5.push(number) 33 | // } 34 | // console.log("Arr4 -", arr4); 35 | // console.log("Arr5 -", arr5); 36 | 37 | // arr5.push(5); 38 | // console.log("Updated Arr4 -", arr4); 39 | // console.log("Updated Arr5 -", arr5); 40 | 41 | 42 | let str = "Prakash"; 43 | 44 | let arrOfAlpha = [...str]; 45 | 46 | console.log(arrOfAlpha); 47 | -------------------------------------------------------------------------------- /Module. 16 - Prototype & Classes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | GFG JavaScript Foundation Course 9 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

GeeksforGeeks

18 |
19 | 24 | 28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Module. 15b - Project recipe-app/getCuisine.js: -------------------------------------------------------------------------------- 1 | export const getCuisineCard = (arrOfCuisines, parentElement, createElement) => { 2 | for (let cuisine of arrOfCuisines) { 3 | const cuisineContainer = createElement("div"); 4 | cuisineContainer.classList.add("filter"); 5 | cuisineContainer.setAttribute("data-id", cuisine.ID); 6 | 7 | //creating checkbox 8 | const checkBox = createElement("input"); 9 | checkBox.setAttribute("type", "checkbox"); 10 | checkBox.classList.add("checkbox"); 11 | checkBox.setAttribute("data-id", cuisine.ID); 12 | 13 | //creating label 14 | const label = createElement("label"); 15 | label.classList.add( 16 | "cusine-label", 17 | "d-flex", 18 | "align-items-center", 19 | "gap-sm" 20 | ); 21 | label.appendChild(checkBox); 22 | 23 | const labelText = createElement("span"); 24 | labelText.innerText = cuisine.Cuisine; 25 | labelText.setAttribute("data-id", cuisine.ID); 26 | label.appendChild(labelText); 27 | label.setAttribute("data-id", cuisine.ID); 28 | 29 | cuisineContainer.appendChild(label); 30 | parentElement.appendChild(cuisineContainer); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/promise.all.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Promise.all([arrayOfPromise]) 3 | * https://api.github.com/users/prakashsakari 4 | */ 5 | 6 | let users = ["prakashsakari", "AshishJangra27"]; 7 | 8 | let arrOfPromises = users.map((user) => 9 | fetch(`https://api.github.com/users/${user}`) 10 | ); 11 | 12 | let promise = Promise.all(arrOfPromises); 13 | promise 14 | .then((response) => response.forEach((data) => console.log(data.url))) 15 | .catch((err) => console.log(err.message)); 16 | 17 | // let promise1 = new Promise((resolve) => 18 | // setTimeout(() => resolve("Promise 1 resolved"), 3000) 19 | // ); 20 | // let promise2 = new Promise((_, reject) => 21 | // setTimeout(() => reject("Promise 2 reject"), 2000) 22 | // ); 23 | // let promise3 = new Promise((resolve, reject) => 24 | // setTimeout(() => reject("Promise 3 rejected"), 1000) 25 | // ); 26 | 27 | // let arrOfPromises = [promise1, promise2, promise3]; 28 | 29 | // let promise = Promise.all(arrOfPromises); 30 | // promise.then((res) => console.log(res)).catch((err) => console.log(err)); 31 | 32 | // promise1.then((res) => console.log(res)); 33 | // promise2.then((res) => console.log(res)); 34 | // promise3.then((res) => console.log(res)); 35 | -------------------------------------------------------------------------------- /Module. 11 - AsyncJS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | GFG JavaScript Course 9 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

GeeksforGeeks

18 | 19 |
20 | 21 | 26 | 30 | 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/1. timer/timer.js: -------------------------------------------------------------------------------- 1 | const currentTime = document.querySelector(".para"); 2 | const buttonParent = document.querySelector(".btn-container"); 3 | 4 | let seconds = 0; 5 | let minutes = 0; 6 | let hours = 0; 7 | let timerId; 8 | 9 | function displayTime(hours, minutes, seconds) { 10 | currentTime.innerText = `${hours < 10 ? `0${hours}` : hours} : ${ 11 | minutes < 10 ? `0${minutes}` : minutes 12 | } : ${seconds < 10 ? `0${seconds}` : seconds}`; 13 | } 14 | 15 | function handleButtonClick(event) { 16 | const button = event.target.name; 17 | if (button === "start") { 18 | timerId = setInterval(() => { 19 | seconds++; 20 | if (seconds > 58) { 21 | seconds = 0; 22 | minutes++; 23 | if (minutes > 58) { 24 | minutes = 0; 25 | hours++; 26 | } 27 | } 28 | displayTime(hours, minutes, seconds); 29 | }, 100); 30 | } 31 | if (button === "stop") { 32 | clearInterval(timerId); 33 | } 34 | if (button === "reset") { 35 | clearInterval(timerId); 36 | seconds = minutes = hours = 0; 37 | displayTime(hours, minutes, seconds); 38 | } 39 | } 40 | 41 | buttonParent.addEventListener("click", handleButtonClick); 42 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 4 - Notes App/archive.js: -------------------------------------------------------------------------------- 1 | import { renderNotes } from "./app.js"; 2 | 3 | let arrayOfNotes = JSON.parse(localStorage.getItem("notes")) || []; 4 | 5 | let showArchivedNotes = document.querySelector(".archive-notes-container"); 6 | 7 | showArchivedNotes.addEventListener("click", (event) => { 8 | let type = event.target.dataset.type; 9 | let noteId = event.target.dataset.id; 10 | 11 | switch(type){ 12 | case "del": 13 | arrayOfNotes = arrayOfNotes.filter(({id}) => id.toString() !== noteId); 14 | showArchivedNotes.innerHTML = renderNotes(arrayOfNotes.filter(({isArchived}) => isArchived)); 15 | localStorage.setItem("notes", JSON.stringify(arrayOfNotes)); 16 | break; 17 | case "archive": 18 | arrayOfNotes = arrayOfNotes.map(note => note.id.toString() === noteId ? {...note, isArchived: !note.isArchived} : note); 19 | showArchivedNotes.innerHTML = renderNotes(arrayOfNotes.filter(({isArchived}) => isArchived)); 20 | localStorage.setItem("notes", JSON.stringify(arrayOfNotes)); 21 | break; 22 | } 23 | 24 | }); 25 | 26 | showArchivedNotes.innerHTML = renderNotes(arrayOfNotes.filter(({isArchived}) => isArchived)); -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/6. carousel/index.js: -------------------------------------------------------------------------------- 1 | const slider = document.querySelectorAll(".carousel"); 2 | const nextBtn = document.querySelector(".btn-next"); 3 | const prevBtn = document.querySelector(".btn-prev"); 4 | 5 | let currentSlide = 0; 6 | let maxSlide = slider.length - 1; 7 | 8 | slider.forEach( 9 | (image, index) => (image.style.transform = `translateX(${index * 100}%)`) 10 | ); 11 | 12 | function nextButtonClickHandler() { 13 | if (currentSlide === maxSlide) { 14 | currentSlide = 0; // going back to the first image 15 | } else { 16 | currentSlide++; 17 | } 18 | 19 | slider.forEach( 20 | (image, index) => 21 | (image.style.transform = `translateX(${(index - currentSlide) * 100}%)`) 22 | ); 23 | console.log(currentSlide); 24 | } 25 | 26 | function prevButtonClickHandler() { 27 | if (currentSlide === 0) { 28 | currentSlide = maxSlide; // going back to the last image 29 | } else { 30 | currentSlide--; 31 | } 32 | slider.forEach( 33 | (image, index) => 34 | (image.style.transform = `translateX(${(index - currentSlide) * 100}%)`) 35 | ); 36 | console.log(currentSlide); 37 | } 38 | 39 | nextBtn.addEventListener("click", nextButtonClickHandler); 40 | prevBtn.addEventListener("click", prevButtonClickHandler); 41 | -------------------------------------------------------------------------------- /Module. 13 - Coding Drills Part 2/frequency.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Count frequency of all number in an array, return the 3 | * numbers with the max frequency, if 2 or more numbers have 4 | * the same max freq then return the highest number 5 | */ 6 | 7 | const arr = [1, 2, 3, 4, 5, 4, 3, 4, 3, 2, 1, 6, 7, 5, 5]; 8 | 9 | function getNumberWithMaxFreq(arr) { 10 | let maxCount = 0; 11 | let maxKey = 0; 12 | let arrOfMaxFreqKeys = []; 13 | 14 | // Get the frequency of all number 15 | const numberFreqObj = arr.reduce( 16 | (acc, cur) => 17 | cur in acc ? { ...acc, [cur]: acc[cur] + 1 } : { ...acc, [cur]: 1 }, 18 | {} 19 | ); 20 | 21 | //get the max freq 22 | const arrOfKeyValue = Object.entries(numberFreqObj); 23 | for (let [, value] of arrOfKeyValue) { 24 | if (maxCount < value) { 25 | maxCount = value; 26 | } 27 | } 28 | 29 | // get the numbers with max freq 30 | for (let [key, value] of arrOfKeyValue) { 31 | if (value === maxCount) { 32 | arrOfMaxFreqKeys = [...arrOfMaxFreqKeys, key]; 33 | } 34 | } 35 | 36 | // get the key with the max freq and max number 37 | for (let key of arrOfMaxFreqKeys) { 38 | if (maxKey < key) { 39 | maxKey = key; 40 | } 41 | } 42 | 43 | return maxKey; 44 | } 45 | 46 | const result = getNumberWithMaxFreq(arr); 47 | console.log(result); 48 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 4 - Notes App/archive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Archieve | NoteIt 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |

17 | NoteIt 18 |

19 |
20 | 28 |
29 |
30 |
Archived Notes
31 |
32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Module 6 - Objects/12. this-exercise.js: -------------------------------------------------------------------------------- 1 | /** 2 | * this exercise 3 | */ 4 | 5 | // ex-01 6 | 7 | // function displayName() { 8 | // console.log(this); 9 | // } 10 | 11 | // const user1 = { 12 | // name: "prakash", 13 | // showName: displayName, 14 | // }; 15 | // // console.log(user1); 16 | // user1.showName(); 17 | 18 | // ex-02 19 | 20 | // function displayName() { 21 | // console.log(this); 22 | // } 23 | 24 | // const user2 = { 25 | // name: "prakash", 26 | // showName: function () { 27 | // displayName(); 28 | // }, 29 | // }; 30 | 31 | // user2.showName(); 32 | 33 | // ex-03 34 | // const displayName = () => { 35 | // console.log(this); 36 | // }; 37 | 38 | // const user2 = { 39 | // name: "prakash", 40 | // }; 41 | 42 | // displayName.apply(user2); 43 | 44 | // ex-04 45 | 46 | // function User() { 47 | // console.log(this); 48 | // } 49 | 50 | // const user1 = new User(); 51 | 52 | // ex-05 53 | 54 | // const person = { 55 | // name: "prakash", 56 | // sayHi: function () { 57 | // console.log(`Welcome ${this.name}`); 58 | // }, 59 | // }; 60 | 61 | // person.sayHi(); 62 | 63 | // ex-06 64 | 65 | const person = { 66 | name: "prakash", 67 | sayHi: function () { 68 | console.log(`Welcome ${this.name}`); 69 | }, 70 | }; 71 | 72 | let person2 = person.sayHi; 73 | console.log(person2); 74 | person2(); 75 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/7. logical-operator-2.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Logical Operator with truthy and falsy values 3 | * 1. OR || ⚡ 4 | * 2. AND && 🔥 5 | */ 6 | 7 | /** 8 | * Truthy 9 | * Falsy Values - "", 0, null, undefined 10 | */ 11 | 12 | 13 | // const firstName = null; 14 | // const nickName = ""; 15 | 16 | // const userName = firstName || nickName || "HiddenGeek"; // Short Circuiting 17 | // console.log(`Name - ${userName}`) 18 | 19 | // let a = 12; 20 | // let b; 21 | 22 | // console.log(a + (b || 0)); 23 | 24 | 25 | 26 | 27 | // const firstName = "Prakash"; 28 | // const nickName = "Anna"; 29 | 30 | // const userName = firstName && nickName && "HiddenGeek"; 31 | // console.log(`Name - ${userName}`); 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | /** 51 | * 1. What will be the result of the ORed operation 52 | * a. console.log(3 || 2 || 1) 53 | * b. console.log("" || 0 || 2) 54 | * c. console.log("" || 0 || undefined) 55 | * d. console.log("" || "null" || 2) 56 | * 57 | * 2. What will be the output of the ANDed operation 58 | * a. console.log(3 && 2 && 1) 59 | * b. console.log("" && 0 && 2) 60 | * c. console.log("undefined" && "null" && "") 61 | */ 62 | 63 | // console.log(3 || 2 || 1) // true || true || true 64 | console.log("undefined" && "key" && "null"); // true && true && true -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/exercise-2.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Star Pattern 3 | * * 4 | * * * 5 | * * * * 6 | * * * * * 7 | * * * * * * 8 | */ 9 | 10 | // const symbol = "* "; 11 | 12 | // for (let i=1; i<=5; i++){ 13 | // console.log(symbol.repeat(i)) 14 | // } 15 | 16 | // // i-- --> i = i - 1 17 | 18 | // for (let i=5; i>=1; i--){ 19 | // console.log(symbol.repeat(i)) 20 | // } 21 | 22 | 23 | // let userName = "Prakash Narsingrao Sakari Padma"; 24 | // let count = 0; 25 | // for (let i=0; i 33 | country.toLowerCase().startsWith(searchValue) 34 | ); 35 | countryList.innerHTML = ""; 36 | showCountries(filterBySearch); 37 | } 38 | 39 | selectCountry.addEventListener("click", () => { 40 | countryContainer.classList.toggle("hide"); 41 | }); 42 | 43 | input.addEventListener("keyup", handleChange); 44 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 3 - Form Validation/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://uilight.netlify.app/main.css"); 2 | @import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"); 3 | 4 | body { 5 | font-family: sans-serif; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | gap: 1rem; 10 | } 11 | 12 | .heading-1 { 13 | margin-top: 5rem; 14 | } 15 | 16 | .form { 17 | margin-left: 2rem; 18 | width: 30vw; 19 | } 20 | 21 | .input-container { 22 | padding: 8px 0; 23 | } 24 | 25 | .input { 26 | width: 100%; 27 | font-size: 1.25rem; 28 | padding: 8px 4px; 29 | } 30 | 31 | .input:focus { 32 | outline: none; 33 | } 34 | 35 | .gutter-small { 36 | padding: 0.5rem 0; 37 | } 38 | 39 | .error { 40 | border: 2px solid red; 41 | } 42 | 43 | .error:focus { 44 | outline: 2px solid red; 45 | } 46 | 47 | .d-block { 48 | display: block; 49 | } 50 | 51 | .d-none { 52 | display: none; 53 | } 54 | 55 | .relative { 56 | position: relative; 57 | } 58 | 59 | .btn { 60 | top: 2.8rem; 61 | right: 8px; 62 | } 63 | 64 | .button { 65 | width: 100%; 66 | } 67 | 68 | .gap { 69 | gap: 4px; 70 | } 71 | 72 | .ul { 73 | list-style-type: disc; 74 | margin-left: 1rem; 75 | } 76 | 77 | .list { 78 | color: red; 79 | } 80 | 81 | .error-message, 82 | .empty-field { 83 | color: red; 84 | } 85 | 86 | .container { 87 | border: none; 88 | align-items: center; 89 | } 90 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 5 - E-com Javacript/index.js: -------------------------------------------------------------------------------- 1 | import { products } from "./db/products.js"; 2 | import { createProductCard } from "./createProductCard.js"; 3 | import { findProductInCart } from "./utils/findProductInCart.js"; 4 | 5 | const productContainer = document.getElementById("products"); 6 | const filterContainer = document.querySelector(".side-bar"); 7 | 8 | let cart = JSON.parse(localStorage.getItem("cart")) || []; 9 | 10 | productContainer.addEventListener("click", (event) => { 11 | const isProductInCart = findProductInCart(cart, event.target.dataset.id); 12 | if (!isProductInCart) { 13 | const productToAddToCart = products.filter( 14 | ({ _id }) => _id === event.target.dataset.id 15 | ); 16 | cart = [...cart, ...productToAddToCart]; 17 | localStorage.setItem("cart", JSON.stringify(cart)); 18 | const cartButton = event.target; 19 | cartButton.innerHTML = 20 | "Go To Cart shopping_cart"; 21 | } else { 22 | location.href = "cart.html"; 23 | } 24 | }); 25 | 26 | filterContainer.addEventListener("click", (event) => { 27 | const updatedProducts = products.filter( 28 | ({ rating }) => rating >= Number(event.target.dataset.rating) 29 | ); 30 | productContainer.innerHTML = ""; 31 | createProductCard( 32 | updatedProducts, 33 | productContainer, 34 | findProductInCart, 35 | "products" 36 | ); 37 | }); 38 | 39 | createProductCard(products, productContainer, findProductInCart, "products"); 40 | -------------------------------------------------------------------------------- /Module 6 - Objects/8. destructuring.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Destructuring Objects 3 | */ 4 | 5 | let obj = { 6 | name: "Prakash", 7 | address: { 8 | state: "MH", 9 | city: "Mumbai", 10 | locality: "Santacruz" 11 | }, 12 | courses: ['html', 'css', 'js', 'reactjs', 'redux'], 13 | } 14 | 15 | // let {address: {city}} = obj; 16 | // console.log(city) 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | const employees = { 32 | engineers: { 33 | em1: { 34 | id: 1, 35 | name: "Prakash Sakari", 36 | occupation: "Front End Engineer" 37 | }, 38 | em2: { 39 | id: 2, 40 | name: "Ashish Jangra", 41 | occupation: "Data Scientist" 42 | }, 43 | }, 44 | placement: { 45 | em3: { 46 | id: 3, 47 | name: "Sakshi Awasthi", 48 | occupation: "Sr. Executive", 49 | achi:{ 50 | first: "", 51 | second: "", 52 | third: "" 53 | } 54 | } 55 | }, 56 | youtube: { 57 | em4: { 58 | id: 4, 59 | name: "Jay Paswan", 60 | occupation: "Youtube Manager" 61 | }, 62 | } 63 | } 64 | 65 | 66 | // let {engineers: {em2: {name, occupation}}} = employees; 67 | // console.log(name, occupation); 68 | 69 | let {youtube : {em4: {name, occupation}}} = employees; 70 | console.log(name, occupation); 71 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 4 - Notes App/app.js: -------------------------------------------------------------------------------- 1 | export const renderNotes = (notes) => { 2 | let newNote = notes.map(({id, note, title, isPinned, isArchived}) => { 3 | return ( 4 | `
5 |
6 | ${title} 7 | 12 |
13 |

${note}

14 |
15 | 20 | 25 |
26 |
` 27 | ) 28 | }); 29 | 30 | newNote = newNote.join(""); 31 | return newNote; 32 | 33 | } -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 2 - Wishlist/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://uilight.netlify.app/main.css"); /* styling from component library */ 2 | @import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"); /* for icons */ 3 | 4 | :root { 5 | --text-color-primary: #f9fafb; 6 | --background-color: #111827; 7 | } 8 | 9 | body { 10 | background-color: var(--background-color); 11 | } 12 | 13 | .main { 14 | padding: 2rem 0; 15 | width: 30vw; 16 | margin-left: 50vw; 17 | transform: translateX(-50%); 18 | } 19 | 20 | .heading-1 { 21 | color: var(--text-color-primary); 22 | text-align: center; 23 | margin-bottom: 0.5rem; 24 | } 25 | 26 | .input { 27 | border-radius: 4px; 28 | font-size: 1.25rem; 29 | padding: 0.5rem; 30 | border: none; 31 | width: 25vw; 32 | margin-bottom: 0.5rem; 33 | } 34 | 35 | .input:focus { 36 | outline: none; 37 | } 38 | 39 | .t-checkbox { 40 | width: 1.25rem; 41 | height: 1.25rem; 42 | } 43 | 44 | .btn-primary { 45 | font-size: 1.25rem; 46 | padding: 0.5rem 0.875rem; 47 | } 48 | 49 | .todo { 50 | color: var(--text-color-primary); 51 | font-size: 1.5rem; 52 | } 53 | 54 | .todos-container { 55 | height: 70vh; 56 | overflow-y: auto; 57 | } 58 | 59 | .t-pointer { 60 | cursor: pointer; 61 | } 62 | 63 | .todos { 64 | padding-bottom: 0.5rem; 65 | } 66 | 67 | .todo-text { 68 | word-wrap: break-word; 69 | } 70 | 71 | .checked-todo { 72 | text-decoration: line-through; 73 | color: var(--text-color-primary); 74 | } 75 | 76 | .del-btn { 77 | color: var(--text-color-primary); 78 | } 79 | -------------------------------------------------------------------------------- /Module. 14 - Machine Coding/6. carousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Carousel 8 | 10 | 11 | 12 | 13 |
14 |
15 | 19 |
20 |
21 | 25 |
26 |
27 | 31 |
32 | 33 | 38 | 43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 5 - E-com Javacript/cart.js: -------------------------------------------------------------------------------- 1 | import { createHorizontalProductCard } from "./createHorizontalProductCard.js"; 2 | import { findProductInCart } from "./utils/findProductInCart.js"; 3 | 4 | let cartContainer = document.getElementById("cart"); 5 | 6 | let cart = JSON.parse(localStorage.getItem("cart")) || []; 7 | 8 | cartContainer.addEventListener("click", (event) => { 9 | cart = cart.filter(({ _id }) => _id !== event.target.dataset.id); 10 | cartContainer.innerHTML = ""; 11 | createHorizontalProductCard(cart, cartContainer, findProductInCart, "cart"); 12 | localStorage.setItem("cart", JSON.stringify(cart)); 13 | }); 14 | 15 | const cartLength = document.querySelector(".item-count"); 16 | cartLength.innerText = JSON.parse(localStorage.getItem("cart")).length; 17 | 18 | const productPrice = document.querySelector(".product-price"); 19 | const priceAfterDiscount = JSON.parse(localStorage.getItem("cart")).reduce( 20 | (acc, cur) => acc + cur.newPrice, 21 | 0 22 | ); 23 | productPrice.innerText = priceAfterDiscount; 24 | 25 | const discount = document.querySelectorAll(".discounted-amount"); 26 | 27 | const priceBeforeDiscount = JSON.parse(localStorage.getItem("cart")).reduce( 28 | (acc, cur) => acc + cur.oldPrice, 29 | 0 30 | ); 31 | 32 | const discountedAmount = priceBeforeDiscount - priceAfterDiscount; 33 | for (let element of discount) { 34 | element.innerText = discountedAmount; 35 | } 36 | 37 | const totalAmount = document.querySelector(".total-amount"); 38 | totalAmount.innerText = priceAfterDiscount - discountedAmount + 100; 39 | 40 | createHorizontalProductCard(cart, cartContainer, findProductInCart, "cart"); 41 | -------------------------------------------------------------------------------- /Module. 15a - Project - Movie App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Movie App 10 | 11 | 12 | 13 |
14 |

Movie App

15 |
16 |
17 | 18 |
19 |
20 | 27 |
28 |
29 | 32 |
33 |
34 | 35 |
36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Module 7 - More About Functions/7. global-local.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Global and Local Variables 3 | * Global, Local and Block Scope 4 | */ 5 | 6 | // exmaple - 01 7 | 8 | var x = 3; 9 | 10 | function showNumber() { 11 | console.log(x); 12 | } 13 | 14 | showNumber(); 15 | 16 | // example - 02 17 | 18 | var x = 3; 19 | 20 | function showNumber() { 21 | var y = 5; 22 | console.log(x); 23 | } 24 | 25 | console.log(y); 26 | showNumber(); 27 | 28 | // example - 03 - Local Scope 29 | 30 | var x = 3; 31 | 32 | function showNumber() { 33 | var y = 5; 34 | console.log({ y }); 35 | console.log({ x }); 36 | } 37 | 38 | function f1() { 39 | console.log({ y }); 40 | console.log({ x }); 41 | } 42 | 43 | showNumber(); 44 | f1(); 45 | 46 | // example - 04 - block scope with let 47 | 48 | { 49 | let a = 3; 50 | let b = 5; 51 | console.log({ a }); 52 | console.log({ b }); 53 | } 54 | 55 | // example - 05 - block scope with var 56 | 57 | { 58 | var p = 3; 59 | var q = 5; 60 | } 61 | 62 | console.log({ p }); 63 | console.log({ q }); 64 | 65 | // example - 06 66 | 67 | if (true) { 68 | var u = 3; 69 | var v = 5; 70 | } 71 | 72 | console.log({ u }); 73 | console.log({ v }); 74 | 75 | // example - 07 76 | 77 | if (true) { 78 | let d = 3; 79 | const e = 5; 80 | } 81 | 82 | console.log({ d }); 83 | console.log({ e }); 84 | 85 | // example - 08 86 | let f = 7; 87 | if (true) { 88 | let d = 3; 89 | const e = 5; 90 | } 91 | console.log({ f }); 92 | console.log({ d }); 93 | console.log({ e }); 94 | 95 | // example - 09 96 | 97 | let c = 6; 98 | function x() { 99 | var a = 3; 100 | let b = 5; 101 | } 102 | x(); 103 | console.log(a); 104 | console.log(b); 105 | console.log(c); 106 | -------------------------------------------------------------------------------- /Module 9 - Module-DOM/event-listeners.js: -------------------------------------------------------------------------------- 1 | let startButton = document.querySelector(".start"); 2 | let countButton = document.querySelector(".count"); 3 | let stopButton = document.querySelector(".stop"); 4 | let input = document.querySelector(".input"); 5 | 6 | let value = 0; 7 | 8 | function showMessage() { 9 | console.log("Button Clicked"); 10 | } 11 | 12 | startButton.addEventListener("click", showMessage); 13 | 14 | startButton.addEventListener("click", () => { 15 | if (startButton.innerText === "Start") { 16 | startButton.innerText = "Begin"; 17 | startButton.innerHTML = "Lets begin"; 18 | } else { 19 | startButton.innerText = "Start"; 20 | } 21 | }); 22 | 23 | countButton.addEventListener("click", () => { 24 | value++; 25 | console.log(value); 26 | }); 27 | 28 | stopButton.addEventListener("click", () => { 29 | // stopButton.classList.add("btn-red"); 30 | stopButton.classList.toggle("btn-red"); 31 | }); 32 | 33 | input.addEventListener("change", () => { 34 | console.log("Change -", input.value); 35 | }); 36 | 37 | input.addEventListener("input", () => { 38 | console.log("Input -", input.value); 39 | }); 40 | 41 | input.addEventListener("focus", () => { 42 | console.log("Focus -", input.value); 43 | }); 44 | 45 | input.addEventListener("keyup", () => { 46 | console.log("keyup -", input.value); 47 | }); 48 | 49 | /** Mouse Events */ 50 | 51 | input.addEventListener("mousedown", (event) => { 52 | console.log("Mousedown -", event.button); 53 | }); 54 | 55 | document.body.addEventListener("mousedown", (event) => { 56 | let xcor = event.clientX; 57 | let ycor = event.clientY; 58 | let cors = `X cor - ${xcor}, Y cor - ${ycor}`; 59 | console.log(cors); 60 | }); 61 | 62 | input.addEventListener("mousedown", (event) => { 63 | let xcor = event.clientX; 64 | let ycor = event.clientY; 65 | let cors = `X cor - ${xcor}, Y cor - ${ycor}`; 66 | console.log(cors); 67 | }); 68 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 4 - Notes App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Home | NoteIt 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |

17 | NoteIt 18 |

19 |
20 | 28 |
29 |
30 | 31 | 32 | 37 |
38 |
39 |
Pinned
40 |
41 |
Others
42 |
43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 4 - Notes App/utility.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Montserrat", sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | .link { 9 | text-decoration: none; 10 | } 11 | 12 | .shadow { 13 | box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1); 14 | } 15 | 16 | .d-block { 17 | display: block; 18 | } 19 | 20 | .d-none { 21 | display: none; 22 | } 23 | 24 | .v-visible { 25 | visibility: visible; 26 | } 27 | 28 | .v-hidden { 29 | visibility: hidden; 30 | } 31 | 32 | .d-flex { 33 | display: flex; 34 | } 35 | 36 | .inline-flex { 37 | display: inline-flex; 38 | } 39 | 40 | .direction-column { 41 | flex-direction: column; 42 | } 43 | 44 | .align-center { 45 | align-items: center; 46 | } 47 | 48 | .align-end { 49 | align-items: flex-end; 50 | } 51 | 52 | .align-start { 53 | align-items: flex-start; 54 | } 55 | 56 | .justify-center { 57 | justify-content: center; 58 | } 59 | 60 | .justify-end { 61 | justify-content: flex-end; 62 | } 63 | 64 | .justify-start { 65 | justify-content: flex-start; 66 | } 67 | 68 | .wrap { 69 | flex-wrap: wrap; 70 | } 71 | 72 | .gap-md { 73 | gap: 1.25rem; 74 | } 75 | 76 | .gap-sm { 77 | gap: 10px; 78 | } 79 | 80 | .relative { 81 | position: relative; 82 | } 83 | 84 | .fixed { 85 | position: fixed; 86 | } 87 | 88 | .absolute { 89 | position: absolute; 90 | } 91 | 92 | .top-0 { 93 | top: 0; 94 | } 95 | 96 | .left-0 { 97 | left: 0; 98 | } 99 | 100 | .right-0 { 101 | right: 0; 102 | } 103 | 104 | .border-radius-4px { 105 | border-radius: 4px; 106 | } 107 | 108 | .border-radius-8px { 109 | border-radius: 8px; 110 | } 111 | 112 | .heading-1 { 113 | font-size: 2.5rem; 114 | } 115 | 116 | .cursor { 117 | cursor: pointer; 118 | } -------------------------------------------------------------------------------- /Module 7 - More About Functions/3. higher-order-fun.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Higher Order Function: 3 | * 4 | * A function that accepts another function as an argument or returns a function or does both is called an H.O.F 5 | */ 6 | 7 | // First Class Function 8 | // function wrapper(){ 9 | // return "welcome to gfg" 10 | // } 11 | 12 | 13 | // // Higher Order Function 14 | // function greetMessage(wrapper){ 15 | // console.log("Prakash", wrapper()) 16 | // } 17 | 18 | // greetMessage(wrapper); 19 | 20 | 21 | // // HOF 22 | // function displayMessage(){ 23 | // return function (){ 24 | // console.log("hello from the inner function") 25 | // } 26 | // } 27 | 28 | // const output = displayMessage(); 29 | // output(); 30 | 31 | 32 | 33 | // const arr = [1, 2, 3, 4, 5]; 34 | 35 | // function sqaureOfNumber(arr){ 36 | // let sqauredNumbers = []; 37 | // for (let number of arr){ 38 | // sqauredNumbers.push(number ** 2) 39 | // } 40 | // return sqauredNumbers; 41 | // } 42 | 43 | // function cubeOfNumber(arr){ 44 | // let cubedNumbers = []; 45 | // for (let number of arr){ 46 | // cubedNumbers.push(number ** 3) 47 | // } 48 | // return cubedNumbers; 49 | // } 50 | 51 | // const output = sqaureOfNumber(arr); 52 | // console.log(output); 53 | 54 | // const result = cubeOfNumber(arr); 55 | // console.log(result); 56 | 57 | const arr = [1, 2, 3, 4, 5]; 58 | 59 | function sqaure(number){ 60 | return number ** 2; 61 | } 62 | 63 | function cube(number){ 64 | return number ** 3; 65 | } 66 | 67 | function fourthPower(number){ 68 | return number ** 4; 69 | } 70 | 71 | function calculatePower(wrapper, arr){ 72 | let tempArr = []; 73 | for (let number of arr){ 74 | tempArr.push(wrapper(number)) 75 | } 76 | return tempArr; 77 | } 78 | 79 | const sqaureOfNumbers = calculatePower(sqaure, arr); 80 | console.log(sqaureOfNumbers); 81 | 82 | const cubeOfNumber = calculatePower(cube, arr); 83 | console.log(cubeOfNumber); 84 | 85 | const fourthPowerOfNum = calculatePower(fourthPower, arr); 86 | console.log(fourthPowerOfNum); -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 2 - Wishlist/index.js: -------------------------------------------------------------------------------- 1 | 2 | let todoInput = document.querySelector(".input"); 3 | let addTodoButton = document.querySelector(".button"); 4 | let showTodos = document.querySelector(".todos-container"); 5 | let todo; 6 | 7 | 8 | let localData = JSON.parse(localStorage.getItem("todo")); 9 | let todoList = localData || []; 10 | 11 | /** Creating function to get unique id */ 12 | function uuid() { 13 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (param) { 14 | let number = Math.random() * 16 | 0; 15 | let randomNumber = param == 'x' ? number : (number & 0x3 | 0x8); 16 | return randomNumber.toString(16); 17 | }); 18 | } 19 | 20 | addTodoButton.addEventListener("click", (e) => { 21 | e.preventDefault(); 22 | todo = todoInput.value; 23 | if (todo.length > 0){ 24 | todoList.push({id: uuid(), todo, isCompleted: false}) //Creating an array of objects 25 | } 26 | renderTodoList(todoList); 27 | localStorage.setItem("todo", JSON.stringify(todoList)); 28 | todoInput.value = ""; 29 | }) 30 | 31 | showTodos.addEventListener("click", (e) => { 32 | let key = e.target.dataset.key; 33 | let delTodokey = e.target.dataset.todokey 34 | todoList = todoList.map(todo => todo.id === key ? {...todo, isCompleted: !todo.isCompleted} : todo); 35 | todoList = todoList.filter(todo => todo.id !== delTodokey); 36 | localStorage.setItem("todo", JSON.stringify(todoList)); 37 | renderTodoList(todoList); 38 | }) 39 | 40 | function renderTodoList(todoList){ 41 | showTodos.innerHTML = todoList.map(({id, todo, isCompleted}) => ` 42 |
43 | 44 | 45 | 48 |
`) 49 | } 50 | 51 | renderTodoList(todoList); 52 | -------------------------------------------------------------------------------- /Module 2 - Javascript Fundamentals/exercise.js: -------------------------------------------------------------------------------- 1 | /** Star pattern */ 2 | 3 | const numOfRows = 5; 4 | for (let i = 0; i <= numOfRows; i++) { 5 | console.log("* ".repeat(i)); 6 | } 7 | 8 | /** Program that reads string and count number of characters present in the string */ 9 | const inputString = "I am a GFGian"; 10 | let count = 0; 11 | for (let i = 0; i < inputString.length; i++) { 12 | count++; 13 | } 14 | console.log(count); 15 | 16 | /** A program that reads 3 string and print the smallest string */ 17 | const firstString = "apple"; 18 | const secondString = "banana"; 19 | const thirdString = "watermelon"; 20 | 21 | if ( 22 | firstString.length > secondString.length && 23 | firstString.length > thirdString.length 24 | ) { 25 | console.log(firstString + " is the largest string"); 26 | } else if ( 27 | secondString.length > firstString.length && 28 | secondString.length > thirdString.length 29 | ) { 30 | console.log(secondString + " is the largest string"); 31 | } else if ( 32 | thirdString.length > firstString.length && 33 | thirdString.length > secondString.length 34 | ) { 35 | console.log(thirdString + " is the largest string"); 36 | } else { 37 | console.log("Found 2 or more of the same length"); 38 | } 39 | 40 | /** A program that reads the string and counts numbers of vowels in a string */ 41 | 42 | const inputString1 = "I am a GFGian"; 43 | let count1 = 0; 44 | for (let i = 0; i < inputString1.length; i++) { 45 | if ("aeiou".includes(inputString1[i].toLowerCase())) { 46 | count1++; 47 | } 48 | } 49 | console.log("Number of vowels =", count1); 50 | 51 | const char = ["a", "b", "c", "d", "e"]; 52 | 53 | const inputString2 = "I am a GFGian"; 54 | // const inputString2 = "The quick brown fox jumps over the lazy dog" 55 | const anagramString = (text) => { 56 | for (let i = 0; i < inputString2.length; i++) { 57 | if ( 58 | !"qwertyuioplkjhgfdsazxcvbnm ".includes(inputString2[i].toLowerCase()) 59 | ) { 60 | return false; 61 | } 62 | } 63 | return true; 64 | }; 65 | 66 | const flag = anagramString(inputString); 67 | if (flag) { 68 | console.log("string is anagram"); 69 | } else { 70 | console.log("string is not anagram"); 71 | } 72 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 5 - E-com Javacript/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://uilight.netlify.app/main.css"); 2 | @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); 3 | @import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"); 4 | 5 | :root { 6 | --primary-color: #334155; 7 | } 8 | 9 | .heading { 10 | background-color: var(--background-color); 11 | padding: 0.5rem 3rem; 12 | color: var(--primary-color); 13 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 14 | z-index: 1; 15 | width: 100vw; 16 | justify-content: space-between; 17 | } 18 | 19 | .search-box-input { 20 | width: 18rem; 21 | padding-left: 2rem; 22 | font-size: 1rem; 23 | border: none; 24 | border-bottom: 1px solid var(--primary-color); 25 | background-color: transparent; 26 | } 27 | 28 | .search-box-input:focus { 29 | outline: none; 30 | } 31 | 32 | .nav-icon { 33 | font-size: 2rem; 34 | } 35 | 36 | .products-page { 37 | padding: 8rem 3rem 2rem 3rem; 38 | } 39 | .card-vertical { 40 | width: 16rem; 41 | } 42 | 43 | .card-image-container { 44 | width: 100%; 45 | height: 240px; 46 | } 47 | 48 | .card-image { 49 | height: 100%; 50 | object-fit: contain; 51 | } 52 | 53 | .star { 54 | color: orange; 55 | } 56 | 57 | .card-price { 58 | gap: 4px; 59 | } 60 | 61 | .price-strike-through, 62 | .discount { 63 | font-size: 14px; 64 | } 65 | 66 | .gap-sm { 67 | gap: 8px; 68 | } 69 | 70 | .main { 71 | padding-top: 8rem; 72 | } 73 | 74 | .heading-2 { 75 | padding-bottom: 1rem; 76 | font-size: 2.5rem; 77 | } 78 | 79 | .final-price { 80 | width: 25rem; 81 | background-color: var(--card-background); 82 | align-self: flex-start; 83 | } 84 | 85 | .justify-space-between { 86 | justify-content: space-between; 87 | } 88 | 89 | .side-bar { 90 | width: 20rem; 91 | position: fixed; 92 | } 93 | 94 | .product-container { 95 | margin-left: 21rem; 96 | } 97 | 98 | .heading-3 { 99 | padding: 10px 0; 100 | } 101 | 102 | .filter-container { 103 | padding: 1rem 0; 104 | } 105 | 106 | .label { 107 | font-size: 1.25rem; 108 | } 109 | 110 | .radio { 111 | width: 1.25rem; 112 | height: 1.25rem; 113 | } 114 | -------------------------------------------------------------------------------- /Module. 15a - Project - Movie App/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap"); 2 | @import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"); 3 | 4 | /* RESET CSS **/ 5 | 6 | * { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | } 11 | 12 | :root { 13 | --bg-color: #191919; 14 | --card-bg: #064663; 15 | --text-color-primary: #fafafa; 16 | } 17 | 18 | body { 19 | background-color: var(--bg-color); 20 | font-family: "Montserrat", sans-serif; 21 | } 22 | 23 | .header { 24 | padding: 2rem 5rem 1rem 6rem; 25 | display: flex; 26 | align-items: center; 27 | position: fixed; 28 | width: 100vw; 29 | background-color: var(--bg-color); 30 | } 31 | 32 | .heading-1 { 33 | font-size: 3rem; 34 | color: var(--text-color-primary); 35 | } 36 | 37 | .options { 38 | display: flex; 39 | align-items: center; 40 | margin-left: auto; 41 | gap: 10px; 42 | } 43 | 44 | .input { 45 | background-color: transparent; 46 | border: 2px solid var(--card-bg); 47 | border-radius: 4px; 48 | padding: 8px; 49 | color: var(--text-color-primary); 50 | font-size: 1.25rem; 51 | width: 25rem; 52 | } 53 | 54 | .rating-select { 55 | background-color: transparent; 56 | border-radius: 4px; 57 | padding: 8px; 58 | font-size: 1.25rem; 59 | border: 2px solid var(--card-bg); 60 | color: var(--text-color-primary); 61 | } 62 | 63 | .option { 64 | background-color: var(--bg-color); 65 | } 66 | 67 | .main { 68 | display: flex; 69 | gap: 3rem; 70 | flex-wrap: wrap; 71 | padding: 10rem 4rem 3rem 6rem; 72 | } 73 | 74 | .card { 75 | width: 18rem; 76 | border-radius: 4px; 77 | background-color: var(--card-bg); 78 | } 79 | 80 | .card:hover { 81 | scale: 1.1; 82 | transition: scale 0.5s; 83 | } 84 | 85 | .card-image-container { 86 | width: 100%; 87 | height: 18rem; 88 | } 89 | 90 | .card-image { 91 | width: 100%; 92 | height: 100%; 93 | object-fit: contain; 94 | position: center center; 95 | } 96 | 97 | .movie-details { 98 | margin: 10px 0; 99 | color: var(--text-color-primary); 100 | padding: 8px; 101 | display: flex; 102 | flex-direction: column; 103 | gap: 8px; 104 | } 105 | 106 | .title { 107 | font-size: 1.1rem; 108 | } 109 | 110 | .genre { 111 | font-size: 0.875rem; 112 | } 113 | 114 | .ratings { 115 | display: flex; 116 | justify-content: space-between; 117 | } 118 | 119 | .star-rating { 120 | display: flex; 121 | align-items: center; 122 | gap: 4px; 123 | } 124 | -------------------------------------------------------------------------------- /Module. 15b - Project recipe-app/getRecipeCard.js: -------------------------------------------------------------------------------- 1 | export const getRecipeCard = (recipes, parentElement, createElement) => { 2 | for (let recipe of recipes) { 3 | /** Card Parent Container */ 4 | const cardContainer = createElement("div"); 5 | cardContainer.classList.add("card", "shadow"); 6 | 7 | /** Card Image Container */ 8 | const cardImageContainer = createElement("div"); 9 | cardImageContainer.classList.add("card-image-container"); 10 | 11 | /** Card Image Element */ 12 | const imageElement = createElement("img"); 13 | imageElement.classList.add("card-image"); 14 | imageElement.setAttribute("src", recipe["image-url"]); 15 | imageElement.setAttribute("alt", recipe.TranslatedRecipeName); 16 | imageElement.setAttribute("data-id", recipe.ID); 17 | cardImageContainer.appendChild(imageElement); 18 | 19 | cardContainer.appendChild(cardImageContainer); 20 | 21 | /** Card Details Container */ 22 | const cardDetailsContainer = createElement("div"); 23 | cardDetailsContainer.classList.add("recipe-details"); 24 | 25 | /** Card Title Container */ 26 | const cardTitleElement = createElement("div"); 27 | cardTitleElement.classList.add("title"); 28 | cardTitleElement.innerText = recipe.TranslatedRecipeName; 29 | cardDetailsContainer.appendChild(cardTitleElement); 30 | 31 | /** Card Rating & Duration Container */ 32 | const cardRatingAndLength = createElement("div"); 33 | cardRatingAndLength.classList.add("ratings"); 34 | 35 | /** Rating Element */ 36 | const cardRatingContainer = createElement("div"); 37 | 38 | const ratingValueElement = createElement("span"); 39 | ratingValueElement.innerText = `Cuisine: ${recipe.Cuisine}`; 40 | cardRatingContainer.appendChild(ratingValueElement); 41 | 42 | cardRatingAndLength.appendChild(cardRatingContainer); 43 | 44 | /** Duration */ 45 | const lengthElement = createElement("div"); 46 | lengthElement.classList.add("star-rating"); 47 | 48 | const ratingIconElement = createElement("span"); 49 | ratingIconElement.classList.add("time", "material-icons-outlined"); 50 | ratingIconElement.innerText = "timer"; 51 | lengthElement.appendChild(ratingIconElement); 52 | const duration = createElement("span"); 53 | duration.innerText = `${recipe.TotalTimeInMins} mins`; 54 | lengthElement.appendChild(duration); 55 | // lengthElement.innerText = `${recipe.TotalTimeInMins} mins`; 56 | cardRatingAndLength.appendChild(lengthElement); 57 | 58 | cardDetailsContainer.appendChild(cardRatingAndLength); 59 | 60 | cardContainer.appendChild(cardDetailsContainer); 61 | 62 | parentElement.appendChild(cardContainer); 63 | } 64 | }; 65 | -------------------------------------------------------------------------------- /Module. 15c - Project quiz-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quiz App 8 | 9 | 10 | 11 |

Quiz App

12 |
13 |
14 | rules 15 |
16 |
17 |
18 |

Guidelines

19 |
    20 |
  • 21 | There are total 5 questions in each category. 22 |
    • 23 |
  • You can attempt each question only once.
    • 24 |
  • 25 | Each question carries one mark. No negative marking for wrong 26 | answers. 27 |
    • 28 |
  • Question are Multiple Choice Questions.
    • 29 |
  • 30 | Don't plagarize. Try to answer on your own. 31 |
    • 32 |
  • You can take the quiz multiple times.
    • 33 |
34 | 41 |
42 |
43 |
44 |
45 |
46 | 47 |
48 |
49 | 50 | 51 |
52 |
53 |
54 |
55 | 56 | 57 |
58 |
59 |
60 | Your Score: 9990 61 |
62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 3 - Form Validation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Form Validation 9 | 10 | 11 | 12 | 13 |

Registration Form

14 |
15 |
16 | 19 | Name must only contain alphabets 20 | *Please fill this field 21 |
22 | 23 |
24 | 27 | Name must only contain alphabets 28 | *Please fill this field 29 |
30 | 31 | 38 | 39 |
40 | 48 |
    49 |
  • 50 | Password must contain atleast 8 characters 51 |
    • 52 |
  • 53 | Password must contain atleast one lower case letter 54 |
    • 55 |
  • 56 | Password must contain atleast one upper case letter 57 |
    • 58 |
  • Password must contain atleast one digit
    • 59 |
  • 60 | Password must contain atleast one special character (!@#$%^&*) 61 |
    • 62 |
63 | *Please fill this field 64 |
65 | 66 |
67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /Module. 15b - Project recipe-app/index.js: -------------------------------------------------------------------------------- 1 | import { getRecipeCard } from "./getRecipeCard.js"; 2 | import { getCuisineCard } from "./getCuisine.js"; 3 | 4 | const cardParentContainer = document.querySelector(".main"); 5 | const cuisineParentContainer = document.querySelector(".cuisine-filter"); 6 | const searchBox = document.querySelector(".input"); 7 | 8 | const RECIPEURL = "https://recipeapi.prakashsakari.repl.co/api/recipes"; 9 | const CUISINEURL = 10 | "https://recipeapi.prakashsakari.repl.co/api/recipes/cuisines"; 11 | 12 | let searchValue = ""; 13 | let filteredArrOfRecipes = []; 14 | let arrOfSelectedCuisine = []; 15 | 16 | const createElement = (element) => document.createElement(element); 17 | 18 | const getData = async (URL) => { 19 | try { 20 | const { data } = await axios.get(URL); 21 | return data; 22 | } catch (err) { 23 | console.log(err); 24 | } 25 | }; 26 | 27 | const recipes = await getData(RECIPEURL); 28 | const cuisines = await getData(CUISINEURL); 29 | 30 | const getFilteredData = () => { 31 | filteredArrOfRecipes = 32 | searchValue?.length > 0 33 | ? recipes.filter((recipe) => 34 | recipe.TranslatedRecipeName.toLowerCase().includes(searchValue) 35 | ) 36 | : recipes; 37 | if (arrOfSelectedCuisine?.length > 0) { 38 | filteredArrOfRecipes = 39 | searchValue?.length < 1 ? recipes : filteredArrOfRecipes; 40 | filteredArrOfRecipes = filteredArrOfRecipes.filter((recipe) => 41 | arrOfSelectedCuisine.includes(recipe.Cuisine) 42 | ); 43 | } 44 | return filteredArrOfRecipes; 45 | }; 46 | 47 | const searchInputHandler = (event) => { 48 | searchValue = event.target.value.toLowerCase(); 49 | const filteredData = getFilteredData(); 50 | cardParentContainer.innerHTML = ""; 51 | getRecipeCard(filteredData, cardParentContainer, createElement); 52 | }; 53 | 54 | const handleCusineClick = (event) => { 55 | const id = event.target.dataset.id; 56 | const isSelected = event.target.checked; 57 | const selectedCuisine = cuisines.reduce( 58 | (acc, cur) => (cur.ID === acc ? cur.Cuisine : acc), 59 | id 60 | ); 61 | arrOfSelectedCuisine = isSelected 62 | ? [...arrOfSelectedCuisine, selectedCuisine] 63 | : arrOfSelectedCuisine.filter((cuisine) => cuisine !== selectedCuisine); 64 | const filteredArrOfCuisine = getFilteredData(); 65 | cardParentContainer.innerHTML = ""; 66 | 67 | getRecipeCard(filteredArrOfCuisine, cardParentContainer, createElement); 68 | }; 69 | 70 | searchBox.addEventListener("keyup", searchInputHandler); 71 | 72 | cuisineParentContainer.addEventListener("click", handleCusineClick); 73 | 74 | getRecipeCard(recipes, cardParentContainer, createElement); 75 | getCuisineCard(cuisines, cuisineParentContainer, createElement); 76 | 77 | cardParentContainer.addEventListener("click", (event) => { 78 | const cardId = event.target.dataset.id; 79 | if (cardId) { 80 | localStorage.clear(); 81 | localStorage.setItem("id", cardId); 82 | location.href = "single-recipe.html"; 83 | } 84 | }); 85 | 86 | console.log(cuisines); 87 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 4 - Notes App/main.js: -------------------------------------------------------------------------------- 1 | import { renderNotes } from "./app.js"; 2 | 3 | let note = document.querySelector(".note"); 4 | let title = document.querySelector(".title"); 5 | let addNoteButton = document.querySelector(".add-btn"); 6 | let notesDisplay = document.querySelector(".notes-display"); 7 | let showOtherNotes = document.querySelector(".notes-container"); 8 | let showPinnedNotes = document.querySelector(".pinned-notes-container"); 9 | let pinTitle = document.querySelector(".pin-title"); 10 | let otherTitle = document.querySelector(".other-title"); 11 | let arrayOfNotes = JSON.parse(localStorage.getItem("notes")) || []; 12 | 13 | if (arrayOfNotes.length > 0){ 14 | pinTitle.classList.toggle("d-none"); 15 | otherTitle.classList.toggle("d-none"); 16 | } 17 | 18 | notesDisplay.addEventListener("click", (event) => { 19 | let type = event.target.dataset.type; 20 | let noteId = event.target.dataset.id; 21 | console.log({type, noteId}); 22 | switch (type){ 23 | case "del": 24 | arrayOfNotes = arrayOfNotes.filter(({id}) => id.toString() !== noteId); 25 | showOtherNotes.innerHTML = renderNotes(arrayOfNotes.filter(({isPinned, isArchived}) => !isPinned && !isArchived)); 26 | showPinnedNotes.innerHTML = renderNotes(arrayOfNotes.filter(({isPinned}) => isPinned)); 27 | localStorage.setItem("notes", JSON.stringify(arrayOfNotes)); 28 | break; 29 | case "pinned": 30 | arrayOfNotes = arrayOfNotes.map(note => note.id.toString() === noteId ? {...note, isPinned: !note.isPinned}: note); 31 | showOtherNotes.innerHTML = renderNotes(arrayOfNotes.filter(({isPinned, isArchived}) => !isPinned && !isArchived)); 32 | showPinnedNotes.innerHTML = renderNotes(arrayOfNotes.filter(({isPinned}) => isPinned)); 33 | localStorage.setItem("notes", JSON.stringify(arrayOfNotes)); 34 | break; 35 | case "archive": 36 | arrayOfNotes = arrayOfNotes.map(note => note.id.toString() ===noteId ? {...note, isArchived: !note.isArchived} : note); 37 | showOtherNotes.innerHTML = renderNotes(arrayOfNotes.filter(({isPinned, isArchived}) => !isPinned && !isArchived)); 38 | localStorage.setItem("notes", JSON.stringify(arrayOfNotes)); 39 | } 40 | }) 41 | 42 | 43 | addNoteButton.addEventListener("click", () => { 44 | if (note.value.trim().length > 0 || title.value.trim().length > 0){ 45 | arrayOfNotes = [...arrayOfNotes, 46 | {id: Date.now(), title: title.value.trim(), note: note.value.trim(), isPinned: false, isArchived: false}]; 47 | note.value = title.value = ""; 48 | showOtherNotes.innerHTML = renderNotes(arrayOfNotes.filter(({isPinned, isArchived}) => !isPinned && !isArchived)); 49 | localStorage.setItem("notes", JSON.stringify(arrayOfNotes)); 50 | } 51 | }); 52 | 53 | showOtherNotes.innerHTML = renderNotes(arrayOfNotes.filter(({isPinned, isArchived}) => !isPinned && !isArchived)); 54 | showPinnedNotes.innerHTML = renderNotes(arrayOfNotes.filter(({isPinned}) => isPinned)); -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 1 - Quiz App/quiz-cli-app.js: -------------------------------------------------------------------------------- 1 | let readlineSync = require("readline-sync"); 2 | let kuler = require("kuler"); 3 | let score = 0; 4 | 5 | let userName = readlineSync.question("What's your name? "); 6 | console.log(kuler(`\nHello ${userName} welcome to Quizify`, "#dc2626")); 7 | 8 | console.log("\nPlease select any options by typing either a/b/c/d\n"); 9 | 10 | /** Creating data set */ 11 | const database = { 12 | data: [ 13 | { 14 | question: `let a = {}, b = {} 15 | console.log(a == b) 16 | console.log(a === b)`, 17 | options: { 18 | a: "false false", 19 | b: "false true", 20 | c: "true false", 21 | d: "true true", 22 | }, 23 | correctAnswer: "a", 24 | }, 25 | { 26 | question: "Object.assign(targer, source) creates which type of copy?", 27 | options: { 28 | a: "Deep Copy", 29 | b: "Shallow Copy", 30 | c: "Nested Copy", 31 | d: "Creates a new reference", 32 | }, 33 | correctAnswer: "b", 34 | }, 35 | { 36 | question: "Is method chaining possible with forEach?", 37 | options: { 38 | a: "Yes", 39 | b: "No", 40 | }, 41 | correctAnswer: "b", 42 | }, 43 | ], 44 | }; 45 | 46 | /** Creating Leader Board*/ 47 | const leaderBoard = { 48 | data: [ 49 | { 50 | name: "Ashish", 51 | score: 1, 52 | }, 53 | { 54 | name: "Riya", 55 | score: 3, 56 | }, 57 | { 58 | name: "Jay", 59 | score: 2, 60 | }, 61 | ], 62 | }; 63 | 64 | /** Main Logic */ 65 | function playGame(userAnswer, correctAnswer) { 66 | if (userAnswer === correctAnswer) { 67 | console.log(kuler("Correct Answer", "#059669")); 68 | score++; 69 | } else { 70 | console.log(kuler("Incorrect Answer", "#b91c1c")); 71 | console.log(kuler(`Correct Answer is ${correctAnswer}`, "#1d4ed8")); 72 | } 73 | } 74 | 75 | function showQuestionAndOptions(database) { 76 | for (let i = 0; i < database.data.length; i++) { 77 | console.log(`\nQ${i + 1} - ${database.data[i].question}\n`); 78 | for (let key in database.data[i].options) { 79 | console.log(`${key} - ${database.data[i].options[key]}`); 80 | } 81 | let userAnswer = readlineSync 82 | .question("Enter your answer - (a/b/c/d) - ") 83 | .toLowerCase(); 84 | playGame(userAnswer, database.data[i].correctAnswer); 85 | } 86 | } 87 | 88 | function showHighScorer(leaderBoard) { 89 | leaderBoard.data.push({ name: userName, score: score }); 90 | let sortedScoreList = leaderBoard.data.sort((a, b) => b.score - a.score); 91 | console.log( 92 | kuler("\nCheck your position on the Leader Board🎉🎉", "#fde047") 93 | ); 94 | for (let leader of sortedScoreList) { 95 | console.log(kuler(`${leader.name} - Score: ${leader.score}`, "#9333ea")); 96 | } 97 | } 98 | 99 | showQuestionAndOptions(database); 100 | console.log(kuler(`\nYour score is - ${score}`, "#5eead4")); 101 | showHighScorer(leaderBoard); 102 | -------------------------------------------------------------------------------- /Module. 15c - Project quiz-app/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://uilight.netlify.app/main.css"); 2 | 3 | body { 4 | background-color: #475569; 5 | } 6 | 7 | h1 { 8 | color: #fafafa; 9 | padding-top: 2rem; 10 | } 11 | 12 | .options-contianer .button.success { 13 | background-color: green; 14 | } 15 | 16 | .options-contianer .button.error { 17 | background-color: red; 18 | } 19 | 20 | .grid-container-two-col { 21 | width: 90vw; 22 | height: 70vh; 23 | margin: 2rem auto; 24 | display: grid; 25 | grid-template-columns: repeat(2, 1fr); 26 | gap: 6rem; 27 | margin-top: 4rem; 28 | color: #fafafa; 29 | } 30 | 31 | .section-img-box { 32 | width: 30vw; 33 | height: 60vh; 34 | justify-self: end; 35 | } 36 | 37 | .section-img { 38 | width: 100%; 39 | height: 100%; 40 | } 41 | 42 | .section-rule-box { 43 | color: #fafafa; 44 | } 45 | 46 | .rules { 47 | color: #fafafa; 48 | } 49 | 50 | .rule-title { 51 | text-decoration: underline; 52 | } 53 | 54 | .rules-list { 55 | margin: 2rem 0; 56 | } 57 | 58 | .rule-point { 59 | padding: 1rem 0.5rem; 60 | } 61 | 62 | .link-btn { 63 | color: var(--text-color-primary); 64 | text-decoration: none; 65 | width: 100%; 66 | } 67 | 68 | .play-btn { 69 | border: none; 70 | background-color: #334155; 71 | color: #fafafa; 72 | padding: 8px 1rem; 73 | font-size: 1.5rem; 74 | border-radius: 4px; 75 | } 76 | 77 | .play-btn:hover { 78 | opacity: 0.85; 79 | } 80 | 81 | .hide { 82 | display: none; 83 | } 84 | 85 | .quiz { 86 | background-color: #94a3b8; 87 | color: #fafafa; 88 | padding: 2rem; 89 | width: 45vw; 90 | position: absolute; 91 | top: 50%; 92 | left: 50%; 93 | transform: translate(-50%, -50%); 94 | } 95 | 96 | .result { 97 | position: absolute; 98 | top: 50%; 99 | left: 50%; 100 | transform: translate(-50%, -50%); 101 | font-size: 3rem; 102 | color: #cbd5e1; 103 | } 104 | 105 | .quiz-category { 106 | font-size: 2rem; 107 | font-weight: 700; 108 | } 109 | 110 | .questions-container { 111 | font-size: 1.5rem; 112 | word-break: break-all; 113 | } 114 | 115 | .options-contianer .button { 116 | background-color: #475569; 117 | color: #fafafa; 118 | border-radius: 2rem; 119 | font-size: 1.25rem; 120 | font-weight: bold; 121 | padding: 10px 0; 122 | } 123 | 124 | .justify-center { 125 | justify-content: center; 126 | } 127 | 128 | .justify-space-between { 129 | justify-content: space-between; 130 | } 131 | 132 | .cta { 133 | font-size: 1.25rem; 134 | font-weight: bold; 135 | border: none; 136 | padding: 10px 1.5rem; 137 | border-radius: 4px; 138 | cursor: pointer; 139 | } 140 | 141 | .quit { 142 | background-color: #cbd5e1; 143 | font-weight: 600; 144 | } 145 | 146 | .next { 147 | background-color: #334155; 148 | color: #fafafa; 149 | font-weight: 600; 150 | } 151 | 152 | .button { 153 | cursor: pointer; 154 | } 155 | 156 | .qns-count, 157 | .cur-score { 158 | font-size: 1.25rem; 159 | } 160 | -------------------------------------------------------------------------------- /Module. 15b - Project recipe-app/style.css: -------------------------------------------------------------------------------- 1 | @import url("./reset.css"); 2 | @import url("utility.css"); 3 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"); 4 | @import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"); 5 | 6 | body { 7 | background-color: #efefef; 8 | font-family: "Open Sans", sans-serif; 9 | overflow-x: hidden; 10 | } 11 | 12 | .header { 13 | display: flex; 14 | align-items: center; 15 | position: fixed; 16 | z-index: 2; 17 | width: 100vw; 18 | background-color: #efefef; 19 | padding: 1rem 9rem 1rem 6rem; 20 | } 21 | 22 | .search-container { 23 | position: relative; 24 | display: flex; 25 | gap: 1rem; 26 | margin-left: auto; 27 | } 28 | 29 | .input { 30 | background-color: transparent; 31 | border-radius: 4px; 32 | border: 2px solid; 33 | padding: 8px 8px 8px 2.5rem; 34 | font-size: 1.25rem; 35 | width: 25rem; 36 | } 37 | 38 | .input:focus { 39 | outline: none; 40 | } 41 | 42 | .search-icon { 43 | position: absolute; 44 | left: 1rem; 45 | top: 10px; 46 | } 47 | 48 | .main { 49 | gap: 3rem; 50 | padding: 8rem 5rem 2rem 20rem; 51 | } 52 | 53 | .card { 54 | width: 20rem; 55 | height: max-content; 56 | border-radius: 4px; 57 | background-color: #f8fafc; 58 | padding: 8px; 59 | } 60 | 61 | .card:hover { 62 | scale: 1.1; 63 | transition: scale 0.5s; 64 | } 65 | 66 | .shadow { 67 | box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1); 68 | } 69 | 70 | .card-image-container { 71 | width: 100%; 72 | height: 18rem; 73 | padding-bottom: 4px; 74 | } 75 | 76 | .card-image { 77 | width: 100%; 78 | height: 100%; 79 | object-fit: cover; 80 | position: center center; 81 | border-radius: 4px 4px 4px 4px; 82 | } 83 | 84 | .card-image:hover { 85 | cursor: pointer; 86 | } 87 | 88 | .recipe-details { 89 | padding: 8px; 90 | } 91 | 92 | .title { 93 | font-size: 1.1rem; 94 | } 95 | 96 | .ratings { 97 | display: flex; 98 | justify-content: space-between; 99 | color: #71717a; 100 | padding-top: 8px; 101 | font-size: 0.875rem; 102 | } 103 | 104 | .time { 105 | font-size: 0.875rem; 106 | align-self: center; 107 | } 108 | 109 | .star-rating { 110 | display: flex; 111 | align-items: center; 112 | gap: 2px; 113 | } 114 | 115 | .cuisine-filter { 116 | width: 18rem; 117 | position: fixed; 118 | height: 100%; 119 | margin-top: 7rem; 120 | z-index: 1; 121 | overflow-y: auto; 122 | padding: 1rem 1rem 8.5rem 1rem; 123 | } 124 | 125 | .filter { 126 | padding: 4px 0; 127 | } 128 | 129 | .checkbox { 130 | width: 1rem; 131 | height: 1rem; 132 | } 133 | 134 | .cuisine-label { 135 | font-size: 1.1rem; 136 | } 137 | 138 | .info { 139 | padding-top: 1rem; 140 | display: flex; 141 | flex-direction: column; 142 | gap: 8px; 143 | justify-content: center; 144 | align-items: center; 145 | } 146 | 147 | .fs-large { 148 | font-size: 1.5rem; 149 | } 150 | 151 | .single-card-main { 152 | padding: 8rem 4rem 2rem 8rem; 153 | } 154 | 155 | .recipe-steps { 156 | width: 50vw; 157 | padding: 1rem 4rem 2rem 8rem; 158 | } 159 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 5 - E-com Javacript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home | Flash Shop 8 | 9 | 10 | 11 | 12 |
13 |
14 |

15 | Flash Shop 16 |

17 |
18 |
19 | 20 | 21 | search 22 | 23 |
24 | 42 |
43 |
44 | 66 |
67 |
68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 4 - Notes App/style.css: -------------------------------------------------------------------------------- 1 | @import url("./utility.css"); 2 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap"); 3 | @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); 4 | @import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"); 5 | 6 | :root { 7 | --background-color: #fafafa; 8 | --primary-color: #3b82f6; 9 | --accent-color: #a9a9a9; 10 | } 11 | 12 | body { 13 | background-color: var(--background-color); 14 | line-height: 1.5; 15 | letter-spacing: 0.8px; 16 | } 17 | 18 | .heading { 19 | background-color: var(--primary-color); 20 | color: var(--background-color); 21 | padding: 8px 1.5rem; 22 | } 23 | 24 | .nav { 25 | margin-left: auto; 26 | padding-right: 2rem; 27 | } 28 | 29 | .logo { 30 | display: block; 31 | color: var(--background-color); 32 | } 33 | 34 | .list-non-bullet { 35 | list-style: none; 36 | 37 | } 38 | 39 | .list { 40 | display: inline-block; 41 | padding: 0 10px; 42 | } 43 | 44 | .link { 45 | color: var(--background-color); 46 | } 47 | 48 | .container { 49 | width: 35vw; 50 | padding-top: 2rem; 51 | margin-left: 50vw; 52 | transform: translateX(-50%); 53 | } 54 | 55 | .text-area { 56 | width: 100%; 57 | padding: 4px 8px 0 8px; 58 | resize: none; 59 | background-color: transparent; 60 | border: 1px solid var(--accent-color); 61 | } 62 | 63 | .text-area:focus { 64 | outline: none; 65 | } 66 | 67 | .button { 68 | background: transparent; 69 | border: none; 70 | color: var(--background-color); 71 | } 72 | 73 | 74 | .add-btn { 75 | right: 1.25rem; 76 | bottom: -1rem; 77 | width: 2rem; 78 | height: 2rem; 79 | border-radius: 50%; 80 | background: var(--primary-color); 81 | } 82 | 83 | .button:hover { 84 | cursor: pointer; 85 | opacity: 0.85; 86 | } 87 | 88 | .title { 89 | border-bottom: none; 90 | border-radius: 4px 4px 0 0; 91 | font-size: 1rem; 92 | font-weight: 600; 93 | } 94 | 95 | .note { 96 | border-top: none; 97 | border-radius: 0 0 4px 4px; 98 | } 99 | 100 | .pinned-notes-container{ 101 | padding-bottom: 3rem; 102 | } 103 | 104 | .notes-display, 105 | .archive-notes { 106 | padding: 2rem 4rem; 107 | } 108 | 109 | .single-note { 110 | border: 1px solid var(--accent-color); 111 | border-radius: 4px; 112 | width: 18vw; 113 | align-self: flex-start; 114 | padding: 10px; 115 | } 116 | 117 | .single-note span { 118 | word-break: break-word; 119 | align-self: flex-start; 120 | } 121 | 122 | .single-note-title { 123 | font-weight: 600; 124 | } 125 | 126 | 127 | .single-note p { 128 | word-break: break-word; 129 | } 130 | 131 | .del-btn { 132 | color: var(--primary-color); 133 | margin-left: auto; 134 | align-self: flex-start; 135 | } 136 | 137 | .single-note:hover > .title-container > .del-btn { 138 | visibility: visible; 139 | } 140 | 141 | .single-note:hover > .options > .btn { 142 | visibility: visible; 143 | } 144 | 145 | .options { 146 | margin-top: 1rem; 147 | } 148 | 149 | .pinned-btn { 150 | color: var(--primary-color); 151 | } 152 | 153 | .pin { 154 | color: red; 155 | } 156 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 5 - E-com Javacript/cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cart | Flash Shop 8 | 9 | 10 | 11 |
12 |
13 |

14 | Flash Shop 15 |

16 |
17 |
18 | 19 | 20 | search 21 | 22 |
23 | 41 |
42 |
43 |

Your Cart

44 |
45 |
46 |
47 |
Price Details
48 |
49 | Price () items 50 | Rs. 51 |
52 |
53 | Discount 54 | Rs. 55 |
56 |
57 | Delivery Charge 58 | Rs. 100 59 |
60 |
61 | Total Amount 62 | Rs. 63 |
64 |
65 | You will save Rs. on this order 66 |
67 | 70 |
71 |
72 | 73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 5 - E-com Javacript/db/products.js: -------------------------------------------------------------------------------- 1 | export const products = [ 2 | { 3 | _id: "001", 4 | name: "Men Checked Shirt", 5 | img: "https://rukminim1.flixcart.com/image/880/1056/kwtkxow0/shirt/c/u/n/xl-brd-white-p-v-creations-original-imag9f3yxz7d89t4.jpeg?q=50", 6 | alt: "mens shirt", 7 | brand: "Roadster", 8 | newPrice: 1750, 9 | oldPrice: 2499, 10 | discount: 67, 11 | size: "L", 12 | idealFor: "M", 13 | rating: 4.2, 14 | }, 15 | { 16 | _id: "002", 17 | name: "Women Crop Top", 18 | img: "https://rukminim1.flixcart.com/image/880/1056/krf91u80/top/g/n/v/xs-lbt-13-maroon-london-belly-original-imag57qgzcm3hsmv.jpeg?q=50", 19 | alt: "womens top", 20 | brand: "Forever 21", 21 | newPrice: 750, 22 | oldPrice: 1499, 23 | discount: 75, 24 | size: "M", 25 | idealFor: "W", 26 | rating: 4.5, 27 | }, 28 | { 29 | _id: "003", 30 | name: "Women Solid Shirt", 31 | img: "https://rukminim1.flixcart.com/image/880/1056/kf2v3ww0/top/z/f/t/l-044-yukon01-original-imafvhkejzfhqaqz.jpeg?q=50", 32 | alt: "Women shirt", 33 | brand: "Zara", 34 | newPrice: 2750, 35 | oldPrice: 3499, 36 | discount: 46, 37 | size: "L", 38 | idealFor: "W", 39 | rating: 3.9, 40 | }, 41 | { 42 | _id: "004", 43 | name: "Men Solid Shirt", 44 | brand: "Peter England", 45 | img: "https://rukminim1.flixcart.com/image/580/696/kwzap3k0/shirt/r/q/j/l-lstr-acqua-p-v-creations-original-imag9jggj6naa4cu.jpeg?q=50", 46 | alt: "mens shirt", 47 | newPrice: 2554, 48 | oldPrice: 3499, 49 | discount: 27, 50 | size: "XL", 51 | idealFor: "M", 52 | rating: 3.5, 53 | }, 54 | { 55 | _id: "005", 56 | name: "Men Solid T-Shirt", 57 | brand: "Roadster", 58 | img: "https://rukminim1.flixcart.com/image/580/696/kz8qsnk0/t-shirt/g/z/n/m-db1024-42-3bros-original-imagbawh38j3ghzr.jpeg?q=50", 59 | alt: "mens t-shirt", 60 | newPrice: 3750, 61 | oldPrice: 4499, 62 | discount: 21, 63 | size: "M", 64 | idealFor: "M", 65 | rating: 3.2, 66 | }, 67 | { 68 | _id: "006", 69 | name: "Women Printed Top", 70 | img: "https://rukminim1.flixcart.com/image/580/696/kzhbfrk0/top/v/b/6/m-fancy-top-shree-villa-original-imagbhgpqkj9snta.jpeg?q=50", 71 | alt: "Women Printed Top", 72 | brand: "Zara", 73 | newPrice: 1750, 74 | oldPrice: 2499, 75 | discount: 27, 76 | size: "S", 77 | idealFor: "W", 78 | rating: 3.2, 79 | }, 80 | { 81 | _id: "007", 82 | name: "Men Regular V Neck T-Shirt", 83 | img: "https://rukminim1.flixcart.com/image/580/696/k6gsk280/t-shirt/e/z/h/xl-pp-374-385-379-revesto-original-imafkxwnetcxt4xr.jpeg?q=50", 84 | alt: "mens t-shirt", 85 | brand: "DNMX", 86 | newPrice: 3750, 87 | oldPrice: 4499, 88 | discount: 90, 89 | size: "XXL", 90 | idealFor: "M", 91 | rating: 2.2, 92 | }, 93 | { 94 | _id: "008", 95 | name: "Women Regular Top", 96 | img: "https://rukminim1.flixcart.com/image/580/696/knni7ww0/top/o/m/o/s-dmp303-dmp-fashion-original-imag2a5qkjgjf22k.jpeg?q=50", 97 | alt: "Women Regular Top", 98 | brand: "Forever 21", 99 | newPrice: 2750, 100 | oldPrice: 3499, 101 | discount: 44, 102 | size: "XXL", 103 | idealFor: "W", 104 | rating: 2.2, 105 | }, 106 | { 107 | _id: "009", 108 | name: "Women Solid T-Shirt", 109 | img: "https://rukminim1.flixcart.com/image/580/696/jzn0tjk0/t-shirt/t/y/g/s-fw-014-mrrd-s-first-wave-original-imaf2nxuqatamwhm.jpeg?q=50", 110 | alt: "Women t-shirt", 111 | brand: "Forever 21", 112 | newPrice: 3750, 113 | oldPrice: 4499, 114 | discount: 39, 115 | size: "S", 116 | idealFor: "W", 117 | rating: 2.2, 118 | }, 119 | ]; 120 | -------------------------------------------------------------------------------- /Module. 15c - Project quiz-app/index.js: -------------------------------------------------------------------------------- 1 | const questionParent = document.querySelector(".questions-container"); 2 | const optionsParent = document.querySelector(".options-contianer"); 3 | const nextBtn = document.querySelector(".next"); 4 | const quitBtn = document.querySelector(".quit"); 5 | const quizCategory = document.querySelector(".quiz-category"); 6 | const scoreContiner = document.querySelector(".cur-score"); 7 | const rules = document.querySelector(".rule-book"); 8 | const quizBook = document.querySelector(".quiz"); 9 | const playBtn = document.querySelector(".play-btn"); 10 | const qnsCount = document.querySelector(".qns-count"); 11 | const result = document.querySelector(".result"); 12 | 13 | let quizzes = []; 14 | let currentQuestion = 0; 15 | let score = 0; 16 | const getJson = async () => { 17 | try { 18 | const { 19 | data: { results }, 20 | } = await axios.get( 21 | "https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple" 22 | ); 23 | return results; 24 | } catch (err) { 25 | console.log(err); 26 | } 27 | }; 28 | 29 | const getData = async () => { 30 | quizzes = await getJson(); 31 | console.log(quizzes); 32 | console.log(quizzes.length); 33 | }; 34 | 35 | getData(); 36 | 37 | playBtn.addEventListener("click", () => { 38 | quizBook.classList.remove("hide"); 39 | rules.classList.add("hide"); 40 | }); 41 | 42 | function createQuestionAndOptions(quizzes, currentQuestion) { 43 | qnsCount.innerText = `Q${currentQuestion + 1}/${quizzes.length}`; 44 | scoreContiner.innerText = `Score: ${score}`; 45 | quizCategory.innerText = quizzes[currentQuestion].category; 46 | const questionEle = document.createElement("p"); 47 | questionEle.innerText = `Q${currentQuestion + 1}: ${ 48 | quizzes[currentQuestion].question 49 | }`; 50 | questionParent.appendChild(questionEle); 51 | let options = [ 52 | quizzes[currentQuestion].correct_answer, 53 | ...quizzes[currentQuestion].incorrect_answers, 54 | ].sort(() => Math.random() - 0.5); 55 | for (let option of options) { 56 | const optionBtn = document.createElement("button"); 57 | optionBtn.classList.add("button"); 58 | optionBtn.setAttribute("name", option); 59 | optionBtn.innerText = option; 60 | optionsParent.appendChild(optionBtn); 61 | } 62 | } 63 | 64 | nextBtn.addEventListener("click", () => { 65 | if (nextBtn.innerText === "Next") { 66 | currentQuestion++; 67 | console.log({ 68 | currentQuestion, 69 | }); 70 | questionParent.innerText = ""; 71 | optionsParent.innerText = ""; 72 | qnsCount.innerText = `Q${currentQuestion + 1}/${quizzes.length}`; 73 | createQuestionAndOptions(quizzes, currentQuestion); 74 | if (currentQuestion === 4) { 75 | nextBtn.innerText = "Submit"; 76 | return; 77 | } 78 | } 79 | if (nextBtn.innerText === "Submit") { 80 | console.log("here"); 81 | quizBook.classList.add("hide"); 82 | result.classList.remove("hide"); 83 | } 84 | }); 85 | 86 | quitBtn.addEventListener("click", () => { 87 | currentQuestion = 0; 88 | questionParent.innerText = ""; 89 | optionsParent.innerText = ""; 90 | score = 0; 91 | createQuestionAndOptions(quizzes, currentQuestion); 92 | rules.classList.remove("hide"); 93 | quizBook.classList.add("hide"); 94 | }); 95 | 96 | function disableOptions() { 97 | document 98 | .querySelectorAll(".button") 99 | .forEach((button) => button.setAttribute("disabled", true)); 100 | } 101 | 102 | optionsParent.addEventListener("click", (e) => { 103 | if (e.target.name === quizzes[currentQuestion].correct_answer) { 104 | e.target.classList.add("success"); 105 | disableOptions(); 106 | score++; 107 | scoreContiner.innerText = `Score: ${score}`; 108 | console.log(score); 109 | } else if (e.target.name !== quizzes[currentQuestion].correct_answer) { 110 | e.target.classList.add("error"); 111 | disableOptions(); 112 | } 113 | }); 114 | 115 | setTimeout(() => createQuestionAndOptions(quizzes, currentQuestion), 2000); 116 | -------------------------------------------------------------------------------- /Module. 15b - Project recipe-app/utility.css: -------------------------------------------------------------------------------- 1 | /** DISPLAY */ 2 | 3 | .d-block { 4 | display: block; 5 | } 6 | 7 | .d-inline { 8 | display: inline; 9 | } 10 | 11 | .d-inline-block { 12 | display: inline-block; 13 | } 14 | 15 | /** DISPLAY FLEX */ 16 | 17 | .d-flex { 18 | display: flex; 19 | } 20 | 21 | .d-flex-direction-column { 22 | flex-direction: column; 23 | } 24 | 25 | .place-items-center { 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | 30 | .align-items-center { 31 | align-items: center; 32 | } 33 | 34 | .align-items-start { 35 | align-items: flex-start; 36 | } 37 | 38 | .align-items-end { 39 | align-items: flex-end; 40 | } 41 | 42 | .align-self-center { 43 | align-self: center; 44 | } 45 | 46 | .align-self-start { 47 | align-self: flex-start; 48 | } 49 | 50 | .align-self-end { 51 | align-self: flex-end; 52 | } 53 | 54 | .justify-content-center { 55 | justify-content: center; 56 | } 57 | 58 | .justify-content-space-between { 59 | justify-content: space-between; 60 | } 61 | 62 | .justify-content-space-around { 63 | justify-content: space-around; 64 | } 65 | 66 | .justify-content-space-evenly { 67 | justify-content: space-evenly; 68 | } 69 | 70 | .justify-self-center { 71 | justify-self: center; 72 | } 73 | 74 | .justify-self-space-between { 75 | justify-self: space-between; 76 | } 77 | 78 | .justify-self-space-around { 79 | justify-self: space-around; 80 | } 81 | 82 | .justify-self-space-evenly { 83 | justify-self: space-evenly; 84 | } 85 | 86 | .wrap-items { 87 | flex-wrap: wrap; 88 | } 89 | 90 | .gap-ex-sm { 91 | gap: 4px; 92 | } 93 | 94 | .gap-sm { 95 | gap: 8px; 96 | } 97 | 98 | .gap-md { 99 | gap: 1rem; 100 | } 101 | 102 | .gap-lg { 103 | gap: 1.5rem; 104 | } 105 | 106 | /** DISPLAY GRID */ 107 | 108 | .d-grid { 109 | display: grid; 110 | } 111 | 112 | /** POSITION */ 113 | 114 | .relative { 115 | position: relative; 116 | } 117 | 118 | .absolute { 119 | position: absolute; 120 | } 121 | 122 | .fixed { 123 | position: fixed; 124 | } 125 | 126 | .top-0 { 127 | top: 0; 128 | } 129 | 130 | .left-0 { 131 | left: 0; 132 | } 133 | 134 | .right-0 { 135 | right: 0; 136 | } 137 | 138 | /** BORDER RADIUS */ 139 | 140 | .br-radius-4px-sm { 141 | border-radius: 4px; 142 | } 143 | 144 | .br-radius-8px-md { 145 | border-radius: 8px; 146 | } 147 | 148 | .br-radius-16px-lg { 149 | border-radius: 1rem; 150 | } 151 | 152 | .br-radius-32px-ex-lg { 153 | border-radius: 2rem; 154 | } 155 | 156 | .border-rounded { 157 | border-radius: 50%; 158 | } 159 | 160 | /** BUTTON */ 161 | 162 | .button { 163 | border: none; 164 | background-color: transparent; 165 | } 166 | 167 | /** HEADINGS FONT */ 168 | 169 | .heading-1 { 170 | font-size: 3rem; 171 | line-height: 4rem; 172 | } 173 | 174 | .heading-2 { 175 | font-size: 2rem; 176 | line-height: 2.5rem; 177 | } 178 | 179 | .heading-3 { 180 | font-size: 1.5rem; 181 | line-height: 2rem; 182 | } 183 | 184 | .heading-4 { 185 | font-size: 1rem; 186 | line-height: 1.5rem; 187 | } 188 | 189 | .heading-5 { 190 | font-size: 8px; 191 | line-height: 1rem; 192 | } 193 | 194 | /** TEXT FONTS SIZE */ 195 | 196 | .fs-sm { 197 | font-size: 10px; 198 | } 199 | 200 | .fs-md { 201 | font-size: 1.25rem; 202 | } 203 | 204 | .fs-lg { 205 | font-size: 1.5rem; 206 | } 207 | 208 | .fs-ex-lg { 209 | font-size: 2rem; 210 | } 211 | 212 | /** IMAGES */ 213 | 214 | .image-fit-contain { 215 | width: 100%; 216 | height: 100%; 217 | object-fit: contain; 218 | } 219 | 220 | .image-fit-cover { 221 | width: 100%; 222 | height: 100%; 223 | object-fit: cover; 224 | } 225 | 226 | .img-pos-center { 227 | object-position: center center; 228 | } 229 | 230 | .img-pos-lf-tp { 231 | object-position: left top; 232 | } 233 | 234 | .img-pos-rg-tp { 235 | object-position: right top; 236 | } 237 | 238 | .img-pos-lf-bm { 239 | object-position: left bottom; 240 | } 241 | 242 | .img-pos-rg-bm { 243 | object-position: right bottom; 244 | } 245 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 3 - Form Validation/index.js: -------------------------------------------------------------------------------- 1 | 2 | let formData = document.querySelector(".form"); 3 | let submitButton = document.querySelector(".button"); 4 | let errorMessages = document.querySelectorAll(".error-message"); 5 | let emptyfieldMessages = document.querySelectorAll(".empty-field"); 6 | let showPasswordBtn = document.querySelector(".btn"); 7 | 8 | let firstName, lastName, email, password; 9 | let fnTarget, lnTarget, emailTarget, pwdTarget; 10 | let field; 11 | let fnFlag, lnFlag, eFlag, pwdFlag; 12 | 13 | let nameRegex = /^[a-z]+$/i; 14 | let emailRegex = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/; 15 | let passwordRegex = /^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/; 16 | 17 | for (let errorMessage of errorMessages){ 18 | errorMessage.classList.add("d-none"); 19 | } 20 | 21 | for (let emptyfieldMessage of emptyfieldMessages){ 22 | emptyfieldMessage.classList.add("d-none"); 23 | } 24 | 25 | formData.addEventListener("keyup", (event) => { 26 | event.preventDefault(); 27 | field = event.target.dataset.key; 28 | switch (field){ 29 | case "firstName": 30 | firstName = event.target.value; 31 | fnTarget = event.target; 32 | break; 33 | case "lastName": 34 | lastName = event.target.value; 35 | lnTarget = event.target 36 | break; 37 | case "email": 38 | email = event.target.value; 39 | emailTarget = event.target; 40 | break; 41 | case "password": 42 | password = event.target.value; 43 | pwdTarget = event.target; 44 | break; 45 | default: 46 | firstName = lastName = email = password = ""; 47 | break; 48 | } 49 | }) 50 | 51 | submitButton.addEventListener("click", (event) => { 52 | event.preventDefault(); 53 | console.log(firstName, lastName, email, password) 54 | if (firstName){ 55 | emptyfieldMessages[0].classList.add("d-none"); 56 | if (!nameRegex.test(firstName)){ 57 | fnTarget.classList.add("error"); 58 | errorMessages[0].classList.remove("d-none") 59 | fnFlag = false; 60 | }else{ 61 | fnTarget.classList.remove("error"); 62 | errorMessages[0].classList.add("d-none"); 63 | fnFlag = true; 64 | } 65 | }else{ 66 | emptyfieldMessages[0].classList.remove("d-none"); 67 | } 68 | if (lastName){ 69 | emptyfieldMessages[1].classList.add("d-none"); 70 | if (!nameRegex.test(lastName)){ 71 | lnTarget.classList.add("error") 72 | errorMessages[1].classList.remove("d-none"); 73 | lnFlag = false; 74 | }else{ 75 | lnTarget.classList.remove("error") 76 | errorMessages[1].classList.add("d-none"); 77 | lnFlag = true; 78 | } 79 | }else{ 80 | emptyfieldMessages[1].classList.remove("d-none"); 81 | } 82 | if (email){ 83 | emptyfieldMessages[2].classList.add("d-none"); 84 | if (!emailRegex.test(email)){ 85 | emailTarget.classList.add("error") 86 | errorMessages[2].classList.remove("d-none"); 87 | eFlag = flase; 88 | }else{ 89 | emailTarget.classList.remove("error") 90 | errorMessages[2].classList.add("d-none"); 91 | eFlag = true; 92 | } 93 | }else{ 94 | emptyfieldMessages[2].classList.remove("d-none"); 95 | } 96 | if (password){ 97 | emptyfieldMessages[3].classList.add("d-none"); 98 | if (!passwordRegex.test(password)){ 99 | pwdTarget.classList.add("error") 100 | errorMessages[3].classList.remove("d-none"); 101 | pwdFlag = false 102 | }else{ 103 | pwdTarget.classList.remove("error") 104 | errorMessages[3].classList.add("d-none"); 105 | pwdFlag = true; 106 | } 107 | }else{ 108 | emptyfieldMessages[3].classList.remove("d-none"); 109 | } 110 | 111 | if (fnFlag && lnFlag && eFlag && pwdFlag){ 112 | fnTarget.value = lnTarget.value = emailTarget.value = pwdTarget.value = ""; 113 | window.location.href = "/success.html" 114 | } 115 | 116 | }); 117 | 118 | showPasswordBtn.addEventListener("click", (event) => { 119 | event.preventDefault(); 120 | if (pwdTarget.getAttribute("type") === "text"){ 121 | pwdTarget.setAttribute("type", "password") 122 | }else{ 123 | pwdTarget.setAttribute("type", "text") 124 | } 125 | }) -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 5 - E-com Javacript/createProductCard.js: -------------------------------------------------------------------------------- 1 | export const createProductCard = ( 2 | products, 3 | parentElement, 4 | findProductInCart, 5 | pageType 6 | ) => { 7 | for (let product of products) { 8 | const cardContainer = document.createElement("div"); 9 | cardContainer.classList.add( 10 | "card", 11 | "card-vertical", 12 | "d-flex", 13 | "direction-column", 14 | "relative", 15 | "shadow" 16 | ); 17 | 18 | /** Image Container */ 19 | const imageContainer = document.createElement("div"); 20 | imageContainer.classList.add("card-image-container"); 21 | 22 | const image = document.createElement("img"); 23 | image.classList.add("card-image"); 24 | image.setAttribute("src", product.img); 25 | image.setAttribute("alt", product.name); 26 | 27 | imageContainer.appendChild(image); 28 | 29 | /** Card Details Container */ 30 | const cardDetailsContainer = document.createElement("div"); 31 | cardDetailsContainer.classList.add("card-details"); 32 | 33 | const brandContainer = document.createElement("div"); 34 | brandContainer.classList.add("card-title"); 35 | brandContainer.innerText = product.brand; 36 | cardDetailsContainer.appendChild(brandContainer); 37 | 38 | /** Card Description Container */ 39 | const descriptionContainer = document.createElement("div"); 40 | descriptionContainer.classList.add("card-description"); 41 | 42 | /** Product Name */ 43 | const name = document.createElement("p"); 44 | name.classList.add("card-des"); 45 | name.innerText = product.name; 46 | descriptionContainer.appendChild(name); 47 | 48 | /** Product Price */ 49 | const price = document.createElement("p"); 50 | price.classList.add("card-price", "d-flex", "align-end", "gap-sm"); 51 | price.innerText = `Rs. ${product.newPrice}`; 52 | 53 | const oldPrice = document.createElement("span"); 54 | oldPrice.classList.add("price-strike-through"); 55 | oldPrice.innerText = `Rs. ${product.oldPrice}`; 56 | price.appendChild(oldPrice); 57 | 58 | const discount = document.createElement("span"); 59 | discount.classList.add("discount"); 60 | discount.innerText = `(${product.discount}% OFF)`; 61 | price.appendChild(discount); 62 | descriptionContainer.appendChild(price); 63 | 64 | /** Rating Container */ 65 | const ratings = document.createElement("p"); 66 | ratings.classList.add("d-flex", "align-center"); 67 | 68 | const rating = document.createElement("span"); 69 | rating.innerText = product.rating; 70 | ratings.appendChild(rating); 71 | 72 | const star = document.createElement("span"); 73 | star.classList.add("material-icons-outlined", "star"); 74 | star.innerText = "star"; 75 | ratings.appendChild(star); 76 | descriptionContainer.appendChild(ratings); 77 | cardDetailsContainer.appendChild(descriptionContainer); 78 | 79 | /** CTA Button Container */ 80 | const ctaButton = document.createElement("div"); 81 | const cartButton = document.createElement("button"); 82 | cartButton.classList.add( 83 | "button", 84 | "btn-primary", 85 | "btn-icon", 86 | "cart-btn", 87 | "d-flex", 88 | "align-center", 89 | "justify-center", 90 | "gap", 91 | "cursor", 92 | "btn-margin" 93 | ); 94 | cartButton.setAttribute("data-id", product._id); 95 | const cart = document.createElement("span"); 96 | cart.classList.add("material-icons-outlined"); 97 | cart.innerText = "shopping_cart"; 98 | cartButton.appendChild(cart); 99 | 100 | const buttonText = document.createElement("span"); 101 | const isProductInCart = findProductInCart( 102 | JSON.parse(localStorage.getItem("cart")), 103 | product._id 104 | ); 105 | buttonText.innerText = 106 | pageType === "cart" 107 | ? "Remove" 108 | : pageType === "products" && isProductInCart 109 | ? "Go To Cart" 110 | : "Add To Cart"; 111 | cartButton.appendChild(buttonText); 112 | 113 | ctaButton.appendChild(cartButton); 114 | cardDetailsContainer.appendChild(ctaButton); 115 | 116 | cardContainer.appendChild(imageContainer); 117 | cardContainer.appendChild(cardDetailsContainer); 118 | 119 | parentElement.appendChild(cardContainer); 120 | } 121 | }; 122 | -------------------------------------------------------------------------------- /Module. 10-1 - Projects/Project 5 - E-com Javacript/createHorizontalProductCard.js: -------------------------------------------------------------------------------- 1 | export const createHorizontalProductCard = (products, parentElement) => { 2 | for (let product of products) { 3 | const cardContainer = document.createElement("div"); 4 | cardContainer.classList.add("card-horizontal", "d-flex", "shadow"); 5 | 6 | /** Image Container */ 7 | const imageContainer = document.createElement("div"); 8 | imageContainer.classList.add("card-hori-image-container", "relative"); 9 | 10 | const image = document.createElement("img"); 11 | image.classList.add("card-image"); 12 | image.setAttribute("src", product.img); 13 | image.setAttribute("alt", product.name); 14 | 15 | imageContainer.appendChild(image); 16 | cardContainer.appendChild(imageContainer); 17 | 18 | /** Card Details Container */ 19 | const cardDetailsContainer = document.createElement("div"); 20 | cardDetailsContainer.classList.add( 21 | "card-details", 22 | "d-flex", 23 | "direction-column" 24 | ); 25 | 26 | const brandContainer = document.createElement("div"); 27 | brandContainer.classList.add("card-title"); 28 | brandContainer.innerText = product.brand; 29 | cardDetailsContainer.appendChild(brandContainer); 30 | 31 | /** Card Description Container */ 32 | const descriptionContainer = document.createElement("div"); 33 | descriptionContainer.classList.add("card-description"); 34 | 35 | /** Product Name */ 36 | const name = document.createElement("p"); 37 | name.classList.add("card-des"); 38 | name.innerText = product.name; 39 | descriptionContainer.appendChild(name); 40 | 41 | /** Product Price */ 42 | const price = document.createElement("p"); 43 | price.classList.add("card-price"); 44 | price.innerText = `Rs. ${product.newPrice}`; 45 | 46 | const oldPrice = document.createElement("span"); 47 | oldPrice.classList.add("price-strike-through"); 48 | oldPrice.innerText = `Rs. ${product.oldPrice}`; 49 | price.appendChild(oldPrice); 50 | 51 | const discount = document.createElement("span"); 52 | discount.classList.add("discount", "padding-all-8"); 53 | discount.innerText = `(${product.discount}% OFF)`; 54 | price.appendChild(discount); 55 | descriptionContainer.appendChild(price); 56 | cardDetailsContainer.appendChild(descriptionContainer); 57 | 58 | /** Quantity Container */ 59 | const quantityContainer = document.createElement("div"); 60 | quantityContainer.classList.add("quantity-container", "d-flex", "gap"); 61 | 62 | const quantityContainerTitle = document.createElement("p"); 63 | quantityContainerTitle.classList.add("q-title"); 64 | quantityContainerTitle.innerText = "Quantity"; 65 | quantityContainer.appendChild(quantityContainerTitle); 66 | 67 | const quantity = document.createElement("div"); 68 | quantity.classList.add("count-container", "d-flex", "align-center", "gap"); 69 | const incBtn = document.createElement("button"); 70 | incBtn.classList.add("count"); 71 | incBtn.innerText = "+"; 72 | const value = document.createElement("span"); 73 | value.classList.add("count-value"); 74 | value.innerText = "1"; 75 | const decBtn = document.createElement("button"); 76 | decBtn.classList.add("count"); 77 | decBtn.innerText = "-"; 78 | 79 | quantity.appendChild(incBtn); 80 | quantity.appendChild(value); 81 | quantity.appendChild(decBtn); 82 | 83 | quantityContainer.appendChild(quantity); 84 | cardDetailsContainer.appendChild(quantityContainer); 85 | 86 | /** CTA Button */ 87 | const ctaButton = document.createElement("div"); 88 | ctaButton.classList.add("cta-btn", "d-flex", "gap"); 89 | const removeBtn = document.createElement("button"); 90 | removeBtn.classList.add( 91 | "button", 92 | "hori-btn", 93 | "btn-primary", 94 | "btn-icon", 95 | "d-flex", 96 | "align-center", 97 | "justify-center", 98 | "gap", 99 | "cursor", 100 | "btn-margin" 101 | ); 102 | removeBtn.setAttribute("data-id", product._id); 103 | removeBtn.innerText = "Remove"; 104 | 105 | const saveBtn = document.createElement("button"); 106 | saveBtn.classList.add( 107 | "button", 108 | "hori-btn", 109 | "btn-primary", 110 | "btn-icon", 111 | "d-flex", 112 | "align-center", 113 | "justify-center", 114 | "gap", 115 | "cursor", 116 | "btn-margin" 117 | ); 118 | saveBtn.innerText = "Save To Wishlist"; 119 | ctaButton.appendChild(removeBtn); 120 | ctaButton.appendChild(saveBtn); 121 | cardDetailsContainer.appendChild(ctaButton); 122 | 123 | cardContainer.appendChild(cardDetailsContainer); 124 | 125 | parentElement.appendChild(cardContainer); 126 | } 127 | }; 128 | -------------------------------------------------------------------------------- /Module. 15a - Project - Movie App/index.js: -------------------------------------------------------------------------------- 1 | const parentElement = document.querySelector(".main"); 2 | const seachInput = document.querySelector(".input"); 3 | const movieRatings = document.querySelector("#rating-select"); 4 | const movieGenres = document.querySelector("#genre-select"); 5 | 6 | let searchValue = ""; 7 | let ratings = 0; 8 | let genre = ""; 9 | let filteredArrOfMovies = []; 10 | 11 | const URL = "https://movies-app.prakashsakari.repl.co/api/movies"; 12 | 13 | const getMovies = async (url) => { 14 | try { 15 | const { data } = await axios.get(url); 16 | return data; 17 | } catch (err) {} 18 | }; 19 | 20 | let movies = await getMovies(URL); 21 | console.log(movies); 22 | 23 | const createElement = (element) => document.createElement(element); 24 | 25 | // function to create movie cards 26 | 27 | const createMovieCard = (movies) => { 28 | for (let movie of movies) { 29 | // creating parent container 30 | const cardContainer = createElement("div"); 31 | cardContainer.classList.add("card", "shadow"); 32 | 33 | // creating image container 34 | const imageContainer = createElement("div"); 35 | imageContainer.classList.add("card-image-container"); 36 | 37 | // creating card image 38 | const imageEle = createElement("img"); 39 | imageEle.classList.add("card-image"); 40 | imageEle.setAttribute("src", movie.img_link); 41 | imageEle.setAttribute("alt", movie.name); 42 | imageContainer.appendChild(imageEle); 43 | 44 | cardContainer.appendChild(imageContainer); 45 | 46 | // creating card details container 47 | 48 | const cardDetails = createElement("div"); 49 | cardDetails.classList.add("movie-details"); 50 | 51 | // card title 52 | 53 | const titleEle = createElement("p"); 54 | titleEle.classList.add("title"); 55 | titleEle.innerText = movie.name; 56 | cardDetails.appendChild(titleEle); 57 | 58 | // card genre 59 | 60 | const genreEle = createElement("p"); 61 | genreEle.classList.add("genre"); 62 | genreEle.innerText = `Genre: ${movie.genre}`; 63 | cardDetails.appendChild(genreEle); 64 | 65 | // ratings and length container 66 | const movieRating = createElement("div"); 67 | movieRating.classList.add("ratings"); 68 | 69 | // star/rating component 70 | 71 | const ratings = createElement("div"); 72 | ratings.classList.add("star-rating"); 73 | 74 | // star icon 75 | const starIcon = createElement("span"); 76 | starIcon.classList.add("material-icons-outlined"); 77 | starIcon.innerText = "star"; 78 | ratings.appendChild(starIcon); 79 | 80 | // ratings 81 | const ratingValue = createElement("span"); 82 | ratingValue.innerText = movie.imdb_rating; 83 | ratings.appendChild(ratingValue); 84 | 85 | movieRating.appendChild(ratings); 86 | 87 | // length 88 | const length = createElement("p"); 89 | length.innerText = `${movie.duration} mins`; 90 | 91 | movieRating.appendChild(length); 92 | cardDetails.appendChild(movieRating); 93 | cardContainer.appendChild(cardDetails); 94 | 95 | parentElement.appendChild(cardContainer); 96 | } 97 | }; 98 | 99 | function getFilteredData() { 100 | filteredArrOfMovies = 101 | searchValue?.length > 0 102 | ? movies.filter( 103 | (movie) => 104 | searchValue === movie.name.toLowerCase() || 105 | searchValue === movie.director_name.toLowerCase() || 106 | movie.writter_name.toLowerCase().split(",").includes(searchValue) || 107 | movie.cast_name.toLowerCase().split(",").includes(searchValue) 108 | ) 109 | : movies; 110 | if (ratings > 0) { 111 | filteredArrOfMovies = 112 | searchValue?.length > 0 ? filteredArrOfMovies : movies; 113 | filteredArrOfMovies = filteredArrOfMovies.filter( 114 | (movie) => movie.imdb_rating >= ratings 115 | ); 116 | } 117 | 118 | if (genre?.length > 0) { 119 | filteredArrOfMovies = 120 | searchValue?.length > 0 || ratings > 7 ? filteredArrOfMovies : movies; 121 | filteredArrOfMovies = filteredArrOfMovies.filter((movie) => 122 | movie.genre.includes(genre) 123 | ); 124 | } 125 | return filteredArrOfMovies; 126 | } 127 | 128 | function handleSearch(event) { 129 | searchValue = event.target.value.toLowerCase(); 130 | console.log(searchValue); 131 | let filterBySearch = getFilteredData(); 132 | parentElement.innerHTML = ""; 133 | createMovieCard(filterBySearch); 134 | } 135 | 136 | function debounce(callback, delay) { 137 | let timerId; 138 | 139 | return (...args) => { 140 | clearTimeout(timerId); 141 | timerId = setTimeout(() => { 142 | callback(...args); 143 | }, delay); 144 | }; 145 | } 146 | 147 | function handleRatingSelector(event) { 148 | ratings = event.target.value; 149 | let filterByRating = getFilteredData(); 150 | parentElement.innerHTML = ""; 151 | createMovieCard(ratings ? filterByRating : movies); 152 | } 153 | 154 | const debounceInput = debounce(handleSearch, 500); 155 | 156 | seachInput.addEventListener("keyup", debounceInput); 157 | 158 | movieRatings.addEventListener("change", handleRatingSelector); 159 | 160 | // Filter By Genre; 161 | 162 | const genres = movies.reduce((acc, cur) => { 163 | let genresArr = []; 164 | let tempGenresArr = cur.genre.split(","); 165 | acc = [...acc, ...tempGenresArr]; 166 | for (let genre of acc) { 167 | if (!genresArr.includes(genre)) { 168 | genresArr = [...genresArr, genre]; 169 | } 170 | } 171 | return genresArr; 172 | }, []); 173 | 174 | for (let genre of genres) { 175 | const option = createElement("option"); 176 | option.classList.add("option"); 177 | option.setAttribute("value", genre); 178 | option.innerText = genre; 179 | movieGenres.appendChild(option); 180 | } 181 | 182 | function handleGenreSelect(event) { 183 | genre = event.target.value; 184 | const filteredMoviesByGenre = getFilteredData(); 185 | parentElement.innerHTML = ""; 186 | createMovieCard(genre ? filteredMoviesByGenre : movies); 187 | } 188 | 189 | movieGenres.addEventListener("change", handleGenreSelect); 190 | 191 | createMovieCard(movies); 192 | -------------------------------------------------------------------------------- /Module. 15a - Project - Movie App/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gfg_movie_app-student-version", 3 | "version": "1.0.0", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "gfg_movie_app-student-version", 9 | "version": "1.0.0", 10 | "license": "ISC", 11 | "dependencies": { 12 | "axios": "^1.3.4" 13 | } 14 | }, 15 | "node_modules/asynckit": { 16 | "version": "0.4.0", 17 | "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", 18 | "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" 19 | }, 20 | "node_modules/axios": { 21 | "version": "1.3.4", 22 | "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz", 23 | "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==", 24 | "dependencies": { 25 | "follow-redirects": "^1.15.0", 26 | "form-data": "^4.0.0", 27 | "proxy-from-env": "^1.1.0" 28 | } 29 | }, 30 | "node_modules/combined-stream": { 31 | "version": "1.0.8", 32 | "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", 33 | "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", 34 | "dependencies": { 35 | "delayed-stream": "~1.0.0" 36 | }, 37 | "engines": { 38 | "node": ">= 0.8" 39 | } 40 | }, 41 | "node_modules/delayed-stream": { 42 | "version": "1.0.0", 43 | "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", 44 | "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", 45 | "engines": { 46 | "node": ">=0.4.0" 47 | } 48 | }, 49 | "node_modules/follow-redirects": { 50 | "version": "1.15.2", 51 | "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", 52 | "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", 53 | "funding": [ 54 | { 55 | "type": "individual", 56 | "url": "https://github.com/sponsors/RubenVerborgh" 57 | } 58 | ], 59 | "engines": { 60 | "node": ">=4.0" 61 | }, 62 | "peerDependenciesMeta": { 63 | "debug": { 64 | "optional": true 65 | } 66 | } 67 | }, 68 | "node_modules/form-data": { 69 | "version": "4.0.0", 70 | "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", 71 | "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", 72 | "dependencies": { 73 | "asynckit": "^0.4.0", 74 | "combined-stream": "^1.0.8", 75 | "mime-types": "^2.1.12" 76 | }, 77 | "engines": { 78 | "node": ">= 6" 79 | } 80 | }, 81 | "node_modules/mime-db": { 82 | "version": "1.52.0", 83 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", 84 | "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", 85 | "engines": { 86 | "node": ">= 0.6" 87 | } 88 | }, 89 | "node_modules/mime-types": { 90 | "version": "2.1.35", 91 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", 92 | "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", 93 | "dependencies": { 94 | "mime-db": "1.52.0" 95 | }, 96 | "engines": { 97 | "node": ">= 0.6" 98 | } 99 | }, 100 | "node_modules/proxy-from-env": { 101 | "version": "1.1.0", 102 | "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", 103 | "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" 104 | } 105 | }, 106 | "dependencies": { 107 | "asynckit": { 108 | "version": "0.4.0", 109 | "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", 110 | "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" 111 | }, 112 | "axios": { 113 | "version": "1.3.4", 114 | "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz", 115 | "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==", 116 | "requires": { 117 | "follow-redirects": "^1.15.0", 118 | "form-data": "^4.0.0", 119 | "proxy-from-env": "^1.1.0" 120 | } 121 | }, 122 | "combined-stream": { 123 | "version": "1.0.8", 124 | "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", 125 | "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", 126 | "requires": { 127 | "delayed-stream": "~1.0.0" 128 | } 129 | }, 130 | "delayed-stream": { 131 | "version": "1.0.0", 132 | "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", 133 | "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" 134 | }, 135 | "follow-redirects": { 136 | "version": "1.15.2", 137 | "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", 138 | "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==" 139 | }, 140 | "form-data": { 141 | "version": "4.0.0", 142 | "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", 143 | "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", 144 | "requires": { 145 | "asynckit": "^0.4.0", 146 | "combined-stream": "^1.0.8", 147 | "mime-types": "^2.1.12" 148 | } 149 | }, 150 | "mime-db": { 151 | "version": "1.52.0", 152 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", 153 | "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" 154 | }, 155 | "mime-types": { 156 | "version": "2.1.35", 157 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", 158 | "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", 159 | "requires": { 160 | "mime-db": "1.52.0" 161 | } 162 | }, 163 | "proxy-from-env": { 164 | "version": "1.1.0", 165 | "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", 166 | "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" 167 | } 168 | } 169 | } 170 | --------------------------------------------------------------------------------