├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Cheatsheets ├── API Cheatsheet.pdf ├── CSS Cheatsheet.pdf ├── Chrome Extensions.pdf ├── Git Cheatsheet.pdf ├── HTML Cheatsheet.pdf ├── JavaScript Cheatsheet.pdf └── VS Code Cheatsheet.pdf ├── JS_Mini_Projects ├── Password_Generator │ ├── README.md │ ├── assets │ │ ├── copy.svg │ │ └── favicon.ico │ ├── index.html │ ├── script.js │ └── style.css └── README.md ├── JavaScript ├── Counter_App │ ├── README.md │ ├── index.html │ └── script.js ├── DOM │ ├── JS_DOM1 │ │ ├── index.html │ │ └── index.js │ ├── JS_DOM2 │ │ ├── index.html │ │ └── index.js │ └── JS_DOM3 │ │ ├── index.html │ │ └── index.js ├── JS_Exercises │ ├── JS_Exercise-1 │ │ ├── 01.js │ │ ├── 02.js │ │ ├── 03.js │ │ ├── 04.js │ │ ├── 05.js │ │ ├── 06.js │ │ ├── 07.js │ │ ├── 08.js │ │ ├── 09.js │ │ ├── 10.js │ │ └── README.md │ └── JS_Exercise-2 │ │ ├── 01.js │ │ ├── 02.js │ │ ├── 03.js │ │ ├── 04.js │ │ ├── 05.js │ │ ├── 06.js │ │ ├── 07.js │ │ ├── 08.js │ │ ├── 09.js │ │ ├── 10.js │ │ └── README.md ├── ModalPrac │ ├── README.md │ ├── assets │ │ ├── favicon.ico │ │ └── profile-image.webp │ ├── index.html │ ├── script.js │ └── style.css ├── adding_element.js ├── anonymous_function_assignment.js ├── argument_function.js ├── combining_element.js ├── constructor_function.js ├── date.js ├── do_while_loop.js ├── emptying_an_array.js ├── factory_function.js ├── filter_and_map.js ├── for_each_loop.js ├── for_in_loop.js ├── for_of_loop.js ├── function_declaration.js ├── function_with_default_parameters.js ├── getter_setter.js ├── if_condition.js ├── named_function_assignment.js ├── object_cloning.js ├── objects.js ├── reducing_array.js ├── removing_element.js ├── rest_operator.js ├── scope.js ├── searching.js ├── slicing_elements.js ├── sort_and_reverse.js ├── sorting.js ├── string.js ├── switch_case.js ├── ternary_operator.js ├── try_catch.js ├── types_in_js.js └── while_loop.js ├── LICENSE ├── Lectures ├── Lecture_01 │ ├── Lecture_01.pdf │ └── README.md ├── Lecture_02 │ ├── Lecture_02.pdf │ └── README.md ├── Lecture_03 │ ├── Lecture_03.pdf │ └── README.md ├── Lecture_04 │ ├── Lecture_04.pdf │ ├── README.md │ └── index.html ├── Lecture_05 │ ├── Lecture_05.pdf │ ├── README.md │ ├── bookmark.html │ └── index.html ├── Lecture_06 │ ├── Lecture_06.pdf │ ├── README.md │ └── index.html ├── Lecture_07 │ ├── Lecture_07.pdf │ ├── README.md │ ├── extra.html │ ├── homework.html │ ├── table1.html │ ├── table2.html │ ├── table3.html │ └── table4.html ├── Lecture_08 │ ├── Lecture_08.pdf │ ├── README.md │ ├── form1.html │ └── form2.html ├── Lecture_09 │ ├── README.md │ ├── project1.html │ ├── project2.html │ └── project3.html ├── Lecture_10 │ ├── README.md │ ├── faq.html │ ├── homework.html │ ├── img.jpeg │ ├── jeans.jpeg │ ├── lamp.jpeg │ ├── laptop.jpeg │ ├── pillow.jpeg │ ├── resume.html │ ├── smartphone.jpeg │ └── tshirt.jpeg ├── Lecture_11 │ ├── Lecture_11.pdf │ ├── README.md │ ├── audio.mp3 │ ├── index.html │ ├── logo.jpeg │ ├── media.html │ └── video.mp4 ├── Lecture_12 │ ├── Lecture_12.pdf │ ├── README.md │ ├── index.html │ ├── logo.jpeg │ ├── script.js │ └── style.css ├── Lecture_13 │ ├── Lecture_13.pdf │ ├── README.md │ ├── index.html │ └── style.css ├── Lecture_14 │ ├── Lecture_14.pdf │ ├── README.md │ └── index.html ├── Lecture_15 │ ├── Lecture_15.pdf │ ├── README.md │ └── index.html ├── Lecture_16 │ ├── Lecture_16.pdf │ ├── README.md │ └── index.html ├── Lecture_17 │ ├── Lecture_17.pdf │ ├── README.md │ ├── image1.jpeg │ ├── image2.webp │ ├── image3.webp │ ├── image4.jpeg │ └── index.html ├── Lecture_18 │ ├── Lecture_18.pdf │ ├── README.md │ └── index.html ├── Lecture_19 │ ├── Lecture_19.pdf │ ├── README.md │ ├── collapse.html │ ├── image1.avif │ ├── image2.png │ ├── image3.jpeg │ └── index.html ├── Lecture_20 │ ├── Lecture_20.pdf │ ├── README.md │ └── index.html ├── Lecture_21 │ ├── Lecture_21.pdf │ ├── README.md │ ├── flex.html │ ├── image1.jpeg │ ├── index.html │ └── practice.html ├── Lecture_22 │ ├── Lecture_22.pdf │ ├── README.md │ └── index.html ├── Lecture_23 │ ├── Lecture_23.pdf │ ├── README.md │ └── index.html ├── Lecture_24 │ ├── Lecture_24.pdf │ ├── README.md │ └── index.html ├── Lecture_25 │ ├── Lecture_25.pdf │ ├── README.md │ ├── index.html │ └── style.css ├── Lecture_26 │ ├── README.md │ ├── gujiya.avif │ ├── gulab_jamun.jpeg │ ├── index.html │ ├── kaju_katli.avif │ ├── rasmalai.avif │ └── style.css ├── Lectute_27 │ ├── Card1 │ │ ├── index.html │ │ ├── qrcode.png │ │ └── style.css │ ├── Card2 │ │ ├── icon.jpg │ │ ├── index.html │ │ ├── music.png │ │ └── style.css │ ├── Card3 │ │ ├── icon.jpg │ │ ├── index.html │ │ └── style.css │ └── README.md └── README.md ├── README.md └── SECURITY.md /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | kishan.rai99693@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing Guidelines 2 | 3 | Thank you for considering Contributing to this project. 4 | 5 | This document specifies the guidelines that you should follow when contributing to this project. 6 | 7 | Please adhere to the guidelines for your PR's to get approved. 8 | 9 | ### General Rules : 10 | These are general rules that you should follow when contributing to an Open Source project : 11 | 12 | - Be Nice, Be Respectful (BNBR) 13 | - Check if the issue you opened exists or not. If it exists do not reopen it. 14 | - While opening a new issue, make sure you describe the issue clearly. 15 | - Write proper commit messages and document your PR well. 16 | - Always add comments in your code and explain it at points, if possible add Doctest. 17 | - Always create a Pull Request from a new branch such as the **feature**; do not create a PR from **main**. 18 | - Write clean code and follow proper coding conventions. 19 | 20 | 21 | -###Before submitting your pull request, please check off as many of the items below as you can: 22 | - I have read the Contributing.md file and formatted this PR correctly 23 | I'm not adding a company from the blocklist 24 | I make sure to fix things promptly if an error or suggestion comes up 25 | 26 | Thanks and Happy Hacktoberfest! 🎉 Tagging @kishanrajput23 27 | to take a look. 👀 28 | 29 | 30 | Thank you ❤ 31 | -------------------------------------------------------------------------------- /Cheatsheets/API Cheatsheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Cheatsheets/API Cheatsheet.pdf -------------------------------------------------------------------------------- /Cheatsheets/CSS Cheatsheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Cheatsheets/CSS Cheatsheet.pdf -------------------------------------------------------------------------------- /Cheatsheets/Chrome Extensions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Cheatsheets/Chrome Extensions.pdf -------------------------------------------------------------------------------- /Cheatsheets/Git Cheatsheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Cheatsheets/Git Cheatsheet.pdf -------------------------------------------------------------------------------- /Cheatsheets/HTML Cheatsheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Cheatsheets/HTML Cheatsheet.pdf -------------------------------------------------------------------------------- /Cheatsheets/JavaScript Cheatsheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Cheatsheets/JavaScript Cheatsheet.pdf -------------------------------------------------------------------------------- /Cheatsheets/VS Code Cheatsheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Cheatsheets/VS Code Cheatsheet.pdf -------------------------------------------------------------------------------- /JS_Mini_Projects/Password_Generator/README.md: -------------------------------------------------------------------------------- 1 | # Preview 2 | 3 | image 4 | 5 | image 6 | 7 | image 8 | 9 | image 10 | 11 | image 12 | -------------------------------------------------------------------------------- /JS_Mini_Projects/Password_Generator/assets/copy.svg: -------------------------------------------------------------------------------- 1 | copy_2_line -------------------------------------------------------------------------------- /JS_Mini_Projects/Password_Generator/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/JS_Mini_Projects/Password_Generator/assets/favicon.ico -------------------------------------------------------------------------------- /JS_Mini_Projects/Password_Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Password Generator 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |

Password Generator

16 | 17 | 18 |
19 | 20 | 21 | 22 | 27 | 28 |
29 | 30 | 31 |
32 | 33 |
34 |

Password Length

35 |

0

36 |
37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | 45 |
46 | 47 |
48 | 49 | 50 |
51 | 52 |
53 | 54 | 55 |
56 | 57 |
58 | 59 | 60 |
61 | 62 | 63 |
64 |

Strength

