Skip to content
This repository was archived by the owner on Sep 10, 2025. It is now read-only.

Commit 5ab1282

Browse files
openrocketsofficialopenrocketsofficial
committed
updated
1 parent edcd837 commit 5ab1282

4 files changed

Lines changed: 194 additions & 51 deletions

File tree

‎body.txt‎

Lines changed: 82 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,107 @@
11

2-
## Description of the Error
2+
This challenge focuses on styling nested lists to create an accordion-like effect using only CSS. Each top-level list item will act as an accordion header, revealing or hiding its sub-levels when clicked. We'll achieve this without JavaScript, relying solely on CSS's `:target` pseudo-class and sibling selectors. We'll aim for a clean and modern look. This example utilizes standard CSS but could easily be adapted to Tailwind CSS by replacing the specific CSS properties with their Tailwind equivalents (e.g., `background-color` with `bg-gray-200`).
33

4-
A common performance issue arises when using the `$lookup` stage in MongoDB aggregation pipelines, especially with large collections. `$lookup` performs joins, and if not optimized, it can lead to significant slowdowns, even causing timeouts. The primary cause is often the lack of an appropriate index on the joined field in the target collection. This results in MongoDB performing a collection scan for every document in the input collection, drastically increasing the processing time. The problem manifests as extremely long query execution times or outright failures due to exceeding the `maxTimeMS` limit.
4+
**Description of the Styling:**
55

6-
## Fixing Step-by-Step Code
6+
The styling includes:
77

8-
Let's assume we have two collections: `orders` and `customers`. We want to retrieve orders along with the corresponding customer details. The naive approach, lacking indexing, is shown below:
8+
* **Accordion Headers:** Each top-level list item (`<li>`) will have a distinct background color and padding. On hover, the background will slightly darken. A plus (+) or minus (-) symbol will indicate the open/closed state.
9+
* **Accordion Content:** Nested lists (`<ul>`) will initially be hidden. When the corresponding header is clicked, the nested list will become visible.
10+
* **Visual Hierarchy:** Proper indentation and styling will ensure a clear visual hierarchy between levels of the list.
911

10-
**Inefficient Aggregation Pipeline:**
12+
**Full Code (CSS):**
1113

12-
```javascript
13-
db.orders.aggregate([
14-
{
15-
$lookup: {
16-
from: "customers",
17-
localField: "customer_id",
18-
foreignField: "_id",
19-
as: "customer"
20-
}
21-
}
22-
])
23-
```
14+
```css
15+
ul {
16+
list-style: none;
17+
padding: 0;
18+
margin-bottom: 1rem;
19+
}
2420

25-
**Fixing the Performance Issue:**
21+
li {
22+
cursor: pointer;
23+
padding: 0.8rem 1.2rem;
24+
border-bottom: 1px solid #ddd;
25+
transition: background-color 0.3s ease; /* smooth transition for hover effect */
26+
}
2627

27-
1. **Create an index on the `_id` field of the `customers` collection:** This is crucial because `$lookup` uses this field for the join.
28+
li:hover {
29+
background-color: #f0f0f0;
30+
}
2831

29-
```javascript
30-
db.customers.createIndex( { _id: 1 } )
31-
```
32+
li > ul {
33+
display: none;
34+
margin-left: 20px;
35+
}
3236

33-
2. **Create an index on the `customer_id` field of the `orders` collection:** This speeds up the lookup by allowing MongoDB to quickly locate matching customer IDs.
37+
li > ul:target { /* This is the key - show content when the UL is the target */
38+
display: block;
39+
}
3440

35-
```javascript
36-
db.orders.createIndex( { customer_id: 1 } )
37-
```
41+
li::before {
42+
content: "+ "; /* Default plus symbol */
43+
margin-right: 0.5rem;
44+
}
3845

39-
3. **(Optional but Recommended) Consider a compound index:** If you frequently filter on other fields in your `orders` collection (e.g., order date), a compound index can further optimize performance.
46+
li[aria-expanded="true"]::before {
47+
content: "- "; /* Change to minus when expanded */
48+
}
4049

41-
```javascript
42-
db.orders.createIndex( { customer_id: 1, order_date: 1 } )
43-
```
4450

51+
li:has(>ul):focus-within, li:has(>ul:target) { /* Keep header visible on open */
52+
background-color: #f0f0f0;
53+
}
4554

46-
**Efficient Aggregation Pipeline (After Indexing):**
55+
a{
56+
text-decoration: none;
57+
color: inherit;
58+
}
4759

48-
The aggregation pipeline itself remains the same; the improvement comes from the added indexes:
60+
```
4961

