├── .DS_Store ├── .vscode └── settings.json ├── Class-1 (Introduction to Web and HTML) ├── dogImg.jpeg ├── index.html ├── notes.md ├── script.js └── style.css ├── Class-10(CSS Animations and Keyframes) ├── index.html ├── keyframes.html ├── timing.html └── transforms.html ├── Class-11(Introduction to JS) ├── index.html ├── notes.md ├── script.js └── variables.js ├── Class-12(Control Statements and Functions) ├── Arrays.js ├── Objects.js ├── Strings.js ├── conditionals.js ├── functions.js ├── index.html └── loops.js ├── Class-14(execution Context and Hoisting) ├── hositing.js ├── index.html ├── notes.md └── script.js ├── Class-15 (functional Programming) ├── circle.js ├── exercise.js ├── filter.js ├── hof.js ├── hom.js ├── index.html ├── pure.js ├── reduce.js └── script.js ├── Class-2(List , Forms and Tables) ├── index.html ├── list1.html ├── list2.html ├── listsAssign.md ├── notes.md └── tables.html ├── Class-3(Forms and Semantic Tags) ├── div.html └── form.html ├── Class-4(Introduction to CSS) ├── CSS selectors │ ├── class.html │ ├── q1.html │ ├── q10.html │ ├── q2.html │ ├── q3.html │ ├── q4.html │ ├── q5.html │ ├── q6.html │ ├── q7.html │ ├── q8.html │ └── q9.html ├── index.html ├── notes.md └── style.css ├── Class-5(Box Model) ├── index.html └── notes.md ├── Class-6(Displa and Flexbox) ├── flex.html ├── index.html └── notes.md ├── Class-7(Grid Layout) ├── dog1g.jpeg ├── dog2g.jpeg ├── dog3.jpeg ├── dog4.jpeg ├── dog5.jpeg ├── dog6.jpeg ├── dog7.jpeg ├── dog8.jpeg ├── exercise.html ├── index.html ├── itemLevel.html └── notes.md ├── Class-8(Media Queries) ├── index.html ├── media.html └── units.html ├── Class-9(Speificity and positioning) ├── fixed.html ├── index.html ├── notes.md ├── position.html ├── poster1.jpeg ├── poster2.jpeg ├── poster3.jpeg ├── poster4.jpeg └── sticky.html ├── Question ├── index.html └── test.html ├── portfolio ├── index.html ├── styles.css └── utilities.css ├── portfolioDesignGudie.md ├── practiceSheetEndTerm.md └── test.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinal1224/2029-Group-C-WebDev/01194588f64d9dc5ceb5667cf0406f6b80ed0cfd/.DS_Store -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Class-1 (Introduction to Web and HTML)/dogImg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinal1224/2029-Group-C-WebDev/01194588f64d9dc5ceb5667cf0406f6b80ed0cfd/Class-1 (Introduction to Web and HTML)/dogImg.jpeg -------------------------------------------------------------------------------- /Class-1 (Introduction to Web and HTML)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My First Webiste 7 | 8 | 9 | 10 | 11 |

I am heading 1

12 |

I am haeding 2

13 |

I am haeding 2

14 |

I am haeding 2

15 |
I am haeding 2
16 |
I am haeding 2
17 | 18 | 19 | 20 |

21 | The dog (Canis familiaris or Canis lupus familiaris) is a domesticated 22 | descendant of the gray wolf . Also called the domestic dog, it was 23 | selectively bred from a population of wolves during the Late Pleistocene 24 | by hunter-gatherers. The dog was the first species to be domesticated by 25 | humans, over 14,000 years ago and before the development of agriculture. 26 | Due to their long association with humans, dogs have gained the ability to 27 | thrive on a starch-rich diet that would be inadequate for other canids. 28 |

29 | 30 | 31 | 32 | 33 | my beagle was here 34 | 35 | 36 | 37 | 38 | Go to Google 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Class-1 (Introduction to Web and HTML)/notes.md: -------------------------------------------------------------------------------- 1 | 2 | # Class Notes- Web Fundamentals and Intro to HTML 3 | 4 | ## Introduction 5 | 6 | When we think about accessing a website, there's more happening behind the scenes than meets the eye. The URL, or Uniform Resource Locator, is what we usually type into the address bar to access a web page. However, the URL represents much more than just a web address. It's a pathway to the actual resource we're trying to access on the internet. 7 | 8 | 9 | ## Process 10 | To break it down, when we enter a URL, the full form of URL comes into play: **Uniform Resource Locator**. This term accurately describes what it does — it locates a specific resource on the internet. This resource could be anything from a text document to a video, and the server's job is to provide us with that resource. 11 | 12 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/110/original/upload_06940025115633bec555d541d722b876.png?1695109040) 13 | 14 | 15 | A **server**, in this context, isn't a physical location but rather a program running somewhere in the world. This program generates the website content for us. It's important to note that a server is not a database. Rather, it's a responsive entity that resides somewhere in the vast expanse of the digital world. Imagine it as a helpful entity that receives your request and promptly serves you the requested information. 16 | 17 | 18 | ## Dairy Farm Analogy 19 | Here's an analogy to help clarify the roles involved: Imagine you own a dairy farm and have numerous customers who regularly place orders for dairy products. To manage this influx of orders, you have an **operations team** that handles the order-taking process. They ensure that customers' requests are recorded accurately and are then forwarded to the **production team**. 20 | 21 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/111/original/upload_9cef5b39282b29f01216e706282bbb64.png?1695109075) 22 | 23 | 24 | In the context of websites, the operations team can be likened to the **DNS (Domain Name System)** system. The DNS system acts like an operations team, taking in requests and translating them into specific IP addresses. Think of DNS as a phonebook for the internet. When you enter a domain name like "scaler.com," the DNS system translates it to an IP address that points to a particular server. 25 | 26 | However, it's important to note that the server itself is not where the data comes from. Instead, it's comparable to the dairy farm in our analogy—it's responsible for assembling and providing the products. In our website world, the actual data resides in a **database**. This database is akin to a **warehouse** for the dairy farm. All the products are stored there, ready to be accessed when needed. 27 | 28 | When a request is made, the server applies specific protocols and data logic to retrieve the necessary information from the database. This process is what ensures that we receive the correct data as a response to our request. 29 | 30 | Bringing it all together, the customers in our dairy farm analogy represent clients or users of the website. The operations team corresponds to the DNS system, efficiently directing requests. The dairy farm itself serves as the server, assembling and providing the desired information. And finally, the warehouse embodies the database, housing all the necessary data for the website. 31 | 32 | In the grand scheme of things, even though we might simply see a website's interface through our browser, there's a complex interplay of components behind every web page that ensures we get the right information at the right time. 33 | 34 | 35 | ### HTML boiler plate code 36 | 37 | #### Code 38 | ```html 39 | 40 | 41 | 42 | 43 | 44 | HTML demo 45 | 46 | 47 |

Hello, world !

48 | 49 | 50 | ``` 51 | * ``: It's like saying, "Hey, we're starting an HTML page!" ( actually HTML5 which is the latest version of HTML ) 52 | 53 | 54 | * ``: This is the main container of your page, and lang="en" means it's in English. 55 | 56 | * `Document`: This is your page's title. You'll see it in the browser tab. 57 | 58 | * Inside ``, there are two parts: 59 | ``: Think of it as the brain of your page. 60 | 61 | * ``: This is where all the content you see on the webpage goes, like text and images. 62 | 63 | * ``: This makes sure your page can understand a wide range of characters from different languages. 64 | When you're coding, you might use characters that are specific to certain languages, like accents in French or characters in Chinese. 65 | The UTF-8 character set includes a huge array of these characters from different languages. Without specifying UTF-8, your browser might not correctly interpret and display these characters, leading to garbled text or question marks on your webpage. 66 | 67 | 68 | * 78 | 79 | 80 | Basic HTML 81 | 82 | 83 |
84 |

Welcome to Scalar Topics

85 |

86 | We're glad you're here 87 |

88 |
89 | 90 | 91 | ``` 92 | #### Output 93 | 94 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/112/original/upload_b1f0471a9f3040bdd40eb364e9101835.png?1695109208) 95 | 96 | #### Section 97 | Sections are used to structure the content of a web page into logical parts, such as chapters, articles, or different sections of a document. 98 | 99 | #### Code: 100 | ```html 101 | 102 | 103 | 104 | Basic HTML 105 | 106 | 107 |
108 |

