Aliens School
Cinematic Knowledge Experience
0%
Aliens School
Now Playing
Aliens School ยท HIEN
โŒจ๏ธ Keyboard Shortcuts
โ†’Next slide โ†Previous slide SpacePlay / Pause MNarration on/off FFullscreen ?Show/hide this
Press any key to close
Skill Topic ยท Cinematic

๐Ÿจ๐Ÿ”‘ SASS Map Functions โ€” Hotel Room Key Card System

Jaise hotel me har room ka ek key card hota hai โ€” room number (key) dalo aur guest ka naam (value)โ€ฆ

Overview
๐ŸŒŸ

๐Ÿจ๐Ÿ”‘ SASS Map Functions โ€” Hotel Room Key Card System โ€” Quick Facts

๐Ÿ“Œ

Function: Kaam

๐ŸŽฏ

`map-get($map, $key)`: Guest dhundho

โšก

`map-set($map, $key, $val)`: Room assign karo

๐Ÿ”‘

`map-has-key($map, $key)`: Room exist?

Topic 1
๐Ÿ“ฅ ๐Ÿ“ฅ ๐Ÿง  ๐Ÿ”ฌ ๐Ÿ’ก ๐ŸŽฏ

๐Ÿ“Œ Pehle Samjho: Hotel Analogy ๐Ÿจ

๐Ÿ“š `mermaid graph TD A["๐Ÿจ Hotel Map<br>$colors: (primary: blue,<br>success:โ€ฆ
Topic 2
๐Ÿ’ก ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ“Œ Maps Kya Hain? โ€” Hotel Register โญ

๐Ÿ’ก `scss // โ•โ•โ• COLOR MAP โ€” Color coded rooms โ•โ•โ• $colors: ( primary: #3B82F6, secondary:โ€ฆ
Topic 3
๐Ÿ”’

๐Ÿ“Œ All Map Functions โ€” Reception Toolkit โญ

๐ŸŽฏ | Function | Kaam | Example | |----------|------|---------| | map-get($map, $key) | Guestโ€ฆ
Topic 4
โญ

๐Ÿ“Œ map-get() โ€” Room Se Guest Nikalo โญโญ

โญ ๐Ÿจ Analogy: "Room #primary me konsa color hai?" โ†’ map-get karke blue niklo! `scss $colors:โ€ฆ
Topic 5
๐Ÿ”‘

๐Ÿ“Œ map-has-key() โ€” Room Exist? โญ

๐Ÿ”‘ ๐Ÿจ Analogy: "Kya room #md exist karta hai?" โ†’ check karke proceed! `scss $breakpoints:โ€ฆ
Topic 6
โœจ ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ“Œ map-keys() / map-values() โ€” Register Lists โญ

โœจ ๐Ÿจ Analogy: map-keys = saare room numbers ki list. map-values = saare guests ki list!โ€ฆ
Topic 7
๐Ÿ”’

๐Ÿ“Œ map-merge() โ€” Bookings Combine โญโญ

๐ŸŒŸ ๐Ÿจ Analogy: Do hotels ki bookings merge karo โ€” duplicate room me naya guest override karโ€ฆ
Topic 8
๐Ÿš€

๐Ÿ“Œ map-remove() โ€” Rooms Hatao โญ

๐Ÿš€ `scss $colors: (primary: #3B82F6, secondary: #8B5CF6, success: #10B981, danger: #EF4444,โ€ฆ
Topic 9
๐Ÿ“ฅ ๐Ÿ“ฅ ๐Ÿง  ๐Ÿ”ฌ ๐Ÿ’ก ๐ŸŽฏ

๐Ÿ“Œ @each with Maps โ€” Room Inspection โญโญ

๐Ÿ“š `scss // โ•โ•โ• BUTTON GENERATOR โ•โ•โ• $colors: ( primary: #3B82F6, secondary: #8B5CF6,โ€ฆ
Topic 10
๐Ÿ’ก ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ“Œ Design System โ€” Full Hotel Chain โญโญ

๐Ÿ’ก `scss $design: ( colors: ( primary: #3B82F6, secondary: #8B5CF6, success: #10B981,โ€ฆ
Topic 11
๐Ÿ”’

๐Ÿ“Œ Maps โ†’ CSS Variables โญโญ

๐ŸŽฏ `scss $colors: (primary: #3B82F6, secondary: #8B5CF6, success: #10B981, danger: #EF4444);โ€ฆ
Topic 12
โญ

๐Ÿ“Œ Common Mistakes โ€” Reception Errors! ๐Ÿšจ

โญ | # | โŒ Galat (Error) | โœ… Sahi (Correct) | ๐Ÿ’ก Kyun? |โ€ฆ
Topic 13
๐Ÿ“ฅ ๐Ÿ“ฅ ๐Ÿง  ๐Ÿ”ฌ ๐Ÿ’ก ๐ŸŽฏ

๐ŸŽฏ Practice Exercises โ€” Hotel Workshop! ๐Ÿ‹๏ธ

๐Ÿ”‘ Exercise 1: Basic Map (Beginner) ๐ŸŸข `scss // โœ… Solution $colors: (primary: #3B82F6,โ€ฆ
Topic 14
โœจ ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ“‹ Summary Table

โœจ | Function | Kaam | Hotel Analogy | |----------|------|---------------| | map-get() |โ€ฆ
Topic 15
๐Ÿ”’

๐Ÿ”— Navigation

๐ŸŒŸ โฌ…๏ธ Previous: SASS List Functions | โžก๏ธ Next: SASS Selector Functions
Diagram
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

Visual Flow

๐Ÿ“Š Diagram visualization โ€” details in narration
Quick Quiz
๐Ÿง  QUIZ TIME

Quiz โ€” Question 1

๐Ÿจ๐Ÿ”‘ SASS Map Functions โ€” Hotel Room Key Card System ka sabse sahi definition kya hai?

Quick Quiz
๐Ÿง  QUIZ TIME

Quiz โ€” Question 2

๐Ÿจ๐Ÿ”‘ SASS Map Functions โ€” Hotel Room Key Card System ka 'map-get($map, $key)' kya hai?

Complete! ๐ŸŽ‰
COMPLETE

๐Ÿจ๐Ÿ”‘ SASS Map Functions โ€” Hotel Room Key Card System Complete!

Aliens School ยท HIEN ยท Cinematic Knowledge

โœ…

๐Ÿจ๐Ÿ”‘ SASS Map Functions โ€” Hotel Room Key Card System Complete

1/21
0:00
REC 00:00ESC=Cancel
Aliens School
3
Recording shuru hone wali hai...
โœ…
Recording Complete
Video process ho rahi hai...
Live Class
Slide 1 / 7
Timer
00:00
๐Ÿ“ Speaker Notes
โ€”
โญ๏ธ Up Next
โ€”
โ€”
๐Ÿ—‚๏ธ All Slides