🚀 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
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.
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.
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.
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.
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.
