Skip to main content

 Started to learn zustand got problem in create function of zustand. Problem was weaker concept of callback and nested function . i think i am confident in these topics now.

Comments

Post a Comment

Popular posts from this blog

Ternary operator and its working on mechanism on array

  If condition is true → use valueIfTrue If condition is false → use valueIfFalse ✅ Your amenity example Your code: {amenity === 'wifi' ? 'WIFI' : amenity} Breakdown: ✔ Condition: amenity === 'wifi' This checks: “Is the current amenity equal to 'wifi'?” ✔ If condition is TRUE → show: 'WIFI' ✔ If condition is FALSE → show: amenity 🎯 Example with your amenitiesList const amenitiesList = [ 'wifi' , 'parking' , 'kitchen' ]; Looping through each item: 🔹 1. amenity = "wifi" Check condition: 'wifi' === 'wifi' → TRUE So ternary returns: 'WIFI' 👉 Display: WIFI 🔹 2. amenity = "parking" Check condition: 'parking' === 'wifi' → FALSE So ternary returns: amenity // which is "parking" 👉 Display: parking 🔹 3. amenity = "kitchen" Check condition: 'kitchen' === 'wifi' → FALS...
Post a Comment
Read more

Tailwind css and its corresponding vanilla css

Tailwind Class CSS Property Vanilla CSS Equivalent Description bg-white background-color background-color: #ffffff; Sets background color to white. shadow-sm box-shadow box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); Adds a small shadow under the element. border-b border-bottom-width border-bottom-width: 1px; Adds a bottom border. Default color: #e5e7eb (gray-200). max-w-7xl max-width max-width: 80rem; /* 1280px */ Restricts container width for large screens. mx-auto margin-left , margin-right margin-left: auto; margin-right: auto; Centers the container horizontally. px-4 padding-left , padding-right padding-left: 1rem; padding-right: 1rem; Adds horizontal padding (16px). sm:px-6 Responsive padding (small screens ≥640px) @media (min-width: 640px) { padding-left: 1.5rem; padding-right: 1.5rem; } Increases padding on small screens. lg:px-8 Responsive padding (large screens ≥1024px) @media (min-width: 1024px) { padding-left: 2rem; paddi...
Post a Comment
Read more

Role of box-sizing and its attributes in css

  🧱 Default behavior (content-box) By default, browsers use: box-sizing : content-box; This means: Total element width = content width + padding + border So if you have: .container { width : 300px ; padding : 20px ; border : 5px solid black; } Then the total visible width becomes: 300 (content) + 40 ( left + right padding) + 10 ( left + right border) = 350 px ⚠️ The box becomes wider than 300px , which can cause overflow or layout shifts. ✅ With box-sizing: border-box When you use: box-sizing : border-box; the formula changes to: Total element width = width (including padding + border) So the same CSS now behaves like this: width = 300 px (total) → content area = 300 - ( 40 padding + 10 border) = 250 px ✅ The box stays exactly 300px wide — no overflow. 🎯 Why it’s useful Prevents unexpected overflow due to padding/borders Makes responsive layouts easier Keeps your box sizes consistent You can trust width to be the actu...
Post a Comment
Read more