65 |
66 |
67 | 68 | 69 | 70 | 71 |
72 |
73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /JS_Mini_Projects/Password_Generator/script.js: -------------------------------------------------------------------------------- 1 | const passwordDisplay = document.querySelector("[data-passwordDisplay]"); 2 | const copyBtn = document.querySelector("[data-copy]"); 3 | const copyMsg = document.querySelector("[data-copyMsg]"); 4 | const lengthDisplay = document.querySelector("[data-lengthNumber]"); 5 | const inputSlider = document.querySelector("[data-lengthSlider]"); 6 | const upperCheck = document.querySelector("#uppercase"); 7 | const lowerCheck = document.querySelector("#lowercase"); 8 | const numbersCheck = document.querySelector("#numbers"); 9 | const symbolsCheck = document.querySelector("#symbols"); 10 | const indicator = document.querySelector("[data-indicator]"); 11 | const generateBtn = document.querySelector(".generateButton"); 12 | const allCheckBox = document.querySelectorAll("input[type=checkbox]"); 13 | const symbols = '~!@#$%^&*()_+`[]\{}|;:<>,.?/'; 14 | 15 | let password = ""; 16 | let passwordLength = 10; 17 | let checkCount = 0; 18 | // initialluy the password indicator will be of grey color 19 | setIndicator("#ccc"); 20 | 21 | handleSlider(); 22 | 23 | // setting password length 24 | function handleSlider() { 25 | inputSlider.value = passwordLength; 26 | lengthDisplay.innerText = passwordLength; 27 | const min = inputSlider.min; 28 | const max = inputSlider.max; 29 | inputSlider.style.backgroundSize = ((passwordLength - min) * 100 / (max-min)) + "% 100%"; 30 | } 31 | 32 | // adding event listner on slider 33 | inputSlider.addEventListener('input', (e) => { 34 | passwordLength = e.target.value; 35 | handleSlider(); 36 | }) 37 | 38 | // function to copy password 39 | async function copyPassword() { 40 | try { 41 | await navigator.clipboard.writeText(passwordDisplay.value); 42 | copyMsg.innerText = "copied!"; 43 | } 44 | catch(e) { 45 | copyMsg.innerText = "failed!"; 46 | } 47 | 48 | // to make copy span visible 49 | copyMsg.classList.add("active"); 50 | 51 | setTimeout(() => { 52 | copyMsg.classList.remove("active"); 53 | }, 2000); 54 | } 55 | 56 | 57 | // adding event listner on copy btn 58 | copyBtn.addEventListener('click', () => { 59 | if (passwordDisplay.value) { 60 | copyPassword(); 61 | } 62 | }) 63 | 64 | // function to handle check box change or maintain checkbox count 65 | function handleCheckboxChange() { 66 | checkCount = 0; 67 | allCheckBox.forEach((checkbox) => { 68 | if (checkbox.checked) { 69 | checkCount++; 70 | } 71 | }); 72 | 73 | // special condition 74 | if (passwordLength < checkCount) { 75 | passwordLength = checkCount; 76 | handleSlider; 77 | } 78 | } 79 | 80 | // adding event listner on all checkbox 81 | allCheckBox.forEach((checkbox) => { 82 | checkbox.addEventListener('change', handleCheckboxChange); 83 | }) 84 | 85 | // function to get random integer 86 | function getRandomInteger(min, max) { 87 | return Math.floor(Math.random() * (max-min)) + min; 88 | } 89 | 90 | // function to get random number 91 | function generateRandomNumber() { 92 | return getRandomInteger(0, 9); 93 | } 94 | 95 | // function to get random lowercase letter 96 | function generateLowercaseLetter() { 97 | return String.fromCharCode(getRandomInteger(97, 123)); 98 | } 99 | 100 | // function to get random uppercase letter 101 | function generateUppercaseLetter() { 102 | return String.fromCharCode(getRandomInteger(65, 91)); 103 | } 104 | 105 | // function to get random symbols 106 | function generateSymbols() { 107 | const randomNumber = getRandomInteger(0, symbols.length); 108 | return symbols.charAt(randomNumber); 109 | } 110 | 111 | // function to check strength of the password 112 | function calculateStrength() { 113 | let hasNum = false; 114 | let hasUpper = false; 115 | let hasLower = false; 116 | let hasSymbol = false; 117 | 118 | if (upperCheck.checked) { 119 | hasUpper = true; 120 | } 121 | 122 | if (lowerCheck.checked) { 123 | hasLower = true; 124 | } 125 | 126 | if (numbersCheck.checked) { 127 | hasNum = true; 128 | } 129 | 130 | if (symbolsCheck.checked) { 131 | hasSymbol = true; 132 | } 133 | 134 | if (hasUpper && hasLower && (hasNum || hasSymbol) && passwordLength >= 8) { 135 | setIndicator("#ff0000"); 136 | } 137 | else if ((hasLower || hasUpper) && (hasNum || hasSymbol) && passwordLength >= 6) { 138 | setIndicator("#FFA500"); 139 | } 140 | else { 141 | setIndicator("#0000FF"); 142 | } 143 | } 144 | 145 | // setting indicator 146 | function setIndicator(color) { 147 | indicator.style.backgroundColor = color; 148 | indicator.style.boxShadow = "5px 5px 5px black"; 149 | } 150 | 151 | // adding event listner on generate password button 152 | generateBtn.addEventListener('click', () => { 153 | // none of the checkbox are selected 154 | if (checkCount <= 0) { 155 | return ; 156 | } 157 | 158 | if (passwordLength < checkCount) { 159 | passwordLength = checkCount; 160 | handleSlider(); 161 | } 162 | 163 | // let's start password generation 164 | // step 1 : remove previous password 165 | password = ""; 166 | 167 | // step 2 : check which checkbox is checked and include that first in password 168 | // no need to use below cases as it will become more complex so we use array 169 | // if (upperCheck.checked) { 170 | // password += generateUppercaseLetter(); 171 | // } 172 | 173 | // if (lowerCheck.checked) { 174 | // password += generateLowercaseLetter(); 175 | // } 176 | 177 | // if (numbersCheck.checked) { 178 | // password += generateRandomNumber(); 179 | // } 180 | 181 | // if (symbolsCheck.checked) { 182 | // password += generateSymbols(); 183 | // } 184 | 185 | let functionArray = []; 186 | if (upperCheck.checked) { 187 | functionArray.push(generateUppercaseLetter); 188 | } 189 | 190 | if (lowerCheck.checked) { 191 | functionArray.push(generateLowercaseLetter); 192 | } 193 | 194 | if (numbersCheck.checked) { 195 | functionArray.push(generateRandomNumber); 196 | } 197 | 198 | if (symbolsCheck.checked) { 199 | functionArray.push(generateSymbols); 200 | } 201 | 202 | // cumpulsory additon of password 203 | for (let i=0; i0; i--) { 228 | const j = Math.floor(Math.random() * (i+1)); 229 | const temp = array[i]; 230 | array[i] = array[j]; 231 | array[j] = temp; 232 | } 233 | 234 | let str = ""; 235 | array.forEach((el) => { 236 | str += el; 237 | }) 238 | 239 | return str; 240 | } 241 | -------------------------------------------------------------------------------- /JS_Mini_Projects/Password_Generator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | font-family: "Poppins", sans-serif; 10 | 11 | } 12 | 13 | body { 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | flex-direction: column; 18 | width: 100vw; 19 | height: 100vh; 20 | background: radial-gradient(circle, rgb(102, 109, 238) 0%, rgba(236, 55, 121, 0.92) 100%); 21 | } 22 | 23 | .conatiner { 24 | width: 90%; 25 | max-width: 450px; 26 | } 27 | 28 | h1 { 29 | color: white; 30 | text-align: center; 31 | text-transform: uppercase; 32 | line-height: 1.2; 33 | letter-spacing: 1px; 34 | } 35 | 36 | .display-container { 37 | position: relative; 38 | background-color: rgb(123, 255, 0); 39 | border-radius: 10px; 40 | border-bottom: 0.35rem solid yellow; 41 | margin: 1rem 0; 42 | padding-top: 0.35rem; 43 | } 44 | 45 | .display { 46 | width: 100%; 47 | color: rgb(255, 3, 255); 48 | background-color: transparent; 49 | padding: 10px; 50 | font-weight: 600; 51 | font-size: 1rem; 52 | line-height: 30px; 53 | border: none; 54 | } 55 | 56 | .display::placeholder { 57 | position: absolute; 58 | color: black; 59 | font-weight: 600; 60 | font-size: 1.2rem; 61 | top: 45%; 62 | left: 1rem; 63 | line-height: 30px; 64 | text-transform: uppercase; 65 | transform: translateY(-50%); 66 | } 67 | 68 | .display-container button { 69 | position: absolute; 70 | top: 50%; 71 | right: 1.8rem; 72 | transform: translateY(-50%); 73 | } 74 | 75 | /* .copyBtn { 76 | background: transparent; 77 | border: none; 78 | outline: none; 79 | } */ 80 | 81 | .toolTip { 82 | position: absolute; 83 | background-color: rgb(250, 72, 101); 84 | color: white; 85 | padding: 5px; 86 | border-radius: 10px; 87 | transform: scale(0); 88 | transform-origin: bottom; 89 | transition: all 250ms ease-in-out; 90 | top: -34px; 91 | } 92 | 93 | .toolTip.active { 94 | opacity: 1; 95 | transform: scale(1); 96 | } 97 | 98 | .input-container { 99 | width: 100%; 100 | background-color: rgb(25, 231, 14); 101 | border-radius: 10px; 102 | padding: 1rem 1.3rem; 103 | border-bottom: 0.35rem solid yellow; 104 | } 105 | 106 | .length-container { 107 | display: flex; 108 | justify-content: space-between; 109 | align-items: center; 110 | } 111 | 112 | .length-container p:nth-child(1) { 113 | font-weight: 500; 114 | font-size: 1.2rem; 115 | } 116 | 117 | .length-container p:nth-child(2) { 118 | font-weight: 500; 119 | font-size: 1.2rem; 120 | } 121 | 122 | .strength-container { 123 | display: flex; 124 | justify-content: space-between; 125 | align-items: center; 126 | } 127 | 128 | .strength-container p:nth-child(1) { 129 | font-weight: 500; 130 | font-size: 1.2rem; 131 | margin-bottom: 10px; 132 | } 133 | 134 | .indicator { 135 | height: 25px; 136 | width: 25px; 137 | border-radius: 50%; 138 | 139 | } 140 | 141 | .generateButton { 142 | background-color: rgb(220, 249, 0); 143 | padding: 0.5rem; 144 | border: none; 145 | border-bottom: 0.20rem solid rgb(246, 8, 47); 146 | border-radius: 5px; 147 | text-transform: uppercase; 148 | font-size: 1rem; 149 | font-weight: 600; 150 | width: 100%; 151 | cursor: pointer; 152 | text-align: center; 153 | letter-spacing: 0.1rem; 154 | } 155 | 156 | .check { 157 | display: flex; 158 | align-items: center; 159 | margin: 0.2rem; 160 | gap: 0 0.4rem; 161 | } 162 | 163 | .check input { 164 | appearance: none; 165 | width: 18px; 166 | height: 18px; 167 | border: 1px solid black; 168 | cursor: pointer; 169 | position: relative; 170 | border-radius: 3px; 171 | } 172 | 173 | .check input:checked { 174 | background-color: aqua; 175 | } 176 | 177 | .check input:checked::before { 178 | content: '\2713'; 179 | position: absolute; 180 | font-weight: 500; 181 | left: 15% 182 | } 183 | 184 | .check label { 185 | font-weight: 500; 186 | } 187 | 188 | .slider { 189 | appearance: none; 190 | width: 100%; 191 | height: 0.80rem; 192 | cursor: pointer; 193 | background-color: white; 194 | border-radius: 1rem; 195 | margin-top: 2px; 196 | margin-bottom: 2px; 197 | background-repeat: no-repeat; 198 | background-image: linear-gradient(rgb(240, 38, 12), rgba(0, 0, 255, 0.831)) 199 | } 200 | 201 | .slider::-webkit-slider-thumb { 202 | position: relative; 203 | z-index: 1; 204 | appearance: none; 205 | background-color: yellow; 206 | height: 25px; 207 | width: 25px; 208 | border-radius: 50%; 209 | cursor: pointer; 210 | transition: all 100ms ease-in; 211 | box-shadow: 0px 0px 20px 0px rgba(236, 55, 121, 0.92); 212 | } 213 | 214 | .slider:focus { 215 | outline: 2px solid yellow; 216 | } 217 | 218 | .slider::-webkit-slider-thumb:hover { 219 | background-color: red; 220 | border: 1px solid yellow; 221 | } -------------------------------------------------------------------------------- /JS_Mini_Projects/README.md: -------------------------------------------------------------------------------- 1 | JS 2 | -------------------------------------------------------------------------------- /JavaScript/Counter_App/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | image 4 | 5 | image 6 | 7 | image 8 | -------------------------------------------------------------------------------- /JavaScript/Counter_App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Counter App 7 | 8 | 9 | 10 | 11 |
12 |
13 | Increment & Decrement 14 |
15 | 16 |
17 | 18 | 19 | 22 | 23 | 24 | 25 |
26 | 0 27 |
28 | 29 | 30 | 33 |
34 |
35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /JavaScript/Counter_App/script.js: -------------------------------------------------------------------------------- 1 | const countValue = document.querySelector('#counter'); 2 | 3 | const increment = () => { 4 | let value = parseInt(countValue.innerText); 5 | 6 | value = value + 1; 7 | 8 | countValue.innerText = value; 9 | } 10 | 11 | const decrement = () => { 12 | let value = parseInt(countValue.innerText); 13 | 14 | value = value - 1; 15 | 16 | countValue.innerText = value; 17 | } 18 | 19 | -------------------------------------------------------------------------------- /JavaScript/DOM/JS_DOM1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 16 |
17 |

Para span

18 |

Para span

19 |

Para span

20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /JavaScript/DOM/JS_DOM1/index.js: -------------------------------------------------------------------------------- 1 | function eventFunction() { 2 | console.log('I have clicked on the docuemnt'); 3 | } 4 | 5 | document.addEventListener('click', eventFunction); 6 | 7 | document.removeEventListener('click', eventFunction); // removes event listner 8 | 9 | // const content = document.querySelector('#wrapper'); 10 | 11 | // content.addEventListener('click', function(babbar) { 12 | // console.log(babbar); 13 | // }) 14 | 15 | // let links = document.querySelectorAll('a'); 16 | // let thirdLink = links[2]; 17 | 18 | // thirdLink.addEventListener('click', function(event) { 19 | // event.preventDefault(); 20 | // console.log('maza aaya, accha laga'); 21 | // }); 22 | 23 | // let myDiv = document.createElement('div'); 24 | 25 | // function paraStatus(event) { 26 | // console.log('Para ' + event.target.textContent); 27 | // } 28 | // myDiv.addEventListener('click', paraStatus); 29 | 30 | // for(let i=1; i<=100; i++) { 31 | // let newElement = document.createElement('p'); 32 | // newElement.textContent = 'This is para ' + i; 33 | 34 | // myDiv.appendChild(newElement); 35 | // } 36 | // document.body.appendChild(myDiv); 37 | 38 | 39 | // dealing with node 40 | let element = document.querySelector('#wrapper'); 41 | 42 | element.addEventListener('click', function(event) { 43 | if(event.target.nodeName === 'SPAN') { 44 | console.log('span pr click kia hai' + event.target.textContent); 45 | } 46 | }); -------------------------------------------------------------------------------- /JavaScript/DOM/JS_DOM2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | Hello Jee 12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript/DOM/JS_DOM2/index.js: -------------------------------------------------------------------------------- 1 | // adding 100 para 2 | const t1 = performance.now(); 3 | for(let i=1; i<=20; i++) { 4 | let newElement = document.createElement('p'); 5 | newElement.textContent = 'This is Para ' + i; 6 | 7 | document.body.appendChild(newElement); 8 | } 9 | const t2 = performance.now(); 10 | console.log("this took " + (t2-t1) + " ms"); 11 | 12 | // //optimising a bit 13 | const t3 = performance.now(); 14 | let myDiv = document.createElement('div'); 15 | 16 | for(let i=1; i<=20; i++) { 17 | let element = document.createElement('p'); 18 | element.textContent = 'This is Para ' + i; 19 | 20 | myDiv.appendChild(element); 21 | } 22 | 23 | document.body.appendChild(myDiv); 24 | const t4 = performance.now(); 25 | console.log("this took " + (t4-t3) + " ms"); 26 | 27 | 28 | // optimising a bit more using fragment 29 | let fragment = document.createDocumentFragment(); 30 | for(let i=1; i<=20; i++) { 31 | let newElement = document.createElement('p'); 32 | newElement.textContent = 'This is Para ' + i; 33 | 34 | fragment.appendChild(newElement); 35 | } 36 | document.body.appendChild(fragment); // 1 Reflow, 1 Repaint 37 | 38 | 39 | function addPara() { 40 | let para = document.createElement('p'); 41 | para.textContent = 'Js is Single'; 42 | document.body.appendChild(para); 43 | } 44 | 45 | function appendNewMessage() { 46 | let para = document.createElement('p'); 47 | para.textContent = 'Kya haal Chaal'; 48 | document.body.appendChild(para); 49 | } 50 | 51 | addPara(); 52 | appendNewMessage(); 53 | 54 | document.addEventListener('click', function() { 55 | console.log('hello DiDi'); 56 | }); 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /JavaScript/DOM/JS_DOM3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Hello Jee