Section Title

109 |

This is a section of content.

110 | 111 |
112 | 113 | 114 | ``` 115 | ### Tags and buttons 116 | 117 | ### Header tags 118 | 119 | Header tags are used to structure the hierarchy of content on a webpage, with `

` typically being the main title and `

`, `

`, and so on used for subsections. They help improve the accessibility and readability of content. 120 | 121 | #### Code: 122 | 123 | ```html 124 |

Main Heading

125 |

Subheading

126 |

Sub-subheading

127 | ``` 128 | 129 | #### Output 130 | 131 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/113/original/upload_0666ce092529c955114832a23824d462.png?1695109287) 132 | 133 | #### Anchor tags 134 | Anchor tags are used to link to other web pages or resources, both within the same website or externally to other websites. 135 | 136 | #### Code: 137 | ```html 138 | 139 | 140 | 141 | Basic HTML 142 | 143 | 144 |
145 | Learn autoboxing - in - java 146 |
147 | 148 | 149 | 150 | ``` 151 | #### Output 152 | 153 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/114/original/upload_a280807eb2f3df89d88691096051f0eb.png?1695109351) 154 | 155 | #### Image tags 156 | Image tags are used to display graphics, photographs, icons, or any other visual content on a webpage. The alt attribute provides alternative text for accessibility and SEO purposes. 157 | 158 | #### Code: 159 | ```html 160 | 161 | 162 | 163 | Basic HTML 164 | 165 | 166 | Description of the image 167 | 168 | 169 | ``` 170 | #### Output 171 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/115/original/upload_4f0ea4a42e75394bc79c854cbe6cafce.png?1695109387) 172 | 173 | #### Buttons 174 | Button elements are used to create clickable elements that can trigger actions when clicked, such as submitting a form or triggering JavaScript functions. 175 | 176 | #### Code: 177 | ```html 178 | 179 | ``` 180 | #### Output 181 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/116/original/upload_e873e3ecb310330c64503dafcf33ad53.png?1695109456) 182 | 183 | 184 | ## Semantic tags 185 | Imagine a book with no headings, index, markings, chapters, just text all the way through Will it be easy to read? Nope! 186 | 187 | 188 | if you have a book with intro, bibliography, index, chapters, then it makes it more usable and readable 189 | 190 | Semantic tags gives a way of moving away from generic tags like
and which don't convey specific meanings. 191 | 192 | ## Why Do I Need to Use Semantic HTML Tags? 193 | Besides the obvious reason that semantic HTML tags are easier to read and understand—for example, by web developers reviewing the code—there are two more specific reasons why you should always use semantic tags. 194 | ### Accessibility 195 | For sighted users, it’s easy to identify the various parts of a webpage. Headers, footers, and the main content are all immediately visually apparent. 196 | However, it is not that easy for users who are **blind or visually impaired** and rely on screen readers. 197 | The proper use of HTML semantic tags will allow these readers to understand your content better because their screen readers will communicate your content more accurately. 198 | ### SEO 199 | Semantic HTML tags are important for [SEO](https://www.semrush.com/blog/what-is-seo/) (search engine optimization) because they indicate the role of the content within the tags. 200 | That information gives [search engine crawlers](https://www.semrush.com/blog/site-crawler/), like Googlebot, a better understanding of your content. This increases the chances that your content will be selected as a candidate for ranking on the search engine results page (SERP) for relevant keywords. 201 | To put it simply, pages with correctly implemented semantic HTML have an advantage in SEO over those that don’t. 202 | 203 | Explain with this Diagram how Semantic tags makes the Layout more meaningful 204 | 205 | 206 | 207 | 208 | Semantic tags were introduced with HTML5. 209 | 210 | Create a new semantic.html file and copy the assets folder for portfolio , show the Demo and then start with writing basic Semantic HTML code 211 | 212 | 213 | ## Section Tag - A better alternate to Divs 214 | Sections are used to structure the content of a web page into logical parts, such as chapters, articles, or different sections of a document. 215 | 216 | 217 | #### Code: 218 | ```html 219 | 220 | 221 | 222 | Basic HTML 223 | 224 | 225 |
226 |

Section Title

227 |

This is a section of content.

228 |
229 | 230 | 231 | ``` 232 | 233 | 234 | ## Header tags 235 | 236 | Header tags are used to structure the hierarchy of content on a webpage, with `

` typically being the main title and `

`, `

`, and so on used for subsections. They help improve the accessibility and readability of content. 237 | 238 | #### Code: 239 | 240 | ```html 241 |

Main Heading

242 |

Subheading

243 |

Sub-subheading

244 | ``` 245 | 246 | #### Output 247 | 248 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/113/original/upload_0666ce092529c955114832a23824d462.png?1695109287) 249 | 250 | 251 | #### Output 252 | 253 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/114/original/upload_a280807eb2f3df89d88691096051f0eb.png?1695109351) 254 | 255 | 256 | 257 | 258 | ## Create the Structure of the Portfolio 259 | 260 | 261 | #### Code: 262 | ```html 263 | 264 | 265 | 266 | 267 | 268 | 269 | Portfolio 270 | 271 | 272 | 273 |
274 |
275 | 288 |
289 |
290 |
291 | Profile 292 |
293 |
294 |
Mrinal Bhattacharya
295 |

I'm a Frontend
Developer

296 |

Description

297 |
298 | 299 |
300 |
301 |
302 |
303 | 304 |
305 |
306 |
307 | profile pic 308 |
309 |
310 |

About Me

311 |

Hello! I'm Mrinal Bhattacharya

312 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque adipisci distinctio obcaecati aliquid, 313 | quia tempora quis optio repudiandae officia earum? 314 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. 315 |

316 |
317 | 318 | 319 | 320 | 321 |
322 |
323 |
324 |
325 | 326 | 327 |
328 |
329 |

My Projects

330 |

I mostly work with HTML ,CSS ,JavaScript , React and Node

331 |
332 |
333 | 334 |

Calculator

335 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?

336 |
337 |
338 | 339 |

Shopping Cart

340 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?

341 |
342 |
343 | 344 |

To do List

345 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?