50-
```javascript
51-
db.orders.aggregate([
52-
{
53-
$lookup: {
54-
from: "customers",
55-
localField: "customer_id",
56-
foreignField: "_id",
57-
as: "customer"
58-
}
59-
}
60-
])
62+
**Full Code (HTML):**
63+
64+
```html
65+
<ul>
66+
<li><a href="#sublist1">Item 1</a>
67+
<ul id="sublist1">
68+
<li>Subitem 1.1</li>
69+
<li>Subitem 1.2</li>
70+
</ul>
71+
</li>
72+
<li><a href="#sublist2">Item 2</a>
73+
<ul id="sublist2">
74+
<li>Subitem 2.1</li>
75+
<li>Subitem 2.2</li>
76+
<li>Subitem 2.3</li>
77+
</ul>
78+
</li>
79+
<li><a href="#sublist3">Item 3</a>
80+
<ul id="sublist3">
81+
<li>Subitem 3.1</li>
82+
<li>Subitem 3.2 <a href="#sublist3-1">Subitem 3.2.1</a>
83+
<ul id="sublist3-1">
84+
<li>Sub-Subitem 3.2.1.1</li>
85+
</ul>
86+
</li>
87+
</ul>
88+
</li>
89+
</ul>
6190
```
6291

63-
## Explanation
92+
**Explanation:**
93+
94+
* The core logic relies on the `:target` pseudo-class. Each nested `<ul>` has a unique ID, and the corresponding `<li>`'s `<a>` tag's `href` attribute points to this ID. When the `<li>` is clicked, the browser navigates to the ID, revealing the nested list. The `display: none;` and `display: block;` control visibility.
95+
* The `::before` pseudo-element adds the plus/minus symbol, dynamically changing based on whether the list is expanded. This is controlled by setting the `aria-expanded` attribute dynamically in JavaScript (not shown here, as we are focusing on CSS solution). A JavaScript improvement would smoothly handle the opening/closing and update the `aria-expanded` accordingly.
96+
* The `:has` and `focus-within` are included to manage cases of nested lists.
6497

65-
The slow performance of `$lookup` without proper indexes is due to the nested loop join algorithm implicitly used by MongoDB. Without an index on the `_id` field in the `customers` collection and the `customer_id` field in the `orders` collection, MongoDB has to scan the entire `customers` collection for every single order in the `orders` collection. This results in O(n*m) complexity where 'n' is the number of orders and 'm' is the number of customers, becoming exponentially slower as your data grows. The indexes transform this to a much more efficient O(n log m) or even O(n) complexity depending on the selectivity of the query and index usage. Compound indexes can further optimize query performance when multiple filter conditions are involved.
6698

67-
## External References
99+
**Resources to Learn More:**
68100

69-
* [MongoDB Aggregation Framework Documentation](https://www.mongodb.com/docs/manual/aggregation/)
70-
* [MongoDB Indexing Documentation](https://www.mongodb.com/docs/manual/indexes/)
71-
* [Understanding `$lookup` Performance](https://www.mongodb.com/community/forums/t/slow-lookup-query/136598) *(Search for similar forum threads on MongoDB community for specific scenarios)*
101+
* **CSS Selectors:** MDN Web Docs: [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
102+
* **CSS Pseudo-classes:** MDN Web Docs: [https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
103+
* **CSS Transitions:** MDN Web Docs: [https://developer.mozilla.org/en-US/docs/Web/CSS/transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
104+
* **Understanding ARIA Attributes:** [https://www.w3.org/WAI/intro/aria](https://www.w3.org/WAI/intro/aria)
72105

73106

74107
Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.

‎errors/javascript/css-challenge-multi-level-nested-lists-with-stylish-accordions/README.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# 🐞 CSS Challenge: Multi-level Nested Lists with Stylish Accordions
2+
3+
4+
This challenge focuses on styling nested lists to create an accordion-like effect using only CSS. Each top-level list item will act as an accordion header, revealing or hiding its sub-levels when clicked. We'll achieve this without JavaScript, relying solely on CSS's `:target` pseudo-class and sibling selectors. We'll aim for a clean and modern look. This example utilizes standard CSS but could easily be adapted to Tailwind CSS by replacing the specific CSS properties with their Tailwind equivalents (e.g., `background-color` with `bg-gray-200`).
5+
6+
**Description of the Styling:**
7+
8+
The styling includes:
9+
10+
* **Accordion Headers:** Each top-level list item (`<li>`) will have a distinct background color and padding. On hover, the background will slightly darken. A plus (+) or minus (-) symbol will indicate the open/closed state.
11+
* **Accordion Content:** Nested lists (`<ul>`) will initially be hidden. When the corresponding header is clicked, the nested list will become visible.
12+
* **Visual Hierarchy:** Proper indentation and styling will ensure a clear visual hierarchy between levels of the list.
13+
14+
**Full Code (CSS):**
15+
16+
```css
17+
ul {
18+
list-style: none;
19+
padding: 0;
20+
margin-bottom: 1rem;
21+
}
22+
23+
li {
24+
cursor: pointer;
25+
padding: 0.8rem 1.2rem;
26+
border-bottom: 1px solid #ddd;
27+
transition: background-color 0.3s ease; /* smooth transition for hover effect */
28+
}
29+
30+
li:hover {
31+
background-color: #f0f0f0;
32+
}
33+
34+
li > ul {
35+
display: none;
36+
margin-left: 20px;
37+
}
38+
39+
li > ul:target { /* This is the key - show content when the UL is the target */
40+
display: block;
41+
}
42+
43+
li::before {
44+
content: "+ "; /* Default plus symbol */
45+
margin-right: 0.5rem;
46+
}
47+
48+
li[aria-expanded="true"]::before {
49+
content: "- "; /* Change to minus when expanded */
50+
}
51+
52+
53+
li:has(>ul):focus-within, li:has(>ul:target) { /* Keep header visible on open */
54+
background-color: #f0f0f0;
55+
}
56+
57+
a{
58+
text-decoration: none;
59+
color: inherit;
60+
}
61+
62+
```
63+
64+
**Full Code (HTML):**
65+
66+
```html
67+
<ul>
68+
<li><a href="#sublist1">Item 1</a>
69+
<ul id="sublist1">
70+
<li>Subitem 1.1</li>
71+
<li>Subitem 1.2</li>
72+
</ul>
73+
</li>
74+
<li><a href="#sublist2">Item 2</a>
75+
<ul id="sublist2">
76+
<li>Subitem 2.1</li>
77+
<li>Subitem 2.2</li>
78+
<li>Subitem 2.3</li>
79+
</ul>
80+
</li>
81+
<li><a href="#sublist3">Item 3</a>
82+
<ul id="sublist3">
83+
<li>Subitem 3.1</li>
84+
<li>Subitem 3.2 <a href="#sublist3-1">Subitem 3.2.1</a>
85+
<ul id="sublist3-1">
86+
<li>Sub-Subitem 3.2.1.1</li>
87+
</ul>
88+
</li>
89+
</ul>
90+
</li>
91+
</ul>
92+
```
93+
94+
**Explanation:**
95+
96+
* The core logic relies on the `:target` pseudo-class. Each nested `<ul>` has a unique ID, and the corresponding `<li>`'s `<a>` tag's `href` attribute points to this ID. When the `<li>` is clicked, the browser navigates to the ID, revealing the nested list. The `display: none;` and `display: block;` control visibility.
97+
* The `::before` pseudo-element adds the plus/minus symbol, dynamically changing based on whether the list is expanded. This is controlled by setting the `aria-expanded` attribute dynamically in JavaScript (not shown here, as we are focusing on CSS solution). A JavaScript improvement would smoothly handle the opening/closing and update the `aria-expanded` accordingly.
98+
* The `:has` and `focus-within` are included to manage cases of nested lists.
99+
100+
101+
**Resources to Learn More:**
102+
103+
* **CSS Selectors:** MDN Web Docs: [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
104+
* **CSS Pseudo-classes:** MDN Web Docs: [https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
105+
* **CSS Transitions:** MDN Web Docs: [https://developer.mozilla.org/en-US/docs/Web/CSS/transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
106+
* **Understanding ARIA Attributes:** [https://www.w3.org/WAI/intro/aria](https://www.w3.org/WAI/intro/aria)
107+
108+
109+
Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.
110+

‎latest-issue.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
[{"body":"\n## Description of the Error\n\nA common performance issue arises when using the `$lookup` stage in MongoDB aggregation pipelines, especially with large collections. `$lookup` performs joins, and if not optimized, it can lead to significant slowdowns, even causing timeouts. The primary cause is often the lack of an appropriate index on the joined field in the target collection. This results in MongoDB performing a collection scan for every document in the input collection, drastically increasing the processing time. The problem manifests as extremely long query execution times or outright failures due to exceeding the `maxTimeMS` limit.\n\n## Fixing Step-by-Step Code\n\nLet's assume we have two collections: `orders` and `customers`. We want to retrieve orders along with the corresponding customer details. The naive approach, lacking indexing, is shown below:\n\n**Inefficient Aggregation Pipeline:**\n\n```javascript\ndb.orders.aggregate([\n {\n $lookup: {\n from: \"customers\",\n localField: \"customer_id\",\n foreignField: \"_id\",\n as: \"customer\"\n }\n }\n])\n```\n\n**Fixing the Performance Issue:**\n\n1. **Create an index on the `_id` field of the `customers` collection:** This is crucial because `$lookup` uses this field for the join.\n\n```javascript\ndb.customers.createIndex( { _id: 1 } )\n```\n\n2. **Create an index on the `customer_id` field of the `orders` collection:** This speeds up the lookup by allowing MongoDB to quickly locate matching customer IDs.\n\n```javascript\ndb.orders.createIndex( { customer_id: 1 } )\n```\n\n3. **(Optional but Recommended) Consider a compound index:** If you frequently filter on other fields in your `orders` collection (e.g., order date), a compound index can further optimize performance.\n\n```javascript\ndb.orders.createIndex( { customer_id: 1, order_date: 1 } )\n```\n\n\n**Efficient Aggregation Pipeline (After Indexing):**\n\nThe aggregation pipeline itself remains the same; the improvement comes from the added indexes:\n\n```javascript\ndb.orders.aggregate([\n {\n $lookup: {\n from: \"customers\",\n localField: \"customer_id\",\n foreignField: \"_id\",\n as: \"customer\"\n }\n }\n])\n```\n\n## Explanation\n\nThe slow performance of `$lookup` without proper indexes is due to the nested loop join algorithm implicitly used by MongoDB. Without an index on the `_id` field in the `customers` collection and the `customer_id` field in the `orders` collection, MongoDB has to scan the entire `customers` collection for every single order in the `orders` collection. This results in O(n*m) complexity where 'n' is the number of orders and 'm' is the number of customers, becoming exponentially slower as your data grows. The indexes transform this to a much more efficient O(n log m) or even O(n) complexity depending on the selectivity of the query and index usage. Compound indexes can further optimize query performance when multiple filter conditions are involved.\n\n## External References\n\n* [MongoDB Aggregation Framework Documentation](https://www.mongodb.com/docs/manual/aggregation/)\n* [MongoDB Indexing Documentation](https://www.mongodb.com/docs/manual/indexes/)\n* [Understanding `$lookup` Performance](https://www.mongodb.com/community/forums/t/slow-lookup-query/136598) *(Search for similar forum threads on MongoDB community for specific scenarios)*\n\n\nCopyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.\n","number":2056,"title":"Overcoming MongoDB's `$lookup` Performance Bottlenecks in Aggregation Pipelines"}]
1+
[{"body":"\nThis challenge focuses on styling nested lists to create an accordion-like effect using only CSS. Each top-level list item will act as an accordion header, revealing or hiding its sub-levels when clicked. We'll achieve this without JavaScript, relying solely on CSS's `:target` pseudo-class and sibling selectors. We'll aim for a clean and modern look. This example utilizes standard CSS but could easily be adapted to Tailwind CSS by replacing the specific CSS properties with their Tailwind equivalents (e.g., `background-color` with `bg-gray-200`).\n\n**Description of the Styling:**\n\nThe styling includes:\n\n* **Accordion Headers:** Each top-level list item (`<li>`) will have a distinct background color and padding. On hover, the background will slightly darken. A plus (+) or minus (-) symbol will indicate the open/closed state.\n* **Accordion Content:** Nested lists (`<ul>`) will initially be hidden. When the corresponding header is clicked, the nested list will become visible.\n* **Visual Hierarchy:** Proper indentation and styling will ensure a clear visual hierarchy between levels of the list.\n\n**Full Code (CSS):**\n\n```css\nul {\n list-style: none;\n padding: 0;\n margin-bottom: 1rem;\n}\n\nli {\n cursor: pointer;\n padding: 0.8rem 1.2rem;\n border-bottom: 1px solid #ddd;\n transition: background-color 0.3s ease; /* smooth transition for hover effect */\n}\n\nli:hover {\n background-color: #f0f0f0;\n}\n\nli > ul {\n display: none;\n margin-left: 20px;\n}\n\nli > ul:target { /* This is the key - show content when the UL is the target */\n display: block;\n}\n\nli::before {\n content: \"+ \"; /* Default plus symbol */\n margin-right: 0.5rem;\n}\n\nli[aria-expanded=\"true\"]::before {\n content: \"- \"; /* Change to minus when expanded */\n}\n\n\nli:has(>ul):focus-within, li:has(>ul:target) { /* Keep header visible on open */\n background-color: #f0f0f0;\n}\n\na{\n text-decoration: none;\n color: inherit;\n}\n\n```\n\n**Full Code (HTML):**\n\n```html\n<ul>\n <li><a href=\"#sublist1\">Item 1</a>\n <ul id=\"sublist1\">\n <li>Subitem 1.1</li>\n <li>Subitem 1.2</li>\n </ul>\n </li>\n <li><a href=\"#sublist2\">Item 2</a>\n <ul id=\"sublist2\">\n <li>Subitem 2.1</li>\n <li>Subitem 2.2</li>\n <li>Subitem 2.3</li>\n </ul>\n </li>\n <li><a href=\"#sublist3\">Item 3</a>\n <ul id=\"sublist3\">\n <li>Subitem 3.1</li>\n <li>Subitem 3.2 <a href=\"#sublist3-1\">Subitem 3.2.1</a>\n <ul id=\"sublist3-1\">\n <li>Sub-Subitem 3.2.1.1</li>\n </ul>\n </li>\n </ul>\n </li>\n</ul>\n```\n\n**Explanation:**\n\n* The core logic relies on the `:target` pseudo-class. Each nested `<ul>` has a unique ID, and the corresponding `<li>`'s `<a>` tag's `href` attribute points to this ID. When the `<li>` is clicked, the browser navigates to the ID, revealing the nested list. The `display: none;` and `display: block;` control visibility.\n* The `::before` pseudo-element adds the plus/minus symbol, dynamically changing based on whether the list is expanded. This is controlled by setting the `aria-expanded` attribute dynamically in JavaScript (not shown here, as we are focusing on CSS solution). A JavaScript improvement would smoothly handle the opening/closing and update the `aria-expanded` accordingly.\n* The `:has` and `focus-within` are included to manage cases of nested lists.\n\n\n**Resources to Learn More:**\n\n* **CSS Selectors:** MDN Web Docs: [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)\n* **CSS Pseudo-classes:** MDN Web Docs: [https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)\n* **CSS Transitions:** MDN Web Docs: [https://developer.mozilla.org/en-US/docs/Web/CSS/transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)\n* **Understanding ARIA Attributes:** [https://www.w3.org/WAI/intro/aria](https://www.w3.org/WAI/intro/aria)\n\n\nCopyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.\n","number":2057,"title":"CSS Challenge: Multi-level Nested Lists with Stylish Accordions"}]

‎title.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Overcoming MongoDB's `$lookup` Performance Bottlenecks in Aggregation Pipelines
1+
CSS Challenge: Multi-level Nested Lists with Stylish Accordions

0 commit comments

Comments
 (0)