12 | 13 | 14 | -------------------------------------------------------------------------------- /JavaScript/DOM/JS_DOM3/index.js: -------------------------------------------------------------------------------- 1 | // set-timeout function 2 | setTimeout(function() { 3 | console.log('third'); 4 | },1000) 5 | 6 | function sync() { 7 | console.log('first'); 8 | } 9 | 10 | sync(); 11 | 12 | console.log('second'); 13 | 14 | 15 | let meraPromise1 = new Promise(function(resolve, reject) { 16 | setTimeout(function() { 17 | console.log('I am insde Promise1'); 18 | }, 3000); 19 | resolve(1234567890); 20 | // reject(new Error('Bhaisahab Error aaaye hai')) 21 | }); 22 | 23 | // meraPromise1.then((value) => { console.log(value)}, (error) => { console.log("Recieved an Error")}); 24 | 25 | 26 | let meraPromise2 = new Promise(function(resolve, reject) { 27 | setTimeout(function() { 28 | console.log('I am insde Promise2'); 29 | }, 4000); 30 | resolve(2233); 31 | //reject(new Error('Bhaisahab Error aaaye hai')) 32 | }); 33 | 34 | 35 | console.log('Pehla'); 36 | 37 | let temp = { 38 | val:123 39 | }; 40 | 41 | let waadaa1 = new Promise(function(resolve, reject) { 42 | setTimeout(()=> { 43 | console.log('setimeout1 started'); 44 | },5000); 45 | resolve(true); 46 | }) 47 | 48 | let output = waadaa1.then(() => { 49 | let waadaa2 = new Promise(function(resolve, reject) { 50 | setTimeout(()=> { 51 | console.log('setimeout2 started'); 52 | },6000); 53 | resolve("waada 2 resolved"); 54 | }) 55 | return waadaa2; 56 | }) 57 | 58 | output.then((value) => console.log(value)); 59 | 60 | 61 | // async function abcd() { 62 | // return "kya hua tera"; 63 | // } 64 | 65 | // async function utility() { 66 | // let delhiMausam = new Promise((resolve, reject) => { 67 | // setTimeout(()=>{ 68 | // resolve("Delhi me bhot garmi hai"); 69 | // },5000); 70 | // }); 71 | 72 | // let hydMausam = new Promise((resolve, reject) => { 73 | // setTimeout(()=>{ 74 | // resolve("Hyderabad is Cool"); 75 | // },6000); 76 | // }); 77 | 78 | // let dM = await delhiMausam; 79 | // let hM = await hydMausam; 80 | 81 | // return [dM, hM]; 82 | // } 83 | 84 | // let obj = { 85 | // heading:"head" 86 | // }; 87 | 88 | // async function utility() { 89 | // let content = await fetch('https://jsonplaceholder.typicode.com/posts/1'); 90 | // //let output = await content.json(); 91 | // console.log(content); 92 | // } 93 | 94 | // utility(); 95 | 96 | async function helper() { 97 | 98 | let options = { 99 | method: 'POST', 100 | body: JSON.stringify({ 101 | title: 'Babbar', 102 | body: 'Tagdi Body ', 103 | userId: 1998, 104 | weight: 90, 105 | }), 106 | headers: { 107 | 'Content-type': 'application/json; charset=UTF-8', 108 | }, 109 | }; 110 | 111 | let content = await fetch('https://jsonplaceholder.typicode.com/posts', options); 112 | let response = content.json(); 113 | return response; 114 | } 115 | 116 | console.log(helper()); 117 | 118 | 119 | // async function utility() { 120 | // let ans = await helper(); 121 | // console.log(ans); 122 | // } 123 | 124 | // utility(); 125 | 126 | function init() { 127 | let name = "Mozilla"; 128 | function displayName() { 129 | // displayName() is the inner function, that forms the closure 130 | console.log(name); // use variable declared in the parent function 131 | } 132 | return displayName; 133 | } 134 | let a = init(); 135 | a(); 136 | 137 | 138 | -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-1/01.js: -------------------------------------------------------------------------------- 1 | function sum(num1, num2) { 2 | return num1+num2; 3 | } 4 | 5 | console.log(sum(2, 5)); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-1/02.js: -------------------------------------------------------------------------------- 1 | function getStringLength(str) { 2 | return str.length; 3 | } 4 | 5 | console.log(getStringLength("Hello")); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-1/03.js: -------------------------------------------------------------------------------- 1 | let num1 = 10; 2 | let num2 = 5; 3 | 4 | let sum = num1+num2; 5 | let diff = num1-num2; 6 | let prod = num1*num2; 7 | let quot = num1/num2; 8 | 9 | console.log("sum : ", sum); 10 | console.log("difference : ", diff); 11 | console.log("product : ", prod); 12 | console.log("quotient : ", quot); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-1/04.js: -------------------------------------------------------------------------------- 1 | function getLargerNumber(num1, num2) { 2 | if (num1 > num2) { 3 | return num1; 4 | } 5 | return num2; 6 | } 7 | 8 | console.log("Larger number is", getLargerNumber(5, 2)); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-1/05.js: -------------------------------------------------------------------------------- 1 | function reverseString(str) { 2 | let reversed = str.split("").reverse().join(""); 3 | return reversed; 4 | } 5 | 6 | console.log("original string : LeetCode"); 7 | console.log("reverse string :", reverseString("LeetCode")); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-1/06.js: -------------------------------------------------------------------------------- 1 | function checkNumber(num) { 2 | if (num == 0) { 3 | return "zero"; 4 | } 5 | else if (num > 0) { 6 | return "positive"; 7 | } 8 | else { 9 | return "negative"; 10 | } 11 | } 12 | 13 | console.log(checkNumber(0)); 14 | console.log(checkNumber(5)); 15 | console.log(checkNumber(-10)); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-1/07.js: -------------------------------------------------------------------------------- 1 | function table(num) { 2 | for (let i=1; i<=10; i++) { 3 | console.log(num, "x", i, "=", (num*i)); 4 | } 5 | } 6 | 7 | table(5); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-1/08.js: -------------------------------------------------------------------------------- 1 | function sumTillN(num) { 2 | let sum = 0; 3 | for (let i=0; i<=num; i++) { 4 | sum += i; 5 | } 6 | return sum; 7 | } 8 | 9 | console.log("sum till 10 :", sumTillN(10)); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-1/09.js: -------------------------------------------------------------------------------- 1 | function numberOfVowels(str) { 2 | const vowels = ['a', 'e', 'i', 'o', 'u']; 3 | let count = 0; 4 | for (let i=0; i a - b); 13 | } 14 | 15 | let arr1 = [1, 2, 3, 10, 4, 5, 2]; 16 | let arr2 = [3, 4, 5, 10, 6, 7, 3]; 17 | console.log(getCommonElements(arr1, arr2)); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-1/README.md: -------------------------------------------------------------------------------- 1 | ## JavaScript Exercise-1 2 | 3 | ### Topics covered: 4 | - Variables, data types, and operators 5 | - Conditional statements and loops 6 | 1. Write a function that takes two numbers as arguments and returns their sum. 7 | 8 | 2. Write a function that takes a string as an argument and returns its length. 9 | 10 | 3. Write a program that takes two numbers and displays their sum, difference, product, and quotient. 11 | 12 | 4. Write a function that takes two numbers as arguments and returns the larger number. 13 | 14 | 5. Write a program that displays a string in reverse order. 15 | 16 | 6. Write a program that takes a number and checks whether it is positive, negative, or zero. 17 | 18 | 7. Write a program that takes a number and prints the multiplication table for that number. 19 | 20 | 8. Write a program that takes a number and calculates the sum of all numbers from 1 to that number. 21 | 22 | 9. Write a program that takes a string and prints out the number of vowels in the string. 23 | 24 | 10. Write a function that takes two arrays of integers as arguments and returns an array of the common elements in both arrays, without any duplicates. The returned array should be sorted in ascending order. For example, given the arrays [1, 2, 3, 4, 5] and [3, 4, 5, 6, 7], the function should return [3, 4, 5]. 25 | Hint: You may need to use nested loops and conditional statements to solve this problem. 26 | -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-2/01.js: -------------------------------------------------------------------------------- 1 | function greet(name) { 2 | console.log(`Hello, ${name}! How're you doing today?`); 3 | } 4 | 5 | console.log(greet("Kishan")); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-2/02.js: -------------------------------------------------------------------------------- 1 | function getSquare(num) { 2 | return num*num; 3 | } 4 | 5 | let num = 5; 6 | console.log(`Squre of ${num} is`, getSquare(num)); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-2/03.js: -------------------------------------------------------------------------------- 1 | function countLetters(str) { 2 | counts = {}; 3 | 4 | for (let i=0; i 5) { 6 | str.push(arr[i]); 7 | } 8 | } 9 | return str; 10 | } 11 | 12 | console.log(getStringArray(["apple", "banana", "mango", "watermelon", "muskmelon", "pineapple"])); 13 | console.log(getStringArray(["cat", "horse", "giraffe", "elephant", "hippopotamus"])); 14 | console.log(getStringArray([])); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-2/08.js: -------------------------------------------------------------------------------- 1 | function keyArray(obj) { 2 | let keys = Object.keys(obj); 3 | return keys; 4 | } 5 | 6 | const person = { 7 | name: "kishan", 8 | age: 24, 9 | gender: "male", 10 | city: "New Delhi" 11 | }; 12 | 13 | console.log(keyArray(person)); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-2/09.js: -------------------------------------------------------------------------------- 1 | function getPropertyValues(arr, propName) { 2 | let values = arr.map((obj) => obj[propName]); 3 | return values; 4 | } 5 | 6 | const people = [ 7 | {name: "Kishan", age: 24, gender: "male", city: "New Delhi"}, 8 | {name: "Rohit", age: 23, gender: "male", city: "Haryana"}, 9 | {name: "Mohit", age: 25, gender: "male", city: "Gwalior"}, 10 | {name: "Kritika", age: 24, gender: "female", city: "UP"}, 11 | 12 | ]; 13 | 14 | console.log(getPropertyValues(people, "name")); 15 | console.log(getPropertyValues(people, "age")); 16 | console.log(getPropertyValues(people, "gender")); 17 | console.log(getPropertyValues(people, "city")); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-2/10.js: -------------------------------------------------------------------------------- 1 | function findMaxByProperty(arr, prop) { 2 | if (arr.length == 0) { 3 | return null; 4 | } 5 | 6 | let maxObj = arr[0]; 7 | 8 | for (let i=1; i maxObj[prop]) { 10 | maxObj = arr[i]; 11 | } 12 | } 13 | 14 | return maxObj; 15 | } 16 | 17 | // Test Case 1 18 | let arr1 = [ 19 | {name: "apple", price: 1}, 20 | {name: "banana", price: 2}, 21 | {name: "mango", price: 3} 22 | ]; 23 | 24 | console.log(findMaxByProperty(arr1, "price")); 25 | 26 | // Test Case 2 27 | let arr2 = [ 28 | {name: "kishan", age: 24}, 29 | {name: "mohit", age: 25}, 30 | {name: "rohit", age: 23} 31 | ]; 32 | 33 | console.log(findMaxByProperty(arr2, "age")); 34 | 35 | // Test Case 3 36 | let arr3 = []; 37 | 38 | console.log(findMaxByProperty(arr3, "age")); -------------------------------------------------------------------------------- /JavaScript/JS_Exercises/JS_Exercise-2/README.md: -------------------------------------------------------------------------------- 1 | ## JavaScript Exercise-2 2 | 3 | ### Topics covered: 4 | - Functions and scope 5 | - Arrays and objects 6 | 1. Write a function called 'greet' that takes a name parameter and logs a greeting message to the console. 7 | 8 | 2. Write a function called 'getSquare' that takes a number parameter and returns its square. 9 | 10 | 3. Write a function called 'countLetters' that takes a string parameter and returns an object that contains a count of each letter in the string. 11 | 12 | 4. Write a function called 'createCounter' that returns a function. The returned function should increment a counter variable each time it is called and return the current count. 13 | 14 | 5. Write a function called 'sumEvenNumbers' that takes an array of numbers as a parameter and returns the sum of all even numbers in the array. 15 | 16 | 6. Write a function that takes an array of numbers as an argument and returns the sum of all the numbers in the array. 17 | 18 | 7. Write a function that takes an array of strings as an argument and returns a new array with only the strings that have a length greater than 5. 19 | 20 | 8. Write a function that takes an object and returns an array of all the keys in the object. 21 | 22 | 9. Write a function that takes an array of objects and returns an array of all the values of a specified property name. 23 | 24 | 10. Write a function that takes an array of objects and returns the object with the highest value for a specified property name. -------------------------------------------------------------------------------- /JavaScript/ModalPrac/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | image 4 | 5 | image 6 | -------------------------------------------------------------------------------- /JavaScript/ModalPrac/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/JavaScript/ModalPrac/assets/favicon.ico -------------------------------------------------------------------------------- /JavaScript/ModalPrac/assets/profile-image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/JavaScript/ModalPrac/assets/profile-image.webp -------------------------------------------------------------------------------- /JavaScript/ModalPrac/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Profile Share Modal | Codehelp 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 |
18 |
19 |
20 | user 21 |
22 |
23 |

Kishan

24 |
25 |
26 |

Web Developer

27 |
28 |
29 | 33 | 34 | 35 |
36 |
37 |
38 | 39 | 40 |
41 |
42 |

Share My Profile

43 |
44 | 45 |
46 |
47 | 48 | 49 |
50 | 51 |

Share this via