346 |
347 |
348 |
349 |
350 | 351 | 352 | 353 | 354 | 355 | ``` 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | # Further Reading 368 | 369 | 370 | ## The Complete process of request/response cycle and IP resolution-> 371 | 372 | When we type in a website’s name 373 | The browser parses the information contained in the URL. 374 | the protocol used is (“https”) 375 | 376 | Now suppose you go to the Browser and write something on the Search field 377 | 378 | Suppose you write - www.scaler.com 379 | this is a address somewhere stored in the Server but to locate this there must a unique identifier to it right? 380 | 381 | Like if you send someone a message you will need there phone number or if you send someone a courier you will need there address (so to locate anaything in particular) you need a unique Entity. 382 | 383 | For this case (www.scaler.com) has a unique address that is know as the IP address 384 | 385 | * What exactly is an IP address? 386 | 387 | Imagine you live in a town, and every house in the town has a unique address. This address helps people find your house when they want to visit you or send you something. In the world of the internet, devices like computers, smartphones, and servers also need unique addresses to communicate with each other. That's where IP addresses come in. 388 | 389 | IP stands for "Internet Protocol," and an IP address is like a digital version of a house address. It's a set of numbers assigned to each device connected to the internet, helping data find its way to the right destination. 390 | 391 | There are two types of IP addresses: IPv4 (Internet Protocol version 4) and IPv6 (Internet Protocol version 6). IPv4 addresses look like a series of four numbers separated by dots, like 192.168.1.1. IPv6 addresses are longer and use a combination of numbers and letters. 392 | 393 | Just like your home address, IP addresses are used for different purposes. When you visit a website, your device uses the website's IP address to connect and fetch information. When you send an email, the email servers use IP addresses to locate and deliver your message to the recipient's device. 394 | 395 | In summary, think of an IP address as a digital address for devices on the internet, helping them communicate and share information with each other, just like houses in a town have physical addresses for communication. 396 | 397 | 398 | So www.scaler.com will have a IP address but how this will be retrived? 399 | 400 | That's where DNS comes into the Picture 401 | 402 | Let's Understand what DNS it's cache and lookup is and How it works 403 | 404 | * DNS (Domain Name System): 405 | 406 | The Domain Name System is like a phonebook for the internet. Instead of remembering numerical IP addresses, which can be difficult for humans, we use domain names (like www.scaler.com) to access websites and online services. 407 | 408 | DNS translates these human-readable domain names into IP addresses that computers can understand. It's a distributed system that helps route traffic on the internet. 409 | 410 | * DNS Cache: 411 | 412 | DNS servers store recently accessed domain names and their corresponding IP addresses in a temporary memory called the DNS cache. 413 | When you visit a website or use an online service for the first time, your computer queries a DNS server to get the IP address associated with the domain name. The result is then stored in the DNS cache for a certain period. 414 | 415 | The DNS cache helps speed up subsequent visits to the same website or service, as your computer can use the stored information instead of querying the DNS server again. 416 | If the address is not foubd in cache then the whole lookup process starts 417 | 418 | 419 | Let's underdtand the lookup process 420 | 421 | 422 | * DNS Lookup: 423 | 424 | When you enter a website's domain name into your browser (e.g., www.example.com), your computer initiates a DNS lookup to find the corresponding IP address. 425 | The DNS lookup process involves several steps: 426 | 427 | Local DNS Resolver: Your computer first checks its local DNS cache to see if it already knows the IP address associated with the domain. If it does, the lookup is complete. 428 | 429 | Recursive DNS Server: If the local cache doesn't have the information, your computer contacts a recursive DNS server. This server may have the IP address in its cache or will proceed to find it. 430 | 431 | Root DNS Server, TLD DNS Server, Authoritative DNS Server: If the recursive server doesn't have the information, it contacts the root DNS server, then the Top-Level Domain (TLD) DNS server, and finally the authoritative DNS server for the specific domain. The authoritative server holds the actual IP address for the requested domain. 432 | 433 | Response: The IP address is sent back through the same chain to your computer, which then stores it in its local DNS cache for future use. 434 | 435 | In summary, DNS is a crucial system that translates human-readable domain names into machine-readable IP addresses, allowing us to access websites and online services. The DNS cache stores this information temporarily, and the DNS lookup process involves multiple steps to find the IP address associated with a given domain. 436 | 437 | 438 | Now the IP address is obtained , Now What? 439 | 440 | * TCP/IP handshaking Enters the picture 441 | 442 | 443 | Initiating the TCP Connection: 444 | 445 | After obtaining the IP address through DNS, your computer, as the client, initiates a TCP connection with the server hosting the website. 446 | The client sends a "SYN" (synchronize) packet to the server. This packet includes the client's initial sequence number. 447 | 448 | Server Responds: 449 | 450 | The server, upon receiving the SYN packet, responds with a "SYN-ACK" (synchronize-acknowledge) packet. This packet acknowledges the receipt of the SYN packet and includes the server's initial sequence number. 451 | 452 | 453 | Finalizing the Handshake: 454 | 455 | Your computer, upon receiving the SYN-ACK packet, sends an "ACK" (acknowledge) packet back to the server. This packet confirms the receipt of the SYN-ACK packet and completes the three-way handshake. 456 | 457 | The server, upon receiving the ACK packet, acknowledges the completion of the handshake. 458 | 459 | 460 | Established Connection: 461 | 462 | With the three-way handshake completed successfully, a TCP connection is established between your computer and the server. This connection is now ready for data exchange. 463 | 464 | 465 | Data Exchange: 466 | 467 | Once the TCP connection is established, your computer can send requests to the server, and the server can respond with the requested data. TCP ensures the reliable and orderly exchange of data by breaking it down into packets, managing their transmission, and reassembling them at the destination. 468 | 469 | 470 | Closing the Connection: 471 | 472 | After the data exchange is complete, the TCP connection is closed using a process known as the "four-way handshake." It involves sending a "FIN" (finish) packet from one side, receiving an acknowledgment, sending a corresponding FIN-ACK packet from the other side, and finally receiving a final acknowledgment. 473 | 474 | 475 | ![](https://scaler.com/topics/images/steps-of-a-3-way-handshake-for-terminating-the-connection.webp) 476 | 477 | 478 | 479 | 480 | In summary, the TCP/IP handshake after retrieving an IP address through DNS involves a three-way handshake to establish a connection between the client and the server. Once the connection is established, data can be exchanged in a reliable and orderly manner. Finally, when the data exchange is complete, the connection is closed using the four-way handshake. This process ensures the integrity and reliability of communication over the internet. 481 | 482 | 483 | ## Extra Resources 484 | 1. **Online Resources:** 485 | - **HowStuffWorks - How the Internet Infrastructure Works:** 486 | - [HowStuffWorks - Internet Infrastructure](https://computer.howstuffworks.com/internet-infrastructure.htm) 487 | 488 | 489 | 2. **YouTube Videos:** 490 | - **"The Internet: Wires, Cables & WiFi" by ColdFusion:** 491 | - [The Internet: Wires, Cables & WiFi](https://www.youtube.com/watch?v=ZhEf7e4kopM) 492 | 493 | 494 | 3. **Documentation and Standards:** 495 | - **W3C (World Wide Web Consortium):** 496 | - [W3C Website](https://www.w3.org/) 497 | -------------------------------------------------------------------------------- /Class-1 (Introduction to Web and HTML)/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinal1224/2029-Group-C-WebDev/01194588f64d9dc5ceb5667cf0406f6b80ed0cfd/Class-1 (Introduction to Web and HTML)/script.js -------------------------------------------------------------------------------- /Class-1 (Introduction to Web and HTML)/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinal1224/2029-Group-C-WebDev/01194588f64d9dc5ceb5667cf0406f6b80ed0cfd/Class-1 (Introduction to Web and HTML)/style.css -------------------------------------------------------------------------------- /Class-10(CSS Animations and Keyframes)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Class-10(CSS Animations and Keyframes)/keyframes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 56 | 57 | 58 | 59 | 60 |
61 |
Animatee!!
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /Class-10(CSS Animations and Keyframes)/timing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Timing Function Playground 6 | 63 | 64 | 65 |
linear
66 |
ease
67 |
ease-in
68 |
ease-out
69 |
ease-in-out
70 |
cubic-bezier
71 | 72 | 75 | 76 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /Class-10(CSS Animations and Keyframes)/transforms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Transform Playground 6 | 66 | 67 | 68 |
Translate
69 |
Scale
70 |
Rotate
71 |
Skew
72 |
Combo
73 |
Origin
74 |
3D
75 | 76 | 77 | -------------------------------------------------------------------------------- /Class-11(Introduction to JS)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Class-11(Introduction to JS)/notes.md: -------------------------------------------------------------------------------- 1 | # Introduction to JavaScript 2 | 3 | 4 | ## Agenda 5 | 6 | - What is JavaScript? 7 | - How JS runs on the Browser 8 | - Installing Node.js 9 | - How Node.js runs JS code 10 | - Variables in JavaScript 11 | - Conditional Statements 12 | - How Js is a Dynamically Typed Language 13 | - DataTypes in JS (Primitive and Refrenece) 14 | - Functions in JS 15 | - Arrays in JS 16 | - Objects in JS 17 | 18 | 19 | ### Definition 20 | 21 | JavaScript is a language that is used to add interactivity to your websites, web apps etc.. 22 | 23 | #### History of JavaScript 24 | * Before JavaScript was developed, the information displayed was static which means nothing can be done by the user. **Brendan Eich** developed JavaScript in just 10 days. LiveScript was the name given before JavaScript. Due to the popularity of Java programming language, Brendan gave the name JavaScript instead of LiveScript. 25 | 26 | * JavaScript was introduced for browsers. Browsers like Chrome, Mozilla Firefox, and Safari support JavaScript. 27 | 28 | ### How does JavaScript work in a Browser? 29 | 30 | #### Output in JavaScript 31 | 32 | When you click on inspect in your browser, a console window is opened which allows you to write JavaScript code. 33 | 34 | Using `console.log` in JavaScript we can print out anything as we do in the other programming languages in Java we use `System.out.println()`. 35 | 36 | ```javascript! 37 | console.log("Hello"); 38 | ``` 39 | 40 | #### Variable in JavaScript 41 | 42 | To define a variable in JavaScript `var` keyword is used. 43 | 44 | ```javascript! 45 | var a = "Scaler"; 46 | console.log(a); 47 | ``` 48 | 49 | 50 | What makes the Browser run the JavaScript code? 51 | 52 | --> There are **JavaScript Engines** that are associated with the browsers. 53 | 54 | For example, in Chrome: V8 Engine is used, while in Firefox: Spider Monkey is used. 55 | 56 | > As Developers cannot use developer tools and develop an application using the console of the browser, we will use VS code and link the JavaScript file with the HTML file. By using the ` 75 | 76 | 77 | ``` 78 | 79 | 80 | #### Creating External JavaScript file 81 | 82 | Similar to CSS, an External JavaScript file can be created using the `.js` extension. 83 | 84 | The External JavaScript file can be linked to the HTML file using ``. The ` 101 | 102 | 103 | 104 | ``` 105 | 106 | - see the output in the Browser 107 | 108 | 109 | ### Download Nodejs 110 | 111 | JavaScript is used for browsers only so how can we run it in our local machines? To overcome this, Ryan Dahl came up with *Node.js* which is an open-source JavaScript runtime environment. Node.js can be downloaded using [Nodejs](https://nodejs.org). It is recommended to download the LTS (long-term support) version. 112 | 113 | To check if Nodejs is downloaded open the terminal on a Macbook or cmd in Windows. 114 | 115 | Run the following command to check if it is downloaded successfully. 116 | 117 | ``` 118 | node --version 119 | ``` 120 | 121 | To start using node just type `node` in your terminal it will open the node environment which will allow you to run JavaScript in your local system. 122 | 123 | #### Applications of JavaScript 124 | 125 | After the invention of Nodejs JavaScript could be used for the following: 126 | 127 | * JavaScript can be used for server-side development (to create servers or applications). 128 | * Tools and technologies used for web development like React js, Express js and MongoDB came into existence. 129 | * Mobile development also came into existence like React Native, and Ionic used to develop mobile applications. 130 | * Desktop application - Electron js. For example - Vs code is built on Electron js. 131 | * Tensorflow JS in AI and Machine learning is also being used currently. 132 | * Metaverse - AR/VR where JavaScript can be used. 133 | 134 | #### Use node in Vs code 135 | 136 | There is a terminal in Vs code that can be accessed for a particular file as well by right-clicking on the file and selecting the option 'Open in Integrated Terminal' as shown in the image. 137 | 138 | 139 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/082/original/upload_7c7f93132192b26889fa30d9d6980abc.png?1695318440) 140 | 141 | 142 | As you can see in the image, there is a file named JsNode.js which is created in folder Class-8 containing `console.log('Hi from Node js')`. 143 | 144 | It can be accessed in the Vs code terminal by running the following command: 145 | 146 | ``` 147 | Node JsNode.js 148 | ``` 149 | 150 | The above command will give the result as: 151 | 152 | ``` 153 | Hi from Node js 154 | ``` 155 | 156 | > If there is an error while running the node js command which is commandNotFoundException then you can watch the following [video](https://https://www.youtube.com/watch?v=sQXWVrb52kw) for Windows machines because this problem is mostly faced by Windows users. 157 | 158 | ### Variables in JavaScript 159 | 160 | **Definition** 161 | 162 | Variables are a memory space in a system that is used to store values. These values can be a number, string, or boolean values and many more. 163 | 164 | The `var` keyword is used in JavaScript to declare a variable. 165 | 166 | For example: 167 | 168 | ```javascript! 169 | var a = 30 170 | console.log(a); 171 | ``` 172 | 173 | The result will be 30. 174 | 175 | > JavaScript does not care about data type initialization for variables and these types of languages are known as loosely typed languages. The languages that care about data type initialization are known as strictly typed languages. 176 | 177 | #### Dynamically Typed language 178 | 179 | Values can be assigned to any variables anytime, anywhere with the same name, and print out all the possible output. For example: 180 | 181 | ```javascript! 182 | var a = true 183 | console.log(a) 184 | 185 | var a = false 186 | console.log(a) 187 | ``` 188 | 189 | The above code will print both true and false. 190 | 191 | #### Problems of Var keyword 192 | 193 | * The var keyword allows the re-declaration of variables. In ES6, two keywords: let and const were introduced which does not allow the re-declaration of variables. *(ES stands for Ecma Script which is a set of rules defined for JavaScript which keeps getting updated)* 194 | 195 | **Example** 196 | 197 | ```javascript! 198 | let a = 'Delhi' 199 | console.log(a) 200 | 201 | let a = 'Mumbai' 202 | console.log(a) 203 | ``` 204 | 205 | The above code will throw an error named `Identifier a has already been declared`. 206 | 207 | **Example** 208 | 209 | ```javascript! 210 | let r = 10; 211 | r = 30; //reinitialising the value 212 | console.log(r) 213 | ``` 214 | 215 | - reinitializing with let is possible 216 | 217 | * The var and let keyword allows re-initialization while const does not. The const keyword once declared will always remain constant. 218 | 219 | Const behavior 220 | 221 | ```js 222 | const pi = 3.14 223 | pi = 3.15 // re-assign a variable not allowed 224 | console.log(pi) 225 | 226 | ``` 227 | 228 | For const variables, declarations and assignment needs to be done in one line 229 | 230 | 231 | 232 | 233 | Let's understand it using a chart: 234 | 235 | | | Re-declaration | Re-Initialization | 236 | | :--------: | :--------: | :--------: | 237 | | **var** | Yes | Yes | 238 | |**let** | No | Yes | 239 | |**const** | No | No | 240 | 241 | > If const is not initialised then it will throw an error. Therefore, it is necessary to declare and initialise const once. 242 | 243 | 244 | ### DataTypes in JavaScript 245 | 246 | Datatypes are divided into two types - **Primitive Datatypes and Reference Datatypes**. 247 | 248 | #### Primitive DataTypes 249 | 250 | * **Numbers** 251 | 252 | Numbers can be declared in JavaScript as shown below: 253 | 254 | ```javascript! 255 | let a = 20 256 | let b = 1000000000 257 | let c = 12.57 258 | let d = -10.12 259 | 260 | let f = 2/0 // Infinity 261 | 262 | let s = 'hello'/0 -> NaN 263 | 264 | ``` 265 | * **Strings** 266 | 267 | ```javascript! 268 | let str = 'JavaScript' 269 | let str2 = "Hello" 270 | let str3 = `Hi, this is a string` // backticks are known as template literal 271 | ``` 272 | Hotstar cricket audience count 273 | Backticks allow us to embed variables and expressions in string 274 | 275 | ```js 276 | let activeUsers = 100 277 | const message = `There are ${activeUsers} users online` 278 | ``` 279 | 280 | 281 | 282 | * **Boolean** 283 | 284 | ```javascript! 285 | let isEven = true 286 | let isOdd = false 287 | ``` 288 | 289 | * **Undefined** 290 | When a variable is not defined it is set as undefined by default. 291 | 292 | ```javascript! 293 | let a; 294 | ``` 295 | * **Null** 296 | Null is assigned to a variable when we say that a value for this doesnt's exists or can be assigned later. 297 | Null is a special value that represents ‘nothing’, ‘empty’ or value unknown 298 | null is an assignment value that represents a deliberate non-value (or an empty value). It indicates the absence of any value or object. 299 | 300 | 301 | ```javascript! 302 | let a = null 303 | ``` 304 | 305 | While both null and undefined represent "no value", the choice between them is not interchangeable. undefined is used when a value has not been assigned and is the default state, while null is used to explicitly denote a null or "empty" value. -------------------------------------------------------------------------------- /Class-11(Introduction to JS)/script.js: -------------------------------------------------------------------------------- 1 | console.log('hello from Browser') 2 | 3 | // Variables 4 | var a; // undefined 5 | var b = 1.2 6 | var c = 200000000 // Numbers 7 | 8 | var d= 'hello' // String 9 | 10 | var d= `hello ${b}` // Template Literals 11 | 12 | var e = true // Boolean 13 | 14 | var f = null // null 15 | 16 | 17 | console.log(a) 18 | console.log(d) 19 | console.log(e) 20 | 21 | 22 | // Primitive DataTypes 23 | //undefined 24 | // Number 25 | // Strings 26 | // boolean 27 | //null 28 | -------------------------------------------------------------------------------- /Class-11(Introduction to JS)/variables.js: -------------------------------------------------------------------------------- 1 | var a = 'hello' 2 | 3 | var a = 12 4 | 5 | a = 16 6 | 7 | 8 | 9 | // Redeclaration is bad 10 | // Reassignment 11 | 12 | // let and const 13 | let b ='Hello from let' 14 | 15 | // let b= 30 // Redecalartion is not allowed 16 | 17 | b = 40 // Reassigning is allowed 18 | console.log(b) 19 | 20 | // const 21 | 22 | const c = 20 23 | console.log(c) 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Class-12(Control Statements and Functions)/Arrays.js: -------------------------------------------------------------------------------- 1 | // Arrays 2 | let arr = [1 ,2 ,3,4 ,5 , 'scaler' , true , null , undefined] 3 | 4 | 5 | 6 | let cars=['BMW' , "Pajero" , "Alto"] 7 | 8 | 9 | // access an element 10 | 11 | // console.log(cars[1]) 12 | 13 | // modify the array - basic Array Methods 14 | 15 | // If you want to add some value at the end of an Array 16 | 17 | // push 18 | // cars.push('Nano') 19 | 20 | // pop - remove element from the end 21 | 22 | // const pop1 = cars.pop() 23 | // console.log(pop1) 24 | // // cars.pop() 25 | // // cars.pop() 26 | // console.log(cars) 27 | 28 | // shift , unshift 29 | 30 | console.log(cars) 31 | 32 | // shift 33 | 34 | cars.shift() 35 | console.log(cars) 36 | 37 | // unShift 38 | 39 | cars.unshift('Mercedes') 40 | console.log(cars) 41 | 42 | 43 | // splice and slice 44 | 45 | let arr1 = [1 ,2 ,3 ,4 ,5 ,6] 46 | 47 | const slicedArr = arr1.slice(1 ,5) 48 | 49 | console.log(slicedArr) 50 | console.log(arr1) 51 | 52 | // const fruits = ['cherry' , 'apple' , 'banana' ,'orange'] 53 | 54 | // const slicedFruits = fruits.slice(1 ,3) 55 | // console.log(slicedFruits) 56 | 57 | 58 | // Splice 59 | 60 | const fruits = ['cherry' , 'apple' , 'banana' ,'orange', 'papaya'] 61 | 62 | const splicedElements = fruits.splice(1 , 4 , 'Mango' , "Kiwi") 63 | console.log(splicedElements) 64 | 65 | console.log(fruits) 66 | 67 | 68 | const messages = ['Hi' , 'Hello' , 'Hola' , 'Namaste!'] 69 | 70 | const topMessages = messages.slice(0 , 2) 71 | 72 | console.log(topMessages) 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /Class-12(Control Statements and Functions)/Objects.js: -------------------------------------------------------------------------------- 1 | // Objects - set of key and value pairs 2 | 3 | const person = { 4 | sId: 1234, 5 | name: 'Tauqeer', 6 | hobby:['Photography' , 'Football'] , 7 | age : 19, 8 | ownsACar: true 9 | } 10 | 11 | 12 | // Object 13 | 14 | 15 | // an Object for Captain America 16 | let cap = { 17 | name : "Steve Rogers", 18 | age : 117, 19 | weapons : ['Vibranium Shield' , 'Superhuman Strength'], 20 | allies : ['Thor' , 'Tony Stark' , 'Bucky Barnes'], 21 | 22 | address:{ 23 | country: "USA", 24 | stateCity : { 25 | state : "New York", 26 | city : 'brooklyn', 27 | pin : 123455 28 | } 29 | 30 | }, 31 | 32 | isAvenger : true, 33 | 34 | capSaysHi : function(){ 35 | console.log('Hi') 36 | } 37 | } 38 | 39 | 40 | // Access the object properties 41 | 42 | // dot notation 43 | console.log(cap.address.stateCity.city) 44 | 45 | // bracket Notation 46 | console.log(cap['weapons']) 47 | 48 | // update something in obj 49 | cap.isAvenger = false 50 | 51 | cap.movies = ['Civil War' , 'Endgame' , 'First Avenger'] 52 | 53 | console.log(cap) 54 | 55 | cap.capSaysHi() 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /Class-12(Control Statements and Functions)/Strings.js: -------------------------------------------------------------------------------- 1 | let str = 'Scaler School of Technology' 2 | 3 | 4 | console.log(str) 5 | 6 | console.log(str.length) //length of string 7 | const slicedStr = str.slice(0 , 6) 8 | console.log(slicedStr) 9 | 10 | 11 | // toLowerCase and toUpperCase 12 | 13 | const lowerStr = str.toLowerCase() 14 | 15 | const upperStr = str.toUpperCase() 16 | 17 | console.log(lowerStr) 18 | console.log(upperStr) 19 | 20 | 21 | // concat 22 | 23 | const str2 = 'scaler' 24 | const str3 = 'school of technology' 25 | 26 | // console.log(str2+" "+str3) 27 | 28 | console.log(str2.concat(" " , str3)) 29 | 30 | 31 | // join and split 32 | 33 | // join - Array -> String 34 | 35 | const words = ['I' , 'Love' , 'JS'] 36 | 37 | const sentence = words.join(' ') 38 | 39 | console.log(sentence) 40 | 41 | 42 | // split - String -> Array 43 | 44 | const sentence2 = 'I #love to #Code' 45 | 46 | 47 | const arr = sentence2.split('@') 48 | console.log(arr) 49 | 50 | 51 | // replace , subString - Homework 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /Class-12(Control Statements and Functions)/conditionals.js: -------------------------------------------------------------------------------- 1 | // Condional Statments 2 | 3 | // if-else 4 | // loops - for loop , while, do-While 5 | 6 | // more than or equal to 95 - A , 7 | // 85-94 -> B , 8 | // 70-84 - C , 9 | // less than 70-D 10 | 11 | let marks = 67 12 | 13 | if(marks>=95){ 14 | console.log("Student Score A") 15 | } 16 | 17 | else if(marks>=85 && marks<95){ 18 | console.log("Student Score B") 19 | } 20 | 21 | else if(marks>=70 && marks<85){ 22 | console.log("Student Score C") 23 | } 24 | else{ 25 | console.log("Student Score D") 26 | } 27 | 28 | 29 | -------------------------------------------------------------------------------- /Class-12(Control Statements and Functions)/functions.js: -------------------------------------------------------------------------------- 1 | // Function 2 | 3 | // function addTwoNumbers(a, b){ 4 | // return a+b 5 | // } 6 | 7 | // function subNumbers(a, b){ 8 | // return a-b 9 | // } 10 | 11 | // function mulTwoNums(a, b){ 12 | // if(typeof a=='number' && typeof b =='number'){ 13 | // const result = a*b 14 | // return result 15 | // } 16 | // console.log('Types are not correct') 17 | 18 | 19 | 20 | // } 21 | 22 | // function divideTwoNumbers(a, b){ 23 | // return a/b 24 | // } 25 | 26 | // const sum = addTwoNumbers('a' , 2) 27 | // const sub = subNumbers(3 , 'a') 28 | // const mul =mulTwoNums(2 ,2) 29 | // console.log(sum) 30 | // console.log(sub) 31 | 32 | // console.log(mul) 33 | 34 | // // console.log(sum+6) 35 | 36 | // // Substract, multiplication , division 37 | 38 | // // typeOf 39 | 40 | // const type = typeof(NaN) 41 | // console.log(type) 42 | 43 | // console.log(true) 44 | 45 | 46 | 47 | // functions as first Class Citizens 48 | function addTwoNumbers(a, b){ 49 | return a+b 50 | } 51 | 52 | // functions as expressions 53 | let addTwo = function(c , d){ 54 | return c+d 55 | } 56 | const sumTraditonal = addTwoNumbers(2 ,4) 57 | const sumExpression = addTwo(5 , 6) 58 | 59 | 60 | 61 | 62 | 63 | 64 | console.log('sumTraditonal -> ' , sumTraditonal) 65 | console.log('sumExpression -> ' , sumExpression) 66 | 67 | 68 | -------------------------------------------------------------------------------- /Class-12(Control Statements and Functions)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Class-12(Control Statements and Functions)/loops.js: -------------------------------------------------------------------------------- 1 | // Loops 2 | 3 | // for 4 | for(let i=0 ; i<=10 ; i++){ 5 | console.log(i) 6 | } 7 | 8 | // to print in single Line 9 | let result = '' 10 | for(let i=1 ; i<11 ; i++){ 11 | result+= i + ' ' 12 | } 13 | 14 | console.log(result) 15 | 16 | 17 | -------------------------------------------------------------------------------- /Class-14(execution Context and Hoisting)/hositing.js: -------------------------------------------------------------------------------- 1 | // ES6 , let and const 2 | 3 | // TDZ - temporal Dead Zone 4 | 5 | 6 | // Hoisting 7 | 8 | const a = 20 9 | console.log(a) 10 | 11 | 12 | 13 | // function sayHello(){ 14 | // console.log('hello') 15 | // } 16 | 17 | // function as expression 18 | 19 | var sayHello = function(){ 20 | console.log('Hello') 21 | } 22 | 23 | sayHello() // executes - function 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Class-14(execution Context and Hoisting)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Class-14(execution Context and Hoisting)/notes.md: -------------------------------------------------------------------------------- 1 | # Today's Content 2 | - Functions in JS 3 | - Functions as Expressions 4 | - Code Execution in JS (Execution Context) 5 | - Hoisting 6 | - Temporal Dead Zone 7 | 8 | 9 | # Functions 10 | The function is an abstract body and inside that body particular logic is written and that function expects some values which are known as parameters of the function. At the time of invoking the function we need to pass those values as an argument. 11 | 12 | **Example of simple function** 13 | ```javascript= 14 | // function accepting parameters 15 | function ServeBeverage(drink, quantity){ 16 | console.log('I want '+ quantity + " " + drink) 17 | } 18 | // calling function by passing arguments 19 | serveBeverage('coffee',4) // print I want 4 coffee 20 | ``` 21 | 22 | 23 | 24 | ## Ways of defining function in javascript 25 | In JavaScript, we have multiple ways of defining functions. 26 | ### Traditional way of writing function 27 | We can define functions in a way similar used in another programming language for function definition. 28 | ```javascript= 29 | 30 | function sayHi(){ 31 | console.log('mrinal says hi') 32 | } 33 | // calling function 34 | sayHi() 35 | ``` 36 | 37 | ### Function as Expressions(First class citizens) 38 | We can write functions inside the variable in JavaScript. That's why it is known as first-class citizens. 39 | **Example** 40 | ```javascript= 41 | // Function as Expressions 42 | let sayHi=function(){ 43 | console.log('mrinal says hi') 44 | } 45 | // calling function 46 | sayHi() 47 | ``` 48 | 49 | 50 | # Execution context in javascript 51 | 52 | When the JavaScript engine scans a script file, it makes an environment called the Execution Context that handles the entire transformation and execution of the code. 53 | 54 | During the context runtime, the parser parses the source code and allocates memory for the variables and functions. The source code is generated and gets executed. 55 | 56 | There are two types of execution contexts: global and function. The global execution context is created when a JavaScript script first starts to run, and it represents the global scope in JavaScript. A function execution context is created whenever a function is called, representing the function's local scope. 57 | 58 | 59 | - Now let's try to visualize this with taking in a code Example- 60 | 61 | 62 | 63 | 64 | How the javascript code gets executed. 65 | 66 | We have this code to Execute- 67 | 68 | 69 | ```javascript= 70 | var a = 2 71 | var b = 3 72 | function add(num1, num2){ 73 | var ans = num1+num2 74 | return ans; 75 | } 76 | var addition = add(4, 5) 77 | console.log(addition) // print 9 78 | add(addition, 4) 79 | let add1 = addition(a, b) 80 | let add2 = addition(5, 6) 81 | console.log(add1) // prints 5 82 | console.log(add2) // prints 11 83 | ``` 84 | 85 | Javascript code executes in two phases: 86 | 87 | 1. **Memory Allocation:** Every particular variable is assigned with undefined value initially. Initially, no value is assigned to the variable, only memory is allocated. And every function will get its whole body in this phase. 88 | 89 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/084/original/upload_85139e0f5170f5e8eece1dd1782b44b7.png?1695318758) 90 | 91 | 2. **Code Execution:** Code will get executed in this phase. Now the values of variables are assigned. When the function is called and it starts executing then another memory allocation and the code block is created For every function calling. 92 | basically another execution context will be created for the function. And execution context of the whole program is known as the global execution context, and for a function it is called function's Execution Context 93 | Variables declared inside the function are written inside the execution context of that particular function. 94 | 95 | 96 | Execution context is created when the function is called and the answer is stored in the add1 variable. 97 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/085/original/upload_1a31012a1e876a8f7c95aa73d0eef002.png?1695318823) 98 | 99 | After completing the function execution, a particular function execution context returns the value and the job of it is done 100 | 101 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/086/original/upload_d3e7d682244f9386192f25604345466b.png?1695318849) 102 | 103 | 104 | Now again execution context is created when the add() function is called again and the return value of the function is stored in add2. 105 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/087/original/upload_5d5e478c9528b7fe00cc0b799debdc76.png?1695318906) 106 | 107 | After the completion of function execution it gfain returns the value that was calculated 108 | 109 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/088/original/upload_80a8e7c9979b2c4b7e9a6129459cfeca.png?1695318933) 110 | 111 | Now the execution of the program is completed and the whole execution context is now over and the final output is returned 112 | 113 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/089/original/upload_e27ec9b99f9a4fc64569b634d07f2a30.png?1695318988) 114 | 115 | 116 | **Execution context for the below code** 117 | 118 | ```javascript= 119 | var n = 3 120 | function square(num){ 121 | var ans = num*num 122 | return ans 123 | } 124 | let square1 = square(n) 125 | ``` 126 | 127 | - Firstly global execution context will be created. 128 | 129 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/090/original/upload_4af9552ee646a0fe31bae98443b75adf.png?1695319026) 130 | 131 | - Then the value to the n will be assigned. 132 | 133 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/091/original/upload_bdeb77ccd5eed38c0a9afe636098474e.png?1695319049) 134 | 135 | - Now execution context is created for the square method as it is called. 136 | 137 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/092/original/upload_e409b43de48b1647ec498a5bb8cd358c.png?1695319076) 138 | 139 | - Variables declared inside the function are initialized by undefined values in the function execution context. 140 | 141 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/093/original/upload_4ee9ea62766996fd53d0645bd52785b3.png?1695319103) 142 | 143 | - Now the value will be assigned to the variables of the function execution context. 144 | 145 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/094/original/upload_30b10d1997acbd7260a784b6f639b4c2.png?1695319173) 146 | 147 | - After that function execution context returns value to the global execution context and the function execution context is not required further. 148 | 149 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/095/original/upload_2c00f2a7212c3e93e02fa480dcf396c1.png?1695319197) 150 | 151 | - Now the program is executed completely and global execution returns the final output 152 | 153 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/096/original/upload_fe64e69af8a31efb89e43340574b7b9d.png?1695319220) 154 | 155 | 156 | 157 | # Hoisting. 158 | 159 | ```javascript= 160 | var a = 4 161 | 162 | function printName(){ 163 | console.log('my name is mrinal') 164 | } 165 | console.log(a) 166 | printName() 167 | ``` 168 | 169 | 170 | 171 | **Output** 172 | ``` 173 | 4 174 | my name is mrinal 175 | ``` 176 | 177 | Perfectly Fine Output as you will expect of the above code 178 | 179 | Now consider this code- 180 | 181 | ```javascript= 182 | 183 | console.log(a) // trying to execute it at the top 184 | 185 | printName() // trying to execute this at the top 186 | 187 | var a = 4 188 | 189 | function printName(){ 190 | console.log('my name is mrinal') 191 | } 192 | 193 | ``` 194 | 195 | 196 | **Output** 197 | ```plaintext 198 | undefined 199 | my name is mrinal 200 | ``` 201 | 202 | Now you See the function gets Executed and prints the Expected Output but for the varibale 'a' the output is undefined 203 | 204 | 205 | 206 | **Explanation** 207 | First is the memory allocation phase of the program, and initially all the variables are initialized with undefined values before program execution. In the memory allocation phase, a = undefined and fn printName() will be created and as you know in the memory allocation phase itself the whole function body is assigned . 208 | 209 | 210 | After that program execution phase will start, in which first the value of a is printed but still in this phase before the assignment of 4 can happen to the varaiable `a` we are trying to access it so the value is still undefined thats why the output for console.log(a) which is at the top is undefined , and after the function is called, as function has the whole reference of it's body it gets executed as you would expect with it's output 211 | 212 | hoisting is a behavior of the JS language through which declarations of functions, variables. etc can be moved to the top of their scope – all before code execution 213 | 214 | Great! We Now know what Hositing is, let's see another example but this time we will create a function as an expression 215 | 216 | 217 | ```javascript= 218 | console.log(a) 219 | printName() 220 | var a = 4 221 | 222 | function printName(){ 223 | console.log('my name is mrinal') 224 | } 225 | 226 | 227 | let printAge = function(){ 228 | console.log(24) 229 | } // Function as Expression 230 | 231 | printAge() 232 | ``` 233 | 234 | **Output** 235 | ```plaintext 236 | undefined 237 | my name is mrinal 238 | 24 239 | ``` 240 | 241 | Function as expression executes as it should , now , let's take it to the top 242 | 243 | 244 | ```javascript= 245 | console.log(a) 246 | printName() 247 | printAge() 248 | var a = 4 249 | 250 | function printName(){ 251 | console.log('my name is mrinal') 252 | } 253 | let printAge = function(){ 254 | console.log(24) 255 | } 256 | 257 | ``` 258 | 259 | But now this program will give an error that printAge is not defined. We are getting this error as we are working with function as expression and printAge does not have a function during initialization. It has an undefined value during initialization as it is variable for every varaible in the memory allocation phase undefined is assigned 260 | 261 | **let** 262 | ```javascript= 263 | console.log(a) 264 | printName() 265 | let a = 4 266 | 267 | function printName(){ 268 | console.log('my name is mrinal') 269 | } 270 | let printAge = function(){ 271 | console.log(24) 272 | } 273 | printAge() 274 | ``` 275 | 276 | This program will give an error at line console.log(a) that `cannot access 'a' before initialization`. This is because let will first initialise your variable with temporal dead zone. Whenever a variable is created with the `let`, then that variable can not be accessed before initialisation means until the code execution phase is not started. Before code execution, it is in a temporal dead zone. 277 | 278 | --- 279 | title: Temporal dead zone 280 | description: 281 | duration: 300 282 | card_type: cue_card 283 | --- 284 | 285 | # Temporal dead zone(TDZ) 286 | When you declare a variable with let or const, then these variables will not be accessible before their initialization and at this moment they will be in a temporal dead zone. 287 | 288 | ||var|let|const| 289 | |:-:|:-:|:-:|:-:| 290 | |TDZ|✗|✓|✓| 291 | -------------------------------------------------------------------------------- /Class-14(execution Context and Hoisting)/script.js: -------------------------------------------------------------------------------- 1 | var a = 20 2 | var b = 30 3 | 4 | function add(num1 , num2){ 5 | var ans = num1+num2 6 | return ans 7 | } 8 | 9 | // console.log(add) 10 | 11 | var sum1 = add(a , b) 12 | var sum2 = add(4 ,5) 13 | 14 | console.log(sum1) 15 | console.log(sum2) -------------------------------------------------------------------------------- /Class-15 (functional Programming)/circle.js: -------------------------------------------------------------------------------- 1 | let myRadiusArray = [1, 2, 3, 4, 5, 6]; 2 | 3 | // Caclulate area , cirumference, diameter 4 | // write functions that calcluates these values 5 | // return a new array 6 | // you have 7-8 mins to do this 7 | 8 | function calculateCircumference(radiusArr) { 9 | let result = []; 10 | 11 | for (let i = 0; i < radiusArr.length; i++) { 12 | result.push(2 * 3.14 * radiusArr[i]); 13 | } 14 | 15 | return result; 16 | } 17 | 18 | function calculateArea(radiusArr) { 19 | let result = []; 20 | 21 | for (let i = 0; i < radiusArr.length; i++) { 22 | result.push(3.14 * radiusArr[i] * radiusArr[i]); 23 | } 24 | 25 | return result; 26 | } 27 | 28 | function calculateDiameter(radiusArr) { 29 | let result = []; 30 | 31 | for (let i = 0; i < radiusArr.length; i++) { 32 | result.push(2 * radiusArr[i]); 33 | } 34 | 35 | return result; 36 | } 37 | 38 | const circumferences = calculateCircumference(myRadiusArray); 39 | const areas = calculateArea(myRadiusArray); 40 | const diameters = calculateDiameter(myRadiusArray); 41 | console.log(circumferences); 42 | console.log(areas); 43 | console.log(diameters); 44 | 45 | console.log(myRadiusArray); 46 | -------------------------------------------------------------------------------- /Class-15 (functional Programming)/exercise.js: -------------------------------------------------------------------------------- 1 | const transactions = [1000, -500, 3000, -1000, 4000]; 2 | 3 | // Filter out the deposits 4 | // convert them to dollars and 5 | // provide the total amount in dollars 6 | 7 | const finalBalance = transactions 8 | .filter(function (amount) { 9 | return amount > 0; 10 | }) 11 | .map(function (amount) { 12 | return (amount / 89) 13 | }) 14 | .reduce(function (acc, curr) { 15 | acc = acc + curr; 16 | return acc 17 | }, 0); 18 | 19 | console.log(finalBalance.toFixed(2)); 20 | 21 | -------------------------------------------------------------------------------- /Class-15 (functional Programming)/filter.js: -------------------------------------------------------------------------------- 1 | // Filter Method - conditions 2 | 3 | // check for Even 4 | let numbers = [1, 2, 3, 4, 5, 6]; 5 | 6 | // function checkEven(arr) { 7 | // let evenArr = []; 8 | 9 | // for (let i = 0; i < numbers.length; i++) { 10 | // if (arr[i] % 2 == 0) { 11 | // evenArr.push(arr[i]); 12 | // } 13 | // } 14 | 15 | // return evenArr; 16 | // } 17 | 18 | // const evenNums = checkEven(numbers); 19 | // console.log(evenNums); 20 | 21 | 22 | 23 | // do this with filter 24 | 25 | const evenNums = numbers.filter(function(num){ 26 | return num%2==0 27 | }) 28 | 29 | console.log(evenNums) 30 | 31 | 32 | -------------------------------------------------------------------------------- /Class-15 (functional Programming)/hof.js: -------------------------------------------------------------------------------- 1 | let myRadiusArray = [1, 2, 3, 4, 5, 6]; 2 | 3 | // Caclulate area , cirumference, diameter 4 | // write functions that calcluates these values 5 | // return a new array 6 | // you have 7-8 mins to do this 7 | 8 | function diameter(radius){ 9 | return radius*2 10 | } 11 | 12 | function area(radius){ 13 | return 3.14*radius*radius 14 | } 15 | 16 | function circumference(radius){ 17 | return 2*3.14*radius 18 | } 19 | 20 | // function calcluate(radiusArr , cb){ 21 | // let result = []; 22 | 23 | // for (let i = 0; i < radiusArr.length; i++) { 24 | // result.push(cb(radiusArr[i])); 25 | // } 26 | 27 | // return result; 28 | // } 29 | 30 | 31 | // Homework 32 | 33 | const diameters = calcluate(myRadiusArray , diameter) 34 | const areas = calcluate(myRadiusArray , area) 35 | const circumferences=calcluate(myRadiusArray ,circumference) 36 | 37 | console.log(diameters) 38 | console.log(areas) 39 | console.log(circumferences) 40 | 41 | console.log(myRadiusArray) -------------------------------------------------------------------------------- /Class-15 (functional Programming)/hom.js: -------------------------------------------------------------------------------- 1 | // calulate squares and cubes of these numbers 2 | 3 | // function calcluate(nums, cb) { 4 | // let result = []; 5 | 6 | // for (let i = 0; i < nums.length; i++) { 7 | // result.push(cb(nums[i])); 8 | // } 9 | // return result; 10 | // } 11 | 12 | // const sqaures = calcluate(numbers , sqaure) 13 | // console.log(sqaures) 14 | 15 | let numbers = [1, 2, 3, 4, 5, 6]; 16 | 17 | function sqaure(num) { 18 | return num * num; 19 | } 20 | 21 | function cube(num) { 22 | return num * num * num; 23 | } 24 | 25 | // map 26 | // creates a new array 27 | // has an inbuilt loop 28 | // returns the data in new Array 29 | // This is for operations 30 | 31 | const squares = numbers.map(cube); 32 | 33 | console.log(squares); 34 | 35 | // Transcations in Dollars 36 | const transactions = [20 , 40 , 10 , 15 , 80 , -90 , -10] 37 | 38 | // convert these trancatios into INR with using map 39 | const inrAmounts = transactions.map(function(amount){ 40 | return amount*88 41 | }) 42 | 43 | console.log(inrAmounts) 44 | console.log(transactions) 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /Class-15 (functional Programming)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Class-15 (functional Programming)/pure.js: -------------------------------------------------------------------------------- 1 | // let c = 4 2 | // c++; 3 | 4 | function add (a , d){ 5 | return a+d 6 | } 7 | const sum = add(2 , 5) 8 | 9 | console.log(sum) 10 | -------------------------------------------------------------------------------- /Class-15 (functional Programming)/reduce.js: -------------------------------------------------------------------------------- 1 | // Sum of all elements in an array 2 | 3 | let numbers = [1 ,2 ,3 ,4,5 ,6] 4 | 5 | // calulate the total Sum of Elements 6 | 7 | // function calcluateSum(nums){ 8 | // let sum = 0 // accumulator 9 | // for(let i=0 ; i 4 | 5 | 6 | 7 | 8 | Lists 9 | 10 | 11 | 12 | 13 | 14 |
    15 |
  • Apple
    • 16 |
  • Orange
    • 17 |
  • Watermelon
    • 18 |
