Day 4/366

🚀 Today's Learning:

🌟 DSA

• Two Sum - Leetcode 1
• Reverse Linked List - Leetcode 206

🌟 Dev

• Difference between inline and block elements.
• What is difference between display:none and display:hidden.
• Flex and Grid which layout approach should you use and when to use.
• Media Queries.

🔍 Some Key Highlights:

DSA

Two Sum - Leetcode 1

Brute force → Iterate through each element → for each element check for the compliment (target - nums[i]) in rest of the elements → if found push both the current element’s index and the complement’s index in ans array. (T.C. O(n^2) | S.C. O(1))

Optimized Approach → take an unordered map and fill it with element and index key-value pairs. Iterate through the nums array → for each element find the compliment (target - nums[i]) in map, which takes constant time to search → If compliment found push both current element index and compliment index in ans array (Note: Also while finding compliment ensure that compliment’s index should not be same as current element’s index. (T.C. O(n) | S.C. O(n))

Reverse Linked List - Leetcode 206

Approach 1 (Brute Force)

Take an extra auxiliary array → copy all linked list data in this array → reverse travel the array and replace linked list data. (Time: O(n) | Space: O(n) - coz of extra array)

Approach 2 (Optimized for space - In place solution - Reversing links)

Take 3 pointers p, q and r → these are sliding pointers (order: r, q, p) → at each pass slide all three to one step right → use q to reverse the link → do this untill p reaches null → At this time q would be at last node → make head point this last node.
(Time: O(n) | Space: O(1) )

DEV

1. Inline vs. Block Elements:
   • Block elements are like big building blocks, stacking on top of each other and taking up the full width.
   • Inline elements are smaller and fit within a line of text, like links or emphasis.
2. Background Image with Opacity and Text Overlay:
   • Use CSS to set a background image on a container and add text on top of it.
   • Apply opacity to the background image without affecting the text by using RGBA colors or the opacity property.
3. Display:none vs. Display:hidden:
   • display:none completely removes an element from the layout.
   • display:hidden hides an element from view but still occupies space in the layout.
4. Flexbox vs. CSS Grid Layout:
   • Flexbox is great for simpler, one-dimensional layouts like navigation menus.
   • CSS Grid is perfect for more complex, two-dimensional layouts with rows and columns.
5. Media Queries:
   • Media queries allow you to adapt your website's layout and styles based on different devices and screen sizes.
   • They help ensure your website looks fantastic across various devices, from laptops to smartphones.