52 | 53 | 54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 |
72 | 73 | 74 |
75 | 76 | 77 |
78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /JavaScript/ModalPrac/script.js: -------------------------------------------------------------------------------- 1 | const modal = document.querySelector(".modal"); 2 | const overlay = document.querySelector(".overlay"); 3 | 4 | // Modal open function 5 | const openModal = () => { 6 | console.log("Modal is Open"); 7 | modal.classList.add("active"); 8 | overlay.classList.add("overlayactive"); 9 | }; 10 | 11 | // Modal close function 12 | const closeModal = () => { 13 | modal.classList.remove("active"); 14 | overlay.classList.remove("overlayactive"); 15 | }; -------------------------------------------------------------------------------- /JavaScript/ModalPrac/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | background-color: #000; 8 | font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; 9 | } 10 | 11 | .wrapper { 12 | width: 100vw; 13 | height: 100vh; 14 | } 15 | 16 | .circle1 { 17 | position: fixed; 18 | top: 5%; 19 | left: 30%; 20 | width: 13em; 21 | height: 13em; 22 | border-radius: 50%; 23 | box-shadow: 0 0 50px #d84869; 24 | background: linear-gradient(-25deg, #d84869, #f46641); 25 | animation: circle1Animate 15s infinite; 26 | } 27 | 28 | @keyframes circle1Animate { 29 | 50% { 30 | left: 33%; 31 | top: 4%; 32 | scale: 1.11; 33 | } 34 | } 35 | 36 | .circle2 { 37 | position: absolute; 38 | bottom: 5%; 39 | right: 30%; 40 | width: 19em; 41 | height: 19em; 42 | border-radius: 50%; 43 | box-shadow: 0 0 50px #5648d8; 44 | background: linear-gradient(-25deg, #5648d8, #8641f4); 45 | animation: circle2Animate 8s infinite; 46 | } 47 | @keyframes circle2Animate { 48 | 50% { 49 | bottom: 6%; 50 | right: 31%; 51 | } 52 | } 53 | .card-wrapper { 54 | position: absolute; 55 | top: 50%; 56 | left: 50%; 57 | translate: -50% -50%; 58 | height: 450px; 59 | border: 2px solid #ffffff30; 60 | display: flex; 61 | flex-direction: column; 62 | align-items: center; 63 | justify-content: space-evenly; 64 | background: #ffffff1a; 65 | backdrop-filter: blur(15px); 66 | border-radius: 15px; 67 | color: #ffffff; 68 | padding: 20px 50px; 69 | } 70 | .card-wrapper div img { 71 | border: 2px solid #ffffff30; 72 | width: 150px; 73 | height: 150px; 74 | border-radius: 50%; 75 | } 76 | .designation h3 { 77 | text-align: center; 78 | color: #ffffff85; 79 | } 80 | .user-name h2 { 81 | font-size: 2rem; 82 | text-align: center; 83 | } 84 | .bottom-group { 85 | display: flex; 86 | justify-content: space-between; 87 | gap: 10px; 88 | } 89 | .btn-share { 90 | display: flex; 91 | justify-content: center; 92 | align-items: center; 93 | gap: 7px; 94 | padding: 9px 12px; 95 | background: #ffffff00; 96 | border: 2px solid #ffffffb9; 97 | text-transform: capitalize; 98 | border-radius: 4px; 99 | color: #ffffffb9; 100 | cursor: pointer; 101 | } 102 | .btn-follow { 103 | text-transform: capitalize; 104 | width: 150px; 105 | padding: 9px 12px; 106 | background: #ffffff00; 107 | border: 2px solid #ffffffb9; 108 | border-radius: 4px; 109 | color: #ffffffb9; 110 | cursor: pointer; 111 | transition: all 0.5s; 112 | } 113 | .btn-card:hover { 114 | background: #ffffffb9; 115 | color: #131313; 116 | } 117 | 118 | .modal { 119 | position: fixed; 120 | top: 50%; 121 | left: 50%; 122 | translate: -50% -50%; 123 | border: 2px solid #ffffff59; 124 | width: 500px; 125 | scale: 0; 126 | background: #00000088; 127 | backdrop-filter: blur(10px); 128 | color: white; 129 | z-index: 1; 130 | padding: 20px 25px; 131 | border-radius: 20px; 132 | transition: 0.5s ease-in-out; 133 | } 134 | .modal-header { 135 | display: flex; 136 | margin-bottom: 25px; 137 | flex-direction: row; 138 | justify-content: space-between; 139 | align-items: center; 140 | padding-bottom: 12px; 141 | border-bottom: 1px solid #ffffff88; 142 | } 143 | .modal-header div i { 144 | font-size: 30px; 145 | } 146 | .close { 147 | cursor: pointer; 148 | } 149 | .icon-container { 150 | margin-top: 20px; 151 | display: flex; 152 | justify-content: space-between; 153 | align-items: center; 154 | flex-wrap: wrap; 155 | } 156 | .icon { 157 | border: 1px solid #ffffff88; 158 | padding: 17px; 159 | border-radius: 50%; 160 | width: 30px; 161 | height: 30px; 162 | display: flex; 163 | align-items: center; 164 | margin: 10px 0px; 165 | gap: 10px; 166 | justify-content: center; 167 | transition: all 0.5s; 168 | margin-bottom: 25px; 169 | text-decoration: none; 170 | } 171 | .icon i { 172 | font-size: 27px; 173 | } 174 | 175 | #facebook { 176 | color: #1771e6; 177 | border: 1px solid #1771e6; 178 | } 179 | #facebook:hover { 180 | background-color: #1771e6; 181 | color: #fff; 182 | } 183 | 184 | #twitter { 185 | color: #1c99e6; 186 | border: 1px solid #1c99e6; 187 | } 188 | #twitter:hover { 189 | background-color: #1c99e6; 190 | color: #fff; 191 | } 192 | 193 | #instagram { 194 | color: #cb2770; 195 | border: 1px solid #cb2770; 196 | } 197 | #instagram:hover { 198 | background-color: #cb2770; 199 | color: #fff; 200 | } 201 | 202 | #whatsapp { 203 | color: #2fe664; 204 | border: 1px solid #2fe664; 205 | } 206 | #whatsapp:hover { 207 | background-color: #2fe664; 208 | color: #fff; 209 | } 210 | 211 | #telegram { 212 | color: #0081c2; 213 | border: 1px solid #0081c2; 214 | } 215 | #telegram:hover { 216 | background-color: #0081c2; 217 | color: #fff; 218 | } 219 | 220 | .active { 221 | scale: 1; 222 | } 223 | .overlay { 224 | position: fixed; 225 | background-color: #5f5f5f83; 226 | top: 0; 227 | opacity: 0; 228 | bottom: 0; 229 | left: 0; 230 | right: 0; 231 | pointer-events: none; 232 | transition: 0.5s ease-in-out; 233 | } 234 | .overlayactive { 235 | opacity: 1; 236 | pointer-events: initial; 237 | } 238 | @media (max-width: 850px) { 239 | .card-wrapper { 240 | max-width: 250px; 241 | width: 300px; 242 | } 243 | .bottom-group { 244 | flex-direction: column; 245 | } 246 | .modal { 247 | width: 70vw; 248 | } 249 | } 250 | 251 | @media (max-width: 400px) { 252 | .wrapper { 253 | display: flex; 254 | justify-content: center; 255 | align-items: center; 256 | } 257 | .card-wrapper { 258 | position: static; 259 | top: 0; 260 | left: 0; 261 | translate: 0 0; 262 | margin: 0 12px; 263 | padding: 0 10px; 264 | } 265 | .card-wrapper div img { 266 | width: 120px; 267 | height: 120px; 268 | } 269 | .user-name h2 { 270 | font-size: 1.3rem; 271 | } 272 | .modal { 273 | width: 80vw; 274 | } 275 | } -------------------------------------------------------------------------------- /JavaScript/adding_element.js: -------------------------------------------------------------------------------- 1 | // ways to add elements in the array 2 | 3 | // add element at the end (push method) 4 | 5 | let numbers1 = [1,4,5,7]; 6 | numbers1.push(10); 7 | console.log(numbers1); 8 | 9 | // add element at the start (unshift mehtod) 10 | 11 | let numbers2 = [1,4,5,7]; 12 | numbers2.unshift(10); 13 | console.log(numbers2); 14 | 15 | 16 | // add element at the middle (splice mehtod) 17 | 18 | let numbers3 = [1,4,5,7]; 19 | numbers3.splice(1, 0, 11); 20 | // In this code, the splice() method is called on the numbers array, starting at index 1, with a deleteCount of 0. You then add the new element 11 to the array at the start index. The result is the modified array [ 1, 11, 4, 5, 7 ]. 21 | console.log(numbers3); -------------------------------------------------------------------------------- /JavaScript/anonymous_function_assignment.js: -------------------------------------------------------------------------------- 1 | //Anonymous function assignment 2 | 3 | let stand = function() { 4 | console.log('walking'); 5 | }; 6 | 7 | 8 | stand(); -------------------------------------------------------------------------------- /JavaScript/argument_function.js: -------------------------------------------------------------------------------- 1 | function sum() { 2 | let total = 0; 3 | for(let value of arguments) 4 | total = total + value; 5 | return total; 6 | } 7 | 8 | console.log(sum(1,2)); // prints 3 9 | console.log(sum(1)); // prints 1 10 | console.log(sum()); // prints 0 11 | console.log(sum(1,2,3,4,5)); // prints 15 12 | 13 | let ans = sum(1,2,2,3); 14 | console.log(ans); // prints 8 -------------------------------------------------------------------------------- /JavaScript/combining_element.js: -------------------------------------------------------------------------------- 1 | let first = [1,2,3]; 2 | let second = [4,5,6]; 3 | 4 | let combined1 = first.concat(second); 5 | console.log(combined1); 6 | 7 | let combined2 = [...first,'a', false, ...second ,'b', true]; 8 | console.log(combined2); -------------------------------------------------------------------------------- /JavaScript/constructor_function.js: -------------------------------------------------------------------------------- 1 | // constructor function 2 | 3 | // function name should be in pascal case 4 | 5 | function Rectangle(len, bre) { 6 | this.length = len; 7 | this.breadth = bre; 8 | this.draw = function() { 9 | console.log('drawing'); 10 | } 11 | } 12 | console.log(Rectangle); 13 | 14 | //object creation using constrcutor function 15 | let rectangleObject = new Rectangle(4,6); 16 | console.log(rectangleObject); 17 | 18 | // adding new property 19 | rectangleObject.color = 'yellow'; 20 | console.log(rectangleObject); 21 | 22 | // deleting existing property 23 | delete rectangleObject.color; 24 | console.log(rectangleObject); 25 | 26 | // below is the code to showcase how constructor functio actually work 27 | 28 | let Rectangle1 = new Function('length', 'breadth', 29 | `this.length = length; 30 | this.breadth = breadth; 31 | this.draw= function() { 32 | console.log('drawing'); 33 | }` 34 | ); 35 | 36 | //object creation using Rectangle1 37 | let rect = new Rectangle1(2,3); 38 | console.log(rect); -------------------------------------------------------------------------------- /JavaScript/date.js: -------------------------------------------------------------------------------- 1 | // ways to print date 2 | let date1 = new Date(); 3 | console.log(date1); 4 | 5 | let date2 = new Date('June 20 1998 07:15'); 6 | console.log(date2); 7 | 8 | let date3 = new Date(1998, 11, 20, 7); 9 | console.log(date3); 10 | 11 | date3.setFullYear(1947); 12 | console.log(date3); 13 | -------------------------------------------------------------------------------- /JavaScript/do_while_loop.js: -------------------------------------------------------------------------------- 1 | let y = 1; 2 | 3 | do { 4 | console.log(y); 5 | y++; 6 | } while(y <= 10); -------------------------------------------------------------------------------- /JavaScript/emptying_an_array.js: -------------------------------------------------------------------------------- 1 | // ways to empty an array 2 | 3 | // #1 by using splice method 4 | let numbers1 = [1,2,3,4,5]; 5 | let numbers2 = numbers1; 6 | 7 | numbers1.splice(0 ,numbers1.length); 8 | console.log(numbers1); 9 | console.log(numbers2); 10 | 11 | // #2 by doing length equal to zero 12 | let numbers3 = [1,2,3,4,5]; 13 | numbers3.length = 0; 14 | console.log(numbers3); 15 | 16 | // #3 by using pop method 17 | let numbers4 = [1,2,3,4,5]; 18 | while (numbers4.length > 0) { 19 | numbers4.pop(); 20 | } 21 | console.log(numbers4); 22 | -------------------------------------------------------------------------------- /JavaScript/factory_function.js: -------------------------------------------------------------------------------- 1 | // factory function 2 | // function name should be in camel case 3 | 4 | function createRectangle(len, bre) { 5 | const rectangle = { 6 | length: len, 7 | breadth:bre , 8 | 9 | draw() { 10 | console.log('drawing rectangle'); 11 | } 12 | }; 13 | return rectangle; 14 | } 15 | 16 | //object creation using factory function 17 | let rectangle1 = createRectangle(5, 4); 18 | console.log(rectangle1); 19 | 20 | let rectangle2 = createRectangle(2,3); 21 | console.log(rectangle2); 22 | 23 | let rectangle3 = createRectangle(7,9); 24 | console.log(rectangle3); -------------------------------------------------------------------------------- /JavaScript/filter_and_map.js: -------------------------------------------------------------------------------- 1 | // using filter method 2 | let numbers1 = [1,2,-1,-4]; 3 | console.log(numbers1); 4 | 5 | let filtered = numbers1.filter(value => value >= 0); 6 | 7 | console.log(filtered); 8 | 9 | // using map method 10 | let numbers2 = [7,8,9,10]; 11 | console.log(numbers2); 12 | 13 | let items1 = numbers2.map(value => 'student_no: ' + value); 14 | 15 | console.log(items1); 16 | 17 | 18 | // using filter and map method together 19 | let numbers = [1,2,-6,-9]; 20 | 21 | let items = numbers.filter(value => value >= 0).map(num => {value: num}); 22 | 23 | console.log(items); 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /JavaScript/for_each_loop.js: -------------------------------------------------------------------------------- 1 | let arr = [10,20,30,40,50]; 2 | 3 | // ways to iterate over above array 4 | 5 | // #1 using for each loop with proper function 6 | arr.forEach(function(value) { 7 | console.log(value) 8 | }) 9 | 10 | // #1 using for each loop with arrow function 11 | arr.forEach(number=> console.log(number)); -------------------------------------------------------------------------------- /JavaScript/for_in_loop.js: -------------------------------------------------------------------------------- 1 | // for-in loop 2 | 3 | let rectangle = { 4 | length:2, 5 | breadth:4 6 | }; 7 | 8 | for(let key in rectangle ) { 9 | //keys are reflected through key variable 10 | //values are reflected through rectangle[key] 11 | console.log(key, rectangle[key]); 12 | } 13 | 14 | if ('length' in rectangle) { 15 | console.log('Present'); 16 | } 17 | else { 18 | console.log('Absent'); 19 | } -------------------------------------------------------------------------------- /JavaScript/for_of_loop.js: -------------------------------------------------------------------------------- 1 | // for-of loop 2 | // it works ony in iterbles like arrays, maps, etc. 3 | 4 | let rectangle = { 5 | length:2, 6 | breadth:4 7 | }; 8 | 9 | for(let key of Object.entries(rectangle)) { 10 | console.log(key); 11 | } 12 | 13 | let arr = [10,20,30,40,50]; 14 | 15 | for (let value of arr) { 16 | console.log(value); 17 | } -------------------------------------------------------------------------------- /JavaScript/function_declaration.js: -------------------------------------------------------------------------------- 1 | run(); 2 | 3 | //function declaration 4 | function run() { 5 | console.log('running'); 6 | } 7 | 8 | run(); -------------------------------------------------------------------------------- /JavaScript/function_with_default_parameters.js: -------------------------------------------------------------------------------- 1 | //Default Parameters 2 | function interest(p, r=6, y=9) { 3 | return p*r*y/100; 4 | } 5 | 6 | console.log(interest(1000,undefined, 8)); -------------------------------------------------------------------------------- /JavaScript/getter_setter.js: -------------------------------------------------------------------------------- 1 | // GETTER SETTER 2 | 3 | // getter -> access properties 4 | // setter -> change or mutate properties 5 | 6 | 7 | 8 | let person = { 9 | fName : 'Kishan', 10 | lName : 'Rajput', 11 | 12 | get fullName() { 13 | return `${person.fName} ${person.lName}`; 14 | }, 15 | 16 | set fullName(value) { 17 | if (typeof value !== String) { 18 | throw new Error("You have not sent a string"); 19 | } 20 | 21 | let parts = value.split(' '); 22 | this.fName = parts[0]; 23 | this.lName = parts[1]; 24 | } 25 | }; 26 | 27 | console.log(person); 28 | 29 | console.log(person.fullName); 30 | -------------------------------------------------------------------------------- /JavaScript/if_condition.js: -------------------------------------------------------------------------------- 1 | let marks = 12; 2 | 3 | if(marks >= 90) { 4 | console.log('A'); 5 | } 6 | else if(marks >= 80) { 7 | console.log('B'); 8 | } 9 | else if(marks >=70) { 10 | console.log('C'); 11 | } 12 | else if(marks >= 60) { 13 | console.log('D'); 14 | } 15 | else { 16 | console.log('E'); 17 | } -------------------------------------------------------------------------------- /JavaScript/named_function_assignment.js: -------------------------------------------------------------------------------- 1 | //Named function assignment 2 | 3 | let stand = function walk() { 4 | console.log('walking'); 5 | }; 6 | 7 | stand(); 8 | 9 | let jump = stand; 10 | 11 | jump(); -------------------------------------------------------------------------------- /JavaScript/object_cloning.js: -------------------------------------------------------------------------------- 1 | // object cloning #1 (using iteration) 2 | 3 | let src1 = { 4 | a:10, 5 | b:20, 6 | c:30 7 | }; 8 | 9 | let dest1 = {}; 10 | 11 | for (let key in src1) { 12 | dest1[key] = src1[key]; 13 | } 14 | 15 | console.log(dest1); 16 | src1.a++; 17 | console.log(dest1); 18 | 19 | // Object Cloning #2 (using assign) 20 | 21 | let src2 = { 22 | a:10, 23 | b:20, 24 | c:30 25 | }; 26 | 27 | let srcc = {value: 25}; 28 | 29 | let dest2 = Object.assign({}, srcc, src2); 30 | 31 | 32 | console.log(dest2); 33 | src2.a++; 34 | console.log(dest2); 35 | 36 | // Object Cloning #3 (using spread) 37 | 38 | let src3 = { 39 | a: 10, 40 | b:20, 41 | c:30 42 | }; 43 | 44 | let dest3 = {...src3}; 45 | 46 | console.log(dest3); 47 | src3.a++; 48 | console.log(dest3); -------------------------------------------------------------------------------- /JavaScript/objects.js: -------------------------------------------------------------------------------- 1 | //object create 2 | 3 | let rectangle = { 4 | length: 1, 5 | breadth: 2, 6 | 7 | draw: function() { 8 | console.log('drawing rectangle'); 9 | } 10 | }; 11 | console.log(rectangle.length); 12 | console.log(rectangle.breadth); 13 | rectangle.draw(); 14 | console.log(rectangle); 15 | 16 | 17 | rectangle['color'] = 'blue'; 18 | console.log(rectangle); 19 | 20 | delete rectangle['color']; 21 | console.log(rectangle); -------------------------------------------------------------------------------- /JavaScript/reducing_array.js: -------------------------------------------------------------------------------- 1 | let arr = [1, 2, 3, 4]; 2 | 3 | let totalSum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); 4 | 5 | console.log("PRINTING TOTAL SUM:") 6 | console.log(totalSum); -------------------------------------------------------------------------------- /JavaScript/removing_element.js: -------------------------------------------------------------------------------- 1 | // ways to remove elements in the array 2 | 3 | // remove element from the end (pop method) 4 | let numbers1 = [1,4,5,7]; 5 | numbers1.pop(); 6 | console.log(numbers1); 7 | 8 | // remove element from the start (shift mehtod) 9 | let numbers2 = [1,4,5,7]; 10 | numbers2.shift(); 11 | console.log(numbers2); 12 | 13 | // remove element at the middle (splice mehtod) 14 | let numbers3 = [1,4,5,7]; 15 | numbers3.splice(2, 1); 16 | // In this code, the splice() method is called on the numbers array, starting at index 2, and the count of how many numbers we want to remove that is 1. The result is the modified array [ 1, 4, 7 ]. 17 | console.log(numbers3); -------------------------------------------------------------------------------- /JavaScript/rest_operator.js: -------------------------------------------------------------------------------- 1 | // Rest Operator 2 | 3 | function sum(num, value, ...args) { 4 | console.log(args); 5 | } 6 | 7 | sum(1,2,3,4,5,6); -------------------------------------------------------------------------------- /JavaScript/scope.js: -------------------------------------------------------------------------------- 1 | { 2 | var a = 5; 3 | } 4 | 5 | console.log(a); 6 | 7 | 8 | function walk() { 9 | var a = 15; 10 | } 11 | 12 | console.log(a); 13 | 14 | for(var i = 0; i<10; i++) { 15 | } 16 | 17 | console.log(i); 18 | 19 | if(true) { 20 | var a = 20; 21 | } 22 | 23 | console.log(a); 24 | 25 | function a() { 26 | const ab = 5; 27 | } 28 | 29 | const ab = 5; 30 | 31 | function b() { 32 | const ab = 5; 33 | } -------------------------------------------------------------------------------- /JavaScript/searching.js: -------------------------------------------------------------------------------- 1 | // searching in array 2 | let numbers = [1,4,5,7]; 3 | console.log(numbers); 4 | 5 | console.log(numbers.indexOf(9)); // gives -1 as 9 not present in array 6 | 7 | // if we want to check if a number exist in an array 8 | 9 | if( numbers.indexOf(4) != -1) 10 | console.log("present"); 11 | 12 | console.log(numbers.includes(7)); // return true 13 | 14 | console.log(numbers.indexOf(4, 2)); // return -1 as index of element 4 is 1 not 2 15 | 16 | 17 | let courses = [ 18 | {no:1, naam:'Love'}, 19 | {no:2, naam:'Rahul'} 20 | ]; 21 | 22 | console.log(courses); 23 | 24 | console.log(courses.includes( {no:1, naam:'Love'} ) ); // returns false as includes works only on primitve data types not on objects 25 | 26 | let course = courses.find(course => course.naam === 'Kilvish'); 27 | 28 | console.log(course); 29 | 30 | let result = function(course) { 31 | return course.naam === 'Love'; 32 | } 33 | 34 | console.log(result); -------------------------------------------------------------------------------- /JavaScript/slicing_elements.js: -------------------------------------------------------------------------------- 1 | let marks = [10,20,30,40,50,60,70,80]; 2 | 3 | let sliced1 = marks.slice(); 4 | let sliced2 = marks.slice(2); 5 | let sliced3 = marks.slice(2,6); 6 | 7 | console.log(sliced1); 8 | console.log(sliced2); 9 | console.log(sliced3); -------------------------------------------------------------------------------- /JavaScript/sort_and_reverse.js: -------------------------------------------------------------------------------- 1 | let numbers = [5,10,4,40]; 2 | 3 | numbers.sort(); // sort numbers according to strings as it converts numbers into strings 4 | 5 | console.log(numbers); 6 | 7 | // reverse the above numbers 8 | numbers.reverse(); 9 | console.log(numbers); -------------------------------------------------------------------------------- /JavaScript/sorting.js: -------------------------------------------------------------------------------- 1 | // sorting 2 | 3 | let a = [10,5,4,25]; 4 | 5 | a.sort(function(a,b) { 6 | return a-b; 7 | }); 8 | 9 | console.log(a); -------------------------------------------------------------------------------- /JavaScript/string.js: -------------------------------------------------------------------------------- 1 | let firstName = "kishan"; 2 | console.log(firstName.toUpperCase()); 3 | console.log(firstName.length); 4 | console.log(firstName.includes('sh')); 5 | console.log(firstName.startsWith('ki')); 6 | console.log(firstName.endsWith('n')); 7 | console.log(firstName.indexOf('s')); 8 | console.log(firstName.replace("kishan", "kishna")); 9 | 10 | let str = " kishan "; 11 | console.log(str.trim()); 12 | 13 | let str1 = " $$ kishan $$ "; 14 | console.log(str1.trimStart()); 15 | 16 | let str2 = " $$ kishan $$ "; 17 | console.log(str2.trimEnd()); 18 | 19 | let sentence = "I am an Iron Man"; 20 | let words = sentence.split(" "); 21 | console.log(words); 22 | 23 | // string literals 24 | let message = 25 | `Hello Ji..., 26 | 27 | Thanks for the Opportunity 28 | 29 | Regards, 30 | Kishan`; 31 | 32 | console.log(message); 33 | 34 | // split method 35 | let message1 = 'This is my first message'; 36 | let parts = message1.split(' '); 37 | console.log(parts); 38 | 39 | // joined method 40 | let joined = parts.join('_'); 41 | console.log(joined); -------------------------------------------------------------------------------- /JavaScript/switch_case.js: -------------------------------------------------------------------------------- 1 | let num = 1; 2 | 3 | switch(num) { 4 | case 1: console.log('A'); 5 | break; 6 | case 2: console.log('B'); 7 | break; 8 | case 3: console.log('C'); 9 | break; 10 | default: console.log('D'); 11 | } -------------------------------------------------------------------------------- /JavaScript/ternary_operator.js: -------------------------------------------------------------------------------- 1 | let age = 27; 2 | 3 | let status = (age >= 18) ? 'Yes Vote' : 'No Vote'; 4 | 5 | console.log(status); -------------------------------------------------------------------------------- /JavaScript/try_catch.js: -------------------------------------------------------------------------------- 1 | let person = { 2 | fName : 'Kishan', 3 | lName : 'Rajput', 4 | 5 | get fullName() { 6 | return `${person.fName} ${person.lName}`; 7 | }, 8 | 9 | set fullName(value) { 10 | if(typeof value !== String) { 11 | throw new Error("You have not sent a string"); 12 | } 13 | let parts = value.split(' '); 14 | this.fName = parts[0]; 15 | this.lName = parts[1]; 16 | } 17 | }; 18 | 19 | 20 | 21 | console.log(person); 22 | 23 | console.log(person.fullName); 24 | 25 | 26 | try { 27 | person.fullName = true; 28 | } 29 | catch (e) { 30 | alert(e); 31 | } 32 | 33 | console.log(person.fullName); -------------------------------------------------------------------------------- /JavaScript/types_in_js.js: -------------------------------------------------------------------------------- 1 | // Type 1 --> primitives or values types 2 | // in this type copy of data is created that's why there will be no changes in other variale 3 | 4 | let a = 10; 5 | let b = a; 6 | a++; 7 | console.log(a); 8 | console.log(b); 9 | 10 | 11 | // using function 12 | let p = 10; 13 | 14 | function inc(p) { 15 | p++; 16 | } 17 | 18 | inc(p); 19 | console.log(p); 20 | 21 | // Type 2 --> reference types or objects 22 | // in this type reference is passes so there will be change refelect in other varibale if orginal get change 23 | 24 | let x = { value: 10}; 25 | let y = x; 26 | 27 | x.value++; 28 | 29 | console.log(x.value); 30 | console.log(y.value); 31 | 32 | 33 | // using function 34 | let q = {value:10}; 35 | 36 | function inc(q) { 37 | q.value++; 38 | } 39 | 40 | inc(q); 41 | console.log(q.value); 42 | -------------------------------------------------------------------------------- /JavaScript/while_loop.js: -------------------------------------------------------------------------------- 1 | let x = 1; 2 | 3 | while (x <= 5) { 4 | console.log(x); 5 | x++; 6 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Kishan Kumar Rai 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Lectures/Lecture_01/Lecture_01.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_01/Lecture_01.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_01/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_01/README.md -------------------------------------------------------------------------------- /Lectures/Lecture_02/Lecture_02.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_02/Lecture_02.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_02/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_02/README.md -------------------------------------------------------------------------------- /Lectures/Lecture_03/Lecture_03.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_03/Lecture_03.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_03/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_03/README.md -------------------------------------------------------------------------------- /Lectures/Lecture_04/Lecture_04.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_04/Lecture_04.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_04/README.md: -------------------------------------------------------------------------------- 1 | ## Previews 2 | 3 | ### index.html 4 | 5 | Screenshot 2023-08-17 at 3 24 45 PM 6 | -------------------------------------------------------------------------------- /Lectures/Lecture_04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | Hello ji, Kese ho sare. This is your boy, Kishna!!! 10 | 11 | -------------------------------------------------------------------------------- /Lectures/Lecture_05/Lecture_05.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_05/Lecture_05.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_05/README.md: -------------------------------------------------------------------------------- 1 | ## Previews 2 | 3 | ### index.html 4 | 5 | image 6 | 7 | image 8 | 9 | ### bookmark.html 10 | 11 | image 12 | -------------------------------------------------------------------------------- /Lectures/Lecture_05/bookmark.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Jump to Chapter 4