19 | 20 | 21 | 22 |
    23 |
  1. Apple
    2. 24 |
  2. Orange
    3. 25 |
  3. Watermelon
    4. 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /Class-2(List , Forms and Tables)/list1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

My Grocery List

11 | 12 |
    13 |
  • Apple
    • 14 |
  • Toothpaste
    • 15 |
  • ToothBrush
    • 16 |
  • Comb
    • 17 |
  • Shoes
    • 18 |
  • Shirts
    • 19 |
20 | 21 | 22 | 23 |

Steps to make tea

24 | 25 |
    26 |
  1. Apple
    2. 27 |
  2. Toothpaste
    3. 28 |
  3. ToothBrush
    4. 29 |
  4. Comb
    5. 30 |
  5. Shoes
    6. 31 |
  6. Shirts
    7. 32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Class-2(List , Forms and Tables)/list2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 24 | 25 |
    26 |
  1. Monday 27 |
      28 |
    1. Go to the gym
      2. 29 |
    2. Study for 3 hours
      3. 30 |
    31 |
    2. 32 |
  2. Tuesday
    3. 33 |
  3. Wednesday
    4. 34 |
  4. Thursday
    5. 35 |
  5. Friday
    6. 36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /Class-2(List , Forms and Tables)/listsAssign.md: -------------------------------------------------------------------------------- 1 | # HTML Lists Assignment 2 | 3 | --- 4 | 5 | ## **Part A – Basics** 6 | 7 | ### **1. Grocery List (Unordered List)** 8 | - Create a simple unordered list of **8 grocery items** you want to buy. 9 | - Add a heading **"My Grocery List"** above it. 10 | 11 | ### **2. Steps to Make Tea (Ordered List)** 12 | - Create an ordered list with **at least 6 steps** for making tea. 13 | - Use `
    ` with numbers by default. 14 | 15 | --- 16 | 17 | ## **Part B – Custom Styling** 18 | 19 | ### **1. Favorite Movies (Unordered List with Different Bullet Styles)** 20 | - Create an unordered list of **5 favorite movies**. 21 | - Use the `type` attribute (`circle`, `square`, `disc`) for different bullet points in **separate lists**. 22 | 23 | ### **2. Top 5 Countries to Visit (Ordered List with Roman Numerals)** 24 | - Create an ordered list with `type="I"` for **Roman numerals**. 25 | - Add a short description (**1–2 words**) next to each country. 26 | 27 | --- 28 | 29 | ## **Part C – Nested Lists** 30 | 31 | ### **1. Weekly Timetable (Nested Ordered List)** 32 | - Create an **ordered list** for 5 days (**Monday to Friday**). 33 | - Under each day, create a **nested unordered list** of activities for that day. 34 | 35 | ### **2. Restaurant Menu (Nested Unordered List)** 36 | - Main categories: **Starters**, **Main Course**, **Desserts**, **Beverages**. 37 | - Under each category, list at least **3 dishes**. 38 | 39 | --- 40 | -------------------------------------------------------------------------------- /Class-2(List , Forms and Tables)/notes.md: -------------------------------------------------------------------------------- 1 | 2 | ## List 3 | 4 | In HTML you can structure your content in a more readable and organized manner using lists. There are two types of lists such as 5 | 1. Ordered lists `
      ` and, 6 | 2. Unordered lists `
        ` 7 | 8 | ## 1. Ordered List 9 | An ordered list is used to create a list of items that have a specific sequence or order. Each item in an ordered list is typically numbered, and the numbers usually increment in a sequential manner. 10 | Each list item is defined with the `
      • ` (list item) element, this will be more clear further in this article. 11 | 12 | An ordered list can store content in two ways as well: 13 | 1. Non-alphabetically ordered 14 | 2. Alphabetically ordered 15 | 16 | #### 1.1 Ordered List 17 | In the following code you can clearly see that the output generated is not structured alphabetically but listed in an orderely fashion 18 | 19 | #### Pseudocode 20 | 21 | ```html 22 | 23 | 24 | 25 | List Examples 26 | 27 | 28 |
          29 |
        1. Banana
          2. 30 |
        2. Apple
          3. 31 |
        3. Strawberry
          4. 32 |
        33 | 34 | 35 | ``` 36 | #### Output: 37 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/117/original/upload_2e99c2e6057a7cefa9e96c95d9c27f37.png?1695110158) 38 | 39 | ### 1.2. Alphabetical Ordered List 40 | In order to structure list in alphabetical fashion we can use `type = "A"` between `
          ` tags 41 | #### Pseudocode 42 | ```html 43 | 44 | 45 | 46 | Alphabetical Ordered List 47 | 48 | 49 |

          Alphabetical Ordered List Example

          50 | 51 |
            52 |
          1. Banana
            2. 53 |
          2. Apple
            3. 54 |
          3. Strawberry
            4. 55 |
          56 | 57 | 58 | 59 | ``` 60 | **Output:** 61 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/118/original/upload_ef0ce2a0099cb2aed2158fe245251153.png?1695110223) 62 | 63 | ### 2. Unordered List 64 | Use `
            ` tags for displaying a list with the help of symbols/shapes. In this case we're considering shapes. 65 | #### Pseudocode 66 | ```html 67 | 68 | 69 | 70 | List Examples 71 | 72 | 73 |
              74 |
            • Banana
              • 75 |
            • Apple
              • 76 |
            • Strawberry
              • 77 |
            79 | 80 | ``` 81 | #### Output: 82 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/119/original/upload_c4298d24e8363ee59290b3ea888e16ca.png?1695110251) 83 | 84 | 85 | ## Tables in HTML 86 | 87 | tables are used to organize and display data in a structured format. Tables consist of rows and columns, where each cell is capable of storing data in form of text, images, links, or other HTML elements. But in-order to create tables in HTML one needs to be familiar with certain tags and attributes used such as: 88 | 1. ``: tag represents a table cell that contains data 90 | 3. ``: tag represents a table row 91 | 4. `` : tag represents a table header and is used to label columns or provide additional information about the data 92 | 5. ``: tag is used to group the header content in a table. It typically contains one or more `` elements with `` elements inside. 93 | 6. ``: tag groups the body content of the table. 94 | 7. ``: tag is used to provide a title or caption for the table. It is placed immediately after the opening `` tag. 95 | 8. **border attribute**: is used to specify the thickness of the border around the table and its cells. 96 | 97 | 98 | 99 | #### Pseudocode 100 | ```html 101 | 102 | 103 | 104 | List Examples 105 | 106 | 107 |
            108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 |
            Student's Marksheet
            StudentRoll No.Marks
            1201691198
            2201591178
            127 | 128 | 129 | ``` 130 | #### Output: 131 | 132 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/120/original/upload_051534e2f8bbaa444c5fff971dbba317.png?1695110359) 133 | 134 | ## HTML Forms 135 | 136 | Just like any other forms are used to collect information, in context of HTML it collects user input on a web page. They allow users to enter data, make selections, and submit that information to a server for processing. HTML forms are created using a combination of form-related tags and input elements such as 137 | 1. `
            `: tag defines the beginning of a form and contains the elements that make up the form, such as text fields, checkboxes, and buttons. 138 | 2. ``: The `` tag is used to create various types of form input fields. The type attribute specifies the type of input field to be displayed. Common type values include: 139 | * **text:** Creates a single-line text input. 140 | * **password:** Creates a password input field (text is masked for security). 141 | * **checkbox:** Creates a checkbox for binary (true/false) choices. 142 | * **radio:** Creates a radio button for selecting one option from a group. 143 | * **submit:** Creates a submit button to send the form data. 144 | * **button:** Creates a generic button. 145 | * **file:** Allows users to upload files. 146 | * **date, email, number, and more:** Various input types for specific data formats. 147 | 3. `