6 |

Jump to Chapter 10

7 | 8 |

Chapter 1

9 |

This chapter explains ba bla bla

10 | 11 |

Chapter 2

12 |

This chapter explains ba bla bla

13 | 14 |

Chapter 3

15 |

This chapter explains ba bla bla

16 | 17 |

Chapter 4

18 |

This chapter explains ba bla bla

19 | 20 |

Chapter 5

21 |

This chapter explains ba bla bla

22 | 23 |

Chapter 6

24 |

This chapter explains ba bla bla

25 | 26 |

Chapter 7

27 |

This chapter explains ba bla bla

28 | 29 |

Chapter 8

30 |

This chapter explains ba bla bla

31 | 32 |

Chapter 9

33 |

This chapter explains ba bla bla

34 | 35 |

Chapter 10

36 |

This chapter explains ba bla bla

37 | 38 |

Chapter 11

39 |

This chapter explains ba bla bla

40 | 41 |

Chapter 12

42 |

This chapter explains ba bla bla

43 | 44 |

Chapter 13

45 |

This chapter explains ba bla bla

46 | 47 |

Chapter 14

48 |

This chapter explains ba bla bla

49 | 50 |

Chapter 15

51 |

This chapter explains ba bla bla

52 | 53 |

Chapter 16

54 |

This chapter explains ba bla bla

55 | 56 |

Chapter 17

57 |

This chapter explains ba bla bla

58 | 59 |

Chapter 18

60 |

This chapter explains ba bla bla

61 | 62 |

Chapter 19

63 |

This chapter explains ba bla bla

64 | 65 |

Chapter 20

66 |

This chapter explains ba bla bla

67 | 68 |

Chapter 21

69 |

This chapter explains ba bla bla

70 | 71 |

Chapter 22

72 |

This chapter explains ba bla bla

73 | 74 |

Chapter 23

75 |

This chapter explains ba bla bla

76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /Lectures/Lecture_05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

This is my first heading

11 |

This is my second heading

12 |

This is my third heading

13 |

This is my fourth heading

14 |
This is my fifth heading
15 |
This is my sixth heading
16 | 17 | 18 | 19 | 20 |

This is my first paragraph

21 | 22 | 23 | Click Here 24 | 25 | Send Email 26 | 27 | 28 |
    29 |
  • Maggi
    • 30 |
  • Kurkure
    • 31 |
  • Lays
    • 32 |
33 | 34 | 35 |
    36 |
  1. Kishan
    2. 37 |
  2. Ajit
    3. 38 |
  3. Nayan
    4. 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
SNo.NameTeam
1.KishanBlue
2.AjitRed
3.NayanGreen
64 | 65 | 66 | Jai Shree Krishna 67 | 68 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit explicabo ullam aperiam tempora minus, mollitia obcaecati error ipsum. Facilis excepturi neque suscipit quia.

69 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, dolore.

70 | 71 | 72 |

73 | 25 74 |

75 | 76 | 77 |

78 | O5 79 |

80 | 81 | 82 |

My name is Kishan.
I live in Delhi.

83 | 84 | 85 | 
86 |         My name is 
87 |         Kishan.
88 |         I live in 
89 |         Delhi.
90 |
91 | 92 | 93 |

94 | The push() method adds one or more elements to the end of an array and returns the new length of the 95 | array. 96 |

97 | 98 | 99 | -------------------------------------------------------------------------------- /Lectures/Lecture_06/Lecture_06.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_06/Lecture_06.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_06/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | 5 | image 6 | -------------------------------------------------------------------------------- /Lectures/Lecture_06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

11 |

12 |

this is para.

13 |

14 |

15 | 16 | 17 |
18 |
19 | 20 | 21 |

22 |

this is heading

23 |

24 | 25 | 26 |

hello ji

27 | 28 | 29 |

Lorem ipsum dolor sit amet.

30 | 31 | 32 |

33 | 34 | 35 |

36 | 37 | 38 |
39 | 40 | 41 |

42 | 43 | 44 |
45 | 46 | 47 |
48 | 49 | 50 |
    51 |
  • A
    • 52 |
  • B
    • 53 |
  • C
    • 54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
III
IIIIV
VVI
71 | 72 |
Hello ji (it's Block Element)
73 |
Hello jiiii (it's also Block Element)
74 | 75 | This is me (it's an inline element) 76 | This is meee (it's also an inline element) 77 | 78 |

First para (it's become inline element by just putting display as inline)

79 |

Second para

80 | 81 | 82 | 90 | 91 | 92 | 93 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /Lectures/Lecture_07/Lecture_07.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_07/Lecture_07.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_07/README.md: -------------------------------------------------------------------------------- 1 | ## Previews 2 | 3 | ### table1.html 4 | 01 5 | 6 | ### table2.html 7 | 02 8 | 9 | ### table3.html 10 | 03 11 | 12 | ### table4.html 13 | 04 14 | 15 | ### homework.html 16 | 05 17 | 18 | ### extra.html 19 | 06 20 | -------------------------------------------------------------------------------- /Lectures/Lecture_07/extra.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Extra Table Implementation For Practice

10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |
Purchase Order : 987654321Tutorialbrain - 17th Aug 2023
20 | 
Vender: ABC XYZ Ltd.
21 |     DUMMY STREET, BUILDING 123, NEW DELHI, 110044
22 |
23 | 		25 | 
SHIP TO: MS DHONI
26 |     WILSON GARDEN, SOUTH BLOCK MUMBAI, 123456 
27 |
28 |
QuantityItem CodeDescriptionUnit Price
100IAMCDEPencils20.00
1000IN877Notebooks100.00
500IP8675Pens70.00
Subtotal190.00
GST5%9.50
Grand total$ 199.50
80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /Lectures/Lecture_07/homework.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Homework

10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
DaySeminar
ScheduleTopic
BeginEnd
Monday8:00 AM5:00 PMIntoduction to XML
Validity DTD and Relax NG
Tuesday8:00 AM11:00 AMXPath
11:00 AM2:00 PM
2:00 PM5:00 PMXSL Transformations
Wednesday8:00 AM12:00 PMXSL Formatting Objects
64 | 65 | -------------------------------------------------------------------------------- /Lectures/Lecture_07/table1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

Table 1

11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
Student IdStudent NameGenderAge
1111KishanMale23
2222AjtMale22
3333UtpalMale23
4444NayanMale22
47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Lectures/Lecture_07/table2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Table 2

10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Column 1Column 2Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1
29 | 30 | -------------------------------------------------------------------------------- /Lectures/Lecture_07/table3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Table 3

10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
No.Full NamePositionSalaryType
1Bill GatesFounder Microsoft$1000Company Founder
2Steve JobsFounder Apple$1200
3Larry PageFounder Google$1100
4Mark ZukarbergFounder Facebook$1300
Total Expense:$4600
52 | 53 | -------------------------------------------------------------------------------- /Lectures/Lecture_07/table4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Table 4

10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 |
CountryStateCityStreetMaleFemaleOthers
1KerelaCochinNew Street5006006
Main Street3002882
TrivandrumGuru Street50060010
TVK Street5006002
MaharstraMumbaiKrisha Street7008501
Main Street5006002
SurathNew Street5006004
Billa Street5006002
2AlaskaAKA CentralNew Street2002102
Cross Street1000105010
94 | 95 | -------------------------------------------------------------------------------- /Lectures/Lecture_08/Lecture_08.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_08/Lecture_08.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_08/README.md: -------------------------------------------------------------------------------- 1 | ## Previews 2 | 3 | ### form1.html 4 | 5 | image 6 | 7 | ### form2.html 8 | 9 | image 10 | -------------------------------------------------------------------------------- /Lectures/Lecture_08/form1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Form 1

10 |
11 | 12 | 13 |
14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /Lectures/Lecture_08/form2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Form 2

10 | 11 |
12 |
13 | HTML Dummy Form 14 | 15 | 16 | 17 |

18 | 19 | 20 | 21 |

22 | 23 | 24 | 25 |

26 | 27 | 28 | 33 |

34 | 35 | 36 | 37 |

38 | 39 |

Please select your favorite Web language:

40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |

49 | 50 |

Please select your language:

51 | 52 | 53 | 54 | 55 | 56 |

57 | 58 | 59 | 60 |

61 | 62 | 63 |

64 | 65 | 66 | 67 |
68 |
69 | 70 | -------------------------------------------------------------------------------- /Lectures/Lecture_09/README.md: -------------------------------------------------------------------------------- 1 | ## Previews 2 | 3 | ### project1.html 4 | 5 | image 6 | 7 | ### project2.html 8 | 9 | image 10 | 11 | ### project3.html 12 | 13 | image 14 | 15 | -------------------------------------------------------------------------------- /Lectures/Lecture_09/project1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Event Registration

10 | 11 |
12 | 13 |

14 | 15 | 16 |

17 | 18 | 19 |

20 | 21 | 22 |

28 | 29 |
30 | Topics of Interest: 31 | 32 | 33 |
34 | 35 | 36 |
37 | 38 | 39 | 40 |

41 | 42 |
43 | 44 | 45 | 46 | 47 |
48 | 49 | -------------------------------------------------------------------------------- /Lectures/Lecture_09/project2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Job Application

10 | 11 |
12 | 13 |

14 | 15 | 16 |

17 | 18 | 19 |

20 | 21 | 22 |

23 | 24 | 25 |

26 | 27 |
28 | Skills: 29 | 30 |
31 | 32 | 33 |
34 | 35 | 36 |
37 |

38 | 39 | 40 |

46 | 47 |
48 | Availability: 49 | 50 |
51 | 52 | 53 |
54 |

55 | 56 |
57 | 58 | 59 | 60 | 61 |
62 | 63 | -------------------------------------------------------------------------------- /Lectures/Lecture_09/project3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Complex Form

10 | 11 |
12 |
13 | Personal Information 14 | 15 |

16 | 17 | 18 |

19 | 20 | 21 |

22 | 23 | 24 | 25 | 26 |

Gender: 27 | 28 | 29 | 30 | 31 | 32 |

33 | 34 | 35 | 41 |
42 | 43 |
44 | Address 45 | 46 |

47 | 48 | 49 |

50 | 51 | 52 |

53 | 54 | 55 |

56 |
57 | 58 |
59 | Other Information 60 | 61 |
62 | 63 | 64 | 65 |

66 | 67 | 68 | 69 |
70 | 71 | -------------------------------------------------------------------------------- /Lectures/Lecture_10/README.md: -------------------------------------------------------------------------------- 1 | ## Previews 2 | 3 | ### resume.html 4 | 5 | image 6 | image 7 | 8 | ### faq.html 9 | 10 | image 11 | 12 | ### homework.html 13 | 14 | image 15 | image 16 | image 17 | image 18 | image 19 | -------------------------------------------------------------------------------- /Lectures/Lecture_10/faq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 |

Frequently Asked Questions:

11 | 12 |
13 | 14 | Question 1: What is Lorem Ipsum? 15 | 16 |

17 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 18 |

19 |
20 | 21 |
22 | 23 | Question 2: How do I get started? 24 | 25 |

26 | To get started, you can follow the instructions provided in the user manual. 27 |

28 |
29 | 30 |
31 | 32 | Question 3: Can I customize the settings? 33 | 34 |

35 | Yes, you can customize the settings according to your preferences in the options menu. 36 | 37 | 38 |

39 |
40 | 41 |
42 | 43 | Question 4: Is there a mobile app available? 44 | 45 |

46 | Yes, we have a mobile app available for both iOS and Android devices. You can download it from the respective app stores. 47 | 48 | 49 |

50 |
51 | 52 | 53 |
54 | 55 | Question 5: How can I contact customer support? 56 | 57 |

58 | You can reach our customer support team through the contact form on our website or by calling our helpline at XXX-XXXX. 59 |

60 |
61 | 62 |
63 | 64 | -------------------------------------------------------------------------------- /Lectures/Lecture_10/homework.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 |
11 |

Product Catalog

12 | 17 |
18 | 19 |

Electronics

20 | 21 |
22 |

Laptop

23 | 24 |

Description: High performance laptop with the latest processor and ample storage.

25 |

Price: $999.99

26 |

Availability: In stock

27 | 28 | Laptop
29 | 30 | View Details 31 |
    32 |
  • Brand: XYZ Electronics
    • 33 |
  • Screen Size: 15.6 inches
    • 34 |
  • RAM: 8GB
    • 35 |
  • Storage: 512GB SSD
    • 36 |
37 |
38 | 39 |
40 |

Smartphone

41 | 42 |

Description: Feature-rich smartphone with a high-resolution display and advanced features.

43 |

Price: $699.99

44 |

Availability: Out of stock

45 | 46 | Smartphone
47 | 48 | View Details 49 |
    50 |
  • Brand: ABC Mobiles
    • 51 |
  • Screen Size: 6.5 inches
    • 52 |
  • Camera: 45MP + 12MP
    • 53 |
  • Storage: 128GB
    • 54 |
55 |
56 | 57 |

Clothing

58 |
59 |

T-Shirt

60 | 61 |

Description: Casual and comfortable t-shirt from premium quality cotton.

62 |

Price: $19.99

63 |

Availability: In stock

64 | 65 | Tshirt
66 | 67 | View Details 68 |
    69 |
  • Brand: Fashion Apparel
    • 70 |
  • Color: Yellow
    • 71 |
  • Size: S, M, L
    • 72 |
  • Material: 100% Cotton
    • 73 |
74 |
75 | 76 |
77 |

Jeans

78 | 79 |

Description: Classic jeans with slim fit and stylish design.

80 |

Price: $49.99

81 |

Availability: In stock

82 | 83 | Jeans
84 | 85 | View Details 86 |
    87 |
  • Brand: Denim Co.
    • 88 |
  • Color: Blue
    • 89 |
  • Size: 30, 32, 34
    • 90 |
  • Material: Denim
    • 91 |
92 |
93 | 94 |

Home

95 |
96 |

Table Lamp

97 | 98 |

Description: Modern and stylish table lamp to enhance your home decor.

99 |

Price: $39.99

100 |

Availability: In stock

101 | 102 | Lamp
103 | 104 | View Details 105 |
    106 |
  • Brand: Home Essentials
    • 107 |
  • Color: White
    • 108 |
  • Dimensions: 12 inches (height)
    • 109 |
  • Material: Ceremic, Metal
    • 110 |
111 |
112 | 113 |
114 |

Throw Pillow

115 | 116 |

Description: Soft and comfortable throw pillow for your living room or bedroom.

117 |

Price: $29.99

118 |

Availability: Out of stock

119 | 120 | Pillow
121 | 122 | View Details 123 |
    124 |
  • Brand: Cozy Home
    • 125 |
  • Color: Red
    • 126 |
  • Dimensions: 18 x 18 inches
    • 127 |
  • Material: Cotton Polyester
    • 128 |
129 |
130 | 131 |
132 |

© Product Catalog, All rights reserved.

133 |
134 |
135 | 136 | -------------------------------------------------------------------------------- /Lectures/Lecture_10/img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_10/img.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_10/jeans.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_10/jeans.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_10/lamp.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_10/lamp.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_10/laptop.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_10/laptop.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_10/pillow.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_10/pillow.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_10/resume.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | 12 |
13 |

Kishan Kumar Rai

14 |

Contact : kishan.rai99693@gmail.com

15 |

LinkedIn : linkedin.com/in/kishan-kumar-rai-23112000

16 |

Github : github.com/kishanrajput23

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
KishanPassionate developer with a strong background in software engineering. Committed to delivering high-quality code and building innovative solutions that solve complex problems. Skilled in c++, python and java programming languages. Constantly seeking to learn new technologies and stay up-to-date with industry trends. Dedicated to collaborating with clients and team members to create successful projects that exceed expectations.
25 | 26 |
27 |

Education

28 |
    29 |
  • Bachelor of Technology in Computer Science and Engineering from YMCA University Faridabad
    • 30 |
  • 12th from Govt. Boys. Sr. Sechool No.1, Badarpur, New Delhi
    • 31 |
32 |
33 | 34 |
35 |

Work Experience

36 |

Project Engineer, Wipro

37 |

Dec, 2022 - Present

38 |
    39 |
  • Completed the project entitled "Training Schedule Management" during my PRP Training with using C++ and Unix.
    • 40 |
  • Wrote clean and maintainable code using Unix-based technologies to ensure optimal performance and reliability.
    • 41 |
  • Conducted extensive testing and debugging to ensure the system was fully functional and met all specifications.
    • 42 |
43 | 44 |

Project Engineer Intern, Wipro

45 |

Feb, 2022 - Apr, 2022

46 |
    47 |
  • Completed the project entitled "Auto Insurance Quote System" during my internship with using HTML, CSS, JS MySql, Spring Boot and Hibernate.
    • 48 |
  • Successfully lead a team for completing the capstone project and successfully achieved the project schedule goals.
    • 49 |
  • Learned and developed new functionalities in the existing web app.
    • 50 |
51 |
52 | 53 |
54 |

Skills

55 |
    56 |
  • C++
    • 57 |
  • Java
    • 58 |
  • Python
    • 59 |
  • HTML
    • 60 |
  • CSS
    • 61 |
  • JavaScript
    • 62 |
  • Git
    • 63 |
  • Unix
    • 64 |
65 |
66 | 67 |
68 |

Coding Profiles

69 | 75 |
76 | 77 |
78 |

Projects

79 |
    80 |
  • 81 |

    Jarvis Desktop Voice Assistant

    82 |

    A virtual assistant is an application program that understands Natural Language Voice commands and then complete tasks for the user. It’s implementation done in python language which is very easy for understanding and executing. It also contains different modules and libraries of python which makes an assistant very effective and efficient.

    83 |

    GitHub Link : github.com/kishanrajput23/Jarvis-Desktop-Voice-Assistant

    84 |
    • 85 | 86 |
  • 87 |

    Notepad Clone

    88 |

    This application is a text editor in PYTHON. This text editor developed in a PYTHON TKINTER platform is a replication of the word editors we all are familiar with and which we use quite often on a daily basis.

    89 |
    • 90 |
91 |
92 | 93 |
94 |

Other Achievements

95 |
    96 |
  • Contributed into 20+ Open Source Projects.
    • 97 |
  • Got 91th rank in MLH INIT hackathon among 7000 participants.
    • 98 |
  • Got 89th rank in MLH Local Hack Day Learn hackathon among 6000 participants.
    • 99 |
100 |
101 | 102 |
103 |

© 2023 Kishan Kumar Rai, All rights reserved.

104 |
105 | 106 |
107 | 108 | -------------------------------------------------------------------------------- /Lectures/Lecture_10/smartphone.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_10/smartphone.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_10/tshirt.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_10/tshirt.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_11/Lecture_11.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_11/Lecture_11.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_11/README.md: -------------------------------------------------------------------------------- 1 | ## Previews 2 | 3 | ### index.html 4 | 5 | image 6 | 7 | ### media.html 8 | 9 | image 10 | 11 | image 12 | 13 | image 14 | 15 | image 16 | 17 | image 18 | 19 | image 20 | -------------------------------------------------------------------------------- /Lectures/Lecture_11/audio.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_11/audio.mp3 -------------------------------------------------------------------------------- /Lectures/Lecture_11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 14 | 17 | 20 | 21 |
12 | Logo 13 | 15 | 16 | 18 | 19 |
22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Lectures/Lecture_11/logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_11/logo.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_11/media.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 |

Welcome to Coding Buddies

11 | 12 | 38 |
39 | 40 |
41 |
42 |

About Coding Buddies

43 |

Coding Buddies provide you best quality content by which you can learn and grow yourself. 44 |

45 |
46 | 47 |
48 |

Additional Media

49 | 50 | 51 | 54 | 57 | 58 |
52 | 53 | 55 | 56 |
59 |
60 | 61 |
62 |

All About Hacktoberfest

63 | 64 | 65 | 68 | 71 | 74 | 75 | 76 | 79 | 82 | 85 | 86 |
66 | 67 | 69 | 70 | 72 | 73 |
77 | 78 | 80 | 81 | 83 | 84 |
87 |
88 | 89 |
90 |

Python Projects

91 | 92 | 93 | 96 | 99 | 102 | 103 | 104 | 107 | 110 | 113 | 114 |
94 | 95 | 97 | 98 | 100 | 101 |
105 | 106 | 108 | 109 | 111 | 112 |
115 |
116 | 117 |
118 |

Web Development Projects

119 | 120 | 121 | 124 | 127 | 130 | 131 | 132 | 135 | 138 | 141 | 142 |
122 | 123 | 125 | 126 | 128 | 129 |
133 | 134 | 136 | 137 | 139 | 140 |
143 |
144 | 145 |
146 |

Java Projects

147 | 148 | 149 | 152 | 155 | 158 | 159 | 160 | 163 | 166 | 169 | 170 |
150 | 151 | 153 | 154 | 156 | 157 |
161 | 162 | 164 | 165 | 167 | 168 |
171 |
172 | 173 |
174 |

Open Source Videos

175 | 176 | 177 | 180 | 183 | 186 | 187 | 188 | 191 | 194 | 197 | 198 |
178 | 179 | 181 | 182 | 184 | 185 |
189 | 190 | 192 | 193 | 195 | 196 |
199 |
200 |
201 | 202 |
203 |

© Coding Buddies, All rights reserved.

204 |
205 | 206 | 207 | -------------------------------------------------------------------------------- /Lectures/Lecture_11/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_11/video.mp4 -------------------------------------------------------------------------------- /Lectures/Lecture_12/Lecture_12.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_12/Lecture_12.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_12/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | image 5 | -------------------------------------------------------------------------------- /Lectures/Lecture_12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Favicon, Meta, Title, Etc 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |

Welcome To The Website

24 | 25 | 26 | -------------------------------------------------------------------------------- /Lectures/Lecture_12/logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_12/logo.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_12/script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function(){ 2 | alert("Page Has Been Loaded Successfully.") 3 | }) -------------------------------------------------------------------------------- /Lectures/Lecture_12/style.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | color: coral; 3 | } -------------------------------------------------------------------------------- /Lectures/Lecture_13/Lecture_13.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_13/Lecture_13.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_13/README.md: -------------------------------------------------------------------------------- 1 | ## Previews 2 | 3 | ### index.html 4 | 5 | image 6 | -------------------------------------------------------------------------------- /Lectures/Lecture_13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 20 | 21 | 22 | 23 |

Hello World

24 | 25 |

Hello Duniya

26 | 27 |

This is HTML Document

28 |

This is HTML Document

29 |
This is HTML Document
30 | 31 | 32 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, saepe!

33 | 34 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse itaque consectetur accusamus enim, eaque reprehenderit debitis ea! Cupiditate, voluptate temporibus.

35 | 36 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, veritatis. A adipisci fuga quis, ducimus dolor necessitatibus itaque veniam eos cupiditate sunt cumque perspiciatis assumenda labore minima corporis, recusandae minus.

37 | 38 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta corporis reiciendis nemo, quia quos expedita voluptates esse. Voluptatem beatae voluptas dicta veritatis sapiente quia, fugit accusantium tempora quasi ducimus reprehenderit esse quae molestias quod corrupti, vitae id sit ipsa velit cupiditate vel non. Ut quo deserunt, facere atque ipsam placeat.
39 | 40 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt praesentium suscipit fugit ducimus eius nostrum, dolorum dolore rem impedit eum mollitia voluptatibus quam alias ut soluta, quaerat delectus vitae amet dicta porro. Eligendi quo omnis, aperiam enim eveniet sapiente atque iure repudiandae fuga, cumque quas illo nobis voluptatem at ipsam deserunt non saepe velit quia quae doloremque asperiores rerum numquam!

41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Lectures/Lecture_13/style.css: -------------------------------------------------------------------------------- 1 | /* Element Selector */ 2 | h1 { 3 | font-size: 50; 4 | background-color: yellow; 5 | text-align: center; 6 | } 7 | 8 | p { 9 | color: blueviolet; 10 | } 11 | 12 | article { 13 | color:darkgreen; 14 | } 15 | 16 | /* ID Selector */ 17 | #para1 { 18 | background-color: aqua; 19 | } 20 | 21 | /* Class Selector */ 22 | .center { 23 | text-align: center; 24 | } 25 | 26 | /* Universal Selector */ 27 | 28 | * { 29 | font-size: 20px; 30 | } 31 | 32 | /* Grouping Selector */ 33 | h3, h4, h5 { 34 | color: darkslateblue; 35 | background-color: bisque; 36 | } -------------------------------------------------------------------------------- /Lectures/Lecture_14/Lecture_14.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_14/Lecture_14.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_14/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | 5 | image 6 | -------------------------------------------------------------------------------- /Lectures/Lecture_14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 45 | 46 | 47 |

Hello ji...

48 | 49 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum recusandae aspernatur pariatur fugiat a quod aut commodi quos sed. Nam.

50 | 51 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic praesentium nulla repellendus porro eaque ratione quisquam distinctio aspernatur possimus est.

52 | 53 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, ad saepe! Quas illo aliquid deleniti eveniet delectus amet obcaecati necessitatibus, voluptates voluptatibus fugiat, saepe earum itaque quaerat vero temporibus minus.

54 | 55 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem dolore reprehenderit, alias eveniet obcaecati dolor iusto. Incidunt, perspiciatis beatae laborum consectetur exercitationem debitis facere libero voluptatem necessitatibus hic reprehenderit nam.

56 | 57 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur consectetur quas enim ex rerum excepturi iusto! Alias hic dignissimos voluptate totam! Aliquid molestiae sint nam minima vitae in earum quo!

58 | 59 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus corrupti assumenda distinctio. Numquam iure autem quas officiis saepe necessitatibus impedit repudiandae enim quo, neque commodi ab nostrum. Itaque, quis soluta!

60 | 61 | -------------------------------------------------------------------------------- /Lectures/Lecture_15/Lecture_15.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_15/Lecture_15.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_15/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | 5 | image 6 | -------------------------------------------------------------------------------- /Lectures/Lecture_15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 73 | 74 | 75 |

Hello ji Kese ho saare...

76 | 77 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est a nobis odit atque voluptas quisquam dicta saepe. Dicta, culpa itaque.

78 | 79 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, ipsam nesciunt. Illo, sit? Aperiam minus illum blanditiis necessitatibus nam repellat.

80 | 81 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est a nobis odit atque voluptas quisquam dicta saepe. Dicta, culpa itaque.

82 | 83 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, ipsam nesciunt. Illo, sit? Aperiam minus illum blanditiis necessitatibus nam repellat.

84 | 85 | -------------------------------------------------------------------------------- /Lectures/Lecture_16/Lecture_16.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_16/Lecture_16.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_16/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | 5 | image 6 | -------------------------------------------------------------------------------- /Lectures/Lecture_16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 34 | 35 | 36 |
37 | This is temporary website. 38 |
39 | 40 | 41 | This is first span tag. 42 | 43 | 44 | 45 | This is second span tag. 46 | 47 | 48 | -------------------------------------------------------------------------------- /Lectures/Lecture_17/Lecture_17.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_17/Lecture_17.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_17/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | 5 | image 6 | 7 | image 8 | 9 | image 10 | -------------------------------------------------------------------------------- /Lectures/Lecture_17/image1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_17/image1.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_17/image2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_17/image2.webp -------------------------------------------------------------------------------- /Lectures/Lecture_17/image3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_17/image3.webp -------------------------------------------------------------------------------- /Lectures/Lecture_17/image4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_17/image4.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 41 | 42 | 43 |
44 | Image1 45 | Image2 46 | Image3 47 | Image4 48 |
49 | 50 |
51 | 52 | -------------------------------------------------------------------------------- /Lectures/Lecture_18/Lecture_18.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_18/Lecture_18.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_18/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | 5 | image 6 | 7 | image 8 | -------------------------------------------------------------------------------- /Lectures/Lecture_18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 50 | 51 | 52 |
53 | This is Kishan. 54 |
55 | 56 |

57 | 58 |
59 |
CHILD
60 |
61 |

62 | 63 |
64 | This is Viewport. 65 |
66 |

67 | 68 |
69 |
70 | Hello World!!! 71 |
72 |
73 | 74 |

Lorem ipsum dolor sit amet.

75 | 76 | 77 | -------------------------------------------------------------------------------- /Lectures/Lecture_19/Lecture_19.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_19/Lecture_19.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_19/README.md: -------------------------------------------------------------------------------- 1 | ## Previews 2 | 3 | ### index.html 4 | 5 | image 6 | 7 | ### collapse.html 8 | 9 | image 10 | -------------------------------------------------------------------------------- /Lectures/Lecture_19/collapse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 38 | 39 | 40 |
41 |
A
42 |
B
43 |
C
44 |
45 | 46 |
47 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor voluptatum impedit consequuntur animi dolorum libero ipsum dicta! Recusandae, doloribus, fugiat quidem commodi quia itaque quasi nihil officiis quo earum laboriosam accusantium aut deserunt aperiam facere necessitatibus obcaecati neque? Iste ut non enim asperiores ducimus soluta placeat maiores architecto aut, accusamus, dolor magnam fugiat suscipit consequuntur animi expedita beatae? Esse ex rem velit quas neque deleniti excepturi hic possimus earum voluptatem ipsa quos nulla cumque sint error, quidem vitae, iste enim fugit pariatur repudiandae! Recusandae error nemo, cum mollitia eos fugiat. Unde fuga, laudantium ullam ipsa accusantium eos consequatur corrupti! Soluta expedita, fuga error perspiciatis nulla impedit sequi iusto consequuntur accusantium reiciendis, ratione quasi nihil animi velit inventore accusamus voluptatum perferendis repellendus repudiandae. Dolorum vero cum minima quasi, quas soluta distinctio dolorem, ipsa non tempore accusamus voluptate autem nam sit? Iure tempore at incidunt, alias excepturi veritatis accusantium quis perspiciatis, molestiae eveniet error? Perferendis inventore recusandae voluptates illo officia quod eos. Ut libero, esse eos optio nulla at nisi facilis quod ad, inventore minus. Blanditiis iusto hic veritatis pariatur culpa, sit distinctio? Quidem a nesciunt quas earum debitis sint ut, cum quibusdam ipsam dolorum culpa expedita dolor rerum veniam dicta recusandae harum, voluptatibus illo officiis libero excepturi. Ipsum repudiandae nemo, corrupti, asperiores enim molestias maxime nesciunt eius ab officia tempore. Iste quae dignissimos architecto possimus alias error reiciendis commodi voluptatem facere necessitatibus, obcaecati ex consequuntur esse nam quod debitis earum totam, ducimus praesentium! Aut sed odit sit. Fuga totam laborum eius.

48 |
49 | 50 | -------------------------------------------------------------------------------- /Lectures/Lecture_19/image1.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_19/image1.avif -------------------------------------------------------------------------------- /Lectures/Lecture_19/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_19/image2.png -------------------------------------------------------------------------------- /Lectures/Lecture_19/image3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_19/image3.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 24 | 25 | 26 |
27 | Image1 28 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum officia quam commodi deleniti iusto architecto quis repellendus ducimus esse natus nulla nobis perspiciatis eaque, magnam quaerat laboriosam labore fuga sit, accusamus modi voluptate. Provident eligendi consequuntur obcaecati doloremque accusantium tempora recusandae natus, mollitia doloribus fugit voluptatum officiis. Culpa incidunt consectetur, sint quam libero dicta commodi molestias quis quia molestiae doloremque dolores quidem eius dolore numquam nobis beatae officia, pariatur provident, rerum nam! Maxime voluptatibus corrupti, eligendi minus ea ducimus totam odio optio aliquid ratione itaque non minima natus provident, odit praesentium. Excepturi ut consectetur autem corrupti laudantium culpa at necessitatibus obcaecati doloribus. At velit aut sapiente. Blanditiis, aliquam nemo quis, assumenda fugit recusandae, saepe excepturi necessitatibus cupiditate velit sed similique? Quo, quos? Tempora deleniti ullam neque? Voluptate nisi fuga quam laboriosam cumque quo repudiandae, fugit, explicabo aspernatur pariatur assumenda saepe excepturi, consequuntur nesciunt iste repellendus harum error dolorum. Iste illo alias architecto maxime, dicta rem. Veniam esse odit dolorem id ipsum, quas sunt nihil molestias dicta recusandae velit, optio illo deleniti corrupti tempore perferendis, animi earum eos maxime odio nemo nesciunt! Accusantium nam commodi veritatis similique nemo, modi maiores dolorum eos doloribus. Consequatur magni a, commodi fugiat eius aperiam magnam alias, explicabo sunt dolore iusto porro ipsa! Necessitatibus voluptatum voluptates dolore eligendi numquam amet fugit enim voluptatem aspernatur quam sequi esse at odit ab, vitae totam commodi? Nulla, quisquam doloribus, alias reiciendis nesciunt ratione sed et aperiam blanditiis facere maxime. Repudiandae, obcaecati ea. Earum autem vero ipsum repellat, quae culpa assumenda, blanditiis et dolorem expedita aspernatur ducimus quidem ex numquam incidunt doloribus optio labore facilis facere, modi necessitatibus harum! Ipsa distinctio et hic exercitationem earum inventore impedit, accusamus voluptate numquam optio obcaecati cumque est eaque maxime incidunt ab quidem assumenda vel, ut adipisci ipsam eos unde odio? Consectetur nemo dolores deserunt placeat, quo praesentium inventore laborum. Accusamus delectus, cumque nesciunt minima culpa error. Molestiae animi dolores eius amet aperiam? Quod ipsum assumenda architecto ducimus neque ab sed possimus accusantium voluptates ullam! Obcaecati consequuntur cum quis commodi excepturi ipsa quo laborum at ut id dolor, odit ea, doloremque quos expedita soluta accusamus, enim recusandae magnam inventore animi sapiente! Veritatis hic delectus ipsum, et dolor quod nostrum eveniet ducimus distinctio inventore! Laboriosam optio perferendis itaque corporis soluta modi repudiandae nulla porro accusamus commodi delectus sint fugiat cupiditate tempora fuga, atque asperiores ullam earum officia quam assumenda impedit ut perspiciatis ipsam. Quae, officiis.

29 | 30 | Image2 31 | Image3 32 | 33 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione nisi, nam at, deserunt numquam dicta vitae ex temporibus odio fuga nostrum. Reprehenderit odit asperiores pariatur dolores porro distinctio quam culpa animi est sequi. Velit, perferendis quasi enim, molestiae, rerum sint nisi quia voluptate ea unde mollitia sed officiis saepe ducimus repudiandae eos voluptatibus dolorum magni cum laborum blanditiis debitis. Corrupti laborum ut vel maxime cupiditate ex quibusdam voluptatibus fugiat optio eos quos ipsa non, totam iure doloremque minus unde et aliquid officiis delectus corporis. Quidem iure ea, vitae corrupti aspernatur vero inventore quia debitis, maiores assumenda dolor eos beatae, eaque labore similique maxime quasi laboriosam architecto excepturi? Fuga tenetur sequi consectetur facilis. Adipisci, esse corporis. Quas, dolorem molestias totam laboriosam, architecto repudiandae sint maiores error nesciunt explicabo quidem deleniti magnam ea ut voluptates ratione fuga esse vitae voluptatibus vero aspernatur itaque fugiat omnis? Ipsum rem itaque harum ipsa iste consequuntur, rerum nihil perspiciatis placeat voluptatibus expedita molestiae dolore velit unde atque id ducimus inventore sit quidem illum eligendi ut recusandae distinctio ullam? Fugiat, facilis optio! Non numquam iste quas? Necessitatibus tenetur qui ad ut voluptate alias laboriosam, dignissimos suscipit iure optio ipsa, deleniti ab, expedita eius velit ullam minus sequi accusantium at similique! Odit veniam nesciunt unde pariatur hic corporis culpa, voluptatem accusantium dolorum voluptatibus magnam accusamus minus impedit veritatis, fuga laboriosam. Facilis quaerat ut atque corporis magni nemo minima deleniti possimus, quae quo, vitae eveniet quia tempore adipisci cumque, dignissimos nam facere laborum exercitationem tempora voluptate quis quibusdam. Eaque perferendis minima, nam et ratione sed tempore optio suscipit consectetur, corrupti quos omnis quisquam voluptates repudiandae natus animi delectus? Molestiae neque, ipsam beatae laboriosam debitis nemo blanditiis illum a ea fugit omnis cum delectus accusantium! Illo placeat corporis voluptatem provident suscipit reiciendis eligendi delectus dolore pariatur corrupti. Eos, corporis totam?

34 |
35 | 36 | -------------------------------------------------------------------------------- /Lectures/Lecture_20/Lecture_20.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_20/Lecture_20.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_20/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | 5 | image 6 | -------------------------------------------------------------------------------- /Lectures/Lecture_20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 53 | 54 | 55 |
56 |
Box1
57 |
Box2
58 |
Box3
59 |
Box4
60 |
61 | 62 | -------------------------------------------------------------------------------- /Lectures/Lecture_21/Lecture_21.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_21/Lecture_21.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_21/README.md: -------------------------------------------------------------------------------- 1 | ## Previews 2 | 3 | ### index.html 4 | 5 | image 6 | 7 | image 8 | 9 | ### flex.html 10 | 11 | image 12 | 13 | image 14 | 15 | ### practice.html 16 | 17 | image 18 | 19 | image 20 | 21 | -------------------------------------------------------------------------------- /Lectures/Lecture_21/flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 52 | 53 | 54 |
55 |
Box1
56 |
Box2
57 |
Box3
58 |
Box4
59 |
60 | 61 | -------------------------------------------------------------------------------- /Lectures/Lecture_21/image1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_21/image1.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 34 | 35 | 36 |
37 | Ram Ram Bhai Sarene 38 |
39 | 40 |
41 | 42 |
43 | Hello ji 44 |
45 | 46 | -------------------------------------------------------------------------------- /Lectures/Lecture_21/practice.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 48 | 49 | 50 |
51 |
52 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, aut.

53 | 54 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet, harum.

55 |
56 | 57 |
58 | Image1 59 |
60 |
61 | 62 | -------------------------------------------------------------------------------- /Lectures/Lecture_22/Lecture_22.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_22/Lecture_22.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_22/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | 5 | image 6 | -------------------------------------------------------------------------------- /Lectures/Lecture_22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 87 | 88 | 89 |
90 |
91 |

HELLO WORLD!!!

92 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis praesentium vero voluptates quos facere cum.

93 |
94 |
95 | 96 |
97 |

A chartreuse shadow with blur radius.

98 |
99 | 100 |
101 |

A blue shadow with spread-radius radius.

102 |
103 | 104 |
105 |

A pink shadow with inset

106 |
107 | 108 |
109 |

Multiple shadows

110 |
111 | 112 |

The Text Shadow Property

113 | 114 |

The Text Shadow Property With Blur Effect

115 | 116 |

Text-shadow on white text

117 | 118 |

Text-shadow with red neon glow

119 | 120 |

Text-shadow with red and blue neon glow

121 | 122 | -------------------------------------------------------------------------------- /Lectures/Lecture_23/Lecture_23.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_23/Lecture_23.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_23/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | 5 | ![Untitled](https://github.com/kishanrajput23/Love-Babbar-Web-Development-Course/assets/70385488/07f4dfd7-d849-47a5-b7ef-b6a0820a52cd) 6 | -------------------------------------------------------------------------------- /Lectures/Lecture_23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 95 | 96 | 97 |
98 |
99 |
100 |
101 |
102 | 103 | 104 | -------------------------------------------------------------------------------- /Lectures/Lecture_24/Lecture_24.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_24/Lecture_24.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_24/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | 5 | ![Untitled](https://github.com/kishanrajput23/Love-Babbar-Web-Development-Course/assets/70385488/10962509-2d4e-4dfb-9d12-635082c64b8f) 6 | -------------------------------------------------------------------------------- /Lectures/Lecture_24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /Lectures/Lecture_25/Lecture_25.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_25/Lecture_25.pdf -------------------------------------------------------------------------------- /Lectures/Lecture_25/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### index.html 4 | 5 | ![Untitled (0)](https://github.com/kishanrajput23/Love-Babbar-Web-Development-Course/assets/70385488/ee8c9329-fdf7-4cca-9a42-fe0a3d7e5e46) 6 | ![Untitled (1)](https://github.com/kishanrajput23/Love-Babbar-Web-Development-Course/assets/70385488/975176f1-c4ac-4eba-9944-508a8168569c) 7 | ![Untitled (3)](https://github.com/kishanrajput23/Love-Babbar-Web-Development-Course/assets/70385488/b1c85264-84f5-4db6-8e6e-a13c63534aa7) 8 | -------------------------------------------------------------------------------- /Lectures/Lecture_25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 |

Hello World!!!

13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /Lectures/Lecture_25/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 100vw; 3 | height: 100vh; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | .box { 10 | width: 300px; 11 | height: 300px; 12 | background-color: yellow; 13 | border: solid red 2px; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | transition: all 5s linear 1s; 18 | } 19 | 20 | p { 21 | font-size: 32px; 22 | } 23 | 24 | .box:hover { 25 | transform: rotate(360deg); 26 | /* transform: scale(2); */ 27 | /* transform: skew(45deg); */ 28 | /* transform: translate(300px); */ 29 | } -------------------------------------------------------------------------------- /Lectures/Lecture_26/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | image 4 | image 5 | image 6 | image 7 | -------------------------------------------------------------------------------- /Lectures/Lecture_26/gujiya.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_26/gujiya.avif -------------------------------------------------------------------------------- /Lectures/Lecture_26/gulab_jamun.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_26/gulab_jamun.jpeg -------------------------------------------------------------------------------- /Lectures/Lecture_26/kaju_katli.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_26/kaju_katli.avif -------------------------------------------------------------------------------- /Lectures/Lecture_26/rasmalai.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lecture_26/rasmalai.avif -------------------------------------------------------------------------------- /Lectures/Lecture_26/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | width: 100%; 9 | height: 100%; 10 | background-color: #FFDEE9; 11 | background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%); 12 | } 13 | 14 | .navcontainer { 15 | width: 100%; 16 | min-height: 60px; 17 | background-color: #0093E9; 18 | background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | 24 | nav { 25 | width: 100%; 26 | } 27 | 28 | #navList { 29 | width: 100%; 30 | padding: 15px; 31 | list-style: none; 32 | font-size: 2rem; 33 | display: flex; 34 | justify-content: space-between; 35 | align-items: center; 36 | } 37 | 38 | #navLogo { 39 | font-size: 2rem; 40 | color: azure; 41 | } 42 | 43 | a { 44 | text-decoration: none; 45 | color: azure; 46 | } 47 | 48 | #navItems { 49 | display: flex; 50 | gap: 40px; 51 | } 52 | 53 | .footerBox { 54 | background-color: #0093E9; 55 | background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); 56 | text-align: center; 57 | min-height: 40px; 58 | width: 100%; 59 | } 60 | 61 | footer{ 62 | width: 100%; 63 | } 64 | 65 | .footerBox p { 66 | color: azure; 67 | font-size: 1.8rem; 68 | } 69 | 70 | .contentBox { 71 | width: 70%; 72 | margin: auto; 73 | background-color: white; 74 | display: flex; 75 | flex-direction: column; 76 | gap: 100px; 77 | padding: 3rem; 78 | box-shadow: 1px 1px 30px black; 79 | } 80 | 81 | .item { 82 | display: flex; 83 | justify-content: space-around; 84 | align-items: center; 85 | } 86 | 87 | .rightBox { 88 | position: relative; 89 | overflow: hidden; 90 | transition: all 0.6s 0s linear; 91 | } 92 | 93 | .rightBox img { 94 | height: 400px; 95 | border-radius: 20px; 96 | } 97 | 98 | .rightBox:hover { 99 | transform: scale(1.1); 100 | } 101 | 102 | .rightBox .overlay { 103 | position: absolute; 104 | top: 0; 105 | left: 0; 106 | height: 100%; 107 | width: 100%; 108 | background-color: rgba(25, 24, 24, 0.555); 109 | border-radius: 20px; 110 | display: flex; 111 | justify-content: center; 112 | align-items: center; 113 | opacity: 0; 114 | transform: all 0.6s 0s linear; 115 | } 116 | 117 | .rightBox .overlay span { 118 | color: azure; 119 | font-size: 20px; 120 | } 121 | 122 | .rightBox:hover .overlay{ 123 | opacity: 1; 124 | } 125 | 126 | .leftBox { 127 | display: flex; 128 | flex-direction: column; 129 | gap: 20px; 130 | } -------------------------------------------------------------------------------- /Lectures/Lectute_27/Card1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Card 1 7 | 8 | 9 | 10 |
11 |
12 | QRCode 13 |

Improve your front end skills by developing projects.

14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quisquam tempore, vel laboriosam enim ratione odio corrupti nulla, laudantium odit iure ducimus nisi quia harum cumque itaque maxime.

15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /Lectures/Lectute_27/Card1/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lectute_27/Card1/qrcode.png -------------------------------------------------------------------------------- /Lectures/Lectute_27/Card1/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | width: 100vw; 9 | height: 100vh; 10 | /* min-height: 790px; */ 11 | background-color: #0093E9; 12 | background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .box { 19 | width: 400px; 20 | height: 600px; 21 | background-color: white; 22 | border-radius: 20px; 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | gap: 30px; 27 | padding: 20px; 28 | } 29 | 30 | .box img { 31 | height: 63%; 32 | border-radius: 20px; 33 | } 34 | 35 | .box h2 { 36 | text-align: center; 37 | } 38 | 39 | .box p { 40 | text-align: center; 41 | } -------------------------------------------------------------------------------- /Lectures/Lectute_27/Card2/icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lectute_27/Card2/icon.jpg -------------------------------------------------------------------------------- /Lectures/Lectute_27/Card2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Card 2 7 | 8 | 9 | 10 |
11 |
12 | Icon 13 | 14 |

Order Summary

15 | 16 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, officia ipsum. Neque sunt error nihil?

17 | 18 |
19 |
20 | 21 |
22 | Music 23 |
24 | 25 |
26 |

Annaul Plan

27 |

$99.9/year

28 |
29 |
30 | 31 |
32 | Change 33 |
34 |
35 | 36 | 37 | 38 |
39 | Cancel Order 40 |
41 |
42 |
43 | 44 | -------------------------------------------------------------------------------- /Lectures/Lectute_27/Card2/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lectute_27/Card2/music.png -------------------------------------------------------------------------------- /Lectures/Lectute_27/Card2/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | width: 100vw; 9 | height: 100vh; 10 | background-color: #8EC5FC; 11 | background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .box { 18 | width: 400px; 19 | height: 600px; 20 | background-color: white; 21 | border-radius: 20px; 22 | display: flex; 23 | flex-direction: column; 24 | align-items: center; 25 | gap: 30px; 26 | } 27 | 28 | .box img { 29 | width: 100%; 30 | height: 30%; 31 | border-top-left-radius: 20px; 32 | border-top-right-radius: 20px; 33 | 34 | } 35 | 36 | .box p { 37 | text-align: center; 38 | } 39 | 40 | .amount { 41 | width: 80%; 42 | height: 10%; 43 | background-color: #1780e878; 44 | border-radius: 10px; 45 | display: flex; 46 | justify-content: space-between; 47 | align-items: center; 48 | padding-left: 10px; 49 | padding-right: 10px; 50 | } 51 | 52 | .leftBox { 53 | height: 100%; 54 | display: flex; 55 | align-items: center; 56 | gap: 15px; 57 | } 58 | 59 | #imgBox img { 60 | height: 3.5rem; 61 | width: 3.5rem; 62 | } 63 | 64 | #paymentButton { 65 | width: 80%; 66 | height: 10%; 67 | border-radius: 10px; 68 | background-color: rgb(3, 3, 142); 69 | color: white; 70 | font-size: 17px; 71 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 72 | } 73 | 74 | .cancel a { 75 | text-decoration: none; 76 | color: rgb(102, 101, 101); 77 | font-weight: bold; 78 | font-size: 17px; 79 | } 80 | 81 | @media (max-width:300px) { 82 | .amount { 83 | flex-direction: column; 84 | height: 40%; 85 | } 86 | 87 | .leftBox { 88 | flex-direction: column; 89 | gap: 8px; 90 | } 91 | } -------------------------------------------------------------------------------- /Lectures/Lectute_27/Card3/icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishanrajput23/Love-Babbar-Web-Development-Course/9ba7aacfa0962aa7df7b323350982bfe83114132/Lectures/Lectute_27/Card3/icon.jpg -------------------------------------------------------------------------------- /Lectures/Lectute_27/Card3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Card 3 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |

Get insights that help your business grow.

16 |
17 | 18 |
19 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero modi ea cumque, et sapiente repellendus omnis asperiores quam eveniet tempore optio reiciendis quaerat reprehenderit expedita!

20 |
21 | 22 |
23 |
24 |
10K+
25 |
Comments
26 |
27 | 28 |
29 |
214+
30 |
Paid Users
31 |
32 | 33 |
34 |
12M+
35 |
Views
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | 45 | -------------------------------------------------------------------------------- /Lectures/Lectute_27/Card3/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | width: 100vw; 9 | height: 100vh; 10 | background-color: #85FFBD; 11 | background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | 16 | .box { 17 | background-color: #4e094c; 18 | width: 80%; 19 | height: 70%; 20 | display: flex; 21 | justify-content: space-between; 22 | position: relative; 23 | overflow: hidden; 24 | 25 | .leftBox { 26 | width: 50%; 27 | height: 100%; 28 | display: flex; 29 | flex-direction: column; 30 | gap: 25px; 31 | color: white; 32 | 33 | .textBox { 34 | width: 75%; 35 | margin: auto; 36 | display: flex; 37 | flex-direction: column; 38 | gap: 65px; 39 | 40 | #heading h1 { 41 | font-size: 2.5rem; 42 | } 43 | 44 | #description p { 45 | font-size: 1.1rem; 46 | } 47 | 48 | #status { 49 | display: flex; 50 | flex-direction: row; 51 | justify-content: space-between; 52 | 53 | #number { 54 | font-size: 2rem; 55 | font-weight: bold; 56 | } 57 | 58 | #unit { 59 | text-align: center; 60 | font-size: smaller; 61 | } 62 | } 63 | } 64 | } 65 | 66 | .rightBox { 67 | width: 50%; 68 | height: 100%; 69 | background-image: url('icon.jpg'); 70 | background-size:contain; 71 | background-position: center; 72 | } 73 | } 74 | } 75 | 76 | .box:hover::before { 77 | left: 0%; /* Move the overlay to the right edge of the card */ 78 | } 79 | 80 | .box::before { 81 | content: ""; 82 | position: absolute; 83 | left: -100%; 84 | width: 100%; 85 | height: 100%; 86 | background-color: rgba(0, 0, 0, 0.5); /* Adjust the overlay color and opacity */ 87 | transition: left 5s ease; /* Add transition for smooth animation */ 88 | } 89 | -------------------------------------------------------------------------------- /Lectures/Lectute_27/README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ### Card 1 4 | 5 | image 6 | 7 | ### Card 2 8 | 9 | image 10 | 11 | ### Card 3 12 | 13 | image 14 | -------------------------------------------------------------------------------- /Lectures/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | --------------------------------------------------------------------------------